Getting Started with Elementor

Hi everyone, I’m Aviva, a designer and educator at Elementor. I’d like to welcome you to this course, How to Build Your First Website with Elementor. We here at Elementor, have created this course especially for beginner Elementor users, to teach you the fundamentals of using Elementor to create your very first website, and at the same time have fun building it.

In this course, we’ll create this striking three page website for Simaya, a vegan restaurant, that offers a mouthwatering plant-based menu, but of course you can use the same layout and techniques and apply them to any type of industry.

This course with cover:

• Installing and Activating the Hello theme
• Creating web pages and a navigation menu in WordPress
• Setting up your design system and website structure for your Elementor website
• Creating a header and footer using Elementor’s, Hello theme.
• Using the Elementor Editor to build and fully style your entire website
• Responsive editing
• Website optimization methods
• And lots of other tips and tricks along the way, including best practices and ways to streamline your workflow

All you’ll need to get started is:

• A WordPress website
• And the free version of the Elementor Website Builder plugin.
• I also suggest using a clean installation of WordPress.

If you don’t yet have a WordPress website, or the Elementor plugin installed, see the links in the description to get set up for this course.

You can follow along, and apply your own style, content, and images for your personal or client’s needs.

Last but not least, I highly recommend watching each video all the way through, and in the correct order, as skipping steps may end in some unexpected results!

Be sure to bookmark the course, so you can come back to it at any time.

Keep watching, to get started with our first lesson, where we‘ll install our theme, set up our pages, and add a navigation menu. See you there!

Hey there, it’s Aviva from Elementor. In this lesson we’ll learn how to Install Elementor’s lightweight theme, Hello, create the pages for our website, and add a navigation menu.
As you may know, every WordPress website requires a theme. WordPress comes with its own theme preinstalled, and there are many other themes you can choose from, as well.

The Hello theme, by Elementor, was developed to be fully compatible with the Elementor Website Builder. It is free to use, fast loading, and always kept up to date, so it is ideal for any website that uses Elementor, including this one.

Let’s install it!

From the WordPress dashboard, go to Appearance > Themes, and Click “Add New”.. In the search bar, Type in “Hello”. Click install…and activate it to change the theme to Hello.
The Hello Theme comes with a free header and footer, when used together with the Elementor plugin. That’s right, free!

To make sure the header and footer option in Hello is enabled, go to Elementor > Settings > Experiments, scroll down a bit, and verify that Active is selected for Hello Theme Header and Footer. Great! We’ll get back to the Header and Footer a little later in the course.

Now let’s create the pages for our website. We’ll need three pages for this site, a Home page, Contact Us page, and an Our Menu page.

Hover your cursor over the Pages tab and select Add New.

If it’s your first time adding a page on this site, you may see a WordPress welcome popup. Click anywhere outside the popup to dismiss it.

Add a title by typing in “Home.” Click Publish…you may need to click Publish again…and that’s it. You’ve created your first page!

Next we’ll add the Our Menu page for the restaurant.

Click here to go back to Pages, and click Add New. Type in “Our Menu” for the title, and Publish it.

And now for the last page. Add it; call this one “Contact Us,” and Publish it.
Great! Now go back to Pages. This is where you’ll find a list of all the pages on your website. You can see the three we just created here, as well as these two. Wait, how’d THEY get here? Well, every new installation of WordPress comes preinstalled with a Privacy Policy page and a Sample page.

If you hover over any page, you’ll see several page editing options, such as Trash, and Edit with Elementor. Click Trash to delete the Sample Page. I’ll also go ahead and delete the Privacy Policy. However, it’s always a good idea to have a Privacy Policy in place, so it’s up to you to decide if you would like to keep it, and update it with your own policy, or remove it altogether.

Fantastic! Things are really moving along, and now that we’ve created our pages, we can create the website navigation menu, which we’ll be using in the Header, so that visitors can effortlessly find their way around the website.

To get to the Menu setup, go to Appearance > Menus. Give your menu a name, …and click Create Menu.

You should see links to the three pages we just created, as well as an extra default custom link.

In the event you don’t see the links here, select the pages from the left side, and click Add to Menu. Delete any unwanted pages by expanding the link and clicking Remove.
Then click and drag the links into their proper order.

Click Save Menu, and just like that, we’re done creating our navigation menu.

Ok, we’ve installed the Hello theme, added the website’s pages, and created the navigation menu. Things are moving along!

In our next lesson, we’ll learn the basics of using Elementor’s drag and drop editor to build your website, so be sure to keep watching.

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, and added a navigation menu. In this 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.

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. 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 / our video on Theme Builder.

User Preferences, allow you to customize the Elementor interface, such as switching to dark mode.

Below is the finder, which you can also launch by using the keyboard shortcut Command or Control E. The finder is a search bar that 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 WordPress dashboard.
Bottom Panel
At the bottom, is the Panel Toolbar with a few more important tools.

In page settings, you can edit the page name and layout.

Here we’ll toggle Hide Title to Yes, to hide the title that displays at the top of the page. We’ll see how to add our own titles in a moment.

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.

Click here to see your edit history, and view recent changes or revert back to previous revisions.

And next to it is the responsive mode 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 video.

Okay great, 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 them into your page.

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 to it with your Elementor account. You can either use an existing account, or create a new free account.

Great!

Now that we added our first block, let’s get to know the Elementor Edit 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. You can identify them by the black dashed border. These columns house widgets, such as the texts and buttons you see here

You control the Section, Column, and Widgets with their handle.
To edit the Section, Column, or Widget, simply Right Click their 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 simply choose one of these pre-set structures, which we can tweak to our liking, as we go, or simply delete them.

Sections, Columns and Widgets have 3 tabs in the panel on the left. Sections and Columns have: Layout, Style and Advanced tabs.

Whereas Widgets have Content, Style and Advanced tabs. Soon we’ll see how these settings are used to design our page.

We don’t need this section for our website design, so I’ll go ahead and delete it as well.

And that wraps up the Elementor Editor 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!

Hey there, it’s Aviva from Elementor. Welcome back to how to Build a Website in Elementor. In the previous lesson, we learned the basics of using the Elementor Editor to structure our web pages.

In this lesson, we’re going to build our design system, which will help simplify the building process and guide us in styling the elements of our website.
So what is a design system and why should you use one?
In order for a website to be effective, it needs to have clear and consistent messaging. This messaging is expressed through both the website’s content and design.

By establishing a clear set of guidelines, you’ll create a more efficient building process, which will both save you time, and allow you to maintain consistency throughout your site.

This is where a Design System comes in handy. A design system is a collection of pre-set, ready to use styles, that will help structure your website, and give it that clean and polished look.

I’ve already created a file for my website, which contains the design, as well as all the elements I’ll need to build my website. I created this file in Adobe XD, but you should feel free to create it using whichever tools you’re comfortable with.

Design systems can range from simple to complex, depending on the branding and website requirements, but most design systems include a visual listing of the main colors, and typographic styles of the website. So let’s see how we can implement these elements into Elementor for a streamlined building experience.

As we learned in our last lesson, we can add a widget by dragging it in, and customizing it with the style tab. Using this method, I’ve already placed four headings here to demonstrate how a Design System can benefit your site.

Let’s start by selecting the first heading, and going to the style tab. Widgets placed in the Editor already come in with preset default styles.

The global icon here, indicates that there is a Global style setting available for either a color or font. When the icon is blue, it means that a Global style is currently applied to this setting.

For example, this heading’s color is already set to a global primary color, and its typography is set to a global primary font. Note that choosing a custom color, will turn the icon grey, indicating it no longer has the global style applied.

Using global styles, as opposed to setting custom colors and fonts individually, is considered best practice. Not only does it speed up your work process, it requires less CSS to load, and allows your website to load faster.

I’ll go ahead and apply a different global style to each heading on the page. Now that we have global styles applied to every heading, let’s edit them to match the Design System of our site.

Open the menu and select Site Settings. Notice that the panel header color changes to light blue, indicating that you are now editing globally, across your site. These settings can be accessed from any Elementor page.

Click global colors and adjust each color to match the color palette from your design. You can also rename a color by simply clicking on it, and typing a new name. 5

As you make adjustments, any widget with a global style selected, will update with the modified style.

Now that we’re done setting up the website colors, we’ll go back and set up the global fonts.

Since the global color we’ve applied to this heading is white, it’s not showing on the white background, but it will be visible when we use it on a dark background.

You can add more global color or font styles by clicking “Add Style” and customizing its settings.

Global fonts also allow you to customize different settings for responsive viewing. We’ll set these up in a later lesson, to give you the opportunity to preview them directly in your designs.

And there you have it! We’ve now created our very own design system, which will help us streamline the design process considerably .

In our next lesson, we’ll continue setting up our site using the Site Settings, and create the header and footer for our website, so be sure to keep watching.

Hey there, it’s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.

In the previous lesson, we set up our design system, and in this lesson, we’ll build on that to define the website settings and structure, which include elements such as site identity, the header and footer, and the site layout.

If you’re like me, you probably can’t wait to get started on designing your homepage.

And we’re ALMOST there! But setting up the site structure is integral to creating a website, so I highly recommend completing this step before you get started building.

We’ll begin with the Site Identity, here. This section is where you define your website’s site name, description, logo, and favicon. These details will be called upon repeatedly for reuse in a variety of locations throughout your site, as well as externally, such as in web search results.

Enter your Site Name…and your Site Description, which is also known as the tagline. This information will display in search results, so it should be accurate and contain relevant keywords.

Next, we’ll add the website logo. You can choose from many different image file types, but for beginners, I recommend starting with a JPG or PNG file. PNGs are great for logos because they display text and iconic graphics in better quality, and they allow for transparent backgrounds, so this is what I’ll use.

Click the plus icon to upload your logo. Then Upload Files, select your logo, and Insert Media.

Last is the Site Favicon. Your favicon appears in your site’s browser tab for quick and easy identification of your site, among other browser tabs. Ideally it should be a minimalistic graphic without too much detail, since it displays at a very small size.

Click Update, and Refresh the page to preview these changes. Refreshing the page, brings us back to the Editor, so click the Hamburger menu and Site Settings to go back to the main site settings menu.

Next we’ll create and style the Header and navigation menu. The header appears at the top of each page, and helps guide visitors as they navigate the site.

Before we begin, let’s consult the design, so we can quickly apply all the right settings. We have a logo in the upper left corner, and on the right, we have a menu with all the links to the pages on the site.

Great, so now we can go ahead and carry out this design via the Header settings.

Note that the Header and Footer options you see here, will only display if you have the Hello theme installed.
Click to enter the Header settings.

We’ll go through each option, and configure the elements we’d like to appear in the header, along with their layout, and styling.

As per the design, the logo should display, so leave the site logo on the default of SHOW. Next toggle the Tagline to HIDE as it’s not used in the design, and keep the menu on SHOW.

Even though the menu is set to show, nothing is displayed because we haven’t yet selected a menu.

Let’s skip ahead in the settings to set that up, so we can see what we’re working with.

Click Menu, here at the bottom…and select the menu we created earlier in the course. To display the selected menu, we’ll need to Update…and refresh. Perfect.
Let’s continue where we left off in the Header settings and check out the different available layouts. The default layout is a perfect match for our design.

Now we’ll take a look at the width options. Full width will bring the outer elements of the header content to the edge of the screen, and Boxed keeps the content confined to a container of a specific size. Set it back to Boxed.

In the Content With, you’ll notice the percent sign and PX for Pixels. This indicates that you can choose the unit of measure for this setting. In this case, PX is the default. You can use the slider to set the width, but in the XD document, we saw that the website was designed to span 1,500 pixels, so you can type in 1,500 to be precise.

Now set the gap to 20px to allow for the white space that we saw around each section of the design.

Below that is the background type. You can use it to set a background style, such as a color or gradient. Go ahead and have fun playing around with it, as these are options you’ll see again in the figure when you build the rest of your site.

When you’re done, click the square color swatch and clear the color by clicking this icon, to leave it on the default of white.
Click Site Logo. Switch it from Title to Logo. Whoa, that’s a bit large. Type in 125 for the width.

Now we just need to style the menu and we’ll be done with the header!

We already selected the Menu to display, so we can move straight to Menu Layout. Switching to Dropdown will set the menu as a hamburger icon for all sizes. We’ll leave it on Horizontal…and use the breakpoint to set the size, at which the toggle, or hamburger, icon displays.

Since we only have three pages on this site, they’ll still fit nicely at Tablet size, and we won’t need the breakpoint… to kick in until the display hits Mobile size.

Next to color, click the global icon and select the “grape” global color we created earlier in the course, to set the navigation menu links’ color.

Do the same, for Toggle color. We can’t see it yet, but we will in just a moment, when we preview the header in mobile view.

And last, for Typography, click the global icon to choose the Global font style we created for the Navigation Menu Links.

Ok it’s time to preview the design for Responsive. Click the responsive icon, here on the bottom panel.

Perfect, everything looks good on mobile. The hamburger menu appears, and we can click it to see the menu. Switch to tablet, by clicking the tablet icon at the top of the editor. Tablet looks great too, so we don’t need to make any responsive changes here. But don’t worry, we’ll cover how to make device specific changes in detail, later in the course.

And with that the Header is ready. Time to take care of the Footer. Exit Responsive mode, click back, and click Footer.

Referencing the site design, we can see the Footer consists of a colored background and copyright text in the center. Back in the Editor, the first thing you’ll notice is that the footer settings are pretty similar to the Header’s. So let’s run through them quickly.

Go ahead and hide the Site Logo, Tagline, and Menu, as we don’t need these elements. Set the Layout to Centered, and the content width to Boxed, 1,500 pixels as we did in the Header.

For the background, click the paintbrush icon for Classic, and select Grape.

Expand the copyright section and type in your text. Select a global color for the text, and a global font one for the Typography.

Click to preview for responsive. Everything looks great!

The header and footer will automatically repeat on every page on the website, unless they are disabled from the Page settings. This will allow your visitors to easily navigate throughout the site to find what they are looking for.

Click to return to Desktop, and go back to the Site Settings.

Click to enter the Layout settings. Recall that the width of the website content is 1,500 pixels. Rather than set this on each individual page, we can set it once and apply it to all the pages, by doing it here in Site Settings.

For the content width, type in 1,500. Set the Default Page Layout to Elementor Full Width, to hide the title and display the Header and Footer on every page. Great, let’s Update to save the site settings, and go back to the Editor.

I’ll go ahead and remove the examples from the page by right clicking here and selecting Delete All Content.
Now with the website layout and structure ready, and a fresh clean page, it’s time to start building the page content! So keep watching, and join us in the next lesson, where we’ll build our homepage.

Hey there it’s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.

In the previous lesson, we customized the settings and structured the layout of our website. And now for the fun: We’re ready to start building our homepage with Elementor!

Referring back to our design, the first section we’ll build is the hero section. This section consists of several elements, both stacked, and arranged side-by-side, and here, you’ll learn how to completely customize and style sections, columns, and widgets.

The following four sections are very similar to each other in structure and content, so we’ll use that to our advantage, with workflow shortcuts, such as duplicating, and copying and pasting elements.

The last section has a simpler structure, so we’ll continue building on the skills we’ve learned from the previous sections and introduce more workflow tips.

There is generally more than one way to achieve any layout, and since we have designed this course for beginners, to build SImaya, we’ve opted to teach using more straightforward structuring methods.

Ok, let’s start building! We’ll start by setting up a container, which will hold the hero content.

Back in the Editor, click the plus icon to create a new section., and select one column for its structure. Next, we’ll add an inner section, which is a secondary section, that can be nested within a main section (to help structure other elements). Click the widget menu to display all the available widgets, and drag and drop an inner section widget inside your column.
Upon placing any widget in the Editor, it is automatically selected and all available settings are displayed in the left Panel. Should a widget become deselected, just click on it, to get back to its settings.

By default, a section acquires the height of the widgets placed within it. But you also have an option to specify a section’s minimum height, which means that the section will always take up at least the specified amount, regardless of its content.

To do this, in Layout, for the height option, select Min Height, and set it to 700 pixels

Elementor allows you to add a background color or image to any section, column or widget.

So let’s go ahead and add a background color to the column. You can find most of the style settings in the Style tab, so click Style, and for background type, select Classic.

For the color, click the Global icon, and select the Global color “Grape,” which we created earlier, when we set up our design system.

Nice! Now that the container is ready, let’s start adding the widgets.

We’ll start with the first heading. Click the widgets menu, and drag and drop the heading widget in the first column of the inner section.

Type your text and…oops… where did it go!?

When you add a widget, by default it automatically picks up a Global color; in this case, it has the same color as our background.

To make the Heading visible, head to the Style tab, and select the global color, Almond. Much better!

In typography, we’ll change the default font a bit to match our design, by clicking the pencil icon, and customizing its style. We didn’t create a global font for this Heading, since we’re only using this particular style once on our website.

Now back in the content tab, align the text to the center.
To save some time, we’ll duplicate this heading to create a subheading, by right clicking the heading and selecting duplicate, or by using the keyboard shortcut, Command or Control D.

Now select this heading. And type in the subheading text.

Next we’ll update the HTML tag. Every time you add a heading widget, a default HTML tag of H2 is applied. Heading tags establish text hierarchy within the page. The smaller the H number, the more important a heading is, and it is best practice to set them accordingly. Since this is a subheading, switch it to H3.

Now let’s change the font style. For this one, we’ll select the global font, “Secondary.” Great!

Now we’ll add a button. From the widgets menu, drag and drop the button widget under the heading. Update the text,  and align it to the center.

We need this button to take visitors to the Our Menu page, so the first thing we’ll do is link it up. By typing its name here, one or more suggestions will pop up. Simply select the correct page, and voila, it’s linked!

Now let’s Style it. In Typography, select the “Button text” Global font.

For the button’s background, our design calls for a transparent background. To set this, click the color swatch and drag the slider, which controls opacity, all the way to the left, for complete transparency.

Since we’re going to need transparency again in our design, let’s save it as a Global style. Rather than go back to Site Settings, as when we were setting up the design system, we can also add global styles directly from the Editor.

Click the plus icon, and type “Transparent” to name it; then click Create. As you can see, it’s now been added to our Global colors.

Below, we’ll style the button’s border. In Border Type, select Solid and set its width to 1px.
Set its global color to Almond, and border radius to zero, to remove any default rounded corners.

Now let’s set the padding. Padding, in short, will add space between the border and content, to give the content some breathing room. The amount of space around the content is controlled by entering values here. By default, the link icon is active, which means that changing any value, will apply the changes to each side.

To deactivate linked values, and enable different values on each side, click the link icon, which will deselect, and unlink the values. We’ll adjust the button’s padding according to the design.

Next we’ll update the hover state of the button, which is how the button displays on mouseover. Click the hover tab, and change the text colour to Grape. Select Classic for the background type, and Almond for the background colour.

Adding a hover animation will give it a playful touch. We’ll select shrink.

Hover over the button to preview. It looks great!

The next element in the hero is the soup image.

So, in the widgets menu, drag and drop an image widget into the second column.

Then click here, to select your image.

You can upload your image by clicking the “upload files” tab and then “Select Files,” or you can simply drag and drop it like this.

For best practice, be sure your image has a descriptive file name. Then add a title, and Alt Text. This makes your website more accessible, and will help boost your website in search results!

Another important thing to keep in mind when uploading images, is the file size. Try to keep image size to 200 kilobytes or smaller, as they may affect the resources and speed of your website.

One of the most commonly asked questions when building websites is: “What are the right dimensions for web images?”

You can calculate the dimensions of your images, according to the common screen sizes. The most common (desktop) screen size is 1920 x 1080, so ideally an image of 2000px wide will work perfectly for a hero section that takes up the full width of the screen.

In our case, the image will be the width of about half the screen, so 1000px wide will be enough. Ok, once you’ve selected your image, go ahead and click Insert.

To make the image seamlessly blend into the background, I used the same color background as the hero section when I created the image. Another way to achieve this effect is to use an image with a transparent background.
Now let’s add one more column to the Hero section, where we’ll place the social icons.

Right click the second column, and select Add new column.
Great.

Now go to the widgets menu, search for social icons, and drag the widget here.

You can select the social icons of your choice. In our case, we’ll replace Youtube with Instagram.

Click to expand the options; then click the icon. This opens the icon libraries, complete with a wide range of free icons for you to use in Elementor!

Begin typing Instagram in the search bar to quickly find it, and insert the icon by clicking here. Now, add a social link to each icon. In shapes, choose square, to match the site design.

Depending on the number of the social icons used, we can manually select the number of columns they’ll be divided into, or leave it on auto, to automatically stack the icons. We want our icons to be stacked in one column, so we’ll select 1.

Ok, let’s style them. In the Style tab, select Custom for the color. Then for primary color, select the new transparent global we created earlier. For the secondary color, select Almond.

Let’s add more interactivity to the icons by setting the icon hover effect. For primary color, select almond, and for secondary, choose the grape.

And as for even more interactivity, we can also add a hover animation! Click hover animation options and select shrink, like we did with the button.

Wow! Who wouldn’t want to click those links!?
The column is a bit wide for the social icons, so let’s change its width. You can click and drag the column from its right edge, to visually adjust the column width… or select the column, and type in a precise value for column width.

The column width is measured in percentage, so typing in the number 5, will set the column to take up five percent of the total section width. This looks great, here.

Now, the only thing left to do for the hero section, is to vertically align the widgets to the middle.

The vertical alignment of widgets can be controlled via the Layout Settings in sections and inner sections.

Select the inner section, and in Vertical Align, select, select middle. Cool!

And with that, the hero section is complete!

Now we’re ready to create the second section. As we can see in our design, this section will provide some basic information about Simaya with an image and some informational text.

Click here, to add a new section and select the two column structure.

We’re going to set the minimum height to VH, to create some vertical space. VH stands for Viewport Height. It is a unit equal to your browser’s window size. So, 100VH is equal to 100 percent of your window’s height. I’ll enter 50VH which gives the section half of the window’s height.

Great! Now set the Column Position within the Section, to Stretch. This will allow the columns inside the section to expand, getting the same height as the section they’re in!

Next, in structure, you can select one of the predefined structures, to quickly change the width of your columns.
We’ll select this one, which will provide us with more space for our text in the second column.

Now we’ll add a background image to the left column. Select it, and in Style, select the classic background, and click here to choose your image.

While we’re here, let’s go ahead and upload all the rest of the images we’ll be using on the site. That way, we can skip the upload process in the future. Simply select them from your folder and drop them in here.

Once you upload them, just select the image for this column, and click here to insert it. As you can see, it automatically expands proportionally to take up the whole area of the section.

Setting an image as a background gives us extra control and effects to choose from.

In Attachment, the default option is scroll, which as you can see scrolls along with the page

For our website, we‘ll select Fixed Attachment, which keeps the image fixed in place in the background, giving the illusion of the website scrolling over it.

To further control how the image displays, we’ll edit its background size. You’ll see many options, like Cover, which will make the image proportionally fill the width and height of the column, or Contain, where the image will stay always visible horizontally and vertically inside the column.

We’ll select “cover” for this design. Since we chose Fixed Attachment earlier, selecting Cover will make the image proportionally fill the width and height of our viewport, instead of just the column.
Now I’d like to add some white space around the column. To do this, navigate to the Advanced tab, where you’ll see Margin and Padding.

These options will be found in every section, column, and widget, under this tab.

These two options are commonly known to create confusion, since both are used to create space, and users often aren’t sure which one to choose.

While they both add space, they are used for different reasons, and to achieve different results.

Before demonstrating the differences, let’s populate the column with a widget. If a column doesn’t have any widgets inside, some changes, like padding and margin, will not display.

Drag a spacer widget and drop it into the column. Spacers, as the name suggests, create space. Let’s give it some height as well. Now select the column again, and in the Advanced tab let’s begin with Margin.

Margin is used to create space between an element and the content around it.
For columns like this one, you’ll see, that setting a value for the margin, will create a space outside its content, making the entire column smaller.

Padding is used to create space within the element itself. Let’s add a little padding to better understand it.

As you can see, it creates space inside the column itself which makes the spacer smaller.

Since we want to create some space outside the column to match the layout of the page, we‘ll use margin, here . Set it to 10 pixels.

Now let’s add our content to the second column. From the widgets menu, drag and drop the heading widget here.
Change its text, and set the html tag to H3 since this will be a subheading. In style, set the typography to secondary.

Next, from the widgets menu, drag and drop in another heading. Change its text, and in Style, change its size, and change the letter spacing a bit. We’ll go ahead and create a new global font style, since we’ll be using this style again.

Click the plus icon and name it “Section text,” then click create. As you can see, it’s already been added to the list!

Now, back in the widgets menu, find and drag the text editor widget below the heading. This widget is ideal for adding and styling text copy. Type your text, and in style, change the text color to Grape.

Now let’s tweak the widgets’ spacing within the column. Click the column, and set the Vertical alignment to Middle. In the Advanced tab, for the padding, select percent for the unit, and set it to 10. Great. Section two is complete.
Let’s create our next section. To save some time, right click this section and select “Duplicate.”

This section should have three columns, so right click the first column, and click, “Add New Column” to insert another column. Perfect!

As I showed you earlier, Elementor not only allows you to drag and drop widgets from the widget menu into your page, you can also drag widgets, columns, and sections within the Editor to rearrange their order.

Let’s rearrange the position of some of the elements to see it in action. Starting with this column, click and drag it all the way to the left, to place it here. Now, right click, and delete this heading, And drag the remaining heading to this column.

Now that we’ve re-arranged the columns and their elements, we’ll update the content and style.

Click the text editor widget and replace the text. Now select the column and in the Advanced tab, increase the padding. Great!

Next, select the second column, and in style, replace the background image. Change its position a bit, by setting it to the center.
Now let’s edit the third column. Select it, and under Vertical alignment, select Middle. This positions all the widgets vertically to the center. In Style, give it a background color. In the Advanced tab, add 10 pixels of margin to match the other columns.

Now click the heading, and in style, select the global color, Almond, to give a strong contrast. Back in the Content tab, type the text, and align it to the center.

And in the Advanced tab, unlink the padding, and set the right and left values to 30 percent.

Next we’ll need a button. Since we designed one already in our hero section, let’s save ourselves some work and reuse it. Scroll up. Right click on it, and select “copy.” This will copy the entire widget, including all its settings.

Scrolling back down to the section… right click again inside the column, and select paste.

Now type your text, and just like that, the button is done. We’ll come back to link this button to the end of the page, a bit later, once we’ve built the last section.

Now, we’ll add an image widget. Select your image, and Insert it.

For this example I used a transparent png image, but you can use any image you’d like.

Next, in Style, set the width to 20 percent. And…done!
With every new section we add, the length of the page is increased, which can make it more difficult to navigate within the Editor. This is where the Navigator comes in.

You’ll find the Navigator here, in the Panel Toolbar. Click to open it, or use the keyboard shortcut, Command or Control I. You’ll see that a new window pops up, that displays the page’s sections, columns and widgets in expandable layer format.

Clicking any item, will navigate you directly to it and enable its settings. You can drag and drop elements to reposition them, like this.

To make it easier to navigate through each section, let’s rename the ones we’ve added so far.

Double click the first one, and give it the name, “Hero.”
Next, double click the second section and give it a memorable name. Repeat this for the third section.

Right click the third section, where you’ll find even more options, and select “Duplicate” to create a copy of it. Double click it, and name this section. Great. Go ahead and close the Navigator for now.

Delete the first column since we won’t need it here, and reposition the columns by dragging the second column to the left. Change its width to match one third of the column, or 33.33 percent.

And in style, change the background color to Basil.
Now we’ll update the content.
Click the image widget, and replace it with a new image. Click the heading and update the text. Select the button, and replace the text. There’s no need to update the link, since it’s already connected to the Our Menu page.

In style, change the hover color to basil to match the background.

Next, click the column to enter its settings, and in style, replace this image with a new one. And that’s it! We’re already done with this section!

Moving right along, let’s add another section, following the same design style.

Open the navigator, using the shortcut we learned before. Right click this section and select “Duplicate”. Give it a name. And Drag it all the way to the bottom. Now drag the second column to the end of the section, and in Style, replace the existing image with the new one. Go ahead and close the navigator.

Select the second column, and in style, change the background color to raspberry. Replace the image, update the Heading content, and the button text. And link it to the Contact Us page
In style, change the hover color option to match the background.

Next, click on the text editor, and replace the text. Great!

The last section, as you can see in the design, features the story of Simaya.

Create a new section with one column. Open the Navigator, and name the section.

Now, remember the Our Story button from the third column?
There’s a super simple way to create an anchor link to this section, so when the button is clicked, the page will scroll right to it. Let’s do it!

In the Advanced tab, you’ll see the option, CSS ID, which is used to provide a unique name that can be given to only one element on a page.

Let’s give it the name “story.”

From the navigator, click the “Since 1998” section. And in link, type, hashtag, and the ID name of the section.

The CSS ID is case sensitive, so be sure to use exactly the same word in both the ID and the link.

Ok, let’s see if it works. Click the button. Fantastic!
Now close the Navigator, using the same shortcut, we used to open it. From the widgets menu, drag and drop the heading widget into the column. Name it Our Story, and align it to the center.

Hold down Command or Control D to duplicate the heading. This will be the subheading. Click it to change the text.. And set it to H3. In style, select a global font for the typography, to match the design.

Back in widgets, drag the text editor under the headings, and update the text..

In Style, align it to the center, and select a Global color.

And in the advanced tab, we’ll control the width of the text content by adding some padding on the right and left sides.

Perfect!

From the widget menu, let’s add a spacer widget.
Spacers, as I mentioned before, are used to create space, for example between widgets, or to create line breaks.

Set its height to 300 pixels. In Advanced, add a background image to the spacer. Set the Attachment to Fixed and the size to Cover.

Now, expand the Advanced tab, and add some space above and below, by unlinking, and adding a margin to the top and bottom of the widget.

Now we’ll add our social media icons. We’ll use the same ones we created previously in the hero section.

Open the Navigator, and select the hero section. Drag the Navigator window over a bit, so we can see the icons in the Editor, and right click to copy the social icons.

Click the last section to take us back to the bottom of the page. Right click the spacer, and select paste.
Hooray for the Navigator!

You can’t see the icons yet, so go to Style, and change the secondary color here, as well as for the hover state.

Go to Content, and set the Columns to Auto. In the Navigator, click the our Story section, and in Advanced, change the Margin unit to percent. Type in 10 to add ten percent margin to the top and bottom of the section.

Ok, time to preview! Click the first section to jump to the top of the page, and close the Navigator. Click the icon here to hide the panel or use the shortcut Command or Control P.

Everything looks great here in the Desktop view, and we’ve now completed the desktop version of the homepage. You’re already becoming a pro at creating and customizing sections, columns, and widgets. Continue to the next lesson, to learn how to optimize your webpages for responsive viewing. See you there!

Hey there, it’s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.

In the last lesson, we built the homepage for the restaurant website, Simaya, and covered concepts such as, page structuring, margin and padding, and workflow shortcuts.

In this lesson, we’ll cover the responsive editing foundations in Elementor, optimize the Simaya homepage for responsive viewing, and set this page up, to display as the homepage on the website.

With so many people accessing websites from different devices these days, it’s more important than ever to optimize your website for different viewports, or screen sizes.

Elementor provides you with tools to preview your website for different devices, and optimize your designs, accordingly.

With just a few tweaks, we’ll make the homepage display perfectly, on tablet and mobile. So let’s go!

Let’s start with a tour of the responsive features in Elementor. First, click here, on the bottom panel, to enter responsive mode.

At the top of your screen you will see this panel, which shows mobile, tablet, and desktop viewport icons.

Clicking a viewport icon will preview the page at the selected screen size

The presence of a Viewport Icon next to any option, in the settings of a widget, column, or section, indicates that the changes made there will apply specifically to that viewport.
It’s important to understand that in most cases, responsive edits in Elementor are inherited from the larger viewport down to the smaller viewport. So this means that Desktop responsive settings are applied downward to Tablet, as well as Mobile views, and changes to Tablet settings are applied to Mobile.

Since we’ve already got everything set up for Desktop view, we’re ready to optimize the tablet view, and apply these principles to the design.

Let’s take a look at the Hero section. When spread out over three columns in tablet mode, the content gets cut off. Let’s modify the way they display, to give each element the attention it deserves.

We’ll move the first column to the top, and allow it to take up the full width of the section.

To do this, select the column and for the Column Width Percentage, type in 100.

Ta da! As you see, the column now takes up the full width of the section pushing the other two below, into the next row.

When this happens, the width of these two columns resets, so select the second column and set its width to 90.

Now we just need to add some padding to the top of the inner section, like this .

Scrolling down, we can see that the section below already looks great on tablet. Scrolling further down… well…this section could be adjusted a bit.

Select it, and set the Minimum height to 300 pixels.

Let’s use a shortcut to quickly apply this setting to the two sections below. Right click the section and select Copy. Now right click the section below and select Paste Style, or use the keyboard shortcut: Command or Control Shift V. This applies the settings of the copied section, without changing the content.

Right click the next section and Paste Style once more. Neat!

Now select this heading, to adjust its layout. In Advanced, unlink the padding. This resets the padding to zero.

Now Copy, and Paste Style on the next two headings.

Scroll back up, and select the right column. In Advanced, add 5% padding to give the content a little more breathing room. Do the same for the matching columns in the next two sections. We’re not using Paste Style in this case, because it will paste the column background color as well.

Ok, these sections are good to go. Scroll down to the last section. The heading is a bit large here, so we’ll need to update its size for tablet.

We’ll be using this heading again on the website, so it’s a good idea to edit it from the global style, and not have to make this change again, next time we use this style on tablet.

Click the heading, and in Style, Typography, click the global icon. You’ll notice a gear icon here. Click it, to enter the Global Fonts settings. Now click the pencil icon for the style Primary, and change the size. Since we’re in tablet mode, this will not affect the desktop font size we set previously.

Great. Be sure to Update, and go back to the editor. Let’s take a quick look at the heading. Perfect!

Now let’s take a look at mobile.
The Editor scrolls all the way down upon switching to mobile, so I’ll just pull up my handy navigator (now I know you know that shortcut!) and zoom back to the first section.

By default, on mobile, each column takes up the full width of the page. So we don’t need to manually adjust the column sizes one-by-one.

The font-size looked great for desktop and tablet, but it’s a bit large for mobile devices. Since it’s a custom style that we’re only using once on the website, there’s no need to go into the global settings.

Click this heading, and in style, change the size of the font. And since we’re in mobile view, this change will not affect tablet or desktop views.
Scroll down, and adjust the social icons, by selecting them, and setting the columns to Auto.

Scroll down a bit more, and you’ll see that we have two adjacent sections of text. We can actually reverse the display order of columns in responsive views, by going to Advanced, Responsive, and Toggle Reverse Columns (Mobile) to YES.

Ok, let’s adjust the layout of the solid-colored columns, so they are proportionate to the other columns. Click the first one, and in Advanced, add 15% padding. Do the same for the other two solid color block columns.

Great, almost done. Scroll down to the last section, and in Advanced, unlink and add some margin to the top and bottom.

Then select the text, and add some Padding, which as you can see, adjusts the layout, making it easier to read. Perfect.

Our responsive edits are now complete.

Go to the bottom panel, where the save options are, and click Update to save the changes.

Recall that we already published our page from the WordPress dashboard, but for pages that have not yet been published, the button would display “Publish” instead.

Ok, the homepage’s layout and design is complete. We have one last step, which is to let WordPress know that this page is the homepage for the website, ensuring visitors will always land here, when entering your URL.

Click the top left menu, and then Exit to Dashboard, to go back to WordPress. Here on the left, hover your cursor over the settings, and click “Reading.”

Make sure a static page is selected and expand the list to see your available pages. Select the home page. Click save, and your homepage is complete!
Ok great, you now know how to use Elementor’s responsive options to optimize your web pages.

In the next lesson, we’ll build the Our Menu page, using what you’ve learned so far, as well as new concepts, including new widgets and layouts! We will also learn how to reuse elements in other ways, and save a page as a template, so keep watching to learn how.

Hey there, it’s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.

In the last lesson, we learned about responsive editing in Elementor, optimized the homepage for devices, and designated the homepage in WordPress.

In this lesson, we’ll create the Our Menu page, learn new widgets, and go over some new techniques to help you become a pro in no time!

If you haven’t seen the previous lessons in this course, I highly recommend watching them, as we’ll be building off of what we learned previously.
Ok let’s get started! We’ll begin with the hero section, which as you can see from our design includes two headings, a text editor widget and a spacer widget…

Wait a minute! Haven’t we designed a section similar to this before? We sure have! The last section of the homepage has the same widgets as this one.

When you have sections that are very similar on your website, there’s no need to start designing again from scratch.
I’ll share a few workflow methods that will help you save time while building websites in Elementor.

Ok, so in order to reuse that section I mentioned, we’ll need to reopen the homepage. You can hit the Escape button on your keyboard, and click here, to exit to the dashboard..

Another way to quickly exit the Editor is to type Command or Control E, which opens the finder.

The Finder helps you find your content easily and navigate through WordPress in no time!

Just type the word “home,” and the homepage will display. Then hold down the Command or Control key, and click the link, to open it in a new tab.

In the previous lesson, we copied elements and pasted them in different sections throughout the page. Now we’ll use the same method to copy from this page, and paste into the Our Menu page!

Open the Navigator, right click the Our Story section, and click Copy. Now go back to the Our Menu page. Right click, Paste, or use the keyboard shortcut Command or Control V.

Works like a charm.
Ok, so now let’s customize it. Click the sub-heading, and update the text. In style, change the color to Basil. Now select the second header.

Add your text, and in style, change the color. Next, drag the text editor widget under the spacer, and type your text. In Style, change the color to basil.

Select the spacer, and in the Advanced tab, select a new background image.

