[04] Elementor Editor Basics and Customizing Our Kits with Global Styles

[Music] Hey there it’s aviva from elementor Welcome back to how to build a blog with Elementor In the previous lesson we got introduced To the elementor kit library Learn how to import a kit to our site And set the essential navigation menu Options In this lesson we’ll cover the basics of Elementor layout how to add elements Such as text content images and buttons Using the elementor editor and customize Our newly imported kit to fit our style Ready let’s jump in and get started I’ve gone ahead and created a blank page To demonstrate how the elementor editor Works There’s no need for you to create this Page for your blog however if you’d like To follow along and work together to Practice with elementor before we begin Customizing our actual blog please feel Free to do so As mentioned in earlier lessons every WordPress site needs to have a theme and In our case we’re using the elementor Hello theme By default any page or post inherits the Theme’s header Footer and title In some kits you may face an overlapping Header but don’t worry we’ll take care Of that in a moment

There are two main areas when building a Page with elementor The content area located on the right Side of the screen where you can add and Edit elements that form the layout and Design of your page And the left panel which offers a wide Variety of useful elements and options At the bottom of the panel we’ll find Helpful settings and options for pages Built with elementor First are the page settings where we can Edit the page name Upload a featured image Hide the title And change the page layout Next we can launch the navigator by Clicking here Or use the keyboard shortcut command or Control i to quickly navigate anywhere On the page Currently it’s empty because we haven’t Added any content yet Click here to see your edit history and View recent changes or revert back to Previous revisions No website is truly complete without Being adjusted for mobile devices We can enter responsive mode by clicking Here Switch between different devices at the Top of our screen to adjust our design Alternatively use the keyboard shortcut Command or control shift m to quickly

Switch between devices Once we’re ready to preview our design We can click this icon which will open The page in a new tab Of course before we do so we’ll need to Either save our changes as a draft Or publish the page when it’s ready to Go live Back in the panel header open the menu By clicking this icon where several more Settings and navigation options are Available Site settings as it sounds allows us to Globally define our site’s settings all From one place we’ll get back to the Site settings shortly Theme builder allows you to manage all Your site parts from one location We’ll learn about the theme builder in More detail in our next lesson User preferences allows us to customize The elementor workspace Such as switching to dark mode Altering the width of our panel And more Below is the finder which we can also Launch by using the shortcut command or Control e and access different parts Across our site quickly Click View page to see your live website or Exit to dashboard to go back to the WordPress dashboard Let’s begin with the content area

There are two ways we can start We can either design our pages from Scratch or use a template from the Library Let’s begin with the library This library is separate from the kit Library and differs in that it’s used to Add individual templates to a web page And not to import a full website Here we can preview templates we’ve Saved view complete page templates or Even blocks which are used to make up Small parts of pages Filter the blocks by choosing a category Or use the search bar on the right We can also add blocks and templates to Our favorites for easy access I’ll go ahead and insert this block so We can get to know the elementor editing Structure Great Every page built with elementor can be Drilled down to three main components Sections Columns And widgets Sections are the largest and can be Identified by their blue border like we See here Every section contains one or more Columns which we can identify by the Black dashed border These columns house widgets such as the Texts and buttons we see here

We control the sections columns and Widgets with their handles To make changes to a section column or Widget simply right-click its handle Where we can edit Duplicate Delete And more We can move sections columns and widgets Around by simply dragging and dropping Them The blue line indicates where they’ll be Positioned when we let go Another way to add sections is by Clicking the plus icon over here Then choose one of these preset Structures which we can tweak to our Liking as we go Or simply delete them Sections columns and widgets have three Tabs in the panel on the left Sections and columns have layout style And advanced tabs Whereas widgets have content style and Advanced tabs Soon we’ll see how these settings can be Used to design our pages Note that every time we click on an Element it changes the panel header Title here to indicate which type of Element we’re editing When we first open a page we’ll see the Widgets panel widgets are used to add And design elements on your page like

Headings Text editors Images Videos and more We can access them at any time by Clicking the nine squares icon in the Panel header Okay time to use what we’ve just learned And edit the pages of our website Starting with our home page We’ll use the finder to quickly access Any page edited with elementor Remember xander this is his blog so we Need to make a few changes to this page And other site parts like it to turn This kit into xander’s website We’ll start with the first section Usually referred to as the hero section I’ve already prepared all the content I’ll be using on this page so changing It is a simple matter of copy and paste Click the text editor widget and change The text along with the title above it The image here is compelling but it’s Definitely not zander Click the image widget then choose an Image to change it You can use images from your media Library upload your own or find a link To these images in the lesson Description Fantastic Now we still have this button in orange Which doesn’t quite match xander’s style

This is from the kits branding taking Its settings from global styling We’ll have dozens if not hundreds of Elements using this color throughout our Site so instead of changing them one by One we’ll see how to change them all From one place shortly meanwhile let’s Move on to the next section and change The content here as well We’ll change the text and images as we Did in the last section Don’t forget to edit the button text too For the buttons link rather than adding The pages url we’ll use dynamic tags This will ensure that the link will Always work even if we change the url in The future Click the dynamic tags icon and choose Internal url Then hit the wrench icon and from the Type drop-down choose content Next we’ll search and choose the Relevant page on our site which in this Case is the about page In our next section we only need to Change this title and the button below We don’t even need to touch the posts Widget since the posts are dynamically Pulled from our post’s archive it Currently consists of the default posts That were imported with the kit We’ll update this button’s link as well But instead of choosing a content page We’ll choose a specific category

