Banner: Add a newsletter sign-up option

This customization allows you to add a newsletter sign-up form to a banner section - Image with text overlay. This won't replace your current version, it will be an additional section option. 

Example:

Or with a call to action button:

How to:

1

Create a new section

Important: This step requires you to know which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you've verified your Pipeline version number, open your Code Editor. 

From Theme actions, choose Edit code:

PART 1

In the Sections folder, choose Create new section:

Call the section:

index-banner-newsletter

Example:

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:

OPTION 1 - Pipeline 4 and higher, use:

Click to view code

OPTION 2 - Earlier versions of Pipeline, use:

Click to view code

Save the file:

2

Add style code

Use this link to learn where exactly to add this next code snippet:

Where to add your CSS style code

Add the following code to the very bottom of the file on a new line:

/* -- code for newsletter form on homepage banner  -- */
@media screen and (min-width: $large) {
.wrapper.newsletter {max-width: 50%}
}
.wrapper.newsletter {margin-top:2em;}
/* - end - */

Save the file after adding your code:

3

Use the Theme Editor to add and configure the new section

Open the Theme Editor:

Open your theme editor (Customize theme).

Example for live theme:

Under Sections:

Choose Add section:

The new section will appear under IMAGE:

Add the section.

In the settings, you'll see a new Newsletter checkbox option:

You can use that to toggle the newsletter on and off. 

Save your settings:

This newsletter form is the same as the one in the footer. You can configure the text in the Language Editor. 

Still need help? Contact Us Contact Us