Hello, welcome to this video! In just 13 minutes we are going to see
how to use the free version of Elementor, one of the best plugin editors
for your WordPress websites especially if you are not keen on the block
editor or you want to expand the editor abilities you do not have in
most of WordPress themes.
Elementor comes with a Pro version that helps at building your website from
scratch and adding more complex elements starting from 49 USD per year!
To follow this video you need to know the basics of WordPress. Make sure
to catch our dedicated tutorial to recover these!
The official page of Elementor shows more information on its plugin and
also offers a hosting server service we won't see. Catch the official link
from our video description below!
Let's suppose to have a WordPress website ready. To get Elementor just open
the Plugin page of WordPress and search for it. Install and activate it
so that it appears on the left side.
Now let's create a new page. Set its title and click on Edit with Elementor
to finally open the Elementor editor with its wide live view preview on the
page! This editor is very simple: it divides your website into blue blocks,
each made by one or multiple elements inside, which can be text, lists,
images and much more.
On the left you get the main panel where you can browse for any element or
adjust any property. On the preview you can edit elements and also use the
plus button to add a new block and then select the layout the elements
inside must follow. At this point drag and drop any element inside the
preview, for example a Heading, and click on it to type in, clicking
outside to apply.
Click within any element to select it and adjust its properties on the
left under three sections above. With Content and Style you set and adjust
the element content and its appearance, depending on the kind of element
chosen. When selecting Headings the Content section allows you to edit
content, add hyperlinks, change the text size or its alignment. Under Style
adjust font color, transparency and font family, add stroke with proper
thickness and color or some shadow.
Under Advanced you find other options that do not change with the kind of
element selected. With Layout you can adjust margin and padding from the
blue block containing the element, disabling the link button to insert
different values per side. Below set an absolute Width and Position and set
a CSS ID or Class to the element, without any . or #.
With Motion Effects you can add animations with proper duration and delay.
On Transform you can rotate the element, add some offset, scale or flip it.
Switch to Background to edit the element background by adding color,
importing a custom image or applying a colored gradient.
With Border adjust the box borders, the corner radius or add some shadow.
On Responsive select whether to show the element on desktop, tablets or on
mobile right away.
To save the page go to Save Draft in the bottom left corner!
Below the heading we can add a text paragraph with the Text Editor element.
Just type inside and adjust properties on the left such as formatting and
style. You can also make lists or add hyperlinks, for example to link an
image. You can remove this hyperlink by clicking on the chain icon.
Click on Toolbar Toggle to show more advanced properties in order to
change style, font color, add quotes, adjust paragraph distribution, add
symbols and apply indentation.
At the bottom set the text columns for the paragraph, applying distance
with Columns Gap.
Under Style adjust the appearance of the entire paragraph including color,
font family and style and apply shadow.
You can undo any change with CTRL (or CMD) and Z!
You can also add images by dropping Image elements. Just browse for your
image from your WordPress Media Library or upload one, adjusting size and
alignment under Content. With Caption you can add an image caption in case this
does not load and use Link to apply a hyperlink directing to any media
file or a website page.
Under Style customize the image width, maximum width and height. Use
Opacity to adjust transparency and apply a great border with proper style,
line thickness with Width, color and corner radius. With Hover you can run
an animation on the image when you hover over it, adjusting its duration
properly.
Drop a Spacer element to add an empty space between two independent blocks
or within a single block to separate two elements.
To edit any element select it and right-click on it to edit it with the
left panel, duplicate it or remove it with Delete.
Drop a Divider element to add a line separator. Customize its line style,
width and alignment or add some text, apply an HTML tag or a cool icon.
Switch to Style to change the line color, thickness with weight and spacing
with Gap.
Drag and drop a Video element to include an embedded video within your
page. On the left select the video source between YouTube, Vimeo or your
own WordPress library. Just paste the direct link and trim the video by
defining Start and End Time. You can also enable autoplay, mute audio,
add looping, hide and show player controls and enable Privacy Mode to avoid
data collection. With Image Overlay you can change the video thumbnail to
take over the default one from YouTube. Switch to Style to change the
aspect ratio and apply advanced CSS Filters.
Drop an Inner Section element to add a complex block with more elements
put together with a proper layout. Just click on the plus button to add
each element within it.
To import buttons you can drag and drop the Button element, adjusting type,
its annotation and destination link. Also set its alignment, size and icon
and assign a unique HTML ID if you need.
Switch to Style to customize text font and properties, apply shadow, adjust
the color for both button and text and set the complete border options we
have seen for other elements.
With an Icon element you can add a single icon, adjusting its appearance,
applying a hyperlink and correcting its alignment.
You can even import a Google Maps element, defining a reference location
and the map zoom and height.
This is the result of the page! From the bottom left corner click on the
eye button to get a complete and functional preview of your page as a
visitor. You can also switch to Responsive Mode to check your page across
different devices between desktop, tablets and smartphones.
With History you can move across your modifications made in order. Whereas
with Navigator you get a brief overview on all the elements composing your
page.
If the page sounds good, go to Publish to launch it online!
Elementor is a great editor to manage and make posts as well.
When you open any post go to Edit with Elementor to use the Elementor
plugin on it. This enables you to read its blocks completely so that you
can edit them or add other elements.
Below the Pro section (available under a subscription plan) you get the
General section with more advanced elements you can add. Drop an Image
Gallery to import an image gallery with properties set from the left.
Switch to Image Carousel to add a slideshow by importing images and
adjusting options such as appearance, autoplay and speed.
Use Stars Rating to ask for feedback, defining scale, default rating, icon
type, title and alignment on the left. Always switch to Style to adjust
appearance, spacing and color.
You can also add a Progress Bar by adding a title, the default percentage
and its complete appearance with Style. Whereas with Tabs you can add
multiple text paragraphs or media files under each tab independently.
Other elements such as the Image Box and the Icon Box allow you to get
a ready layout to customize, for example an image or an icon complete with
heading and paragraph. Check these out!
At the bottom you get even more advanced elements, including the most
common WordPress widgets!
Once you are ready you can go to Settings in the bottom left corner to set
the post options including title, status and featured image! You can come
back to the WordPress block editor by clicking in the top left corner and
going to Exit.
From the WordPress plugin you can click on Elementor to set all the main
options for it. You can change the user permissions at different levels or
switch to Replace URL to change the main URL of your home page.
Whereas go to Maintenance Mode to enter into this
mode while performing updates in your website.
Thank you very much for watching this tutorial! Visit our YouTube channel
and our website to get useful tips, giveaways and free tutorials on
WordPress, CMS and much more!