Author 诗语

Using Elementor』s Canvas Page Template

The Canvas Page Template removes your Header and Footer and Sidebars.

This is great for creating specific pages inside your website, pages such as: landing pages, coming soon pages, maintenance mode pages etc.

Create a New Page, and Edit with Elementor.Click on the settings icon   on the Left side, and under Page Layout look for the Elementor Canvas option

How To Set A Default Page Layout

If you would like to set a default page layout across your entire site, do the following:

Click the Hamburger Menu in the Widget PanelClick Site SettingsClick LayoutChoose the Default Page Layout that you wish to set as the default layout across the site

Using Elementor』s Full Width Page Template

The full width page template allows you to override the default page width and use a full width design on any theme.

Create a New Page, and Edit with Elementor.Click on the settings icon   on the Left side, and under Page Layout look for the Elementor Full Width option

How To Set A Default Page Layout

If you would like to set a default page layout across your entire site, do the following:

Click the Hamburger Menu in the Widget PanelClick Site SettingsClick LayoutChoose the Default Page Layout that you wish to set as the default layout across the site

Elementor Pro Affiliate Program

Elementor Pro has one of the best affiliate programs for WordPress, offering 50% commissions per sale. Having said that, the program is strictly opened for premium and trustworthy affiliates.

To get in, you must first be registered with Elementor.

Next, sign up to the affiliate program.

After you fill in your details, we will review your application.

Rollback To a Previous Version of Elementor

If you are experiencing an issue with your current version of Elementor, this tool enables you to roll back to a previous version before the issue appeared.

Go to > ToolsClick the Version Control tabIf you are rolling back the free version of Elementor, select the version you would like to revert to, and then click its Reinstall button. This will reinstall the specific version you chose. If you are rolling back Elementor Pro, just click its Reinstall button. This will reinstall the last version prior to the installed one.

Important! Always backup your database before making changes such as rolling back.

Search Form Widget

The Search Form widget allows you to add a search bar anywhere on your website.

Content

Search Form

Skin: Choose classic, minimal or full-screen pre-built stylesPlaceholder: Set the text that appears inside the search form

Full-screen shows only a small button which opens the search form as a lightbox popup

Button or Toggle

Type: Choose to display an Icon or Custom Text on the buttonIcon or Text: If using an icon on the button, choose from a search or arrow icon. If using custom text, specify the text that will appear on the buttonSize: Adjust the size of the button or search iconAlignment (for full-screen skin only): Align the search icon to the left, center, or righ

Style

Input

Overlay Color (for Full Screen skin only): Select the color of the full screen overlayTypography: Change the typography options of the search bar for both normal and focused modesText color: Choose the color of the textBackground color: Choose the background colorBorder color: Choose the border colorBox-shadow: Give the search bar a box shadowBorder size: Control the thickness of the borderBorder radius:  Set the border radius to control corner roundness

Button or Toggle

Text color: Choose the color of the textBackground color: Choose the background color of the buttonIcon size: Scale the icon size up and downWidth: Adjust the width of the buttonBorder Width: Control the thickness of the borderBorder Radius: Set the border radius to control corner roundness

Note: The Search Form widget uses standard WordPress site search functionality. It does not include a typeahead / autocomplete feature.

Advanced

Set the Advanced options that are applicable to this widget

Creating a Blog or any Archive Template with Elementor Pro

When you visit a site』s blog and see a list of published articles, you』re actually viewing an Archive page. Archives have different terms that you can use to filter them, terms you』re familiar with: Author, Date, Category, Search results, Recent posts, Tags or any other taxonomy.

Before we begin with the Elementor steps, keep in mind that WordPress plays a significant role in the Blog archive page creation. You should first publish a blank page within the normal WordPress Add Page interface (call it Blog if you』d like), and then once you』ve published that blank page, go to Settings > Reading. Now choose the page you just published in the Posts Page dropdown as shown below.

Tip: You can use the standard WordPress editor (either Classic or Gutenberg) to write your posts. You don』t have to use Elementor to write the actual content, although you can if you』d like, of course. But many people prefer to write posts the standard WordPress way, since they often don』t need the advanced layout features for a simple, straightforward blog post. No matter which way you decide to write the actual blog post content, the Elementor Archive Template will give you all the freedom you need to layout and design the Blog Archive page.

Now let』s move on with the steps to take with Elementor!

Under Templates > Theme Builder > Archive > Add New, select Archive from the dropdown and click Create Template.Choose an Archive 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 archive 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 (Archive)

Select from the Templates Library and Insert

Choose which archives to preview while editing

Edit any elements needed, then Publish and set Display Conditions

Tip: You can create dynamic archive templates by using ACF to add custom fields to your taxonomies such as your categories and tags, and then you can display those taxonomy custom fields on your archive pages. In this way, you can dynamically set the surrounding layout. For example, if you create a custom image field for each of your categories, then your archive template could display a unique banner image for each category.

Note: If you have created a custom post type using a plugin such as CPT UI, be sure to change 『Has Archive』 from false to true so you can build an archive for this custom post type. If you』ve hand-coded the function yourself, be sure to set the parameter has_archive to true.

Note: Elementor』s Archive Templates remove theme sidebars by default. Theme developers can overcome this by using Elementor』s Theme Locations API within their themes.

Yoast SEO Integration with Elementor

Yoast, the leading WordPress SEO plugin, is seamlessly integrated in Elementor, allowing you to access and modify your page』s SEO settings without leaving Elementor, for a more efficient workflow. The same features that have always been available in the WordPress editor are now available right within the Elementor Panel.

You can access your page』s Yoast analytics in either of two ways. Either click the Hamburger Menu in the upper left corner of the Elementor Panel and choose the Yoast SEO tab, or click the gear icon in the lower left corner of the Elementor Panel and choose the Yoast SEO tab.

Focus Keyphrase

The Focus keyphrase is the main keyword or phrase that you most wish to have rank well in search engines. Enter one phrase here. This phrase will be used in the SEO analysis tab. If you wish, you can also search for related keyphrases with the SEMrush integration by clicking the optional Get related keyphrases button. If you choose to use this feature, you will need to log into your SEMrush account in the popup that appears.

Note: Most options include a help icon, which you can click for detailed information about that option.

Readability Analysis

The Readability Analysis option uses an algorithm to judge the readability of the page or post content. It highlights problem areas and gives you actionable suggestions to fix your content.

SEO Analysis

The SEO Analysis option uses your selected Focus keyphrase to make suggestions to improve the content, such as internal links, the meta description, and more. You can use these suggestions to make changes right in the Elementor Editor. The analysis is done in real-time, and the changes are reflected in the sidebar. 

+ Add Related Keyphrase

If you are a Yoast SEO Premium user, you』ll find premium features, such as Add related keyphrase, which lets you focus on more than one keyphrase, here, and throughout the other options in the sidebar.

Google Preview

The Google Preview option lets you change the way your preview displays on Google. You can update the SEO Title, Slug, and Meta Description, as well as preview it on Mobile or Desktop.

Facebook Preview

The Facebook Preview option lets you customize the content displayed when sharing on Facebook. You can manage the preview image, as well as the Facebook title and description.

Twitter Preview

The Twitter Preview option lets you customize the content displayed for this page or post when sharing on Twitter. You can manage the preview image, as well as the Twitter title and description.

Schema

The Schema option helps search engines better understand your website and its content.

Select your Page type here.

Advanced

The Advanced options are for more experienced users, and includes the ability to choose from the following settings: to allow search engine to show this page in search results, to direct search engines whether they should follow links on this page, and to set advanced meta robots and canonical URL options.

Cornerstone Content

The Cornerstone Content option allows you to mark this page as one of the most important and extensive articles on your site. Turn this off or on for this specific page here.

Settings

General

Post Types: Choose where Elementor can be used. If checked, the Edit with Elementor button will be available for that post type. If unchecked, the post type cannot be edited with Elementor.Disable Default Colors: Choose whether to use your theme』s color settings or let Elementor control itDisable Default Fonts: Choose whether to use your theme』s typography settings or let Elementor control itImprove Elementor > Usage Data Tracking: By enabling this, you will help us learn about the way you are using Elementor and help us improve

Style

The Style settings that used to be here have changed its location and can now be found within Elementor Editor』s Panel > Hamburger Menu > Site Settings. You can use the Site Settings to make changes and see them live!

Integrations

The Integrations settings allow you to optionally connect Elementor with 3rd-party APIs as needed.

reCAPTCHA: reCAPTCHA is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key herereCAPTCHA v3: reCAPTCHA v3 is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key here and enter your Score Threshold. The Score threshold should be a value between 0 and 1. The default is 0.5Facebook SDK: Facebook SDK lets you connect to your dedicated application so you can track the Facebook Widgets analytics on your site. Enter your APP ID hereMailchimp: Enter your API Key and then click the Validate API Key button to integrate Mailchimp with Elementor』s Form widgetDrip: Enter your API Token and then click the Validate API Token button to integrate Drip with Elementor』s Form widgetActiveCampaign: Enter your API Key and API URL and then click the Validate API Key button to integrate ActiveCampaign with Elementor』s Form widgetGetResponse: Enter your API Key and then click the Validate API Key button to integrate GetResponse with Elementor』s Form widgetConvertKit: Enter your API Key and then click the Validate API Key button to integrate ConvertKit with Elementor』s Form widgetMailerLite: Enter your API Key and then click the Validate API Key button to integrate MailerLite with Elementor』s Form widgetWoocommerce Mini Cart Template: Set to Disable in order to use your theme』s or WooCommerce』s mini cart template instead of Elementor』sTypeKit: Integrates TypeKit』s thousands of fonts into Elementor. Enter your TypeKit Project ID and then click the Get Project ID buttonFont Awesome Pro: Enter your Font Awesome Pro Kit ID and then click the Validate Kit ID button

Advanced

CSS Print Method: Choose if your CSS will be included as an independent stylesheet (recommended) or on each pageSwitch Editor Loader Method: In cases of server configuration conflicts, enable this option*Editing Handles: Show or hide editing handles when hovering over the element』s edit buttonEnable Unfiltered File Uploads: Enable or disable the ability to upload SVG, JSON, and other unfiltered files. Please note! Allowing uploads of any files (SVG and JSON included) is a potential security risk. Elementor will try to sanitize the unfiltered files, removing potential malicious code and scripts, however, we recommend you only enable this feature if you understand the security risks involved.Optimized DOM Output: Select Enable to use the optimized DOM output, which removes several HTML wrappers from output. By default, this is only enabled on new sites created with Elementor 3.0+. Sites upgraded to 3.0 from a previous version should be set to Disable by default to avoid causing site layouts breaking.Load Font Awesome 4 Support: Choose Yes or No. Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library.

* Switch Editor Loader Method is useful in solving the 「err_content_decoding_failed」 and err_empty_response」 issues that sometimes occur. Enabling this option helps users running sites on servers with low resources which have difficulty reading long JSON code. When enabled, the tool splits the lines so that these servers can read the JSON code without issues. Switching to this method won』t negatively affect performance. Instead, it will likely improve performance. This tool can also be useful sometimes in solving the white screen of death.

Section Overview

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

Right-Click Options

If you wish to duplicate a section, right-click a section handle and choose Duplicate from the context menu. You can also copy and paste a section elsewhere using Copy and Paste options here, or you can copy and paste only the style (without the content) from one section to another. Click Save as Template to save the section as a template that can be inserted anywhere later. Clicking Navigator here will open the Navigator already set to that particular section. And of course, clicking Delete here will delete the section.

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

Layout

Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed – use the slider to set your widthColumns Gap: Set your Columns GapHeight: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section heightVertical Align: Set your Section content』s vertical alignmentOverflow: Select how to handle content that overflows its container. Default allows the overflow. Select Hidden to hide the overflowing content.Stretch Section: Force the Section to stretch to the full width of the pageHTML Tag: Set an HTML Tag for your section. Learn more about HTML Tags

Style

Background (Normal & Hover)

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

Background Overlay (Normal & Hover)

Background Type: Choose between Classic or GradientBlend Mode: Set a Blend Mode

Border (Normal & Hover)

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

Shape Divider (Normal & Hover)

Type: Click the dropdown to choose your Shape Divider styleColor: Pick a colorWidth: Set the width of your Shape DividerHeight: Set the height of your Shape DividerFlip: Flip the direction of your Shape DividerBring to Front: Force your Shape Divider to be in front of other objects

Learn more about Shape Divider

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-IndexCSS ID: Set an CSS ID for your sectionCSS Classes: Set CSS Classes for your section

Motion Effects (Pro users only)

Sticky: Set your section as Sticky, and choose between Top or Bottom. Learn more about StickyScrolling Effects: Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling EffectsEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation

Responsive

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

Attributes (Pro only)

Add your own custom attributes. Learn more about Custom Attributes

Custom CSS (Pro only)

Add your own custom CSS

Get more details about the structure and layout of the Elementor Editor.

Which Elements Are Impacted By The Default Color Palette

There are four Default Colors: Primary, Secondary, Text, and Accent. The following examples show where they are typically used.

Primary Colors are used for Headings and Icons.Secondary Colors are used for List Items, Subheadings, Animated Headings, and Price Table backgrounds.Text Colors are used for Paragraphs and Menu itemsAccent Colors are used for Links, Button backgrounds, Tab and Accordion headings, and Badges

Each of the colors will be used in various widgets in ways similar to the examples above. Below are some color examples to help visualize the areas in which each color is used.

Primary Color Examples

Secondary Color Examples

Text Color Examples

Accent Color Examples

How Default Colors Are Used In Posts Widget