AWeber and Elementor Integration

How to Connect Elementor With Aweber

AWeber』s sign-up forms integration on your WordPress is available with both Elementor Free and Elementor Pro. 

If you don』t have the AWeber for WordPress plugin, install it now.

Elementor Pro

With Elementor Pro, you can connect forms created in Elementor with your AWeber account, add tags, and configure custom fields.

Follow the steps below to integrate your Elementor form and AWeber. 

Step 1: Launch Your Forms Widget

Drag and drop the Elementor Pro Forms widget onto the widget area in the middle of your screen to create a new form on the page. The form』s options are in the panel to the left.

Step 2: Configure Your Form Fields and Submit Button

From the options panel on the left, you can delete or add fields, or change the types of fields. Click the submit button tab in the options panel to configure the button. You can select the button』s text that will appear, as well as its size, color, and alignment.

Step 3: Set up Action After Submit Button to Select Aweber

Click Actions After Submit to define which actions will take place when someone clicks the submit button. Click on the Actions drop-down to reveal the options and select AWeber. This will cause AWeber configuration options to appear.

Step 4: Set up Your Aweber Actions.

Now it is time to set up where in AWeber you want the contact information sent. 

Select the AWeber list that you want to use. Enter the tags you want to use. Go to Field Mapping so you can map the data you want for each custom field. Click Publish. 

Now anytime any visitor to your website clicks the Submit button, the information on the various fields and custom fields configurations will be sent to AWeber.

If you are moving to AWeber from a competitor, you can also easily reassign your Elementor forms to AWeber by selecting AWeber in the Actions After Submit step.

Elementor Free

If you are using the Elementor Free version, you can quickly and accurately pull over any AWeber form you want to use with no coding or manual copying of HTML. This option is also available to Elementor Pro customers.

The steps below outline how to add any of your AWeber sign up forms into your favorite Elementor landing page.

Step 1: Make Sure the AWeber Plugin Is Installed on Your WordPress Website

When you have the Elementor free plugin and the AWeber WordPress plugin installed, there will be an AWeber icon at the bottom of your Basic elements options.

Step 2: Drag and Drop the AWeber Widget Onto the Widget Area in the Middle of Your Screen

This will place a blank gray area onto the page, and will reveal the Aweber Configuration options in the Options Panel on the left. 

Step 3: Select Your AWeber Form.

From the AWeber Configuration options in the left panel, click the List drop-down and select the AWeber list you want to use from the options in your account. In the Sign Up Forms and Split Tests drop-down, select the AWeber form you want to use. The form you selected will load into the widget area on the main screen. The plugin is going into your AWeber account and pulling into Elementor the sign up form that you selected.

For more questions about how to leverage the power of AWeber and Elementor, read their Knowledge Base article.

How Do I Create My First Popup?

Follow these steps to get your first popup set up. Using this guide, you will manually trigger a popup using a button.

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own designClick 『Publish』, then 『Save and Close』Open a new page in Elementor (CTRL / CMD + E, new page)Drag in a button widgetUnder Layout, choose Link > Dynamic > Actions > PopupClick Popup > Open Popup > Select the popup you createdGo to the live page, click on the button and see the popup appear

With this type of basic popup which appears when a button is clicked, no Conditions, Triggers, or Advanced Rules are required.

That』s the basic setup. Try it out to get a handle on using Elementor Popups.

One example where you might want to use this is to create a popup with a form in it that is triggered when a button is clicked. Check out this video tutorial to see how this is done.

For more complex scenarios, see the Popups documentation.

How to Move Sections in Elementor

It is very easy to move an Elementor section above or below another section, in either one of two ways.

Drag and Drop The Section Using the Navigator

The Navigator is a quick and easy way to move sections, and is often preferred, since you don』t have to drag the mouse far up or down a page. Access the Navigator in one of three ways:

Click on the Navigator button in the panel』s footer, or use the Cmd/Ctrl + I keyboard shortcut.Alternately, you can right-click any element and then click on Navigator. This will automatically redirect you to the specific element in the navigation tree.Once the Navigator is open, left-click and hold the mouse button down on the section element you want to move, and drag it up or down, dropping it before or after any other element.

Drag and Drop The Section Via The Section Handle

Click and hold your left mouse button on the handle of the section you wish to move. While you continue to hold the mouse button down, drag the section to its new location.When you see the blue line appear in the correct place, let go of the mouse button. This will place the section into the blue drop zone. The move is now complete.

Embed Templates Anywhere (Pro)

In the video, we show how to insert a designed template into the sidebar. We also examine two other ways to embed Elementor templates into your website.

Add Elementor Website Builder Template As a WordPress Widget

In the WordPress Dashboard, under Appearance > Widgets, you will see the Elementor Library widget.Click the Choose Template dropdown, choose a saved template, and click Save.

Add Template to an Elementor Page Using the Template Widget

Drag the Template Widget to a section.Click the Choose Template dropdown, and choose a saved template.

Add Template As a Shortcode

Go to Templates > Saved TemplatesCopy the ShortcodePaste the Shortcode to your widget (i.e. paragraph, tabs etc.)

How To Delete A Widget

There are two easy ways to delete a widget from an Elementor column. In this example, we』ll first delete the widget from the Navigator. Then, we』ll use History to undo our deletion. Finally, we』ll delete the widget again from the Edit Widget handle.

Delete A Widget From The Navigator

Click the Navigator icon to open the Navigator.Find and select the widget element you wish to delete.Right-click the element and choose Delete from the drop-down selections.

Delete A Widget From The Widget』s Handle

Right-click the widget』s Edit Widget handle. Choose Delete from the drop-down selections.

Navigator Indicators

Navigator Indicators are small icons that indicate the state of a particular element within the Navigator. The following types of Indicators are currently available:

Eye Indicator

Indicates that this element is currently being viewed. Clicking the Eye will toggle between Show and Hide states for that element. Hiding the element will only affect the view on the back end, within the Elementor Editor. It will have no effect on the front end of the site.

Custom Position Indicator (Pro)

Indicates that the element is placed using Custom Positioning. The blue indicator line expands to show a drag icon when in hover state.

Custom CSS Indicator (Pro)

Indicates that the element has Custom CSS applied to it.

Motion Effects Indicator (Pro)

Indicates that the element has Motion Effects applied to it.

Icon Library

The  Icon Library gives access to more than 1,500 free Font Awesome 5 icons, and introduces an interface for managing your icons.

Click on the Icon Library button that appears on any widget with icon controls to open the Icon Library. Most controls will look like this:

Some widgets, such as the Accordion and Toggle widgets, will have inline icon controls like this:

Widgets with inline controls: Click the + and – icons to choose icons from the icon Library or click the Upload icons to upload an SVG. 

Icons that are relevant to the widget you are currently using will automatically be displayed, but if you prefer, you can browse through the entire library to pick your desired icon, or search for a specific icon.

Filter Icons By Name: Search by keyword in the search box above the icons in the right panel.Filter Icons By Families: Select the icon family in the left panel, choosing from All, Regular, Solid, or Brands

Font Awesome Pro

If you have a Font Awesome Pro license, you will have a larger set of icon families to choose from, including Regular Pro, Solid Pro, Brands Pro, Light Pro, and Duotone Pro. 

How To Use The Font Awesome Pro Icons

Go to Elementor > Settings > IntegrationsScroll down to Font Awesome Pro and enter your Kit IDClick Save ChangesEdit the widget that includes an icon Click Icon LibraryChoose one of the Pro families such as Duotone Pro, select the icon you prefer, and click Insert

Speed and Performance

The Elementor Icon Library brings faster performance and faster page speed, which can benefit your SEO and page load speed. With this library, only the CSS and fonts of the icon family you actually use are loaded.

