How Do I Create My First Popup?

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.

AWeber and Elementor Integration

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.

Adobe Typekit & Elementor Integration

Adobe Typekit & Elementor Integration

Typekit is an Adobe subscription service for fonts.

Elementor seamlessly integrates with your Adobe TypeKit account, supplying instant access to all your TypeKit fonts within the Elementor  Dashboard.

Under Elementor > Settings > Integrations add your TypeKit Kit ID.Click Get Kit

Please be patient after adding your key, as it may take several minutes for Adobe to update their CDN network and place your fonts into Elementor.

The Finder

The Finder

Elementor Finder is a search bar that pops up on when you click either CMD + E (Mac) or CTRL + E (Windows). Elementor Finder gives quick access to various areas across your site, within one window.

To Navigate To A Different Page or Template to Edit

Press CMD + E  or CTRL + E to open Finder or click the Hamburger icon  to go to Elementor』s Style and Settings Configuration section.Begin typing the name of the page, post, or template that you wish to edit. Elementor』s Autocomplete search will help you quickly find and navigate to the desired location.

To Create A New Page, Post, Template, Product, etc.

Press CMD + E  or CTRL + E to open FinderInstead of searching for something that already exists, search instead for the word Post, and you』ll get the option to open a new post. Likewise, search for Page, or Template, or Product, etc. to create a new page, template, product, etc.

Go to other areas of your site:

Finder can also be used to quickly jump to Elementor』s Templates, Role Manager, Knowledge Base, General Settings, Advanced Settings, Integrations, Tools, Version Control or Maintenance Mode. You can also navigate to the WordPress Dashboard or your Homepage.

To extend Elementor Finder capabilities read the developers doc here.

Tabs Widget

Tabs Widget

The Tabs Widget allows you to divide your content into tabs, either horizontally or vertically

Content

Tabs Items: Enter a title and content for each tabAdd Item: Click on the Add Item button to add another tabType: Choose Horizontal or Vertical tabsPosition: Choose from Start, Center, End, or Justified

Tip: Items can be moved up or down in the list by simply using the drag and drop method.

Style

Tabs

Border Width: Set the thickness of the border around the tabsBorder Color: Choose a color for the borderBackground Color: Choose a background color for the tabs

Title

Title Color: Choose the color for the title of the tabsActive Color: Choose the color for the title of the tab that is currently selectedTypography: Set the typography options for the title

Content

Color: Choose the color of the contentTypography: Set the typography options for the content

Advanced

Set the Advanced options that are applicable to this widget

How to add a widget inside a Tabs widget

You can insert another element into a tab this way:

Create the element that you want to insert inside a tab and save it as a Global Widget.Go to your Template Library and copy the shortcode of the relevant global widget.Within the Tabs widget, click on the Add Item button to create a new tab.In the text area of the tab, paste the shortcode you previously copied.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

How To Translate Or Localize Elementor

How To Translate Or Localize Elementor

Elementor comes built in with translating capabilities to any language. Elementor is a project on translate.wordpress.org. We welcome you to  join the team of localizers and help translate Elementor to your language. Here』s how to easily translate Elementor into other languages. You don』t have to download any software, all translation is done online using the GlotPress platform. If Elementor has already been translated 100% to your language, we encourage you to still join the translation team, so you can help with translations in the next versions, or so you can improve the current translation.

1. Log in to WordPress.org

Go to the WordPress login page and login to WordPress using your username and password. If you don』t have an account yet, go ahead and create it, and on the way give us a 5-star rating

2. Enter the translation page

Now go to the plugin translation page, and search for your language.

3. Choose a string to translate

Choose a string you wish to translate. You can also methodically go over each string and translate the whole plugin, but this could take you a while, there are currently 31 pages of strings to sift through.

4. Enter your translation and submit

5. Translate placeholders

Some strings you』ll need to translate will include placeholders. You have to include the placeholder in your output.

For example: Edit {0}

If you were translating to Japanese, you would translate like so: Modifier {0}

「I finished translation, now what?」

Recently. WordPress has changed the way the translation process works. You no longer need to upload any PO files, or do any technical thing for that matter. 

All you have to do is send us a mail once you』ve finished translating to [email protected] and let us know about your translation, so we can get it approved by your language editors. The translation has to go through an approval process, so you can expect to see it after a few days.

6. Update your site』s translations after each update of Elementor

Updating Elementor does not automatically update the translation. When you switch the language from 」 Settings > General「, this changes the language of Elementor and Elementor Pro as well. But there is an additional step to take. 

Go to 「Dashboard > Updates」 and accept the translation of Elementor Pro there by clicking the Update Translations button. 

Note: After each update, there may be new strings to translate, so you should check the Dashboard > Updates panel after each Elementor update.

Go ahead and translate Elementor now. You can learn more about joining the translation team on GlotPress. 

For any further questions, ask us on the GitHub project.

