0:05 since we haven't created any parts yet
0:07 your initial view will look like this
0:09 click to add a new header
0:10 you can either select one of the
0:12 pre-made header templates from the library
0:12 library
0:14 or create your own just like we'll do in
0:16 this course so
0:18 close the library and click the settings
0:19 cog on the bottom left
0:21 to enter the header settings then name it
0:24 it
0:26 next add a section with two columns and
0:38 now as mentioned before both on the home
0:40 and about me pages
0:42 the header page content and footer together
0:43 together
0:44 take up a hundred percent of the
0:46 viewport's height so it fits perfectly
0:48 on the screen
0:49 in order to achieve this we need to
0:52 control the height of each side part
0:54 we'll do this by giving the section a
0:56 min height which stands for minimum height
0:56 height
0:58 and as it sounds make sure that the
1:00 section will at least be a certain height
1:01 height
1:04 by default it's set to 400 pixels let's
1:06 change the unit to vh
1:09 which stands for viewport height and is
1:11 a unit that's relative to the screen's height
1:11 height
1:15 so exactly what we need set it to 15v edge
1:17 edge
1:19 now go to widgets and drag and drop the
1:22 site logo widget in the left column
1:24 the widget looks greyed out since we
1:25 haven't set it yet
1:27 let's go add it in site settings which
1:30 we can access without leaving the editor
1:32 simply click the top left menu button
1:34 and in site settings
1:37 go to site identity here you can change
1:38 the site name
1:42 and description and add the site logo
1:45 and favicon let's set the logo
1:48 click here to choose the image then drag
1:49 and drop your logo
1:51 to upload it to the library then click
1:53 insert media
2:00 once you're done click update and close
2:02 the site settings panel
2:04 back in the editor we can see the logo
2:06 is updated
2:12 as you can see the link is already set
2:13 to the site url
2:15 which we will soon set as the home page
2:17 after we create it
2:19 next in the column settings set the
2:22 vertical align to middle
2:25 great now let's add our menu
2:27 go to widgets and drag and drop the nav
2:28 menu widget
2:30 in the right column you can see that it
2:32 doesn't display anything yet
2:33 this is because we haven't created a
2:36 menu and pages we will start
2:38 by creating the pages and then add them
2:39 to the menu
2:42 click command or control plus e to open
2:43 the finder
2:45 which is a search bar that offers easy
2:47 navigation between different pages
2:49 and dashboard settings so you can
2:50 perform actions on the fly
2:53 such as creating new pages for example
2:54 simply type
2:57 add new page and while holding command
2:57 or control
3:00 click to open it in a new tab go to the
3:01 new page
3:02 and click the gear icon in the bottom
3:04 left to enter its settings
3:07 then give the page a name i'll name it portfolio
3:09 portfolio
3:11 then hit publish do the same to add
3:22 now let's go back to the header and in
3:24 the nav menu widget
3:26 click this link over here to create the
3:28 menu it will open the wordpress menus
3:30 page in a new tab
3:33 give the menu a name and click create menu
3:34 menu
3:36 then add the pages we just created from
3:39 the panel on the left
3:41 next click save menu and go back to our header
3:43 header
3:45 let's save this as a draft for now and
3:47 refresh the page
3:48 now we can find our menu in the
3:50 drop-down list
3:52 so make sure it's selected and set both
4:01 ok it's time to style our menu items we
4:03 can do that by giving them custom colors
4:04 and typography
4:09 but let's use elementor's design system
4:12 features to create some global styles
4:13 which will save us a lot of time in the
4:16 long run as you most likely know
4:17 colors and fonts are the building blocks
4:19 of a web designer's work
4:21 and are assigned to elements
4:23 consistently throughout your site
4:25 elementor's design system feature allows
4:27 you to create a go-to color palette as
4:29 well as a collection of font styles
4:30 which you can assign to elements
4:32 globally and all from one place
4:35 making editing easier and a lot more fun
4:37 so let's go ahead and create the globals
4:40 we are going to use across our website
4:42 you can either click here to manage your
4:43 global colors directly
4:46 or go to site settings and choose what
4:46 to manage
4:49 and a design system i'll start with the
4:50 global fonts
4:51 we'll come back to set the primary
4:53 headline when i show you how to add an
4:56 adobe typekit font to your site
4:58 for the secondary headline set the fun
5:07 size to 60 pixels weight to 600
5:10 and spacing to one
5:12 the body text will set to 18 pixels and
5:16 give it a line height of 35
5:23 then set the size to 14 pixels weight to 600
5:25 600
5:27 transform to uppercase and give it a
5:29 letter spacing of one
5:32 great let's click to go back and set up
5:34 our global colors
5:37 we'll give primary this dark color and
5:38 secondary white
5:41 then give text this gray color and lastly
5:42 lastly
5:45 set accent to this pink red color next
5:47 click update and close the panel to go
5:49 back to the editor
5:52 now click the menu widget again and in style
5:53 style
5:55 for typography select the accent text we
5:57 just set
5:59 then set the text color to primary and
6:02 for hover we'll leave the accent color
6:04 as you can see it will display once we
6:06 mouse over the links
6:08 next select the active color that will
6:10 be displayed for the active pages
6:13 set it to accent as well lastly
6:15 set the horizontal padding to 40 to
6:18 space them a bit
6:19 when it comes to contact information you
6:21 want it bold visible
6:23 and standing out on your website so
6:25 people can get in touch with you easily
6:27 we are going to create a contact button
6:29 that will be displayed right next to the menu
6:29 menu
6:32 and set it to open a pop-up with your
6:33 contact form
6:35 so drag in a button widget and drop it
6:37 under the menu
6:39 add the button text over here i'll type contact
6:40 contact
6:42 and in the style tab let's style it a
6:44 bit as you can see
6:46 it already comes with some default
6:48 styling such as the global accent text
6:49 for typography
6:51 and the global accent color for the
6:53 background which we set up earlier
6:56 let's change this to primary and set the
6:59 text color to secondary
7:01 next we'll set the border radius to zero
7:03 so it's a rectangle
7:05 and unlink the padding so we can set
7:06 them individually
7:08 i'll set it to 20 pixels on the top and
7:18 great now let's position the button next
7:19 to the menu
7:20 all we need to do is make a quick change
7:22 in the advanced tab
7:25 so for the baton widget go to advanced
7:26 and in positioning
7:29 set it to inline then back in the nav
7:30 menu widget
7:39 cool this setting allows you to align
7:40 elements side by side
7:43 in the same column as you can see both
7:45 the baton and the nav menu widgets
7:47 don't take up 100 of the column's width
7:49 anymore just the width of the widget itself
7:50 itself
7:52 as indicated by the blue line creating
7:54 space for more objects to be positioned
7:56 next to each other
7:57 now click the right column to enter its
7:59 settings set the vertical align to middle
8:00 middle
8:04 and horizontal align to end great
8:06 we are done with the header let's click
8:08 publish and set the conditions that determine
8:08 determine
8:10 where this header template is displayed
8:12 across the website
8:13 by default it's set to display across
8:15 the entire site
8:17 exactly what we need so hit save and close
8:18 close
8:19 just like the header we will need a
8:21 footer on every page across the site
8:23 so let's go back to the theme builder by
8:25 clicking the hamburger menu on the top left
8:26 left
8:29 and this time choose to add a new footer
8:30 you can select one of our pro footer
8:32 templates from the library
8:33 but since we are creating one from
8:35 scratch let's close this
8:39 and make a start name it first
8:42 and then add a section with two columns
8:46 and set the content width to 350 pixels
8:47 the same we set for the header so they
8:49 are aligned
8:52 next add a min height of 10vh so the
8:54 header and footer
8:57 take up 25 the edge together leaving 75
8:59 vh for the pages
9:01 we'll get to that later we will display
9:04 the website's credits in the left column
9:06 and the social icons in the right one so
9:08 go to widgets
9:10 search for and drag the icon list widget
9:12 into the left column
9:14 delete two items from the list and add
9:16 the copyright icon
9:23 next type your website link next to it
9:27 in my case it will be nickdavis.com
9:29 in the style tab select the primary
9:31 global color for the icon
9:34 and set the size to 15. do the same for
9:37 the text color
9:44 now search for and drag the social icons
9:52 add your personal links to each one and
9:54 click the gear icon to display the link options
9:55 options
9:57 for example select this one to make sure
10:00 the link is opened in a new tab
10:02 here you can change the shape of the icons
10:03 icons
10:06 we will select the circle and lastly
10:10 align it to the right ok time to style them
10:11 them
10:14 in the style tab set the color to custom
10:16 and for the primary color we'll open the
10:17 color picker
10:19 and drag the opacity all the way down so
10:21 it's transparent
10:23 this way we'll only see the social media
10:24 icons no matter the section's background color
10:26 color
10:29 next set the secondary color to primary
10:34 size to 18 and spacing to zero
10:36 in the hover option for primary color
10:38 open the color picker
10:40 and drag the opacity all the way down so
10:42 it's transparent as well
10:45 then set the secondary color to accent great
10:46 great
10:48 we're done with the footer click publish
10:50 and set it to display across the entire
10:52 site as well
10:55 then hit save and close lastly click on
10:56 the hamburger menu
11:00 and choose exit to dashboard
11:01 next up we'll get familiar with the
