Author 诗语

Sign Up And Create A Profile

First, be prepared to upload images that reflect each project expertise, as well as a profile picture and a cover image. The recommended image sizes are:

Cover Image: Max file size: 2MB. Ideal image size: 1000x360pxProfile Picture (logo or headshot): Max file size: 500k. Profile picture will display at 70x70pxPortfolio Image Files: Max file size 2MB, jpg or png. Required minimum width: 940px

Now, let』s go through the process of signing up and creating your profile.

Note: You must have a Pro Elementor license (Expert, Studio, or Agency plan), and sign in to the account that holds the license, in order to create an Experts Profile.

Sign In

Go to https://experts.elementor.com and click the Sign In link.If you are already signed into your my.elementor.com account, you will see Login & Continue screen. This screen verifies which account is logged in. If this is the correct account, click the Login button. If this is not the correct account, click the Switch User link to change to another account. You will be taken to the first step of a 4-step process. 

Step One – Welcome

This first step is the Welcome screen. Click the Create my profile button to continue.

Step Two – Info

In this step, you will 「Tell Us About Yourself」. Fill out the form provided.

Profile Picture – Drag and drop or browse for a logo or headshot to be used as your profile picture. Once chosen, crop the image by adjusting the slider to control the image』s are to be cropped. Once you are satisfied, click the Save button, or click Cancel to use a different image. Tell us what you do best – Enter a short tagline that describes your expertise. Limited to 100 characters.Where are you located? – Type your city name and choose the correct location from the dropdown list presented.Which languages do you work in? – First, select your primary language from the dropdown list. If you speak multiple languages, such that you are comfortable working in those languages, you may also add them here. Simply click the Add Language button to repeat this process as many times as you wish to add a new language to your portfolio. Your business website (optional) – Although this field is not required, you may type your professional website URL address here. Social media accounts (optional) – Add your social media accounts to your profile.Click Next to continue.

Step Three – Which Services Will You Offer?

Place a check mark in each box to narrow down the services you offer. Click the Next button to continue, once you』ve finished your selections. 

Step Four – Add A Project To Your Portfolio

This step may be skipped, however, it is important to note that your profile is only published and online once a project has been added to your portfolio. Once you complete the 「 Add A Project」 steps, your profile is created and published. If you choose to click the Skip & Finish link, however, your profile will remain unpublished and offline.

Projects are Elementor sites that you have created. In order for your profile to be visible on the marketplace, your portfolio needs to include at least one project. Upload the projects you』re most proud of and that best represent your skills and talents. Click the Add Project button to continue.

Project Name: Enter a name for your project.What』s the project link? (optional): Enter the URL of the project website.Service Type: Select the service type for this project from the dropdown list.Industry (optional): Select the industry for this project from the dropdown list. Add tags: Add 3 to 6 tags that define your work in this project. Upload image files (optional): Drag and drop or browse for images of your website that reflect your skills. You can change the order of the images by dragging and dropping them in any order you choose. You can also crop the images by adjusting the slider to control the image』s are to be cropped. Once you are satisfied, click the Save button, or click Cancel to use different images. Describe your project in a few words: (500 word limit) We suggest focusing on the specific skills you used for this project, as well as any interesting aspects of the project.Click the Finish button to complete this step.

Once you have created your account and set up a project, you will login and be directed to your profile.

User Options

You will now see your profile image and name in the upper right corner of the screen. Click the arrow next to your name in the header to see your user options. Here you can view your profile at any time, go to your dashboard, or log out of the Experts Network.

Popups

Popups are call to action modal windows that popup and overlay the page at a specified moment or under specific triggers and conditions. Popups are designed to focus a user』s attention once they have taken an action.

To begin, go to Templates > Popups. Control the layout, conditions, rules and styles of the popup,and then design the popup content.

Note: Click the Popup Settings gear icon in the panel』s bottom toolbar to edit the popup settings.

Design Popup

Settings

Layout

Width: Set the exact width of the popup, using either px or vhHeight: Set the exact height of the popup, using either px or vh. Use 100vh for both width and height to create full-screen popupsHorizontal: Choose the horizontal position of the popup, from Left, Center or RightVertical: Choose the vertical position of the popup, from Top, Center, or BottomOverlay: Show or Hide the background overlayClose Button: Choose to Show or Hide the Close buttonShow Button After x seconds (if Show Close Button was chosen): Select the number of seconds to wait before showing the close buttonEntrance Animation: Choose the popup』s entrance animation such as fade and zoom from the dropdown selections. Choose any animation effect to preview the effect.Exit Animation: Choose the popup』s exit animation such as fade and zoom from the dropdown selections. Choose any animation effect to preview the effect.Animation Duration: Set the length of time for animation, in milliseconds

