0:03 hey there it's aviva from elementor
0:05 welcome back to how to build a website
0:06 in elementor
0:08 in the previous lesson we installed the
0:10 hello theme created the pages for the website
0:11 website
0:14 and added a navigation menu in this lesson
0:14 lesson
0:16 i'll introduce you to the elementor
0:18 editor and show you the basics of
0:18 working with it
0:20 which will be the building blocks for
0:22 creating our amazing site
0:25 ready let's jump right in from the
0:26 wordpress dashboard
0:29 go to the pages section and click the
0:30 home page
0:33 we created in the previous lesson click
0:36 edit with elementor
0:39 welcome to the elementor editor let's
0:42 get familiar with the interface
0:44 on the right side is the content area of
0:45 the page
0:47 this is where you can add and edit
0:49 elements that form the layout and design
0:51 of your page
0:54 on the left side is the elementor panel
0:55 here are creative tools
0:57 called widgets widgets are used to add
0:59 elements to your page
1:02 like headings text editors images
1:05 videos and more you can always access
1:08 this area by clicking the widgets icon
1:10 here on the top right in the panel header
1:11 header
1:13 on the left of the panel header you have
1:15 a hamburger menu button with several
1:17 settings and navigation options
1:20 site settings as it sounds allows you to
1:22 globally define your site's settings
1:24 all from one place we'll get back to
1:27 them a little later in the course
1:29 theme builder a pro feature allows you
1:31 to manage all your site parts from one location
1:32 location
1:34 we will not be covering it in this
1:35 course but if you would like to find out
1:36 more about it
1:38 you can check out our pro course and our
1:40 video on theme builder
1:42 user preferences allow you to customize
1:44 the elementor interface
1:54 below is the finder which you can also
1:56 launch by using the keyboard shortcut
1:59 command or control e the finder is a
2:01 search bar gives you quick access across
2:02 your site
2:05 we'll see it in action later
2:08 click view page to see your live website
2:11 or exit to dashboard to go back to your
2:16 at the bottom is the toolbar panel with
2:18 a few more important tools
2:21 in page settings you can edit the page's
2:24 name as well as the pages layout
2:28 here we'll toggle hide title to yes to
2:30 hide the title that displays at the top
2:35 click here for the navigator or use the
2:38 keyboard shortcut command or control i
2:40 the navigator displays an organized view
2:42 of your page elements
2:44 currently it's empty because we haven't
2:46 added any content yet
2:48 we'll use it later when we design our pages
2:55 click here to see your edit history and
2:56 view recent changes
3:04 and next to it is the responsive mode icon
3:05 icon
3:08 for switching between screen sizes and
3:10 making responsive edits
3:12 we can preview our changes and when
3:13 ready to take them live
3:16 just hit this update button there are
3:18 other save options as well
3:21 which i'll talk about in a later lesson
3:23 okay now let's take a closer look at how
3:25 pages are built
3:27 there are two ways you can start you can
3:29 either design your pages from scratch
3:33 or use a template from the library let's
3:34 begin with the library
3:36 here you can preview elementor's
3:37 pre-made blocks and pages
3:40 as well as your own templates and insert
3:46 filter the blocks by choosing a category
3:49 or use the search bar on the right
3:51 you can also add blocks and templates to
3:54 your favorites for easy access
3:56 i'll go ahead and insert this block so
3:59 you can see how it works
4:00 if this is your first time accessing the
4:02 elementor template library you'll need
4:04 to connect it with your elementor account
4:05 account
4:07 you can either use an existing account
4:15 great now that we added our first block
4:17 let's get to know the elementor edit structure
4:19 structure
4:20 elementor uses three main building
4:22 blocks sections
4:26 columns and widgets sections are the
4:28 largest and can be identified by their
4:28 blue border
4:31 like you see here inside them
4:34 are columns in this case there's one column
4:35 column
4:37 you can identify columns by the black
4:39 dashed border
4:41 these columns house widgets such as the
4:44 text and buttons you see here
4:46 you control the section column and
4:49 widgets with their handles
4:51 to edit a section column or widget
4:52 simply right-click
4:57 its handle where you can edit duplicate
5:01 delete and more you can move sections
5:03 columns and widgets around
5:05 by simply dragging and dropping them the
5:07 blue line indicates where it will be
5:10 positioned when you let go
5:11 another way to add sections is by
5:13 clicking the plus icon
5:15 over here then choose one of these
5:17 preset structures which we can tweak to
5:19 our liking as we go
5:22 or simply delete them sections columns
5:24 and widgets have three tabs in the panel
5:28 on the left sections and columns have
5:31 layout style
5:37 whereas widgets have content style and
5:39 advanced tabs
5:40 soon we'll see how these settings are
5:43 used to design our pages
5:44 we don't need this section for our
5:46 website design so i'll go ahead and
5:52 and that wraps up the elementor overview
5:53 in the next lesson
5:55 we'll set up our design system to
5:56 streamline the building process
5:58 and ensure consistent styling throughout
6:07 the website so watch on you
