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. 

Result:

1

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:

index-banner-wrapper

Example:

Use the Create section button to complete. 

Erase all the default code that generated:

Replace the default code with the code from this file:

OPTION 1

Pipeline 5.0 and higher:
Click to view code

OPTION 2

Earlier versions of Pipeline:
Click to view code

Save the file after replacing the code.

2

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: