This lesson introduces the Elementor editor interface and its fundamental building blocks (sections, columns, and widgets) for website creation, explaining how to add and manipulate content to design a webpage.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
hey there it's aviva from elementor
welcome back to how to build a website
in elementor
in the previous lesson we installed the
hello theme created the pages for the website
website
and added a navigation menu in this lesson
lesson
i'll introduce you to the elementor
editor and show you the basics of
working with it
which will be the building blocks for
creating our amazing site
ready let's jump right in from the
wordpress dashboard
go to the pages section and click the
home page
we created in the previous lesson click
edit with elementor
welcome to the elementor editor let's
get familiar with the interface
on the right side is the content area of
the page
this is where you can add and edit
elements that form the layout and design
of your page
on the left side is the elementor panel
here are creative tools
called widgets widgets are used to add
elements to your page
like headings text editors images
videos and more you can always access
this area by clicking the widgets icon
here on the top right in the panel header
header
on the left of the panel header you have
a hamburger menu button with several
settings and navigation options
site settings as it sounds allows you to
globally define your site's settings
all from one place we'll get back to
them a little later in the course
theme builder a pro feature allows you
to manage all your site parts from one location
location
we will not be covering it in this
course but if you would like to find out
more about it
you can check out our pro course and our
video on theme builder
user preferences allow you to customize
the elementor interface
below is the finder which you can also
launch by using the keyboard shortcut
command or control e the finder is a
search bar gives you quick access across
your site
we'll see it in action later
click view page to see your live website
or exit to dashboard to go back to your
at the bottom is the toolbar panel with
a few more important tools
in page settings you can edit the page's
name as well as the pages layout
here we'll toggle hide title to yes to
hide the title that displays at the top
click here for the navigator or use the
keyboard shortcut command or control i
the navigator displays an organized view
of your page elements
currently it's empty because we haven't
added any content yet
we'll use it later when we design our pages
click here to see your edit history and
view recent changes
and next to it is the responsive mode icon
icon
for switching between screen sizes and
making responsive edits
we can preview our changes and when
ready to take them live
just hit this update button there are
other save options as well
which i'll talk about in a later lesson
okay now let's take a closer look at how
pages are built
there are two ways you can start you can
either design your pages from scratch
or use a template from the library let's
begin with the library
here you can preview elementor's
pre-made blocks and pages
as well as your own templates and insert
filter the blocks by choosing a category
or use the search bar on the right
you can also add blocks and templates to
your favorites for easy access
i'll go ahead and insert this block so
you can see how it works
if this is your first time accessing the
elementor template library you'll need
to connect it with your elementor account
account
you can either use an existing account
great now that we added our first block
let's get to know the elementor edit structure
structure
elementor uses three main building
blocks sections
columns and widgets sections are the
largest and can be identified by their
blue border
like you see here inside them
are columns in this case there's one column
column
you can identify columns by the black
dashed border
these columns house widgets such as the
text and buttons you see here
you control the section column and
widgets with their handles
to edit a section column or widget
simply right-click
its handle where you can edit duplicate
delete and more you can move sections
columns and widgets around
by simply dragging and dropping them the
blue line indicates where it will be
positioned when you let go
another way to add sections is by
clicking the plus icon
over here then choose one of these
preset structures which we can tweak to
our liking as we go
or simply delete them sections columns
and widgets have three tabs in the panel
on the left sections and columns have
layout style
whereas widgets have content style and
advanced tabs
soon we'll see how these settings are
used to design our pages
we don't need this section for our
website design so i'll go ahead and
and that wraps up the elementor overview
in the next lesson
we'll set up our design system to
streamline the building process
and ensure consistent styling throughout
the website so watch on you
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
