Author 诗语

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.

How To Add Text Over Image in Elementor

Adding text over images with Elementor can be accomplished in several ways. In this document you will learn two of the most common methods to accomplish this.

Using Negative Margin on the Text

Drag and drop an Image Widget into a column and select your image from the media libraryDrag and drop a Heading Widget below the image and edit your textIn the Advanced Tab, unlink the margin properties and apply a negative top margin (example: -40%)Set the Z-Index to a number greater than the image (example: 5)

Using the Text Over a Background Image

Drag and drop a Heading Widget to a column or section and edit the textFrom the column Style Tab > Background use the image option. Select an image from your library or upload a new imageSet the background size to Contain, or Cover (some cropping of the image will occur when using this option)In the Advanced Tab, unlink the padding properties and apply a top and bottom padding (example 40%). This will allow the image to retain its shape for tablet and mobile responsivenessAdd margin to increase the gap between the background image and the container

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]

Text Path Widget

By using the Text Path Widget you can attach your text to any shape! select from a predefined list of shapes or upload your own SVG shape, customize and style it as you want.

Widget Controls

The text path widget features the following controls:

Text – Enter the text you wish to be displayed or use the dynamic optionsPath Type – From the dropdown list, choose the path type. You may select from the following options:– Wave– Arc– Circle– Line– Oval– Spiral– Custom (Upload your own SVG path file)SVG (When Custom is selected) –  You may upload a custom path to the media library using .SVG format and apply this to the text pathLink – Add your link URL or chose from the dynamic optionsAlignment – Chose the alignment for your textText Direction – Choose the orientation of your text Default, RTL, or LTRShow Path – Toggle this option to show your path

Style Options

Text Path

The text path has the following style controls. These control the container of your path:

Size – Set the size of the text path container using % or PXRotate – Set the rotation your container in degrees

Text Options

Typography –  Set the font family, sizes, and style, or use the global typography controlWord Spacing – Use the slider to set the word spacing in %Starting Point – Use the slider to set the start point of your text on the pathColor – Choose the color for your text using the color picker or dynamic functions. Colors may be set for Normal and Hover classes. 

Path

Control the appearance of the path using the following options. These options can be set for Normal and Hover classes:

Color – Choose the background color of your path using the color picker or global options

Stroke

Color – Choose the background color of your stroke using the color picker or global optionsWidth – Use the slider to set the stroke width in PX

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.

What Payment Methods Do You Accept?

You can use PayPal or Credit Card to pay for Elementor Pro.

After you choose your prefered Pro plan, click on Checkout. You can choose to pay with Paypal, or by Credit Card (via Stripe).

Note: We accept the following types of credit cards: Master Card, Visa, Discover, American Express, Diners Club, Union Pay, JCB.

Teams Connect

In order to view the websites connected to your Teams subscription, you need to connect via the Elementor template library.

To learn more about Teams click here.

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.)

MailerLite and Elementor Integration

In this guide, we will explain how to integrate   MailerLite with Elementor Forms.

First set your MailerLite API Key in the Integrations Settings at Elementor > Settings > Integrations TabCreate a form using Elementor Form WidgetClick Actions After SubmissionUnder Add Action choose MailerLite

Tip: Click to learn how to  get your API Key from MailerLite

Selecting MailerLite Options

API Key: Use the default API Key or a custom oneGroup: Choose a group or use Select to allow visitors to self-select the group to joinEmail Field Mapping: Set the option to map your fieldsAllow Resubscribe: Set to Yes to allow users to resubscribe to your list if they have previously unsubscribed.

Note: The integration with MailerLite creates a new contact in your MailerLite account. It doesn』t update existing contacts.

Troubleshooting MailerLite

If you notice a field is missing in the Elementor Form widget panel, re-select the MailerLite group. For example, in the demo below, the 「Consent」 field was not showing up, but it appeared once the MailerLite group was selected again.

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.