Replace the newsletter sign-up with a button link
If you'd like to replace the Newsletter sign-up in the footer with a button, use the Page block option in the footer:
Replace:
With:
- 1
-
Create a page which has your button
Open your Page editor:
Create a new page which has your button code.
Add a title for your page, then use the Code mode icon in the toolbar (1):
Note: The page title will be used as the column heading in your footer. Choose a title that will be appropriate for your footer column heading.
You'll know that you're in Code mode as the other icons will disappear:
Add some HTML to create the button and link:
<a class="btn btn--splash" href="/pages/mailchimp">Newsletter</a>
Let's breakdown the example code:
(1) The class btn is needed to create a button style
(2) the additional class btn--splash styles the button for you, see reference chart below.
(3) this is where your link will go, it can be any page and you'll need to customize that based on what page you'd like to send them to.
(4) the button text (label)
In that example, I've linked (3) to an already created MailChimp form page which I've created. The URL "/pages/mailchimp" I obtained from when I use the "View" option of my Page editor:
Button Classes
Here are the already styled button classes that you can use in Pipeline (1) and (2):
.btn .btn--small .btn--large .btn--full .btn--clear .btn--splash .btn--square .btn--outline
Save your page after adding the HTML. Additional text can be added if you like before the button.
Before proceeding to Step 2, View your page and test the button link to make sure it goes to the correct page you'd like. Make adjustments like button styles or links, then continue to Step 2.
- 2
-
Add the button page to your Footer
Open your Theme Editor (Customize Theme):
Open the Theme Editor. For a draft theme, use the Customize link for that theme:
If you're using a live/published theme:
In the Footer section settings, remove the existing Newsletter block and add a new one:
Choose Add content:
Select the Page block:
Browse to the page you created in Step 1:
Use the filter bar (1) to find your page quickly (2):
Choose the correct page (2)
Now your preview will show you the button/page you created. The title of the page is also used as the heading here:
If you want to change the heading/title go back to the page you created and modify it there.
Save your settings (top-right) and now test your button.
Modifications
You can now control what's displayed here by updating the original Page created. If you'd like to add more text before the button, update the Page and add the text there.
Example:
Resulting in:
Using other Button Classes - Example of using btn--large:
Resulting in:
To fix the button color use this CSS style code:
/* -- code to change footer button link color -- */
.site-footer-wrapper a.btn {
color: #FFFFFF; }
/* - end - */
That will result in:
Where do I add the code?
Use this link to learn where exactly to add this code snippet: