How to change the text design in the slideshow ?

[Martin299]

How can i change the Text color like in this picture in the slideshow ?
thanks in advance
 

[Sweans]

Hi @Martin299 ,

To achieve the text styling as shown in the image for your slideshow, where specific words are highlighted with a different color, you can use a combination of HTML and CSS.

For Example:

html:

<div class="slideshow-text">
    From Our <span class="highlight">Hive</span> to Your <span class="highlight">Kitchen</span>
</div>

css:

.slideshow-text {
    font-size: 2em; /* Adjust size as needed */
    color: white; /* Default text color */
}

.slideshow-text .highlight {
    color: #f8981d; /* Highlight color, similar to the one in the image */
}

Refer to this code and modify the text as needed to match the image.

I hope this helps! If not, please provide url and password of website.

If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Martin299]

where are i have to put these two words ?

[Sweans]

Hi @Martin299 ,

Please provide the URL and password of your store so I can assist you further

Regards,
Sweans

[Martin299]

https://e018c6-82.myshopify.com/

[Sweans]

Hi @Martin299 ,

Follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the layout directory, click on image-banner.liquid.

6.Search for the following code:

<h2
    class="banner__heading inline-richtext {{ block.settings.heading_size }}"
    {{ block.shopify_attributes }}
>
    {{ block.settings.heading }}
</h2>

7.Replace it with the code below:

<div class="slideshow-text">
    <h2>
        Goûtez Le Vrai <span class="highlight">Miel et</span> Découvrez Avec Nous Les Secrets <span class="highlight">Des Abeilles</span>
    </h2>
</div>

*You can adjust the <span> tags according to your design.

8. Add the following code to your base.css file:

.slideshow-text .highlight {
    color: #f8981d; /* Highlight color, similar to the one in the image */
}

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans