[05] Building the Homepage in Elementor

[Music] 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 are 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 samaya we've opted to teach using more straightforward structuring methods okay let's start building we'll begin 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 intersection 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 intersection 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 into the first column of the intersection 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 for the color 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 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 create 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 1 pixel set its global color to almond and border radius to 0 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 mouse over click the hover tab and change the text color to grape and almond for the background color 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 it 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 by 1080 pixels so ideally an image that's 2000 pixels 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 1000 pixels wide will be enough okay 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 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 one okay 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 grape and 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 edge to visually adjust the column width or select the column and type in a precise value the column width is measured in percentage so typing in the number five 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 intersections select the intersection and in vertical align 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 samaya 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 100 vh is equal to 100 of your windows height i'll enter 50 vh which gives the section half of the windows 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 that 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 then 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 that 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 column 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 always stay visible horizontally and vertically inside the column we'll select cover for this design 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 widget 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 2 is complete now let's create the next section to save some time right-click this section and select duplicate 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 rearranged the columns and their elements we'll update their 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 it 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 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 an 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 don't need it here and reposition the columns by dragging the second column to the left change its width to match 1 3 of the column or 33.33 percent and in style change the background color to bazel 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 hour 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 the text editor and replace the text great the last section as you can see from the design features the story of samaya 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 okay 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 your 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 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 the social media icons we'll use the same ones we created previously in the hero section open the navigator and select the hero section 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 10 margin to the top and bottom of the section time to preview click the first section to jump to the top of the page click the icon here to hide the panel or use the shortcut command or control p everything looks great here in desktop view and we've now completed the desktop version of the home page 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 web pages for responsiveness see you there you

Channel: Elementor

Views: 32,836

Keywords: elementor, wordpress, course

Id: LjQptEShDJo

Length: 29min 59sec (1799 seconds)

Published: Wed Aug 04 2021