General Settings

Title: Enter the title of popup. This title will only show on the backend, not to the user.Status: Draft, Pending Review, Private, or Published

Preview Settings

Preview Dynamic Content as: Choose from any Archives, Pages, Posts, Media, or 404 pages.

Note: To see the content you』ve chosen, you must reload the page after selecting the dynamic content.

Style

Popup

Background Type: Choose a background color, image, or gradientBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundness for each side of the popupBox Shadow: Adjust box shadow options

Overlay

Background Type: Choose a background color, image, or gradient

Close Button

Position: Choose to display the Close button on the Inside or the Outside of the popupVertical Position: Use the slider to select the vertical position of the Close buttonHorizontal Position: Use the slider to select the horizontal position of the Close button

Normal | Hover

Color: Select the color of the Close button for both the Normal and Hover statesBackground Color:  Choose the background color of the Close button for both the Normal and Hover statesSize: Set the size of the close button

Advanced

Advanced

Show Close Button After (sec): Enter a number of seconds. The close button will only appear after that time has passed.Automatically Close After (ms): Enter the number of ms to wait before automatically closing the popup. Leave blank to disable automatic close.Prevent Closing on Overlay: Select Yes to prevent users from being able to close the popup by clicking on the overlay.Prevent Closing on ESC Key: Select Yes to prevent users from being able to close the popup by pressing the ESC key.Disable Page Scrolling: Select Yes to prevent users from scrolling the page shown behind the popupAvoid Multiple Popups: If the user has seen another popup on the page he visits, hide this popup by selecting YesOpen By Selector: Enter a list of selectors that will manually trigger the popup (CSS IDs, classes or data-elements). See instructionsMargin: Adjust the marginsPadding: Adjust the padding around the popupCSS Classes: Add your custom class without the dot (e.g. my-class)

Custom CSS

Custom CSS: Enter your own CSS

Control Popup via Publish Settings

Set Conditions

Conditions allow you to set on which pages of your website the popup will appear.

Set the conditions that determine where your popup is used (excluding manual triggering). For example, add an Include condition and choose Singular > Front Page to only show the popup on the site』s home page. Learn more about Conditions.

Set Triggers

Triggers are the user actions that cause your campaign to popup. Select Yes or No for each option that will cause the popup to occur.

On Page Load: If set to Yes, set the number of seconds to wait, upon page load, before popup is triggered.On Scroll: If set to Yes, select direction (Up or Down) and the amount to scroll before popup is triggered. Down scroll is based on the percentage of the page scrolled down; Up scroll is based on the number of pixels scrolled up.On Scroll To Element: If set to Yes, enter the Selector name (CSS ID) that will trigger the popup when user scrolls to it. You must add the CSS ID to the Advanced tab of the element as well.On Click: If set to Yes, enter the number of clicks that will trigger the popupAfter Inactivity: If set to Yes, enter the number of seconds of user inactivity that will trigger the popup.On Page Exit Intent: Set to Yes to trigger the popup when user』s mouse activity indicates intent to exit the page

Advanced Rules

Advanced Rules specify other requirements that must be met to generate a popup.

Show after X page views: If set to Yes, set the number of page views before popup is triggered.Show after X sessions: If set to Yes, set the number of user sessions before popup is triggered (a session starts when the user visits the website and ends when the user closes the browser).Show up to X times: Max times the popup will be displayed. If Count is set to On Open, this will only allow the popup to open as many times as the number set. If Count is set to On Close, the popup will only open until the user has closed it for the Xth time, after which it will not open again. This setting is set in the Local Storage and will remain there until deleted.When arriving from specific URL: If set to Yes, Show or Hide the popup if a user arrives from a specific URL (enter the specific URL). Regex is an option for advanced users to set advanced rules for matching URL patterns.Show when arriving from: If set to Yes, show if user arrives from search engines, an external link (enter URL of specific link) and/or an internal link (enter URL of specific link).Hide for logged in users: Set to Yes to hide popup for all logged-in users or from select custom roles. For websites with cache, this feature might not work properlyShow on devices: Set to Yes to choose to show on Desktop, Tablet, and/or Mobile devices

Note: Popups cannot be displayed more than once if the page is not reloaded or re-entered.

Control Popup Via Manual Triggering

Popups can be triggered manually. Dynamic links can use the Popup Action to open or close a Popup. Form can use the Actions After Submit option to open or close a Popup. Any element can use a unique selector (class, ID or data-element) to manually trigger a popup when that element is clicked.

