Flex includes a Newsletter page section to encourage your customers to stay in the loop with your brand and marketing. The Flex theme also offers a newsletter popup and a footer newsletter form to consider in addition to this dynamic page section.
By default, after a customer signs up for your newsletter, their email address (and first and last name, if applicable) are stored in your customer database.
In order to send email marketing to them, however, you will need a third-party email marketing provider as well as a way to synchronize your customer database with the email marketing system's lists.
Add this section to the
Newsletter Section Settings
The section settings determine the look and layout of this section! Within the newsletter section settings, you can select options for form fields and text, colors, background image, featured image, layout, and advanced CSS.
Show first name/Show last name
If you'd like the newsletter signup form to include the First and last name fields in addition to the email field, you can enable these in the section settings.
Have the form fields display the form label inside the form field or above it. This can be decided by going into Theme Settings > Elements > Forms.
If you'd like the form labels (first name, last name, email) to be placed inside the form fields, you can enable the Use placeholders setting. If you'd like the form labels to be displayed above the fields, you can leave this unchecked.
Select the Button style. There are Primary, Secondary, and Link button styles.
Add a Heading and/or Subheading to the newsletter section with the provided text fields.
Here you can choose the Text alignment of your text. Choose from Left, Center, or Right.
You can choose specific Colors for the Text and the Background of the newsletter section with these color pickers.
Background image/Darken background image
If you'd like to upload a Background image instead of a background color, you can upload the image here. A size of 1600 x 300px is recommended. You can then decide to Darken the background image as well. This may help to improve the legibility of your text on top, especially if the background image is a busy pattern, or close to the text color.
Include another image by clicking Select Image under Feature image. Use a 1024 x 1024px image for the best results. The image can display on the Left or Right of the section, depending on what Image position you set.
If you've uploaded a feature image, you can crop it to same height as your text content with the Image cropping setting. You'll most likely want to make use of this setting if you've uploaded an image size that is different than the recommended size. The cropping options are Left, Center, Right, and None.
If you've uploaded a featured image, choose either Left or Right for the Image position setting.
The options under the Width setting include Half, Standard, and Wide. Selecting Wide will spread out the full width of the screen and Half will only span half of the width. Selecting Standard will keep the section in a container and not spread the full width.
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings. Use the Left spacing and Right spacing sliders to adjust the horizontal spacing.
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature