Author 诗语

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 Install Elementor Website Builder

From the WordPress Dashboard, click Plugins > Add New.In the Search field, enter Elementor and choose Elementor website builder to install.After installation, click Activate.

Can I Use Elementor Pro to Create Websites for Clients?

Sure you can! We』ve deliberately built Elementor Pro to help you get more clients, by completing projects faster with better results. 

According to our terms, this license does not give you the rights to resell Elementor Pro. It only gives you the right to install it on the websites of your clients so that you can build pages.

Animated Headline (Pro)

The Animated Headline widget allows you to create attention grabbing headlines that either rotate or include highlighted animation.

Content

Headline

Style: Choose Highlighted or Rotating style

If Highlighted style is chosen, the following options become available:

Shape: Choose the shape of the highlight, including Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and XBefore Text: Type the headline text that will appear before the highlighted textHighlighted Text: Type the text that will be highlightedAfter Text: Type the headline text that will appear after the highlighted textInfinite Loop: Set to Yes to have the animation loop endlessly or set to No to have it only play once and then remain frozen at the end of the animation.Duration: Set the amount of time in milliseconds that the animation takes for one loop.Delay: If Infinite Loop is set to Yes, this option becomes available. Set the amount of time in milliseconds between each loop.Link: Enter the URL for the item』s link. Click the Link Options cog  to set more link options.Alignment: Set the alignment of the headline, Left, Center, or RightHTML Tag: Set the heading』s HTML tag to H1- H6, Div, Span or Paragraph

If Rotating style is chosen, the following options become available:

Animation: Choose the animation of the rotating text including Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, and Slide DownBefore Text: Type the headline text that will appear before the rotating textRotating Text: Enter the list of rotating text, in the order of rotationAfter Text: Type the headline text that will appear after the rotating textInfinite Loop: Set to Yes to have the animation loop endlessly or set to No to have it only play once and then remain frozen at the end of the animation.Duration: Set the amount of time in milliseconds that the animation takes for one loop.Link: Enter the URL for the item』s link. Click the Link Options cog  to set more link options.Alignment: Set the alignment of the headline, Left, Center, or RightHTML Tag: Set the heading』s HTML tag to H1- H6, Div, Span or Paragraph

Style

Shape (option only available if Highlighted type is chosen)

Color: Choose the color of the highlighted shapeWidth: Set the width of the highlighted shapeBring to Front: Slide to Yes to Bring the shape to the frontRounded Edges: Slide to Yes to round the edges of the shape

Headline

Text Color: Choose the color of the headline』s before and after textTypography: Set the typography options for the headline』s before and after text

Animated Text

Text Color: Choose the color of the animated textTypography: Set the typography options for the headline』s animated text

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Animated Headline widget

Elementor Debugger

The Elementor Debugger is a useful tool which helps you understand how a page has been built and more exactly it shows you which template of the builder is assigned to the page you are consulting. Learn more about Elementor』s Theme Builder templates.

To activate it/deactivate it, go to the tools of Elementor on your WordPress Dashboard.

The Elementor Debugger is located next to the 「edit with Elementor button」 on the front end and looks like this:

The example above shows an author.php page. As you can see, the Elementor Debugger gives information about the Header assigned to the page (its header template is called 「header with Nav Menu widget」), the Footer (「New footer with global widget」) and the template assigned to the page (「New Archive」).

「Skipped, is not Published」: means that there is a Header template in 「my templates」 which is saved as a draft and which is not assigned to this page.

「no templates for conditions」: If you see this message that means that no template was assigned to the content of the specific page/post.

」 Template File: Location Settings (Override) > Elementor – header-footer.php: This means that the Footer and the Header of the theme have been overridden by Elementor.

If you are a developer and you want to create new locations, please refer to this guide.

Note:

When you hover over the button 「Edit with Elementor」 on the frontend, it gives you details about the current structure of the page. In the example above, you can see that there is a Header template assigned to this page called 「header with Nav Menu」, an archive template called 「New archive」 and a footer called 「New footer with global」.

This can help you when you need to remember how you built each part of the page.

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.

The Publish / Update Button Does Not Work

If you receive an error 500 or a Server Error, you need to check your PHP server logs to troubleshoot the issue. Very often, this happens due to lack of memory, however, there are other circumstances that could cause this, and only the server logs can point to the exact reason. You can ask your hosting company to send you the PHP error logs of your server. When you experience this issue, one of these solutions might help:

Erase some sections in the page that you are trying to save and see if it enables you to perform the action (you can retrieve them by using the revision history of Elementor). Increase the WP memory limit. You can fit the memory limit to our requirements and activate the debug mode of WordPress to check how many MB you need exactly. Although you can do it by yourself, it is preferable to contact your hosting provider for further assistance. Decrease or clear the number of post revisions that are stored in the database. If the host does not provide enough memory to handle the save function when there are many revisions stored, the error may occur. Numerous plugins are available to help with this, such as WP Sweep.If the issue still occurs after increasing the memory, divide your work into a few templates and paste them into another page. Sometimes, saving issues can happen when the admin-ajax.php script timeouts. You can know if it is the issue by checking the error messages appearing in your browser console. The error message, in this case, is Failed to load resource: the server responded with a status of 413. When you experience this problem, add the following directives to your .htaccess file to increase the dynamic timeout:  

SetEnvIf Request_URI "admin-ajax.php" DynamicTimeout=150

This can also be due to parameters set on your server. For instance, HTTP/HTTPS conflicts. Adding an SSL certification to your site can solve the issue. Then you will have to change the URL of the site from your WP Dashboard in Elementor > Tools > Replace URL.403 error when attempting to update a page: This can be due to a security plugin such as WordFence and others. To sort this out, activate the learning mode of this plugin or contact their support. This issue can also be due to the firewall of your server so this has to be checked with your hosting company.

If the aforementioned troubleshooting procedure doesn』t help you, please send us your system info so we can try to help you solve the problem.

Creating a Single Post Template with Elementor Pro

When you use a theme for your website, you get your theme』s Single Post Template.

It』s made out of different elements: a Post Title, Post Content, a Featured Image, Metadata, Comments, etc.

With Elementor you can control the Layout & Design of the Single Post Template – on any theme.

Under Templates > Add New, from the dropdown select Single Post, give it a name, and click Create Template.Choose a Post Block and Insert. Alternatively, you can design your own.Click the gear icon in the lower left corner of the widget panel to select a specific post as the preview example while editing.Edit any elements as you』d like. After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Templates > Add New

Choose Template Type

Select from the Templates Library and Insert

Choose which post to preview while editing

Edit any elements needed, then Publish and set Display Conditions

To view an in-depth video on how to create a single post template click here. Read more in our step-by-step how to build a single template tutorial.

Only posts that use the Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Posts that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

How to Create, Edit, & Style Columns in Elementor

Columns can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.

Right-Click Options

If you wish to add a new column or duplicate a column, right-click a column handle and choose either Add New Column or Duplicate from the context menu. You can also copy and paste a column into another section using Copy and Paste options here, or you can copy and paste only the style (without the content) from one column to another. Clicking Navigator here will open the Navigator already set to that particular column. And of course, clicking Delete here will delete the column.

If you click Edit Column, the column』s options will be displayed in the Elementor Panel to the left with all of the following options available to you.

Layout

Column Width (%): Set your Columns WidthVertical Align: Set your Column Content』s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle of the top, or 「stretch to fill」 to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space EvenlyHorizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space EvenlyHTML Tag: Set an HTML Tag for your column. Learn more about HTML Tags

Space Definitions

Space Between – Widgets start and end at the edge of the column, with equal space between themSpace Around – Widgets are spaced equally, and the edges are half the size of the space between widgetsSpace Evenly – Widgets have equal space between, before and after them

Style

Background

Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), or an image Slideshow background.

Background Overlay (available if a Background Type is chosen)

Background Type: Choose between Classic or GradientBlend Mode: Set a Blend ModeCSS Filters: Add Blur, Brightness, Contrast, and Saturation

Border

Border Type: Set a Border TypeBorder Radius: Set your Border RadiusBox Shadow: Add a Box Shadow

Typography

Set Typography Colors for the section

Note: The 『Set Typography』 colors won』t work if Default Colors are enabled.

Advanced

Advanced

Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance AnimationCSS ID: Set a CSS ID for your columnCSS Classes: Set CSS Classes for your columnResponsive: Show or Hide column on Desktop, Tablet, or Mobile

Attributes (Pro only)

Add your own custom attributes. Learn more about Custom Attributes

Motion Effects (Pro users only)

Scrolling Effects: Set to On, several additional options become available. Set Vertical, Horizontal, Transparency, Blur, Rotate, and Scale scrolling effects. You can apply each of these effects to different devices (desktop, tablet, or mobile), and make the effects relative to the viewport or the entire page. Click the Pencil icon next to an effect to set its options.Mouse Effects: Set to On, additional options become available. Set the Mouse Track effect or the 3D Tilt effect. Click the Pencil icon next to an effect to set its options.Entrance Animation: Set the column』s entrance animation. As the visitor scrolls down the page, the column will appear with an entrance animation of your choice, such as Fading In, Zooming In, Bouncing In, etc.

Responsive

Reverse Columns: Slide to reverse your columns order (Great for Mobile)Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Custom CSS (Pro only)

Add your own custom CSS. Learn more about Custom CSS

Motion Effects

Motion Effects are a powerful set of controls for adding beautiful transitions and animations to your design.

Until now, web designers who wanted to incorporate animations and motion effects needed to use either external libraries and or custom code.

Elementor Pro 2.5 offers an all-in-one solution for creating parallax, animations and other motion effects – all seamlessly integrated into the Elementor editor.

Scrolling Effects

Use Scrolling Effects to create amazing animations and interactions when the user scrolls through the page. Here』s a list of the scrolling effects:

Vertical Scroll

This is the classic parallax effect you』ve been waiting for. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.

Horizontal Scroll

Horizontal scroll means when the visitor scrolls up and down, the element moves right and left accordingly. An example of use – a section with clouds that moves to the right when the visitor scrolls down.

Transparency

Transparency lets you gradually make elements more transparent or more visible in correlation to the visitor』s scroll. An example is having a title appear and then dissolve in accordance with the scroll.

There are 4 possible effect directions:

Fade in – Meaning the element starts as transparent and gradually becomes visible.

Fade out – The element starts as visible and gradually becomes transparent.

Fade out in – The element starts as visible, then fades out, then becomes visible again.

Fade in out – The element starts as transparent, then becomes visible, then transparent again.

Blur

This setting is similar to Transparency, only instead of transparency, the element gets blurred. A good example is background images, that get proper focus only when the user scrolls down.

Rotate

Here, the element rotates as you scroll. A nice example is seen in the rotation of stars in the image below:

Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales or rotates. If you set orientation left-top, the rotation will happen around the left-top point of the element. If you set orientation center-center, the rotation will rotate around its center, like a wheel. This setting is relevant only to the above 『Rotate』 effect as well as the 『Scale』 effect listed below.

Scale

Scale lets you grow and shrink elements according to scroll. Example: A background that grows while scrolling.

Note: Use the 『 Apply effects on 』 to determine if motion effects are applied on mobile, desktop or tablet. Mouse effects will only affect desktop devices.

Mouse Effects

Mouse Track

Create a sense of depth by making elements move in relation to the visitor』s mouse movement.

3D Tilt

Similarly to how Mouse Track moves the element in relation to the mouse movement, the 3D Tilt effect tilts the element according to the same movement of the cursor.

Motion Effects Browser Compatibility

ChromeFirefoxSafariOperaEdgeInternet ExplorerSupportedSupportedSupportedSupportedSupported *Not Supported

* Slightly laggy behavior

Note: Elementor respects the 「reduced motion property」 preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:

Mac: 「System Preferences > Accessibility > Display」 and check/un-check the box for 「Reduce motion」iOS: 「Settings > General > Accessibility」 and turn on/off 「Reduce Motion」Windows 10: 「Settings > Ease of Access > Display > Simplify and personalise Windows」

Note: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references 「maximum call stack size exceeded」. To resolve the issue, either remove entrance animations from widgets with motion effects and/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated.