Tutorial: Create a non-full width homepage banner

If you'd like to have a Image with text overlay banner that's not full-width, here is a section module you can add. In this tutorial we will add a new section allowing you to choose the regular full-width version or a new version that's not full width. 



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 the code from this file:


Pipeline 5.0 and higher:
Click to view code


Earlier versions of Pipeline:
Click to view code

Save the file after replacing the code.


Add the new section in the Theme Editor

Use the Custom Theme option in the top right corner of the Code Editor:

Next, in the Theme Editor under Sections:

Choose Add section:

You will now have a new section to choose "Banner with wrapper":

Add that and you can customize it with all the same options of Image with text overlay. This version will not be full-width. 

Example on a page: