Elementor: Landing Page Builder #1 Guide & Tutorial for WordPress and WooCommerce

What is Elementor

Have you heard of Elementor before but don't know exactly what it is or how it works? Elementor (www.elementor.com) is a page builder in the form of a plugin for WordPress which includes a basic free version and features a Pro license.

Elementor integrates with the WordPress and allows to realize landing page and build page templates for categories, home pages and archives.

Elementor features a user friendly interface, updates frequently and is easy to use thanks to its drag&drop system.

Thanks to the drag&drop system Elementor allows you to create a layout with or without columns, sections, insert widgets and work on the graphics directly live operating from the front end. In addition to the front end, Elementor also allows you to create pages and insert widgets from the back end.

Let's see together what are its main versions of Elementor, the best themes for the page builder, features and customer reviews.

Elementor Features

Essential Features

• Drag & Drop Editor: Elementor has the fastest and most intuitive editor in WordPress. Just drag, drop and customize.
• Over 300 models created by designersChoose from over 300 models designed to suit every industry and need.
• Over 90 widgetsChoose from dozens of widgets to create any content you need: buttons, titles, forms.
• Responsive editing: switch to mobile view and modify each element to make it suitable for any device.
• Popup Builder: popup Builder gives you the freedom to create pixel-perfect popups, including advanced targeting options.
• Theme BuilderA visual guide to creating your site, giving you instant access to every part of your site, directly within the editor.
• WooCommerce Buildertake control of your ecommerce created with WooCommerce using Elementor.

Workflow

• No encoding: reach design without any coding. The resulting page code is optimized for each device.
• Navigatornavigate through all the elements or layers on the page, quickly view custom changes and easily access them via indicators.
• Full site editor: Design your entire site from a single location, including header, footer and content.
• Finder: a search bar that offers easy navigation between different pages and dashboard settings.
• Shortcut keysShortcuts are keyboard shortcuts that save you time when performing various actions.
• Shortcuts tab: a window that opens and shows the complete list of shortcuts.
• Reset and Undo: quickly cancel any errors with a simple CTRL / CMD Z.
• Automatic savingYou no longer need to click Save. Your work is continuously saved and automatically backed up.
• Revision history: With revision history, the entire page creation process is saved and can be easily tracked.
• Draft modeHave you published a page and want to continue working on it? No problem, you can simply save it as a draft.
• Copy Paste: quickly copy any element and paste it in a different place on the page or in a completely different page of your site.
• Copy style: copy the entire style from a widget, column or section and paste it into another element with one click.
• Online editing: Use the inline editing feature to type directly on the screen and make writing blog posts and content an easy and intuitive process.
• Global WidgetSave your favorite widget settings and reuse the widget on any page with a simple drag and drop.
• Dark modeElementor's Dark Mode feature allows you to design in darker environments, saves energy.
• Site settings: Control all global elements of your site from one location, including site identity, lightbox settings, layout and theme styles.

Design

• Global charactersSet your own choices for all fonts on your site, from headlines to paragraphs and even button text. Access and apply them wherever you need them, with just one click.
• Global colors: Define the design system of your site with global colors. Save them once and apply them to any element of your site.
• Global Custom CSSadd custom CSS globally and apply it to your entire site.
• Background Shades: With Elementor, it's easy to add gradient background colors to any WordPress page or post.
• Background videoBring your wallpaper to life by adding interesting background videos to your sections.
• Background overlayadd another layer of color, gradient or image on top of the background.
• Improved background images: customize responsive background images per device and set custom location and size.
• Background presentationCreate a slideshow and use it as a background for any section or column on your site.
• Elementor Canvas: switch to the Elementor Canvas template and design the entire landing page in Elementor, without having to deal with the header or footer.
• Fusion modemixes backgrounds and background overlays to create spectacular blending mode effects.
• CSS Filters: Using CSS filters, you can play with the image settings and add amazing effects.
• Shape divider: Add amazing shapes to separate sections of your page. Make them really stand out with a variety of SVGs, icons and text within the shape divider.
• Box Shadow: visually sets custom box shadows, without having to deal with CSS.
• Absolute Position: use Absolute Position to drag any widget to any position on the page, regardless of the grid.
• One-Page Websites: Create a one page website that includes click to scroll navigation as well as all the necessary sections of a website.
• Motion Effects: Add interactions and animations to your site using scrolling and mouse effects.
• Icon LibraryLoad and browse thousands of icons.
• SVG Icons: creates smart, flexible and lightweight icons of any size. The behavior of SVG icons allows them to be super customizable.
• Theme style: takes control of the theme design, including the header, button, form field, background and image styles.

Elementor for Landing Pages: Marketing Features

• Landing Page: Creating and managing landing pages has never been easier, all within your current WordPress website.
• Widget Modulegoodbye backend! You can create all your modules live, directly from the Elementor editor.
• Popup BuilderThis function gives you the freedom to create popup and its advanced targeting options.
• Testimonial Carousel Widget: increases the social proof of your company by adding a rotating carousel of testimonials from your most supportive customers.
• Countdown WidgetIncrease the sense of urgency by adding a countdown timer to your offer.
• Star rating widget: Add some social proof to your website by including a star rating and shaping it to your liking.
• Multi-Step ModuleThe Multi-Step function allows you to divide your module into steps, for a better user experience and higher conversion rates.
• Action Links: Easily connect with your audience via WhatsApp, Waze, Google Calendar and other apps.

Typography

• Easy to customize: play with font family, size, weight, transformation, style, decoration, line height and letter spacing.
• HTML title tags: setting the correct HTML tag for the title (H1 or other) is important in terms of SEO.
• Character preview: Displays a preview of the fonts in the panel, so it's easier to choose the right one.
• Custom Characters: Add your own custom fonts and Typekits and use them in your projects.
• Google FontsChoose from hundreds of Google fonts available in each text widget.
• Font size: sets whether your typography is resized using PX, EM or REM, for a more responsive design.
• TypeKit Integration: Add your own custom fonts and Typekits and use them during your projects.
• Capolettera: zoom in on the first letter of your blog post to create a sleek and distinct look.
• Text Shadow: Emphasize your content by adding a text shading effect to any widget with text.
• Text Editor Columns: Split the Text Editor widget into responsive columns and set the space between columns for a better layout.

Layout

• Section width and heightGo beyond simplified and generic page designs by having more control over the various sections.
• Full width: Easily create full-width pages no matter what theme you're using, with the strech section feature.
• Column width: Enter a specific column width or visually resize the width by dragging the column border.
• Space between columnsModify the spaces between the columns to let your design breathe.
• Content position: positions the column and content and stretches the column for the entire height of the section.
• Margin and internal spacingsets the internal spacing and margin for sections, columns and widgets.
• Z-Index: places any section, column or widget in front or behind, using the Z-index function.
• Vertical and horizontal Flexbox alignment: align and distribute widgets on each column vertically and horizontally using the power of flexbox.
• Inline elements: places two widgets next to each other in the same column with inline or custom width.
• Fixed positionset your widget to have a fixed position and place it wherever you like. The element will scroll next to your user.
• Nested Columns: creates advanced layouts by nesting columns within a given column. This creates a kind of crucial inner section for some projects.

Mobile editing

• Reactivity to 100%: Use Elementor's extensive mobile editing tools to create a website that is truly 100% responsive.
• Mobile font size: With this function, you can change the font size per device.
• Reactive column width: Choose a different column layout for mobile devices by changing the column width.
• Padding and Margin: This function is used to create a different internal spacing or margin size per device.
• Inverse columns: This feature reverses the order of the columns, so when you go to mobile the last column will appear at the top.
• Hide and show elements (visibility): You can hide sections and widgets so that they are not displayed on any device.
• Custom breakpoints: Change the breakpoint values for mobile and tablet devices to adapt your websites to specific device sizes.
• Reactive sizing: Choose between PX EM% and VH for sizing within Elementor.

Theme Builder

• Visual guide: Individually review and edit every component of your site: headers and footers, posts, archive, product pages, and more.
• Dynamic content: Using dynamic widgets, creating dynamic pages is as easy as creating static pages.
• Dynamic colors: Reduce the design workflow by adding dynamic color values for use in the color field
• Display conditions: Decide exactly where your global templates are displayed on your site.
• Header and footerVisually customize the header and footer areas of your site, without any code.
• Sticky Header: Add a sticky header to any page or in your website, with a click of a button. No additional plug-ins required.
• 404 Page: Direct your visitors to create custom 404 pages that can be built entirely within Elementor.
• Archive page: Design your entire blog in Elementor or designate different templates for different areas of your blog.
• Single post: Create your own blog post template and attribute it to your site or any category, page or taxonomy.
• Search results page: Customize your search results page and improve the experience users get when searching your site.
• Integration of custom fields: Create content fields in ACF, Toolset & Pods then visually embed them on any page.

Theme content

• Navigation menu widget: Use the most advanced menu generator for WordPress and customize it visually, no coding required.
• Access module widget: Include custom login forms to any page and help your users log in easily.
• Search widget: Design full screen, minimal and infinite other variations of the search box.
• Posts widget: Displays a list of all custom post types in various layouts and modes.
• WordPress Comment WidgetGet your visitors to leave their comments on your posts and pages.
• Portfolio WidgetCreate a portfolio layout that includes works that your visitors can filter.
• SummaryMake your long form content more readable for site visitors and search engines by adding a table of contents.

Elementor for Woocommerce

• Widget price table: Create advanced pricing tables that showcase your products or services.
• Widget price list: Add catalogs and menus to your website, listing products and services including prices.
• Widget Woo products: Show your WooCommerce products and filter the exact products you want to display.
• Widget categories Woo: Show your product categories and choose exactly which categories to show.
• Woo Add to Cart Widget: Create a product page that includes an actionable Add to Cart button.
• Woo Elements Widget: Add cart page, individual product page, payment page, order tracking form or my account.
• PayPal Button Widget: Collect payments, subscriptions and donations via PayPal using a simple customizable button.

Modules

• Contact forms e Entry forms: Add an inline signup form that your visitor can use to subscribe to your newsletter or contact you.
• Access form: Allow your visitors to easily log in to WordPress using the Login Form widget.
• Action after sending: Decide what happens after your visitor submits a form, including triggered integrations.
• Confirmation email: Send a confirmation email to your visitors after submitting a form.
• HTML / normal e-mail: Choose whether the e-mail message is sent as an HTML e-mail message that includes HTML style or as a plain text e-mail message.
• Personalized messages: Creates a custom message that is displayed in the form when the user interacts with it.
• Advanced form fields: Upload files, add a date selector, or use Elementor's other advanced form fields.
• Hidden fields: Include hidden fields in your forms, mainly used to add tracking to form submissions.
• Acceptance range: Include an acceptance field in your forms, making sure your visitors agree to your terms.
• Honeypot: Use this simple yet effective security measure to make sure your forms are not spam.
• Sending forms: Easily view, manage and edit your form submissions in Elementor.

Social Media

• Sharing buttons: Convince your audience to share your content on popular social media platforms.
• Blockquote: Share your best jokes and quotes on Twitter with a element Custom designed blockquote.
• Social Icons Widget: Add social icons to any page, to increase traffic to your social profiles.
• Embed Facebook: Easily embed Facebook posts and videos to increase your social media coverage.
• Facebook Page: Put your Facebook page directly on your website and get more Likes and followers.
• Facebook Comments: Quickly add Facebook comments to any page and start communicating better with your audience.
• Facebook ButtonGet more likes and engagement on social by including a Facebook Like button at the end of each post.

Elementor Library Template

• Templates - PagesChoose from a wide range of predefined templates.
• Blocks: Build your page piece by piece using Blocks, pre-designed and simple section templates.
• Save and reuse: After you are done creating your page, you can save it in the library and reuse it with one click.
• Import / Export: Export your template and import it, including images, to any other site.
• Search and filterFind the model that best suits your needs by searching and filtering the models.
• Widget template: Add the Template widget and embed any template with a simple drag & drop.
• Incorporate everywhere: Get the shortcode for any template and embed it wherever you like.

Media

• Multimedia Carousel WidgetDisplay your images and videos in a stunning looking rotating carousel.
• Presentation Widget: Add simple yet powerful image sliders that are easy to use and optimized.
• Lightbox: opens when visitors click on images, links or buttons.
• 5 video embedding options: Embed self-hosted videos, external videos, YouTube, Vimeo or Dailymotion into your pages.
• SoundCloudAllow your visitors to play a song while they are visiting your site using the SoundCloud widget.
• Icon fonts: Add any of the long list of Font Awesome icons available in Elementor's icon widgets.
• Google Maps: Embed a Google map on your page and help your visitors locate the location of your business.

Interactions

• Scrolling effects: set up a header, footer or other permanent section and make sure your message follows users as they scroll down the page.
• Call to Action Widget: The Call to Action widget uses CSS animations and effects to create interactive effects.
• Animated title widget: Create attention-grabbing headlines that highlight or rotate the most crucial part of the headline.
• Flip Box Widget: Creates animated boxes that move to the other side once the visitor passes over them.
• Mouseover animations: Create mouseover animations that add an extra layer of interaction to your website.
• Entrance animations: Add animations on mouseover and input and set an interactive way to display your widgets.
• Parallax: Create awesome animations and interactions when the user scrolls down the page.
• Mouse effectscreates a sense of depth by making the elements move in relation to the movement of the mouse.
• 3D tilt effect: allows elements to float and slide slightly as the user moves the cursor over each element.
• Internal section widget: uses the Inner Section widget to create advanced side-by-side layouts that remain in columns as the user scrolls down the page.

Advanced features

• Maintenance mode: Sets the maintenance mode on WordPress, including incoming templates and in maintenance mode.
• Replace URLHave you changed your domain? Run the Replace URL function to make sure everything is up to date with the new address.
• Custom CSS: Add custom CSS to any section, column, widget or page in Elementor.
• Version controlWant to revert to a previous version? Do it easily with a single click.
• Safe mode: activates a safe environment that isolates Elementor from themes and plugins that might cause an error.
• Regenerate CSS: deletes your CSS files and generates new files after making changes to your pages.
• HTML WidgetInsert your code directly into Elementor using the HTML widget.
• HTML tags: sets the tag that surrounds the widget elements. You can choose between div, p, span and so on.
• Image size: By setting the image file size, you can reduce the page loading speed.
• Responsible for roles: Limit access to the editor completely or only allow users to make changes to content.
• Ready for RTLElementor is multilingual and offers full support for both LTR and RTL languages.
• Request parametersKeep track of user information at every stage of the sales funnel, as well as to personalize the user experience.
• Custom attributes: Add custom attributes like "AIR", "header" or "footer" for each section, column or widget flawlessly.
• ExperimentsCheck which new features, soon to be released, are active on your site.
• Compatibility tags: receive notifications about add-ons that are not compatible with the currently installed version of Elementor.
• Custom code: seamlessly add custom HTML values such as marketing pixels, analytics and meta tags to the head and body tags.
• Code Highlighting Widget: Use the Highlight Code widget to display and highlight clear and readable code in your developer blog.

How to install Elementor on WordPress

Elementor, besides being easy to use is also easy to install directly on WordPress.

To install Elementor just follow a few simple steps:

• Once the download the plugin in the free version and the one in the Pro version (www.elementor.com), you will have on the desktop of your PC a zip file named: Elementor.
• After downloading go to WordPress, choose the Plugin item and then click on Add New.
• Upload the zip file to WordPress and wait for it to be installed.
• After installation you can start use Elementor on WordPress.
• Go to the plugin entry that you find in the left bar of WordPress.
• You can now choose to watch the video, download the guide, or create your first WordPress page directly.

Finally, you can use all widgets and functions to be able to create your home page, header, footer or section ecommerce of your website.

Elementor Pro: widgets, features and latest updates

If you have chosen to use Elementor Pro (www.elementor.com) you should know that there are several widgets, features and plugins that will help you create your home page and other pages of your website.

The main functions you can access with Elementor Pro are:

• Drag & Drop for front page customization
• 80 widgets (30 basic and 50 advanced)
• A theme generator and design popup builder
• Woocommerce Builder with 15 widgets dedicated to creating a WordPress store
• Dynamic content and possibility to customize fields
• Access to the various updates that are carried out during the year
• Assistance 24 hours a day
• Custom CSS, 300 Pro templates and access to Pro updates
• Designing 404 pages
• Creating website header and footer designs
• Character customization
• Integration of interactive carousels

In recent times, other widgets and popups have also been integrated, such as the Related Content, a popup that can be installed to be able to see related content based on the article or page the user is visiting.

Very interesting also the popup customizable registration form which allows you to get users to subscribe to your site or mailing list. All the various popups are located within the Smashing Popup patterns.

What are the best themes compatible with Elementor?

Elementor Pro (www.elementor.com) to work better and provide better performance requires high compatibility with specific themes for WordPress. On the bulletin board of Elementor Pro you can view all the themes that can offer a good compatibility with this page builder.

Since some WordPress themes but are more suitable for use with Elementor, let's take a look at the ones that will be most useful to you for creating fast pages, with clean code and also with a good index of navigability and a great user experience for the user.

The main themes for Elementor include:

• Elementor Hello Theme: is the official Elementor theme, designed specifically for use with this page builder in the paid pro version. This theme is lightweight and is recommended by Elementor programmers to all developers who choose to subscribe.
• OceanWP: another recommended theme for Elementor is OceanWP, it offers good loading speed, clean code and lightness in the default theme installation. The pro version of OceanWP has a cost of 39 $.
• GeneratePress: is a WordPress theme that integrates perfectly with Elementor, and is one of those that offers faster loading speed. The theme offers a code always very clean, uses the Vanilla Javascript, and a default installation that weighs less than 30 kb. The price of Generate Press in the premium version is 39.95 $.
• Astra Theme: a WordPress theme which is one of the most popular and used by the whole Elementor community. This theme is very popular because it allows you to make fast web pages to be uploaded and designed to improve the user experience of those who navigate within the site. The price of Astra in the Pro version is 59 $.

Integrations

Elementor can be integrated with:

• MailChimp
• ActiveCampaign
• ConvertKit
• Campaign Monitor
• HubSpot
• Zapier
• Adobe TypeKit
• Discord
• GetResponse
• Drip
• ReCaptcha V3
• Facebook SDK
• MailerLite
• Slack
• Font Awesome 5
• Custom Icon Libraries

The best WordPress plugins for Elementor

With Elementor (www.elementor.com) you can use different plugins to download directly from the WordPress dedicated area. The best plugins to use with WordPress are:

• JetBlog: is a plugin that works very well with the page builder and allows you to enrich the pages of your site with elegant and innovative widgets.
• JetElements: the second plugin you can install for use with Elementor. JetElements allows you to simply create a contact form by choosing from an unlimited number of designs that also integrate with Contact form. It offers an integration with Woocommerce, several templates for the Home Page, supports RTL and also WPML and even pre-designed blocks.
• Jet Engine: finally, if you want to add and edit dynamic content this plugin allows you to create new taxonomies, works well with Elementor templates, offers various design types to create custom posts. It also offers 40 widgets, optimal responsiveness and supports WPML and RTL.

The advantages of Elementor

Intuitive and versatile

Elementor allows you to create any kind of design and layout in a short time. With this page builder you will be able to create your pages with a convenient, intuitive and easy to use drag and drop system.

Another advantage is the possibility offered to the more experienced to create pages, header, footer, landing page and contact forms.

One of the main advantages of Elementor is the ability to use this page builder to create various types of pages, using different widgets, plugins e themes that work well.

His open source codeIt is also a resource that should not be underestimated. Thanks to this you can always integrate new plugins to use advanced features that allow you to create a unique and personalized website.

Good value for money

The price for the Pro version is another plus. The great value for money makes Elementor one of the best software to create landing pages with WordPress.

From this point of view Elementor is advantageous both in terms of cost and subscription compared to others. software as a service (SAAS) for the creation of landing pages, such as Unbounce e Instapage.

Assistance

Elementor offers timely and fast service. The ticketing system works very well via email and guarantees a response within 24 hours. In addition, there is a dedicated portal that allows users to discuss and find a solution to their problems.

In Italy, Elementor provides support in English, but you can tap into a large pool of tutorials in Italian.

Opinions on Elementor

Scouring the web you can find so many opinions on Elementormostly positive.

Elementor is considered one of the best page builder on the market just for:

• wide range of website customization;
• integration with Woocommerce;
• optimal functioning with the WordPress platform;
• loading speed;
• excellent user experience offered to the user thanks to a lightweight code and great for those who want to get advantages in terms of usability and speed of pages.

The G2.com website (https://www.g2.com/products/elementor/reviews) has numerous opinions from users already using Elementor, most of them 5 stars.

Elementor Pro: Price

The basic version of Elementor is freebut consists of a number of minor functionalities. With the free version you can:

• use drag and drop;
• choose from 30 basic widgets;
• Design pages, home page and article and blog page.

Once you have installed free Elementor, you can access the program directly from WordPress with its plugin and proceed to create the main pages of your website.

As for the paid plans (https://elementor.com/pricing/), you can choose between the Individualsideal for a single website or a few customers, and Teamsto work with more clients.

The Individuals category includes the following subscription plans:

• Essential, at $ 49 per year for a single website;
• Advanced, at $ 99 per year for 3 websites;
• Expert, at $ 199 per year for 25 websites.

The Teams category includes the plan Studio to $ 499 per year for 100 websites, and the plan Agency at $ 999 per year for 1000 websites, with the following characteristics:

• VIP support: 24/7 live chat;
• Team access to support (Studio - up to 5 members; Agency - up to 10 members) to enable efficiency in your workflow.
• Relevant and tailored content - from over 100 additional website kits.

The above prices do not include applicable taxes based on the billing address. The final price will be shown on the checkout page, before payment is completed.

Conclusions

Elementor has quickly established itself as the most popular drag-and-drop page builder for WordPress, thanks to:

• free plan;
• competitive price of the pro version;
• customization versatility;
• continuous updates;

And do you use Elementor? Let's talk about it in the comments.