Add images inside heading text in Elementor and WordPress

Category: ,

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;
    
  }
}

Need to get your website created by a professional?

Fill out the form below to get started.

Lead Gen Form