From any link element, choose Dynamic > Actions > Popup. Click Popup to select either Open Popup or Close Popup. If Close Popup is chosen, the option, 「Don』t Show Again」 will become an available option.From an Elementor form, choose Actions After Submit > Add Action > Open Popup or Close PopupFrom a Custom Selector: Any element can have a selector set which can be used as a manual popup trigger. Edit the element and go to Advanced > CSS Classes (or CSS ID) and give the element a class name (without the preceding dot) or ID name (without the preceding #). In the popup』s Conditions, choose the page that includes the element with the unique selector (e.g. Conditions > Include > Singular > Pages > Your Page Title). When a users visits that page, and clicks on the element, the popup will trigger. This is useful for opening a popup from a theme』s navigation menu item, content within a Text Editor widget, from a non-Elementor element or script, etc.

When triggering a popup from a custom selector, please note that the element doesn』t have to be a 「link」. A normally non-clickable element, such as plain text, can be clicked to generate the popup as well. Also note that the Triggers and Advanced Rules will be disregarded while using this option.

Right Click

Starting from Elementor Version 2.1, we transferred all of our editing controls to a new context menu, that appears when you Right Click a Page/Section/Column/Widget handle.

Note: To access the browser』s original right-click functionality click CTRL/CMD + Right Click.

Copy/Paste

When you  Right Click you』ll find the Copy and Paste functions. There are three different types of Copy/Paste:

Copy/Paste Elements – Now you can simply Copy an element (Widget, Column or Section) and Paste it anywhere on the page. When pasting on top of an element, the pasted element will be placed below it.

Tip: Use the shortcut CTRL/CMD + C, and then CTRL/CMD + V, to copy and paste elements.

Copy/Paste Element Style – With Paste Style, you can paste just the style of any element you copy (Widget, Column or Section), then apply it on any other Widget, Column or Section.

Bonus Tip: Use the shortcut SHIFT+CTRL/CMD + C, and then SHIFT+CTRL/CMD + V, to copy and paste style only.

Copy/Paste Between Pages – Copy Paste and Copy Style actually work between pages! You can Copy any Widget, Column or Section, and Paste it on a different page on your site.

Reset Style – You can easily return to the default style settings of every element by right clicking and choosing Reset Style.

Navigator

Navigator is a navigation tree panel providing easy access to every element on the editor with just one click. Navigator enables the user to drag elements throughout the page and edit them, quickly and easily. Click to learn more

Right Click – Page Level

Right Click anywhere on the drop area, will get you these Page–level options:

Copy All Content – You can copy the entire page content and paste it to a different page.Delete All Content – The 『Delete All Content』 option moved into the Page Level Right Click.

Elementor drop area

Right Click on Mac

Go to the settings of the mouseModify the right click option and choose 「Secondary click」

Tip: If the secondary click solution doesn』t work, you can always click to 「Show Handles」 in the Elementor Settings > Advanced > Editing Handles

Gallery Widget (Pro)

The Image Gallery widget allows you to easily add and style complex and beautiful image galleries on your page.

Content

Settings

Type: Select type of gallery, choosing from Single or Multiple. Multiple allows you to have a filterable portfolio-style gallery of images. Add Images: Choose multiple images from the media library to insert into your gallery and type a Title for the gallery.Order By: Choose Default or Random orderLazy-Load: Set to Yes to use Lazy Load to improve loading speed.Layout: Select from Grid, Justified, or Masonry.The Grid is based on an aspect ratio of your choosing. Justified lets you set the height for each row, and adjusts to different widths per image. Masonry maintains the same image width and adjust to varying heights.Columns: Set how many columns will be displayed per row, from 1 to 24. Not available if Justified Layout is chosen.Row Height: Set the height of each row, in pixels. Only available if Justified Layout is chosen.Spacing: Control the amount of space between each image in a row.Link: Set the link for the images to None, Media File, or Custom URLAspect Ratio: Choose the Aspect Ratio, selecting from 1:1, 3:2, 4:3, 9:16, 16:9, and 21:9. Only available for Grid layout. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size.

If Type: Multiple is chosen, the following Filter Bar additional options become available:

Filter Bar (only available if Multiple type is chosen)

「All」 Filter: Select Yes to include the 「All」 filter, or No to exclude it.「All」 Filter Label: If set to Yes, enter the desired label. 「All」 is default.Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.Animation: Set the Pointer』s animation style. Choose from Fade, Slide, Grow, Drop In, Drop Out, or None.

Overlay

Background: Select Yes to have an overlay appear upon hovering over each image, or No for no overlay.Title: Choose which meta attribute to display as the overlay』s Title. Select from the image』s Title, Caption, Alt, Description, or None.Description: Choose which meta attribute to display as the overlay』s Description. Select from the image』s Title, Caption, Alt, Description, or None.

Style

Image

Border Color: Choose the color of the image border, for Normal and Hover statesBorder Width: Choose the thickness of the border for Normal state only.Border Radius: Control the corner roundness of the image border, for Normal and Hover states.CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast and Saturation for Normal and Hover states.Hover Animation: Choose the animation of the image upon hover, selecting from None, Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down, for Normal and Hover states.Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Overlay

Overlay: Select the type of Overlay (Classic or Gradient) for the images』 Normal and Hover states.Color: Set the Overlay color or gradient colors for the images』 Normal and Hover states.Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demoHover Animation: Choose the overlay』s Entrance or Exit animation upon hover. Select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. If Entrance Animation is chosen, images are shown full opacity in Normal state, with the overlay covering the image upon hover. If Exit Animation is chosen, the overlay covers the image in the Normal state, and is removed upon hover.Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Content

Alignment: Align the content to the left, right, or centerVertical Position: Align the content to the top, middle, or bottomPadding: Adjust the content』s padding

Title

Color: Choose the Title』s colorTypography: Set the typography options for the TitleSpacing: Set the amount of space between the Title and the Description

Description

Color: Choose the Description』s colorTypography: Set the typography options for the Description

Hover Animation: Choose the content』s Entrance, Reaction, or Exit Animation upon hover. For Entrance Animation, select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. For Reaction Animation, select from Grow, Shrink, Move Left, Move Right, Move Up, or Move Down. For Exit Animation, select from Slide Out Right, Slide Out Left, Slide Out Up, Slide Out Down, Zoom In, Zoom Out, and Fade Out.Animation Duration: Set the amount of time the animation takes, in milliseconds.Sequenced Animation: Set to Yes to have Title and Description animate in sequence. Set to No to have Title and Description animate at the same time.

Filter Bar 

These Filter Bar additional options become available only if Type: Multiple was chosen.

Text Color: Choose the color of the Filter bar text for Normal, Hover, and Active states.Typography: Set the typography options for the Filter bar text.Pointer Color: Choose the color of the Filter bar pointer. Only available in Hover or Active states.Pointer Width: Select the thickness of the pointer.Space Between: Control the amount of space between Filter text items.Gap: Control the amount of space between the Filter text and the gallery images.

Advanced

Set the Advanced options that are applicable to this widget

What Is The Difference Between Conditions, Triggers, and Advanced Rules?

You have precise control over when and where popups are displayed through the use of Conditions, Triggers, and Advanced Rules.

Conditions –> Where to popupTriggers –> When to popup based on user-specific actionsAdvanced Rules –> When to popup based on non-user-specific actions

Conditions control where (on which pages) popups occur. Typical conditions might be to only popup on the front page, or to popup on every page of the entire site, or to only popup on a specific category or tag, etc.

Triggers define specific actions users take that will automatically generate a popup. Typical triggers include when a user scrolls, when a user clicks, when a user intends to exit the page, or when a user』s interaction with the page is inactive for a period of time.

Advanced Rules specify other requirements that must be met to generate a popup. Typical advanced rules include popping up after a certain number of visits, when arriving from a particular URL, or only on specific devices.

Elementor Integration With Toolset

Why use Elementor with Toolset

Toolset brings limitless possibilities for adding extra data to WordPress content by creating custom fields. Elementor allows you to dynamically insert the Toolset custom field data directly into your Elementor designs with all the styling options you』ve come to expect from Elementor.

How To Add Toolset Custom Fields To A Single Post Template

Go to Templates > Theme Builder > Single > Add NewChoose Template Type > Single. Name your template and click Create TemplateClick on the Document Settings gear icon located at the bottom left of the panelClick the Preview Settings tabUnder Preview Dynamic Content select the post type you wish to previewDrag a widget that makes use of dynamic content (e.g. Text widget)Click on the Dynamic icon Choose Toolset FieldOnce selected, click again on Toolset FieldIn Settings > Key, select the custom field you want to display.The options in the Advanced tab are optional. Options include:Before: Text to automatically appear before the custom field dataFallback: Text to display if custom field has no dataAfter: Text to automatically appear after the custom field dataStyle the custom field widget as you would normally, using the widget』s Style tab.

Custom Toolset fields we support:

Note: Any Toolset fields not included in this list are not supported at this time

Text:

『textfield』,『phone』,『textarea』,『checkbox』,『select』,『numeric』,』email』,』embed』,『google_address』,『wysiwyg』,『radio』

URL:

』email』,『image』,『file』,『audio』,『url』

Date: date

image: image:single

gallery: image:multiple

Example of use

Team Members

A corporate website may want to display a list of team members. Toolset could be used to set up several custom fields, including Job Title, Email Address, and Telephone Number. Toolset makes it easy to add this data to each team member』s listing, while Elementor brings the magic needed to beautifully display the data on the front end.

Real Estate Listings

Real estate websites commonly need to use custom fields to allow them to display real estate listings, which must display data such as Number of Bedrooms, Number of Baths, Size of Home, and Price. With Elementor』s integration with Toolset, this data can be stylishly displayed on each listing, with no coding required.

Elementor Integration With ACF

Why use Elementor with ACF

Advanced Custom Fields (ACF) brings limitless possibilities for adding extra data to WordPress content by creating custom fields. Elementor allows you to dynamically insert the ACF custom field data directly into your Elementor designs with all the styling options you』ve come to expect from Elementor.

Note: Elementor officially supports ACF 5 and up.

How To Add ACF To a Single Post Template

Go to Elementor > My Templates > Add NewChoose Template Type > Single. Name your template and click Create TemplateClick on the Document Settings gear icon located at the bottom left of the panelClick the Preview Settings tabUnder Preview Dynamic Content select the post type you wish to previewDrag a widget that makes use of dynamic content (e.g. Text widget)Click on the Dynamic icon Choose ACF FieldOnce selected, click again on ACF FieldIn Settings > Key, select the custom field you want to display.The options in the Advanced tab are optional. Options include:Before: Text to automatically appear before the custom field dataFallback: Text to display if custom field has no dataAfter: Text to automatically appear after the custom field dataStyle the custom field widget as you would normally, using the widget』s Style tab.

Custom ACF fields we support:

Note: Any ACF fields not included in this list, such as repeater fields, are not supported at this time.

Text:

『text』, 『textarea』, 『number』, 『email』, 『password』, 『wysiwyg』, 『select』, 『checkbox』, 『radio』, 『true_false』,

Pro『oembed』, 『google_map』, 『date_picker』, 『time_picker』, 『color_picker』 『date』 『date_time_picker』

URL:

『email』, 『image』, 『text, 『file』, 『page_link』, 『post_object』, 『relationship』, 『taxonomy』, 『Url』

Image:

『image』 『gallery』

Examples of use

Movie Review Website

A movie review website might use ACF to set up several custom fields, including Director, Year, Genre, Rating, etc. ACF makes it easy to add this data to each movie review, while Elementor brings the magic needed to beautifully display the data on the front end.

Watch a video tutorial showing an example of creating a movie review website with ACF and Elementor.

Real Estate Listings

Real estate websites commonly need to use custom fields to allow them to display real estate listings, which must display data such as Number of Bedrooms, Number of Baths, Size of Home, and Price. With Elementor』s integration with ACF, this data can be stylishly displayed on each listing, with no coding required.

Watch a step-by-step tutorial to learn how to create a dynamic real estate site using ACF and Elementor.

Hover Animations

The Hover Animations feature lets you animate elements on your WordPress website. Among the various animations available are grow, shrink, pulse, push, pop, bounce, rotate, float, sink, bob, hang, skew, wobble, and buzz.

Global Colors

Create your own design system with global colors and text styles that can easily be assigned to elements across your site.

Global Colors

Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors from Elementor』s Global Settings.

Global

Predefined Global Colors

By default, the predefined colors ( Primary, Secondary, Text and Accent) are pre-populated from your theme』s CSS.  Change them here to override your theme』s settings. Learn which elements are impacted by the default color palette.

New Global Colors

In addition to the 4 predefined global colors (Primary, Secondary, Text, and Accent), you can add any colors you choose to the global palette, for use in any Elementor color options.

Inline Custom Colors

You can also select any custom color to be used inline without adding it to the global colors palette.

From any Elementor page or post, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Global Style > Global Settings > Colors & Typography.

Edit Color: Click the color swatch to select a new color for any existing color. The names can also be changed. Click the color』s name to change the name. For example, you could change Primary to Main, Accent to Highlight, etc.Add Color: Click Add Color button to add a new global or inline custom colorDelete Color: Hover over the color swatch and click the trash can icon that appears.

Note: By deleting a global color, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.

Is There a White Label Option?

We currently don』t have plans to create a white label option for Elementor. 

Maybe one will be available in the future. In any case, Elementor is only visible on the site admin or if a user inspects the source code of a page. Your visitors won』t see any trace of Elementor on the frontend live view of a page.