Author 诗语

How To Add A Back To Top Button Using Elementor

Click the section handle of the first section on your page to enter its settingsOn the section』s Advanced tab, enter a name into the CSS ID field, such as 『top』Drag the Button widget onto your page, wherever you』d like to place itType Top in the button』s text fieldType #top in the Link field, or whichever CSS ID you chose in step number 2. (Make sure to place a # sign before the CSS ID with no spaces between, in this step. However, do not place a # sign in step 2).

Clicking your Top button will now bring the user to the top section.

Tip: You can stick the button to the bottom of the page with Elementor Pro』s Sticky Scrolling Effect

Scrolling Effects – Blur

Blur lets you gradually cause elements to go from clear to blurry in correlation to the visitor』s scroll. An example is having a background image appear and then dissolve in accordance with the scroll.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONBlur: Click pencil edit iconDirection: Choose one of 4 possible effect directions:Fade In – The element starts as blurry and gradually becomes clear, based on the level and viewport settings.Fade Out – The element starts as clear and gradually becomes blurry, based on the level and viewport settings.Fade Out In – The element starts as clear, then fades out to blurry, then becomes clear again, based on the level and viewport settings.Fade In Out – The element starts as blurry, then becomes clear, then blurry again, based on the level and viewport settingsLevel: Set the desired peak blur level from 0 to 10Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devicesEffects Relative To: Choose from Default, Viewport, or Entire Page

Tip: Try the following scenario. Set the Direction as Fade In Out.  Set the viewport between 30-60, and notice what happens: the heading starts off in focus, reaches peak Blur level at 30%, stays the same until 60%, and fades out until the end of the screen.

There Are Red Circles That Prevent Me From Editing. Can』t drag and drop.

If you cannot drag and drop, this is generally due to the use of Internet Explorer or older versions of Microsoft Edge to edit with Elementor. 

It is not possible to edit with older versions of Microsoft browsers. Please edit Elementor pages with Safari, Chrome, Firefox, or Microsoft Edge, version 79 or greater. Microsoft』s newest version of  Edge, which was first released in January of 2020 is now based on Chromium (which Google Chrome is also based on), and therefore it is now compatible with editing with Elementor. 

Of course, pages built with Elementor do show up in the browsers of Microsoft on the front end.

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

Elementor 2.2 – Overview

The new Elementor 2.2 includes some new great features, as well as a name change to an existing Elementor widget.

Navigator

Navigator is a navigation tree window that provides easy access to every element in the editor. It enables the user to drag elements throughout the page and edit them, quickly and easily. Navigator is particularly useful for long pages or pages with complex multi-layered designs, as well as for elements combining Z-Index, negative margin, position absolute, etc. It enables you to gain full control over the entire editing process.

Learn more about Navigator

Autocomplete URL for Internal Linking

Starting from version 2.2, once you start typing in the URL field, the system will automatically search for the text throughout all pages, posts, and media files in your WordPress.

Show Editing Handles

Shortly after the 2.1 release, we received several requests to restore the previous edit handles. Therefore, in this version, we brought them back, alongside the right click.Go to Settings > Advanced > Editing Handles > Enable.

Debug Bar

We added the ability to better debug the pages you load. The Debugger will help you understand why a particular template or theme file is being loaded, or whether they conflict with each other.

The Debugger is located in the admin bar throughout your WordPress site. If you are working in a development environment with the setting:

define( 'WP_DEBUG', true );

in the wp-config.php file, then the Debugger will automatically be activated. To manually activate the Debugger, go to the settings area of Elementor, and under Tools > Debug Bar > set it to Enable.

Columns Widget Now Renamed Inner Section

We renamed the 『 Columns』 widget to 『Inner-Section』 widget.

We have made the change because, after a continuous period of user-research, we found a disturbing common mistake made by users of all levels. When users needed to add a column to an existing section, instead of doing it using the right-click > add new column, users mistakenly dragged the Columns widget. This mistake adds unnecessary markup code to the page and may cause various unexpected behaviors.

How To Create A Popup For Your Shop Archive Page

Create a popup that seamlessly blends into your product archive pages, making the popup feel like a natural design element.

You』ll learn how to create a popup that:

Blends in naturally with your websiteDisplays on its corresponding category / product archive page

Design Product Archive Templates

Go to WooCommerce > Categories and create product categories if you haven』t already done so.Go to Templates > Theme Builder and create an archive template for each product category. Make sure your category image is positioned in an area that will coordinate with the popup you design, as it will be an integral part of the entire animated effect.

Set The Product Archive Templates』 Publish Options

For each template, set the Display Conditions to Include: Product Categories > search and select the relevant category for each

Design the Popup and Its Content

Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. Because this popup will closely integrate with the design of the product archive templates, it』s best to design your own.Design the popup content with the category in mind. Leave an area on the top of the popup with some blank space, so the archive template image can overlay it nicely.In Popup Settings > Layout, set Entrance Animation to Slide In Left.In Popup Settings > Advanced, set Disable Page Scrolling to Yes.

Set The Publish Options

Go to  Publish Settings > Conditions, and set Include > WooCommerce > Product Categories > search and select the relevant category.Go to Triggers and set On Scroll Direction to Down and Within 8% of scrolling. Of course, adjust the percentage to accommodate your design so that the popup coordinates with where you have your category image displaying on the product archive page.Go to Advanced Rules and set Show On Devices only to Desktop, since this design concept won』t work as well on laptop or mobile. You can always create different popups and design schemes for those devices if you choose.

Adjust The Product Archive Template

Go to Templates > Theme Builder to edit your product archive template that will be using this popup.Edit the category image widget and go to its Advanced tab, and set the Z-Index to 10,000. This will allow the category image to appear on top of the overlay and popup.

Repeat the steps for each product category, creating a relevant popup for each. Ensure that every popup focuses on a product in the category that pairs well with the category』s image. Use Conditions to assign each popup you design to its product category.

All done. Now visit the live product category pages, and see how seamlessly your popups blend with your archives.

How To Open A Browser』s Console

When troubleshooting website problems, you may be asked to check for errors in your browser』s console or to use the inspector. Each browser has its own method(s) of navigating to the Console. Listed here are the most common ways for each of the main browsers.

Tip: If you forget which keys work with which browser, try pressing the F12 function key, since many browsers open the Developer Tools with this key. From there, you can click on the Console tab located in the DevTools window.

Chrome: Press CTRL+SHIFT+J (Windows) or CMD+OPT+J (Mac) opens the DevTools window right to the Console tab.

The window will look similar to this, showing any errors in red, with the location and line number where the error occurred.

Firefox: CTRL+SHIFT+K (Windows) or CMD+OPT+K (Mac)

IE/Edge: F12

Safari: CMD-OPT-C (only works if the 「Show Develop menu in menu bar」 check box in the Advanced tab of the Preferences menu is checked).

Opera: CTRL+SHIFT+I (Windows) or CMD+OPT+I (Mac), then click the Console tab

Elementor Blocks for Gutenberg

Elementor Blocks for Gutenberg is a standalone plugin, made by the Elementor team, that allows users to add Elementor templates as Gutenberg blocks.

What is Gutenberg?

Gutenberg was the original code name for WordPress』 new post editor. It is now simply called the WordPress editor, or the WordPress block editor.

How to use

Elementor Blocks requires WordPress 5.0 or later with the new block editor enabled & Elementor to both be active on your site

Install & Activate Elementor Blocks for GutenbergIn Gutenberg search for 『Elementor Library』Choose an existing template or create a new one from scratchPreview your template inside the WordPress block editor.

Tip: You can edit your chosen template from within the page, by clicking the Edit Template with Elementor button.

Read the official Elementor Blocks for Gutenberg release post: https://elementor.com/blog/blocks-for-gutenberg

Parse Error Syntax Error

If you receive the message 「Parse Error Syntax Error」 while uploading Elementor to your website, upgrade your PHP version to PHP7 to meet our requirements.

It is highly recommended to use the latest version of PHP to avoid bugs and security breaches.

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.