Note: For the translation of Elementor pro elements into your native language, please contact our support: [email protected]

Creating A Custom Text Mask

Creating A Custom Text Mask

By using the Mask function in the Elementor Advanced Tab you can easily upload a custom Text Mask to your video or or image.

Create your text in Ai or Ps and convert to a shape. Export as an SVG to your computerDrag a Video Widget and select an appropriate video. Choose the Autoplay, Mobile, Mute, and Loop functionsIn the Advanced Tab > Mask choose Custom from the shapes, and upload your SVGSelect the Size to fit, fill, or custom as neededSelect the Position alignment option to best fit your designSelect the Repeat option to best fit your design

Shortcode Widget

Shortcode Widget

In this video, we explain how to add shortcodes to any WordPress page using the Elementor website builder. You can also add shortcodes with the regular text editor widget, but the shortcode widget is much more powerful because you can see how the shortcode looks like without going to preview mode. It is rendered automatically. 

Using shortcodes this way is easier because it saves you time and lets you add specialized content much easier.

There are many uses for shortcodes: Adding Contact Form 7, Twitter widget or any website API.

A shortcode, basically, is a special tag that you enter into a page on WordPress, that gets replaced with different content when you view the live website.

An example is [Gallery], which will load the WordPress gallery to your page.

To learn more about using the many widgets and features, subscribe to this channel or visit our knowledge base

Note: If some shortcode is not rendered in the back-end, you have to contact the support of the third-party plugin which generates the shortcode.

Content

Shortcode: Enter your shortcode

Advanced

Set the Advanced options that are applicable to this widget

How to Enable AMP on Elementor

How to Enable AMP on Elementor

AMP (Accelerated Mobile Pages) is a WordPress Plugin released to help improve mobile browsing experience. It is designed to render the page faster by only loading the text and media without scripts and many styles.

Since AMP renders the WP editor content in a minimal fashion, it is not 100% compatible with Elementor created content.

Important! In case you experience the 「Preview could not be loaded」 error, it might be related to AMP. For more information click here.

Teams

Teams

Teams allow you to add collaborators to your Elementor Pro subscription (Studio & Agency license). With Teams, everyone who is a team member in your subscription has access to VIP support.

Adding team members

To add a new team member to your Studio or Agency subscription, go to the Teams tab in your dashboard』s sidebar and click Add memberIn the text box, add your team member』s email address. If more than one, separate them by clicking Enter. Make sure to enter a valid email address format. The invited team members will receive an email invitation which they will need to accept in order to join your team. Invitations are valid for 24 hours from sendingFrom the Teams dashboard you can delete, resend invites, or add more team members. Once you』ve reached your plan limit, you will not be able to add additional team members unless you delete existing ones. Invitations sent but not accepted do count towards your team limit

Note: Team members must have an Elementor account based on the email you used to invite them. If they already have an account, they will have to log in, if they do not have an account, they will be directed to create an account before they can accept the invitation. 

Becoming a team member

When you are invited to be a team member in someone』s Studio or Agency subscription, you will receive an invitation to join the team via your email. To accept the invite, click Accept the InviteTo accept the invitation, you must have an Elementor account. The email used in your invitation must be the same as your Elementor account emailIf you have an account but are not logged in, you』ll be prompted to log. If you do not have an Elementor account, simply click 「Create an Account」 and create your Elementor account Once you are in your account (i.e in your Elementor dashboard), you』ll be prompted to Accept InvitationIf you have already connected your account to the websites you are working on, you will be able to view them in your dashboard as you did before, a 「Teams」 icon will be added to each website』s card and you will have access to the subscription ID of the Elementor Pro subscription that was activated on the site through the site menu If you have yet to connect your account to those sites, Click here to see how. In case you prefer not to connect your account to the websites you are a team member for, you can see the subscription ID of the Elementor Pro subscription as it will appear in a blue notification bar above the websites grid, in your dashboard』s Websites page

Get Support

To start a chat with a support agent, click the icon on the bottom right of the screen.

Tip: When reaching out to VIP Support, you might be prompted to provide the subscription ID of the Studio or Agency subscription that is activated on the website you are requesting support for.

Troubleshooting accepting an invitation 

Seeing this? 

If you accepted an invitation to be a team member but are receiving an error message, check the following things before contacting support:

Is the email the invitation was sent to the same as the email of the account you are logged in under?If you had an Elementor account before receiving the invitation which uses an email that is different from the one used in the invitation, it might be that your browser automatically logged you into the other account when you clicked 「accept」. This creates an email mismatch, and causes an error.Solution: Manually log out of your account using the 「Log out」 functionality in the profile menuWas the invitation sent out in the last 24 hours?Invitations expire after 24 hours.  Accepting an invitation after it expires results in an error.Solution: Contact the account owner and ask them to resend the invitationWas the invitation revoked?It might be that the invitation was erroneously sent and was revoked before it was accepted.Solution: Contact the account owner and ask them to resend the invitation