Image with text section: Need help changing font color for heading- Studio Theme

aosttg
Excursionist
16 0 5

I was curious to see if there was a way to change the heading color for the "Image with text" section. My website url is: The Tiny Greenhouse

 

Screenshot 2022-12-06 144348.png

 

I would like to change the color for each letter for the word "color" to something like this:

color.png

 

 

Replies 2 (2)

ExpertRookie
Shopify Partner
1518 249 314

Hi @aosttg 
in this case
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.banner__heading{
background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
}

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

layoutbase
Pathfinder
111 13 24

Hi @aosttg

 

You may try out this method as well: 

  1. Go to Online Store->Theme->Edit code
  2. Find sections/image-with-text.liquid
  3. Paste the following on top of the file: 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  
  var colorText = '<span >c</span><span style="color:green";>o</span><span style="color:blue";>l</span><span style="color:pink";>o</span><span style="color:yellow";>r</span>';
  var textColor = $('.image-with-text__heading.h2:not(.added-color)').html()
  textColor = textColor.replaceAll('color', colorText); 
  $('.image-with-text__heading.h2').html(textColor)
  $('.image-with-text__heading.h2').addClass('added-color')
</script>
​

 

Sincerely, 

Layoutbase - Drag & drop page builder tool

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!