One Time Migration To Font Awesome 5

The first time you attempt to use the Icon Library, you may be presented with a Font Awesome Migration popup. Read more about this

Troubleshooting Tips

If you find that you are unable to change the colors of Font Awesome Pro icons, please log into your Font Awesome Pro account and choose Web Font instead of SVG in your kit』s settings. The incorrect SVG setting is shown below. When you use SVGs to display the Font Awesome Pro icons, it changes the CSS properties and one of them (the fill property) is not supported by the CSS editor of WordPress, so Web Font is the more appropriate choice.

How To Place Widgets Side By Side In The Same Column

Inline Positioning

Place widgets next to each other, horizontally, within the same column.

Each widget will only take up the minimum width necessary to hold it. 

https://www.youtube.com/watch?v=FtHXk2e6OF8

How To Use Inline Positioning

Under any Widget > Advanced > Custom Positioning

Width: Set to Inline for each widget in the horizontal stack.Position: Set to Default for side by side positioningUnder the Column > Layout, set your desired Horizontal Alignment. Choose between: Start, Center, End, Space between, Space Around, and Space Evenly. 

Note: To set several widgets inline, each widget needs to be defined as Inline separately.

Important!: Some elements may not function correctly when set to Inline Auto e.g. Image Carousel, Slides etc.

Theme Style – Global Settings

Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.  These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor. By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well. 

Note: Elementor Pro users can also set Global Custom CSS which lets you apply custom CSS rules to your entire site. 

To Apply Theme Styles To Elementor Elements:

In order for Theme Style settings to apply to most of Elementor』s elements and widgets as well, you will need to disable Elementor』s default colors and fonts.

Disable default colors and default fonts by going to Elementor > Settings and placing a check in the boxes next to Disable Default Colors and Disable Default Fonts.

How To Set Theme Styles

Click the Hamburger menu in the upper left corner of any page or post』s widget panel to access the Site Settings > Theme Style settings. Theme Style consists of four tabs: Typography, Buttons, Images, and Form Fields.

Typography

Text Color: Choose the color of the default text

Typography: Change the typography options for the default text

Paragraph Spacing: Set the amount of default spacing after a paragraph (margin-bottom)

Link

Normal | Hover

Color: Choose the default color of links for both normal and hover states

Typography: Change the default typography of links for both normal and hover states

H1-H6

Color: Choose the default color for each Heading (H1, H2, H3, H4, H5, and H6)

Typography: Set the default typography options for each Heading (H1, H2, H3, H4, H5, and H6)

Buttons

Typography: Change the default typography for buttons

Text Shadow: Set the default text shadow for buttons

Normal | Hover

Text Color: Choose the default color for button text

Background Color: Choose the default background color of buttons

Border Type: Set the default type of border for buttons (None, Solid, Double, Dotted, Dashed, Groove)

Box Shadow: Set the default box shadow options for buttons

Border Radius: Set the default border radius to control corner roundness of buttons

Padding: Change the default button padding settings

Form Fields

Label

Color: Choose the default text color for the Field Labels

Typography: Set the default typography options for Field Labels

Field

Typography: Set the default typography options for Input Field text

Normal | Focus

Text Color: Choose the default text color for Input Field text

Background Color: Choose the default background color for Input Fields

Border Type: Set the default type of border for Input Fields (None, Solid, Double, Dotted, Dashed, Groove)

Border Radius: Set the default border radius to control corner roundness of Input Fields

Box Shadow: Set the default box shadow options for Input Fields

Transition Duration (ms) (Focus only): Set the default amount of time, in milliseconds, for the Focus Transition to take place.

Padding: Set the default padding options for Input Fields

Images

Normal | Hover

Border Type: Set the default type of border for Images (None, Solid, Double, Dotted, Dashed, Groove) in both Normal and Hover modes

