Basit ama kullanışlı...Internette biraz aradım yoktu böyle birşey paylaşan , wordpress dosya yapısına hakim olmayan insanlar için widget hazırlamak zor oluyor gerçekten , bu kodları Custom HTML ve Add CSS kısımlarına eklemeniz yeterli
HTML:
<div class="widget_contact_info">
<h5>EN:Title | TR:Başlık </h5>
<p>EN:Subtitle | TR: Altbaşlık </p>
<ul>
<li class="address"><i id="adres" class="fas fa-map-marker-alt fa-lg" aria-hidden="true"></i><div class="info-wrap"><span class="contact-title">Adres:</span><span class="contact-text"><a class="widget-link" href="EN:Location Link by Google Maps | TR:Google Haritalardan lokasyon linki "target="_blank">EN:Address Info| TR:Adres Bilgisi</a></span></div></li>
<li class="phone"><i id="phone" class="fa fa-phone fa-lg" aria-hidden="true"></i><div class="info-wrap"><span class="contact-title">Telefon:</span><span class="contact-text"><a class="widget-link" href="tel:EN:Phone | TR:Telefon">EN:Phone | TR:Telefon </a></span></div></li>
<li class="mail"><i id="mail" class="far fa-envelope fa-lg" aria-hidden="true"></i><div class="info-wrap"><span class="contact-title">Mail:</span><span class="contact-text"><a class="widget-link" href="email:[email protected]">[email protected]</a></span></div></li>
</ul>
</div>
CSS:
:root{
--widget-primary-color: #e9e9e9;
--widget-secondary-color:#4c668d;
--widget-title-color:#c2d4f8;
}
.widget_contact_info h5{
color: var(--widget-title-color);
text-transform: uppercase;
}
.widget_contact_info .contact-title{
font-weight: bold;
}
.widget_contact_info .contact-text a{
color: var(--widget-primary-color);
}
.widget_contact_info ul .address #adres{
border:1px solid var(--widget-primary-color);
margin: 10px;
padding: 10px;
border-radius: 20px;
display: inline;
}
.widget_contact_info ul .phone #phone{
border:1px solid var(--widget-primary-color);
margin: 10px;
padding: 10px;
border-radius: 20px;
display: inline;
}
.widget_contact_info ul .mail #mail{
border:1px solid var(--widget-primary-color);
margin: 10px;
padding: 10px;
border-radius: 20px;
display: inline;
}
.widget_contact_info .address{
display:flex;
align-items: center;
}
.widget_contact_info .phone{
display:flex;
align-items: center;
}
.widget_contact_info .mail{
display:flex;
align-items: center;
}
.widget_contact_info ul .address #adres:hover{
border: 2px solid var(--widget-secondary-color);
border-radius: 2px;
color: var(--widget-primary-color);
}
.widget_contact_info ul .phone #phone:hover{
border: 2px solid var(--widget-secondary-color);
border-radius: 2px;
color: var(--widget-primary-color);
}
.widget_contact_info ul .mail #mail:hover{
border: 2px solid var(--widget-secondary-color);
border-radius: 2px;
color: var(--widget-primary-color);
}
classlarını tek tek inceleyip öğrenmek gerekiyor ki anca düzenleme yapacaksın. Ama öğrenmek de lazım çünkü günümüz kişisel web sitelerinin yüzdelik olarak en fazla kullanılan scripti 
