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. 


Step 1

Open your Code Editor:


In the Sections folder, choose "Add a new section"

Call the new file: index-banner-wrapper

Choose the Create section button to continue. 

Erase all the default code that's generated:

Replace all the code with the code from this file:


Save the file. 

Step 2

Open your Theme Editor:


In the homepage 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:

Still need help? Contact Us Contact Us