To do this choose internal url again And in the drop-down select taxonomy Then search for uncategorized This will send the user to an archive Page with posts that were not given a Specific category Since we only have one category Uncategorized it will show all the Articles sander has available on his Site Continuing on to our next section This kit displays more posts from a Different category called tips Since xander currently only uses one Category for his articles we won’t need To show this post category However we can use existing parts in any Kit to our advantage and change their Context to display more relevant content Like promoting xander’s digital products For example First we’ll change the title Delete these sections As well as the posts widgets From the widgets panel search for the Call to action widget And place it inside the left column Change the image Title And button text Delete the description We’ll set this button when clicked to Download a pdf file that xander created Once again we’ll use the dynamic tags

And internal url options to set the link From the drop-down choose media Then search for the appropriate file Name Now let’s match this button style to the Rest of the kit Head over to the style tab And expand the button options We’ll adjust the button size And change the border width we’ll also Adjust the border radius to sharpen the Corners and match the other buttons Above Next we’ll update the button hover state Which is how the button displays on Mouse over Click the hover tab and change its Styling for the text color click the Global icon and choose the existing White color For the background color choose accent Now that we’re done with the first Product we’ll simply copy and paste the Widget and change its content Unlike the free checklist xander will Offer this product for sale So we’ll link this button to an internal Product page or an external purchase Page There are several websites offering this Service such as pay hip and gumroad We recommend doing your own research and Selecting the one that best suits your Needs

Alternatively we can use the paypal Button widget for a swift checkout using Our existing paypal account To make sure there’s enough space Between this section and the next we’ll Click the right column Go to advanced and change the bottom Padding to 30 percent Padding is used to add space within an Element and should not be confused with Margin which adds space outside of an Element for example if we added margin To the section instead this would create Space between the bottom of the section And this line here which is applied to The column style Now it’s time to personalize xander’s Website to make it completely his Click the hamburger menu and go to site Settings You’ll notice the panel color turns blue Indicating we’re editing settings that Affect our whole website and not just The open page or post We can personalize our site identity Here We’ll see the site title and site Description which we already added in an Earlier lesson from the wordpress Dashboard Since that’s already taken care of we Can go ahead and upload our logo We can choose from many different image File types but for beginners we

Recommend starting with a jpeg Or png file Last we’ll add the favicon Which is the small icon we see in the Browser tab Ideally it should be a minimalistic Graphic without too much detail since it Displays at a very small size Click update to save and refresh the Page in order to preview the changes We’ve made Next we’ll tailor our website’s style With unique fonts and colors Xander’s site should encompass what it Means to be a digital nomad packing Light since he’s always on the move and Professional since every digital nomad Works remotely Keeping the design minimalistic and Clean is key to keeping the style Consistent with xander’s brand so let’s Go ahead and update our site’s styling Rather than change each color and font One by one which can take forever we can Change them all from one place Go back to site settings And at the top we have global colors and Global fonts We’ll begin with global colors where we Can view the main colors used throughout The website Note that changing any color here will Affect any element that uses this global Color

Often web creators use a brand or style Guide to help facilitate their design Process and maintain consistency across Their website however if we’re just Getting started and don’t yet have these Guidelines in place Here’s a tip on how we can choose colors For our site take a look at your logo And choose one or two colors from it With xander’s logo we can see that we Have this bright green We can now choose that color and use it As the focal color on our site For this website we’ll change the Secondary color here which is orange to Xander’s green by pasting in the color Code And we’ll leave the rest of the colors As is If we need to make any changes in the Future we can come back to this panel at Any time and tweak our colors Feel free to pause the video and make Your own changes and come back when You’re done Next we’ll talk about global fonts where You can control the different type Styles that repeat throughout the Website But how can we know which style controls Which text in the actual website I’ll share a little tip Go back to edit the home page by Clicking the x in the corner of the

Panel We’ll click the first heading we see Go to style And hover over the global icon a tooltip With the style name will show up Hero main title is ours Head back to menu Site settings Global fonts And search for that name Now we can amend that global font style Using the heading as a reference Feel free to change the default kits Font which is poppins in this case to Any font you love from the list If you know the name of the font just Start typing its name here We’ll use corona 1 for xander’s site There are many more typography options Like size Weight and more When it comes to our brand online Consistency is key Also be sure to pick a font that suits Digital viewing and is especially Readable on small devices [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause]

[Music] Great [Music] [Applause] [Music] Now that we’ve learned how to use Elementor to customize different parts Of our site we can use that newfound Knowledge to update the content on the About and contact pages and with kits It’s going to be much faster I already have all of xander’s content Prepared making this process a simple Matter of copy and paste Now would be a great opportunity to Upload all of xander’s images that we’ll Use throughout the site If you’re following along with xander’s Site you’ll find the content under Course assets in the video description If you’re creating your own website this Is a great time to go ahead and update Your own site accordingly In our next lesson we’ll get familiar With the theme builder which allows us To edit and manage all of our site parts Such as the header Footer and more all from one place See you there [Music]