First, insert a heading widget inside of the container in Elementor.
Then add a title inside it. After that, wherever you want to, insert the image and add the following HTML code:
<span class="borderee"><img class="imagee" src="YOUR IMAGE URL HERE"></span>
If you want to add the image and links together, add the following HTML code:
<a href="URL HERE" target="_blank"><span><img class="purple-me" src="IMAGE URL HERE"></span ><span class="follow">About me</span></a>
inside<span class="borderee"></span>
Then, for the reference, you can use the following CSS:
- code for the heading gradient silver effect
.elementor-widget-container h2 {
background-color: #f3ec78;
background-image: linear-gradient(40deg, grey, white, grey);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
- code for styling the elements inside the heading
.borderee img{
width:150px;
height: 60px;
margin-right: .5rem;
margin-left: .5rem;
vertical-align: middle;
will-change: transform;
border-radius: 2rem;
object-fit: cover;
}
.purple-me {
animation: rotation 7.3s infinite linear;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.follow {
font-family: 'Manrope', sans-serif;
font-size: 1.3rem;
font-style: italic;
text-transform: lowercase;
border: 1px solid white;
border-radius: 2rem;
padding: .5rem 1rem;
margin-right: .5rem;
margin-left: .5rem;
vertical-align: middle;
}
@media only screen and (max-width: 768px) {
.borderee img {
width:130px;
height: 50px;
}
.follow {
padding: .2rem 1rem;
font-size: .9rem;
}
.purple-me {
width:30px;
}
}
@media only screen and (max-width: 460px) {
.borderee img {
width:120px;
height: 30px;
}
.follow {
padding: .3rem .8rem;
font-size: .7rem;
}
.purple-me {
width:20px;
}
}