Right click on the social icons, and delete them, as we don’t need them for this page.

From Widgets, drag and drop the icon widget under the text editor. You can upload your own icon, or as in our case, select one from the Icon Library. Type “chevron” in the search, select one of the available chevrons, and insert it. In style, change the color. Change the size to 20.
Now select the section, and in Advanced, add a margin of 5%… Great! The Hero section is ready.

This section, including its widgets and style, will be used over again across the rest of our site, so let’s make good use of it.

Another way to reuse a section is to save it as a template.
To do this, right click o n the section, and select save as a template. Give it a memorable name, and click save.

To access your templates in the future, you’ll find them, by clicking the gray folder icon, here. This opens the Templates Library, and in “My templates,” you’ll find all of your own saved templates. Then just hover over the template, and click Insert, to add it to your page.

As you’ve just seen, copying elements and saving them as templates saves valuable time, and I encourage you to incorporate these processes into your workflow.
Let’s continue to the next section. Create a new section with one column. As we did before, we’ll give a name to the sections, so we can navigate quickly throughout the page. Open the Navigator, name the Hero section… as well as the Starters section.

Now close the Navigator, and from the widgets menu, search for the divider widget, and drag it into the section.

The divider widget creates an organized and aesthetic separation between sections, with a customizable line that you can combine with an icon, or even text.

To add text to the divider, click here, and type your text.
We can’t see it at the moment, because its default color is the same color as the background.

Let’s take care of that, so we can see what we’re working with. Go to the Style tab and change the divider’s color..

In text, select basil for the font color.. and set the typography global style…to Section. Great!

From the widget menu, drag and drop an inner section, below the divider. Right click here.. and select add new column.

We’ll continue by creating the first item of our menu offering..
As we did in the previous lesson, begin by adding and styling the widgets for the first column, one by one.
From the widgets menu, drag the image widget, and drop into the first column.

Choose an image, and in Style, adjust the width.

Back in the widget menu, drag a heading widget under the image. Type your text, and change the html tag to H3. Now align it to the center. In Style, change the color to basil, and set the typography to the global style “Menu Titles”.

From Widgets, drag in a text editor widget, and type your text.
Now right click on the heading, and select duplicate.
Drag it below the other widgets, and change the text..
Set its HTML tag to H4, And in Style, Typography,

Select the… hmm. Nothing here quite works. So let’s set one more global font style for the price text.

Select the pencil icon to set a custom font style, and change the font size. Set its weight to 600. And in Transform, remove the Uppercase, by setting it back to default. Now click the plus icon, type a name… and save it as a Global font. Perfect!

Select the column, and in the advanced tab, change the unit to percent, unlink the values, and add some padding, to give more space to the widgets. Great!
Now that we understand how easy it is to create each section with different widgets, let’s talk about more optimal ways to build in Elementor.

As you familiarize yourself with the Elementor Editor, and gain more experience, you’ll find yourself coming up with ways to simplify and optimize your website building process.

For example, widgets like the icon box… as well as the image box… include an image, a title, and a description, all in one place. Using them in the right way will reduce the amount of widgets, and can even be used to create entire sections from them. Designing this way not only boosts the performance but also reduces the loading time of your page. Win-win!
To see how this works let’s re-create this menu item, in a more optimal way.

Drag the image box widget to the top of the column.
Add an image… Then type the title… And finally the text…

In Style, there are loads of options to design and position each of the elements. Take some time, and go ahead and experiment with all the options!

Let’s change the image width a bit. And under content, set the title’s color to basil. For the typography, choose the global style, menu titles. Everything else looks great as is.

Right click, and delete the previous image, title, and description. And leave only the price.

Fantastic! We’ve achieved the same design, with fewer widgets!
Now we’ll continue, by duplicating the column twice.. and deleting the extra columns.. Click on the image box, replace the title and text. Click on the price, and change its content as well..
Great!
Repeat this one last time for the third section, and we’re done!
Sometimes the amount of text present in a widget can lead to varying section heights, creating an imbalance between the position of your widgets, just like this price here.

It’s not wrong to leave it as is, but if you’d like all the prices to be in the exact position, there’s a simple fix for that.

Select the inner section, and under vertical positioning, you’ll find different options that enable you to control the widgets‘ position inside sections.

Select “Space between” which, just as the name suggests, creates space between elements, positioning the first one at the top of the column and the last one at the bottom. Looking at the prices now, they’re all at the same height! This is a super simple, but often overlooked way, to be pixel perfect.
Back in widgets, drag in a spacer widget. Set its height to 300 pixels And in the Advanced tab, uncheck the values, and add some margin.

Next, expand the background tab and choose an image.
Set the attachment to Fixed, and the background to Cover, so the image nicely covers the spacer.

Great.
Now, remember the arrow icon we created in our hero section?
Let’s create an anchor link, to connect the icon to this section, so when someone clicks it, it will scroll straight to the Starters!

Select the section, and in the Advanced tab, enter the ID name “start”.

Now scroll up to find the button, and click on it. Under link, type the pound symbol, or hashtag, and the ID of the section. Again, be sure to type it exactly the same, as the ID name.

Let’s test it. And, voila!
Let’s continue with the Mains. Right click the section and duplicate.

With the second section selected, head over to the Advanced tab. You’ll notice the CSS ID is empty. As I mentioned earlier, CSS IDs should appear only once on your page, so duplicated elements do not copy the ID over…
ID names must be unique, so remember to use different names, when creating more than one anchor link!

Now open the navigator, and change the section’s name to “Mains.” Great
Select the divider, and change its text. In style, set the divider’s global color to grape, as well as the text’s color..

Select the image box, and choose an image for the Mains. Change the title and the description..
Then go to the style tab, and under content, select the global color grape, for both the title and description.

Now select the heading. Change the price, and in style.. Set the color to grape, as well.
We’ll repeat these steps for the next item….
And the following one, as well…
Now select the spacer, and in the Advanced tab, choose a suitable image for the Mains.
Almost there! Just one section to go! Right click the section, and duplicate it.

Time for dessert! Open the navigator and name the section “Desserts.” Now, select the divider… and update the text. In Style, set both the divider and text global colors to raspberry.
Select the image box, and choose an image for the Desserts.
Change the title and the description. Then go to the Style tab, and under content, set the global color to raspberry, for both the title and description.

Select the heading. Change the price, and in style.. Set the Raspberry color as well.
Repeat these steps for the next column, and the following one.
All that’s left now, is to change the spacer image. Select it, and in the Advanced tab, under background, use an image of your choice.

Great. Let’s take a look at the page. Looks good enough to eat! So we’re done, right!? Well…not quite
The page does look fantastic on Desktop, but it’s really important to preview each page in responsive mode, to make sure they display correctly in all viewports.

Use the keyboard shortcut Command Shift M to go directly to tablet view in responsive mode. It looks pretty good, but personally, I’d prefer to reduce the amount of space between columns. Click the first one, and in the advanced tab, set the padding to 10%.

We’ll use the hotkeys we learned earlier, to copy and paste this style quickly to the other columns.

Type Control or Command C to copy the style. Select the next one, and hold down Control or Command Shift V to paste the style. Repeat these steps for the other columns as well.

Easy as well…pie! Now let’s see how the page looks on mobile.

Scrolling down, the page looks perfect on mobile. Just in time, because designing this mouthwatering page has made me hungry! Click update, and preview the page. Looks great, if I say so myself.
Ok, we’ve now completed the Our Menu page, learned about new widgets, and added more techniques to our repertoire.

In the next lesson, we’ll create the Contact Us page, which is the last page of our website. We’ll delve into the Advanced tab to learn more about optimization and best practices when building websites. So go have some dessert, and then click to keep watching!

Hey there, it’s Aviva from Elementor. Welcome back to How to Build a Website in Elementor.

In the previous lesson, we created the Our Menu page, covered new widgets, and sharpened our web building techniques.

In this lesson, we’ll complete the website, by creating the Contact Us page, go over widget Positioning, and learn new website optimization methods. We’ll also conclude the course with a review, and suggest the next steps for you to take in your Elementor journey.

Let’s open the Contact Us page, we created earlier in the course.
Hit Command or Control E to open the Finder, and type “Contact.”

Notice that the Contact page isn’t found. That’s because in order for it to display, we need to first convert the Contact page to an Elementor page. To do this, click Exit to the Dashboard, go back to pages, find the Contact Us page, and click to open it. Then click the “Edit with Elementor” button. From now on, we’ll be able to find this page using the Elementor Finder.

The first thing we’ll need to do is to add the template of the hero section we created previously. Click the gray folder icon, and the My Templates tab. Hover over the template, and click insert. Great.

Change the subheading…and the heading text..
Then, select the spacer, and in the Advanced tab, change the background image.
Now go ahead and delete the other elements, as they are not needed in this page.

Next, add an inner section, and right click here, to add one more column. This will be where we’ll add the contact information, phone number, and location.

From the widget menu, find and drag an image box into the first column. Update the image… Add a title, and description.

Next, in the Style tab, change the image width.
Under content, set the title color to basil, and change the typography to button text.

Now, change the description’s color to basil, and we’re done with our first column!

From the Advanced tab, we’ll add some padding. To do this,
Select percent for the unit, uncheck the linked values, and add some padding.

Right click on the column, and duplicate it twice. Now delete the empty columns.

Update the content of the second image box, and apply different colors. Repeat this process for the last one.

And just like that, we’ve completed this section!
As I mentioned in the previous lesson, using fewer elements, such as columns and sections, auto generates less code on your web pages, allowing them to load faster.

So next we’ll take a look at how we can optimize this section, and recreate it without using an inner section and three columns. While this step is optional, I encourage you to give it a try, to get a better understanding of these optimization techniques.

So, let’s do it! Right click on the first image box, and duplicate it. Now, drag it directly under the spacer. By default, every widget takes up 100 percent of the available column’s width. The blue outline shows the extent of the widget’s width.

Dragging in the second image box, places it below the first widget, since at 100 percent, the first image box pushes the second image box below it
However, in the Advanced tab, you will have the option to change any widget’s width. Under positioning, you’ll see “Width”, where you have a number of options.

Full width, which is the same as the default, Inline, which resizes the widget to the width of its content, and Custom, which gives you the freedom to set the width of your choice.

We’ll select Custom, so we can set the 3 widgets to have equal space between them, like the original 3 column layout we created before.
Now, we know that a column takes up 100 percent of the available space, so by changing the unit to percent, and typing in 100, the image box widget will continue to take up 100% of the column’s space.

By changing it to 50, the image box will take up half of the column’s width. If we change the second second widget’s width to 50, you can see they now fit side by side in the column.

(I think you can see where I’m going with this.) Since we have three widgets, we’ll need each of them to take up one third of the column’s width, so set the value to 33.3%. Great, now do that same for the second one.

No go ahead and duplicate the third widget, here, and drag it above the inner section. In Advanced, under positioning, give this image box the same value. Perfect!

We’ve now created the exact same layout for this section, but without the need for the Inner section widget and with two columns fewer.

As you continue to gain experience building websites in Elementor, you’ll start to find yourself coming up with new approaches to building websites in more optimal ways.

So if you’d like to give your web pages a boost, go ahead and give optimized layout a shot!
Next let’s delete the inner section, now that we no longer need it.

The page looks great, so let’s enter responsive mode to make sure that everything displays correctly. Using the keyboard shortcut Command Shift M, will take you directly into tablet view.

Ok, everything already looks great here so let’s switch to mobile

The widgets display next to each other here as well, but it’s a bit tight for this view, so let’s space them out to make them more visible. Select the first image box, and in Advanced, under positioning, you’ll notice the mobile viewport icon. As you’ll recall, this indicates that any changes made to this setting will display only at this viewport size, since it’s the smallest breakpoint.

Set it to full width. Repeat this step for the second… And the third image box. Great, let’s preview it!

Congratulations! You’ve now completed building your first website in Elementor. Well Done!

So let’s recap what we’ve learned, and take a tour of the site.

We got started by Installing and Activating the Hello theme, creating our website pages, and adding a navigation menu.

With that done, we went on to set up our website’s design system and structure, including our header and footer.

We then dove full force into the Elementor Editor to build the Homepage, Our Menu Page, and Contact Us Page, complete with responsive edits.

And throughout the course, we covered lots of other tips and tricks, to make your website building process more efficient and effective.

Now you know how to create a professional website from start to finish, without using a single line of code! Great job!

If you’d like to further advance your skills, you’ll find links in the description to some of our many resources, including:
a playlist dedicated to the Elementor widgets, a video on responsive editing, optimization lessons, and even a full course on building a website using Elementor Pro features!
Go check them out!

I hope you enjoyed this course and feel confident in using Elementor to design, build, and publish websites for your own business or customers.

As always, Check out the Elementor Academy for more tips and tutorials. Till next time! Thanks for watching.