Banner: Custom version with HTML description and line breaks in heading

This is a custom version of Image with text overlay that allows you to add line breaks in the title and use HTML in the description area. 


The heading has be changed to two lines and the word Groupthought in the description uses a color style. 

How to:


Create a new section

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

In the Sections folder, choose Add a new section:

Call the section:



Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4.2 and higher, use:

Click to view code

Pipeline 4.0 and Pipeline 4.1, use:

Click to view code

Earlier versions of Pipeline, use:

Click to view code

Save the file after replace code.


Add the new section

Open the Theme Editor:

Quick link if your theme is live/published:
Open Theme Editor

Under Sections:

Choose Add section:

Add the new Banner with HTML section:

This version allows you to add line breaks in the title and HTML code for the description:

To break a line, use the code: <br> between words,. 

This produces:

Example of two buttons on the banner:

To produce:

Use some HTML like this:

(Change the # to a real URL for the link)

Code sample:

<a href="#" class="btn">Button One</a> <span><a href="#" class="btn">Button Two</a></span>

Need help with code changes?

We're not able to make any code customizations but we can recommend and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.