Elementor Newsletter Section Template
This Elementor newsletter section puts an email signup on the left and two short benefit blocks on the right, on a dark teal gradient. Newsletter Side by Side with Details is a free, responsive block shared as JSON files and built only with native Elementor widgets, in one version for Elementor Free and one for Elementor Pro.
What's Inside the Block
- A headline (H2) and a short intro on the left, followed by the signup control.
- Two benefit blocks on the right, "Weekly Bargains" and "No Spam", each with a small outlined icon box, an H3 title, and a gray description.
- A dark section with a radial gradient from deep teal (
#0B5048) to navy (#101828). - Inter font and an emerald Subscribe button (
#007A55). - Two columns on desktop. On tablet and mobile the signup stacks above the benefits, and on mobile the two benefits stack too.
Tip: Say what subscribers get and how often. The sample copy promises one short email every Monday, so change both the intro and the "Weekly Bargains" text to match what you really send. Keep the "No Spam" block only if it is true for your list.
Which Version Should I Download?
- Elementor Pro version: uses the Form widget with an email field and a Subscribe button on one row. It needs Elementor Pro.
- Elementor Free version: uses a standard Button widget in place of the form, so it works without Pro. The button links to
#, so you connect it to your own signup page or form.
Everything else is identical in both files: the layout, colors, benefit blocks, and responsive settings.
Requirements
- A recent version of Elementor with Flexbox Container and Grid Container available.
- Elementor Pro for the Pro version only. The Free version needs no Pro.
- An email service or plugin to actually collect and send emails. The block only provides the design.
- The Inter font available on your site (otherwise a fallback font is used).
- The two icons are loaded from an external SVG address (Heroicons on GitHub).
Note: The Pro form is set to save submissions only, so emails are stored in WordPress and are not sent to any newsletter service until you add one under Actions After Submit. Its success message says "Check your inbox to confirm", which only makes sense if your email service sends a confirmation email. The email field's label is hidden, so the placeholder is the only visible hint. In the Free version, the Subscribe button points to #. Back up your page before importing a template into an existing layout.
Widgets Used
| Element | Purpose | Pro? |
|---|---|---|
| Flexbox Container | Section wrapper, text column, benefit columns, and icon boxes | No |
| Grid Container | Two-column layout and the two-column benefit area | No |
| Heading | Headline, intro, benefit titles, and benefit descriptions | No |
| Icon | Tag and hand icons in the benefit blocks | No |
| Button | Subscribe button (Free version) | No |
| Form | Email field and Subscribe button (Pro version) | Yes |
Frequently Asked Questions
How do I import this Elementor JSON template?
First, download the JSON file for your version using the buttons above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.
Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.
What is the difference between the Free and Pro versions?
Only the signup control changes. The Pro version has a Form widget with an email field and a Subscribe button side by side. The Free version has a single Button widget, since the Form widget is a Pro feature. The layout, colors, text, icons, and responsive behavior are the same.
How do I connect the Pro form to my email service?
Select the Form widget and open its Content tab. Under Actions After Submit, add the email service you use and enter its connection details. The form is set to collect submissions only, so until you add an action, emails are saved in WordPress and not sent anywhere. Send a test signup to check that it works.
How do I make the Free version collect emails?
Create a signup page or form with your email service or a form plugin. Then either set the Subscribe button's Link field to that page, or replace the button with your service's embed code using an HTML or Shortcode widget. Style the new field to match the dark section if you keep it on the page.
How do I change the benefit blocks?
Click a title or description and type new text. To change an icon, select the Icon widget and pick another SVG in its Content tab. To add a third benefit, duplicate one benefit column and change the benefit grid's Columns value, then check the tablet and mobile views.
How do I change the background gradient?
Select the outer container and open its Style tab. The radial gradient runs from deep teal to navy under Background. Change the two colors or the stop value, or use a solid color. Keep enough contrast with the white headline and gray text.
Why do the columns stack on tablet and mobile?
The main grid has two columns on desktop and one on tablet and mobile, so the signup control appears first and the benefits follow. The benefit area keeps two columns on tablet and becomes one column on mobile. On mobile, the Pro form stretches to the full width and its button column grows from 25 to 30 percent.
Where should I place this newsletter section?
Place it near the end of a page, above the footer, or after a blog post or product section where readers have already seen your content. Because its headline is an H2, use it after the page's H1 and main content.
Do I need Elementor Pro?
Only for the Pro version, which uses the Form widget. The Free version uses native Heading, Icon, and Button widgets inside Flexbox and Grid containers.
Why won't the file import?
Make sure the file has a .json extension and hasn't been unzipped or edited. The Pro version also needs Elementor Pro active on your site. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.
Why do the Flexbox or Grid settings look different or missing?
Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.
Why does the font look different?
The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.
Looking for more newsletter sections? Browse all Elementor newsletter section templates, or see every free block in Elementor Templates.
Comments
Post a Comment
Post a Comment