How can I create a colored text box in the Prestige theme?

[LauraOO]

Hello everyone. I am in the middle of doing a landing page for a event we are doing.

And right now its just text all the way down and i want it to stand out a little more. 

Therefore i thought some of the important information could be in a boxed text with a blue color so make it stand out. Is there any way to do this? Its a module: Rich text with image in shopify Prestige theme.

The text i want in the blue box is: 

Shoppen vil være åben i perioden 25. juni til 13. august.

Åbningstiderne vil være: onsdag – lørdag kl. 12-18 (mandag og tirsdag åbent efter aftale).

Du finder pop-up shoppen i "Den gamle købmandsbutik" på Drachmannsvej 1, 9990 Skagen.

I hope somebody can help me with this!

Link to the page: https://americanwine.dk/pages/pop-up-i-skagen-med-skonne-amerikanske-vine

[Moeed]

Hey @LauraOO 

To create a boxed text with a blue color to make it stand out in your landing page using the Rich Text with Image module in the Shopify Prestige theme, you can follow these steps:

• Edit the Rich Text with Image module: Go to the page builder or theme editor where you are editing your landing page. Locate the Rich Text with Image module that contains the text you want to highlight in a blue box. Click on the module to edit its content.

• Insert a div container: In the content editor of the Rich Text with Image module, insert a div container around the text you want to highlight. You can do this by switching to HTML or code view and adding the following code:

<div class="boxed-text">
  <!-- Your highlighted text goes here -->
</div>

• Define a CSS class: In the CSS editor or theme settings, define the CSS styles for the .boxed-text class. Add the following code to set the background color, padding, border, and any other styling you desire:

.boxed-text {
  background-color: blue;
  color: white; /* Set the text color to ensure readability */
  padding: 20px;
  border-radius: 5px;
  /* Add any additional styling as needed */
}

• Customize the styling: Adjust the CSS code to match your desired appearance. You can change the background color, text color, padding, border radius, and other properties to suit your design preferences.

• Save and preview: Save your changes and preview the landing page to see the highlighted text in the blue box. Make any additional adjustments if necessary.

By enclosing the text in a <div> container with the .boxed-text class and applying CSS styles to that class, you can create a boxed text with a blue color to make it stand out on your landing page.

Note: The exact steps and customization options may vary depending on the specific page builder or theme editor you are using in Shopify. Refer to the documentation or support resources for your theme or page builder for more detailed instructions.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[LauraOO]

Hey Mooed, there is no option to switch to HTML view or add code to the rich text editor. 
Is there another way to do this?

[Moeed]

Hey @LauraOO 

You need to call the text in a <div> tag and add a class and then you can add css on that class. If you're not familiar with coding then feel free to contact me and I would love to help you out.

Best Regards,
Moeed