Border Radius: Set the default border radius to control corner roundness of Images in both Normal and Hover modes

Opacity: Set the default opacity level of Images in both Normal and Hover modes

Box Shadow: Set the default box shadow options for Images in both Normal and Hover modes

CSS Filters: Set the default CSS Filters: Blur, Brightness, Contrast and Saturation for images in both Normal and Hover modes

Transition Duration (ms) (Hover only): Set the default amount of time, in milliseconds, for the Hover Transition to take place.

Undo / Redo & Draft / Publish

Just like any other Elementor editing you might do, Theme Style woks with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your Theme Style design.

Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft, without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style』s Publish button.

HTML Elements Affected

Note: Some elements won』t get affected because Elementor doesn』t allow editing them (e.g fieldset, input[type=」reset」] and more)

Background color:

Buttons:

buttoninput[type=」button」]input[type=」submit」].elementor-buttonParagraph spacing:

Links:

Headings:

Form:

labelinput:not([type=」button」]):not([type=」submit」])textarea.elementor-field-textual

Images:

Why Did All My Theme Styles Disappear?

This happens when the Default Kit is deleted. If you go to Templates > Saved Templates, and then select to view All templates, you will see a new template listed there, called Default Kit. The Theme Styles are stored in this Saved Template. The Default Kit template, if deleted, will automatically recreate itself, but deleting it will remove all settings stored in the Theme Styles, so only delete this template if your goal is to completely reset your Theme Styles.

Custom Link Attributes

With Elementor, you can add custom HTML attributes to the  element of every link. This enables the addition of data-* attributes, ARIA attributes (accessibility) and values, header, footer, sidebar, rel=*, and other attributes that can be found here

Common Link Attributes use cases include:

Allow your visitors to download PDF files with a single button click by using the download=」yourfilename」 custom attribute.Implement relations SEO properties such as rel=」noopener」,  rel=」noreferrer」,  rel=」ugc」, and 「rel=sponsored」. To add multiple properties to one attribute, simply list them with a space between them, e.g. rel=」noopener noreferrer」. Add a title attribute to link elements, such as title=」Learn More About Us」. 

Tip: You can add multiple Link Attributes separated with a comma (,)

Add Custom Attributes to Link Elements of A Widget

If a widget has a Link element, you can add any custom attributes to the link』s HTML, (e.g.  rel=」ugc」 or rel=」sponsored」, the two new link attributes that Google introduced in 2019). 

Right-click on the widget』s handle and click Edit widget to open the widget』s settings panel.Click the gear icon to the right of the Link field to open up the additional options.Add your code in the Custom Attributes field, using the format key|value. For example, to add rel=」sponsored」 to the element』s HTML, enter rel|sponsored here. To add rel=」ugc」 to the element』s HTML instead, enter rel|ugc here. To add a title to the link element, enter title|Your title text goes here. 

Tip: If you add a title attribute, it will only display as a popup tooltip on hover if there is something in the Link URL field, so there must be at least a  # in the field. It cannot be blank for the hover tooltip to work.

Note: There is no ability to add a custom attribute to a link created within a Text Editor widget. Custom attributes are only available for widgets that specifically have a link field.

Add A Download Custom Attributes to a Button

To cause a file to be immediately downloaded when a user clicks a button, add a download=」yourfilename」 attribute to the button』s link.

Right-click on the Button widget』s handle and click Edit widget to open the widget』s settings panel.Click the gear icon to the right of the Button』s Link field to open up the additional options. Add the attribute code in the Custom Attributes field, using the format key|value. For example, to add download=」yourfilename」 to the element』s HTML, enter download|your-file-name here, replacing 「your-file-name」 with the file name of your choosing. 

Tip: To create a downloadable PDF, in the  Link field, enter the PDF』s link, and then enter download|your-file-name in the Custom Attributes field.

Note: You will not be able to add JS-based attributes (like onclick) to your links due to security reasons.