The Complete Elementor Master Class - 2020 | Alexander Oni | Skillshare

The Complete Elementor Master Class - 2020

Alexander Oni, Web Developer & Cyber Security Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
35 Lessons (3h 51m)
    • 1. Elementor 2020 Promo Video

    • 2. First things First

    • 3. Elementor Setup

    • 4. Elements and Structure

    • 5. Adding our First Section

    • 6. Displaying the Posts Grid

    • 7. About Section and Instagram

    • 8. Switching WordPress Themes

    • 9. Spacing Elements and Tactics

    • 10. Creating the Header

    • 11. Adding the Header Menu

    • 12. Adding the Social Media Icons

    • 13. Creating the Footer

    • 14. Adding the Subscription Form

    • 15. Working with the Slideshow Element

    • 16. Building the Blog Page

    • 17. Building the About Us Page

    • 18. Adding Testimonials

    • 19. Quiz

    • 20. Elementor and WooCommerce

    • 21. Working with Animations

    • 22. Responsive Design Part 1

    • 23. Responsive Design Part 2

    • 24. Recap

    • 25. Intro to Elementor Pro

    • 26. Recreating the Footer

    • 27. Recreating the Header

    • 28. Creating the Blog Post Template

    • 29. Creating a Contact Us Section

    • 30. Creating an Archive Template

    • 31. Introduction to Pro Elements

    • 32. Elementor Popups

    • 33. Introduction to Pro Animation

    • 34. Final Thoughts

    • 35. Elementor 2020 Course Conclusion

43 students are watching this class

About This Class

Would you like to learn how to build amazing responsive pages for your WordPress website with ZERO coding? If so then you have come to the right course. 

With more than a million downloads already, Elementor is one of the very best and most popular plugins for building pages in WordPress. The plugin is extremely fast and comes with a variety of widgets and elements making it very easy to build any kind of web page imaginable without using any code.

Course Content:

The course is divided into two main sections.

In the first section, we are going to use the FREE version of Elementor to build a full travel blog titled "the lone nomad"

In the process of building this website, you will learn the following

  • How to work with sections, columns and widgets

  • How to build a header section complete with the site logo and social media icons

  • How to work with title widgets

  • How to work with video and text boxes

  • How to build an image carousel

  • How to insert number counters as well as toggle elements

  • How to add a Google map to your web page

  • How to create and insert a contact form

  • How to build a complete footer section for your WordPress website

  • How to build responsive web content and structure

  • How to work with page templates

  • and so much more

In section two, we are going to use the PAID version of Elementor to further enhance the functionality and design of the website. In addition to learning about the extra features that come with Elementor pro, you will learn about the following as well - 

  • How to add a countdown timer to your page

  • How to create an animated headline

  • How to add a contact form

  • How to enhance design and style using flip boxes

This course will be updated continually to ensure that it always describes how to use the latest features of Elementor.

By the end of the course, you would have mastered how to use the Elementor plugin to build any type of web page that you want.


1. Elementor 2020 Promo Video: Well, hello there. And welcome to this elemental masterclass on skill ship. My name is Alex, and I'm going to be your instructor. Now, in this course, we're going to build a travel blogger, which is the one you're looking at right now by making use of what I believe is the best page buildup, Logan. For what press, which is elemental. We're going to use the plug in to build out this full travel blogger. I'm going to show you exactly how you can create yourself a header so that it will contain your logo menu. Social Media Aikens, I'll show you how you can add background images. How you can add slide as how you can import eulogists post onto your home page as well. And, of course, Hagen creating about sexual import pictures directly from Instagram. I will also show you how you can integrate woo commas so that if you do have digital production, want to sell on your blog's. I'll show you how you can integrate that with elemental and, of course, also show you how you can create a contact form and also a Malian subscription form as well . But it's not just gonna be the homepage. We'll show you hate him. Build a full template for your block page as well. And other pages like your about page resources up and even the contact page. Now, the thing is, with elemental, we do have the free vision and the paid version. So what I'm gonna do is for the first part of this course, I'll show you how you can create this blogger using it the free vision. And then in part two, I will show you the additional functionality and designs that you can add to your side by making use off the prohibition off elementos. So if you're excited to learn how to use element it to build yourself a full website, why don't you enrolled on the course today? And I hope to see on the inside chairs. 2. First things First: all of eyes. Let's get started. I'm really excited to teach you how to use elemental. Now, this is the site we're going to be walking on. It's the low. No matter calm now. As you can see, I do already have some content on the site. Actually, do you have about five? Ah, Block post. Let go to the back end and just quickly show you what I've done. So I do have actually six block posts. And you can said you have the categories as well for some of these posts or just as an example, the beauty of the Swiss Alps. Them just quickly show you what I did in here. I just added content. Just some dummy text which you can get from any lawyer Ipsum generator on the line. Just simply go to Google Type in line ipsum generate. Oh, and you would see sites like this just go ahead and copy the text and then just paste him in there so it against Right now I've also said a category I've got you up in here And then , of course, I have a featured image in this case right now, I'm using actual images that their pictures that I took myself. So that's been much what I've done for the posts Now, for the pages have also created are three pages about page, book, page, contact page. And in fact, let's go ahead and add a new page. All cold is the home page. Just go ahead now and hit. Publish. So now I have full pages. And then if I come down here to sit ins Oh, I'm just make sure this is actually published. Come on, Publish. Okay. All right. So the home pages published never come down here to set ends. Let's go to general our site title. I'm gonna go ahead and changes to the loan. Nomad tagline are traveling, Traveling the world solo e I don't know Whatever Chevron Joel Soler is a tagline for the site. Just change, Walter Capital W seller to Capital s. Okay, so for reading, I'm also gonna go ahead now and change this to a static page and and also the homepage to home. And then I post page to blawg, right? Let's go ahead and save or changes and, uh oh, well, let me go back to General. I don't think I saved our okay. I'm sorry. I did not care. Save the changes made in here. All right, Loan Nomad. Real quick tagline. Traveling the world. Ah, so Okay, let's make sure we save the changes now, okay? Oh, right now, on the our criminal links, I have also changed this to a custom structure so that we have the category and then the post named displayed for the euros of each of our post cell. That's what I've done those far. Now, if you want to, you can decide to do this later. This content isn't needed at the very moment. But within the next two or three lectures, we're gonna need the content. So you can either the site to pause and create your own content or just simply continue. It's really up to you. One final thing to do would be to come here to our parents. Let's go to menus. Are we gonna need to create a menu? So let's do this. Let's go ahead now and name manual cold is the main menu. Let's create that menu and let's click on the view all just gonna go ahead now and add all the four pages of creates head add to the menu, right? And then in here you do have the display location. I'm going to go ahead now and simply choose the desktop horizontal menu. Let's save on menu and let's just check out the long limit site again. All right, so note that I am using the latest WordPress theme, which is the 2020 theme. It's not really going to matter because eventually we're going to use elementary to build out the entire site. So the thing you use right now is not really gonna be important such, but for now, we'll just stick with the 2020. But feel free to use any other theme that you want to. So one more thing to mention is that we're gonna be using this site. Nomadic matt dot com. We will be using this site as, ah, inspiration basically to build our own travel Blawg. So I'm gonna bow some ideas from this particular site, and if you don't know who Nomadic Met is, he's a pretty awesome guy. I've never met him before, but he this is so I would like to meet in person. He travels the world, and he writes very extensive in the Arctic cools and provides a list of tips on places to travel to things to do things like that. So if you're into traveling, I will definitely come in. That you check out are nomadic met dot com. So that's a German ever next video well will now begin the installation off Elemental. 3. Elementor Setup: well, come back. And in the previous video, I showed you the first few things that needed to be done. Before we start walking with elemental, we've added some content with that have some block posts. We've added some pages as well of credit on main menu. And we've made changes to the ah site named site title tag line as well as the Perma links . Okay, so let's get started. And we're gonna go ahead now and install elemental the walls bleeding WordPress, page builder and I tend to agree. So let's do this. I'm gonna go ahead to the back, and I'm going to come down here to plug ins, click on Agnew, and let's just go ahead now and simply type in, uh, elemental right here. Elemental mentor. Wow. Okay, Elemental. Come on, show yourself. All right, so there you go. Elemental page build up. Let's go ahead now and install it. And of course, the second step would be to now activates elemental and ah, you go. All right. So once you have activated Elemental, you will see all these links right here. Let's take a quick look at the sit ins and basically in here there isn't that much to do. Except if you're working with a theme whose colors you enjoy, you like the way it looks. You can simply come in here right now and disable the default colors and default funds. Which element will provide for you but only do this if you're happy with your themes, our colors and our default fonts. What's going on here to style In here you can change the default generic forms to something else, and they fear the changes you can make in here. But this is a little bit more fans, so move might take a look at this a bit later and then, of course, advanced. This is advantage stuff. I would not recommend you coming down here for any particular reason. Let's go to tools. And one key thing I want to show you here is the regenerate CSS. Now, you might wanna cause this issue where I was just making changes to your science. You're changing the color, you change the phone. You didn't like that. When you refresh your page and you don't see those changes, one thing you could use to come in here and simply click on the regenerate files for the C S s O. But in addition to these, make sure that your browser is in cashed or that you're upset Isn't cast from your Web server? Just make sure that that's not the case. But this is something you can try. If you've made changes to the collar of phones, things like that, they don't see those changes coming here and simply regenerate the C. S s. Okay, Now let's do something. Put Excite. Let's go to ah pages, Click on all pages and then in here You've got the home. I'm gonna go ahead now and simply click on edit. Now, once elemental is active, you will see this big blue button that say's edit with elemental clicking there. And this will take us to the page way we can begin to edit. Ah, home paid using elemental. Now, as you can see right now to the left, this is the user interface ful elemental. You've got the elements and then the three main categories. You've got Basic General and of course, at one for what rest. Now, if you're using elements of pro, which will book with a bit later, you're gonna get access to a lot more elements, but for now, that's a good goal. We have got the basic elements you can add a head in. I take steady tour button, vital things like that and then on the General Begin and things like an image, bollocks, image, caress all testimonials, things like that. But we'll work with them. And then finally, with war press, you will have access to the widgets. That work provides for you by default. So they're all in here. But before we begin walking with this elements, come over here and click on this menu. Anyway, you've got the three bars clicking there. Now, what we have in here right now would be default colors. So a lot of the best we can tell elemental are perfect trace of colors and you're gonna get full of them. You've got primary secondary texts and an accent. Right now. Text in this case would be your normal text for your website prime. It would be the major headlines for your sets of basically your H warns. Your H twos are secondary. Women would be more like you h three to h fours and an accent who first tube mostly your buttons. For example, if you add a button, our accident Ruby Kahlo chosen by default for the particular our box. But what I'm gonna do it as I'm gonna go ahead and choose a different palette and I'm gonna go ahead now and choose the Joker palette not because I'm a big fan of the Joker, but I do like my buttons. Bean read the text isn't exactly black. It's kind of like a grayish black. In a way, we might make change. That is a bit later. But for now, let's just go ahead and apply this particular Coehlo palette. Let's go ahead. Hit. Apply. Now, Let's go back to the menu for the default funds. I'm actually going to go ahead now and use these particular phones that Matt is using on his side. And the phones here is actually How is it? I saw it later. So is the F. Gela. One is You can see this is the default front is using. I like the phones. I'm gonna go ahead now and use the exact same phones as well. Let's go back in here so often. Impairment. Headline. But click with family and type in F J. So that's F General one. The weight will be how thick the headline will be Good to go and now and choose 700 Senator Headline will be the same F one. Let's make this 500. Our body text in this case would be our Mont Serrat one Sarah for the body text the way this 400 That's okay. And then Accent will use the same r F Gela if Jell 01 I've actually worked with a few a Web designers in the past, and they often say that you should use possibly maybe Norm or than to fund families, want for your regular text and then one for your headlines. I'm pretty sure some other Web designers will disagree, but hey, let's just, ah, go with what I've been told, right? So that's it. I'm gonna go ahead now and apply these changes so we have not successfully said our default colors, as well as default our phones as well. So that's one more thing To show you is before we've had is up is the preferences. So they come in here and click on Preferences. You can actually change the theme from out of detective. Maybe lights, which is a default all dark. OK, no, I actually do like dark. But, hey, it's up to you by just like the way dark looks. It looks a lot more professional light because I'm going to go ahead and choose the doc and let's updates. So that's pretty much the first introduction Shoe Elemental as our page builder German Advantix video available now who ate the very first content on our site using elemental. 4. Elements and Structure: I knew in a previous video, I said We're going to start creating content with elemental. But before we do that, I feel that it's important that we invest some time to properly understand the elements and structural that elemental provides as a page build a plug in. So when it comes to the general structural off an elemental page, typically you would have your element element. Could be an image of video file. A text file doesn't matter, but it will typically be contained inside off a column. You have a condo, hold your element in its place. But then you now have the granddaddy, which is going to be the section. Okay, the sexual now contain the column, so this is typically the simpler structure they can have with elemental. You'd have an element, and then it crumbled, contained that element, and then a section will contain both the column and the element now that have been said, you can have far more complex structures were in this case, for example, take a look in here. We do have two columns and then in one Columba. We do have two elements while in the third column in seven Columbia that we do have three elements. So in this case, right now, you could have, in fact, one main column Oka Pinal of them. But most cases you will have Mullican in a section contained both columns. And then, of course, finally you're always going to have ah, one main section aka Pine Everything okay? That's typically what you would get with elemental. So, like I said, the simplest structure would be Anel Ament column and then a section. But then again, within one column, you could have mawr than one element could have more than one column in in a section. You could have an intersection, but then eventually you're always gonna have a main section. Local pine are every thin now, going back to the back and in here. Like I said previously, we do have several elements. Right now, we have three main categories. We've put the basic we've got, general. And of course, we go war press. Now, depending on the particular elements you choose, you will have several options available. So let's if example I'm going to drag the head in in here now. What happens is you typically gonna have access to three main types of functionality. You will have the content where you can modify, walked you actually display nine. It could be maybe an image video at a ceremonial, a pdf file. And then you would also have style where you could do things like change the text call or maybe added background image, things like that. And finally, you will have the advanced section where you can add margins. Motion effects. Positioning will take a look at this a beat later, but the general rule with the elements. Now take a look at this. We've added the heading element, and now in here, you can see we do have a pan in hit. It stays. Edits head in. This typically, the blue pen in here will typical represent us editing the actual element itself. But note that over here to the left, we do have the column button. So if we wanted to edit this particular column, maybe add a background Coehlo. Things like that. Maybe chance layout will. Cynical can hear. And now you can see we have access to the edit column section and then finally in blue again. You can see we now have the main section containing the column that contains our head in elements clicking there right now and again, you can see we have access to the layout, the style and then advanced. So depending on which of these you choose, you'll have access to a variety of different options for modifying the way content is displayed in that particular section. So hopefully these has shed some light on two elements and what's available with them, what you can do with them, as well as the general structures off elemental. Of course, as we begin to add content and add new elements structures, you'll begin to get a better understanding off elemental. So that's it. Thank you for watching now that comics were going to go ahead now and begin creating content using elemental. 5. Adding our First Section: Welcome back. Now we're going to build our very first content using Elemental. Never take a look at Matt site. He does have this. Ah, back on image with him looking at the heels. And then you've got some texting here. You've also got, like, a search button and a few links. We're gonna replicates something similar to this. And in fact, here on my dummy site. This is exactly what we're going to accomplish right now in this particular video. So you can see right now that I do have one of my images and the at the background, and I do have the stakes in Hey, my name is Alex. If you're looking for awesome travel tips, you've come to right place. And of course I do have, ah, botany assaying visit the blawg. So we're gonna achieve these exact same kind of structure now. So let's do this. I'm gonna go back to the lunar, my dog. Calm now in the back end here with elemental on the home page. Let's take a look at this particular bottom down here. The gear bottom, that's the settings. Boughton. And in here you can control the general sentence for these particular page on Lee the home page, right? So you could change the title changes status could add it featured image. You could also choose to hide the title. But here, where you got the page late out. We're going to go with the elemental full with. So basically, what this will do is that in addition to hide in the title of our A page, it's also going to ensure that our content can extend Our told the edges off the off the screen basically, as you can see right now, the content has gotten a bit. Why that the container containing content is now are whiter. So I going full with now There is another one here, which is the element or canvas. Basically, what this does is that you get a blank page. This missile means that elemental will not inherit anything from your theme. It's not going to inherit the head of the foot is just gonna be a blank page. And you pulled everything all by yourself. But with elements are full with basically elemental will take the head. R and D foots are from your theme. You can see right now we do have the site title the tagline menu, and then they put it down here. This is from the 2020 theme. So that's the difference between our element of full with an elemental canvas. Okay, let's go ahead and make one more change. I'm gonna change the background, Kahlo, because in here it's like it's ah, I don't know what cold this is. This is like yellow orange is something that I don't know. You could actually do this for this particular homepage by clicking on style and an inherent value, Good background type can click in here for classic and as it will choose color and then come in here and simply choose white as the color or black or green or pinko whatever color you wanna use. So I'm gonna go ahead and do that. Let's hope dates and OK, so now how do we add this content? Well, let's go back to the mental. The first we're gonna do is that you see this boxing here that say's drag widget here we can drag any off these elements and then we can begin to quit content from them. So to achieve this, we're gonna do is we're gonna add this particular image as a background and then this right here, the higher my name is just gonna be text and then will also add a button. Before we do that, check this out. Like I'm gonna drag this element called the AENA section. I'm gonna drag that and then drop in here. What is in a section are element does is that it gives you by default Two columns inside off a sectional cape. Now note very, very carefully the right now, we do have two blue lines in here. The very 1st 1 in here represents the container, the main container containing the content. And then in here, the 2nd 1 is going to be the container for the actual intersection itself. Don't worry. I'll explain this. It will be more as we progress. What I'm gonna do right now is I'm going to drag the text a tool. I'm gonna drag it to drug a drug, a drug a drug, and then put it inside off the second column. Note very carefully that there's a blue and a pain in the back end that's telling you where this particular ailment will fall into. If I drag this a bit for the up. You can see right now that I will be dragging this element, our balls, the inner section element, and then NJ to be inside. The first column in here is gonna be the second column writes. I'm gonna drag and then drop and then release that in there. So I'm gonna go ahead now. I'm gonna copy this text. Let's go back in here and in very simple. I'm gonna go ahead now and paste that text right there. So Hi. My name is Alex blah, blah, blah, blah. Okay. Before we move any further, let's go ahead. Now click on the edit section off the main section itself. Okay? And it's section right there. And now in here you've got the content with I'm gonna go ahead now and make this fool with Aziz. Well, all right, let's go to style. And then on the style, I'm gonna choose a background. There are different types in here. We've got the classic, which would be your image. You do have ingredient. You can add a video at your bag on a swell and maybe even a slide show. But I'm gonna click on the classic, which would be either a Kahlo or an image. I'm going to go ahead now and choose my image, and it's gonna be this one right here. I'm gonna go ahead now and instead I mean it. By the way, most of my images are 1920 by 10. 80. Just so you know, I'm gonna go ahead now and instead the media right there. There you go. We have a background image. Now, over here, we do have access to certain functions like position, attachment, repeat size. Let's take a look at size first of all, because this will determine how large or how small the bag on image would be displayed. Basically, you've got default. Any good auto auto means that we're going to allow the browser to decide how to display the background image. Now cover, on the other hand, basically means that hey, we want the bag on image to always occupy the full width and height off its container. In a scenario where the image is not big enough by default, elemental will stretch the image to ensure it covers the entire background. That's what cover is contain basically means that hey, we all going to display the full size off the bag on image. If the bag on image is not big enough to occupy the full with a night of the container, that's not going to be elementos problem. You'll see some white space space and around. The idea continues. Just hate. We want to display the full size of the bag on image, regardless of whether or not it occupies are the full width and height of the container. Now, in most cases you want to go with cover, especially when you do have an image that's big enough. Okay, so I've chosen cover. Now we've got position as well in here you can decide are what part of the image you want elemental to focus on. So you've got, for example, that's a center left. Which way Don't really see any change there. Let's go with bottom center. Now you can see that the president has changed. Elementos focus has changed a little bit. Let's see. What else do we have in here? We've got center sent Ah, centre left. Not much of a difference. Actually, whenever you choose cover as your size, you're not going to see position fluctuate that much regarding the options. Basically. But if you chose are contained, then you will see lots of changes in here. For example, this is center left. Now this is bottom rides. Let's go with bottom. Ah, left like a straight top center. OK, seconds. Right now you do have a bit more are fluctuations whenever you choose, contain as your are signs. But let's go back to cover and I'm going to switch to bottom center for now. But the bottom center and OK, so I've got a text and we do have the background image right there. Now let's take a quick look at the actual text itself. I'm gonna click inside this column contended that takes, I'm gonna click in there. And now you re notice that we now have edit text a little in here. Let's go over to content. Now it's possible that your text may be very small and would look like this. So to make it big, just simply make sure that under the takes a toll you have the H two chosen. I get all made it takes to make look a little big up and then let's take a look at style for the text color. I'm going to simply choose White. Okay, Now, obviously, the white coat isn't blending well with the background image we have because the bag on image has snow is in the daytime. So let's go back to editing the main section one clicking here. So now you can see we have in its section open here telling us that Habay and it's in the main section. So I'm going to go back to the background and then in here, you've got the background overlay. We can add an overlay. So I'm gonna choose the classic. I'm going to choose a color and going to be black. All right, there. So let's choose black. And then we can also choose the opacity. Does it be to Doc's? I'm going to make this less duck, and I think, uh, 0.26 is fine, I guess. Yeah, looks okay. Let's go ahead now and update this. Let's go back to our elements. So let's see. We're almost there. Will still have to add the visit the blawg button. So we do have our button element right here going to click and drag and then drop it just beneath the column right here. Ah, the Texan here is going to be this sits the blawg, and then in here you can add the link to your actual blood. If you're building a real website, something was gonna add blawg like their alignment will be center. And then the size is going to be our medium to make it a bit bigger. And all case, let's update this now to view How would you look like on an actual dext up? I'm good to close the elements of panel right here. I'm gonna hide. It. Shouldn't click on the button right there. And there you go. OK, so it's almost close to what we have in here. This is a bit lighter, but their notice that the text is a bit too close to my face in here to be further to the light. So what can we do in here? Let's go back to show the panel and then from here, I wanna show you something. If I put my mouse in between these two columns, you should see Ah, ok. There's a bit of an issue right here. I don't see the Balkans. You change the wits off the columns. It's okay, but I'm going to do here is it's OK. Let me just very quickly show you the quick trick. I am going to white click where you have the main section Little white click and I'll choose duplicate. Okay, let's duplicate If I scroll down now you can see the exact same section all over again. Right? However, take a look at this. If I drag my mouth weapon, My mouse just in between these two columns right here. Can you see the symbol? Do you see what it looks like? Basically, with this right now, I can change the individual withs off the columns. So if I click and then drag to the right, you can see that the left club, which is empty, is becoming bigger while the white clam is becoming smaller. So, this way you could actually just klieg and drag and then just change the the the individual wits off each particular club. So this is one way off doing this. OK, let's go ahead and close this section. Let's go back in here. I don't know why I'm not seeing the symbol again, but it's OK another way to change the individual with of the columns is to click on the column button either the 1st 1 here or the 2nd 1 here. Let's go the 2nd 1 and then what? You have layout you will see column with right here. So I'm just gonna go ahead now and type in 45 that's pretty much Ed. We've changed the column to 45% and with now, if I go to the first column in here and I go to its own layouts, note that automatically. This has been said to 55 So this is another way of changing the withs off your individual columns. So let's take a look. It's almost there. Looks almost like what we have in your DNA sample sent, except for the fact that the text it's full lines, ours is actually Hominy. It's also full lines, but it doesn't look quite the same, so something is still missing. Let's go back to our panel. Let's take a look at the inner section, not the main section. By the way, not the man will appear, but the AENA section one containing this two columns and OK, so there you go for the content with. Make sure this is said to also full with. Okay, that should do the trick. There you go. OK, so this looks exactly like all we've got over here. Oh, right. Well, not 100%. Exactly. But that's close. It's close enough, in my opinion. Okay, so let's make sure that we save changes. Let's update. And there you go. Oh, boy, This has been a very, very long video, but hopefully you've learned quite a few things. So Germany for next video Bell will continue walking with elemental. 6. Displaying the Posts Grid: Okay, we're moving on and the very next section we're going to add now would be the one for the block posts. Never take a look at Mats website. He does have this section here, which is the latest from the Blawg, where he's displaying the image as well as the title off six off his block posts. And of course, there's also a botany aided Cesar View Mawr which will take you to the block page proper. So we're going to create something like this Now I know he does have his email subscription form on the news. The main image will take a look at this a bit later. Don't worry. Now, unfortunately, we d free version of Elemental. We don't have access to the element that we can use to generate our blood posts like this with the paid vision of Element er it's available there. But since we're working with the free version of Elemental, we have to improvise. Now there is a plug in called the post good elemental. Add on it is by Manish Team Mill. Sina and I will recommend you go ahead and make use off these. Add on if you're not walking with the pull vision of elemental. I have already installed and activated the plug in. You don't need to do anything except calm down to edit in your page with elemental. Now, once the plug in is active, you will see it right here. It's called the WP Cap Elements. You will see the option to add a post greed right there. So let's go ahead now and do this. I'm just I'm just gonna go ahead and drag the element right in here. Let's drop that. So right now you can see that we do have outlay out one chosen by default, and we can go to lay out 2345 I'm gonna go with five because I've already tested all of them, and I like five the most. So you can choose the number of columns and above polls, things like that. What I'm gonna do here is for the title. I think I'm gonna go ahead and choose maybe an H four instead. I don't know. Let's stick with the H two b, I guess Let's just minimize closes and see maybe each of these Fine, OK, there is a Martha's. You could do over here, you have the metadata. You can add the categories as well. If you want to use, I'm gonna add ah categories. I will remove comments. Nothing that's necessary. So we have the dates of the post is published and then the category You can customize the length of the except if you wanted. Teoh, show the weed more. Change the alignment. Now, where you have queried down here, you can choose to display block post from a very specific category if you wanted to. And you could also order by the date, maybe descending order in ascending order you can other by title, random and so on. So you have different ways off customizing at the blood post that you want to display. All right, let's go back to our elements. I'm going to drag and make use off the head and elements. So drag. Make sure that's what about the blood postal job that in here. And I'm going to say, Ah, latest blawg posts. I don't think I will centralize that one. Okay. And then finally, let's just go ahead now and add Ah, button, click and drag. Drop it in there, drop it like it's hot. Let's send a text from clicker to let's say read more Blawg posts can. Then again, we can add to the Link Teoh Book page. Let's just do that and change the size from small to medium. Now, if you don't want to keep him repeats in, you know, links for the blood goes over here where we have the image. We have visited Blawg down here. We have it mobile posts. You could just change. The booking hits you. Maybe about you can link this to the about pigeon states so that this way, you're not constantly repeating links or buttons to your block. Okay, what's come down in here? And, um, I think that's okay. Let's go ahead and update, and we'll just take a look and see how this looks like. And OK, so not bad. OK, we've got a little book post three of them and ah, read more button for the blood posts. So that's pretty much it. We've added all very second section. Thank you for watching, and I will see the next class 7. About Section and Instagram: Welcome back. Now let's move on to the very next section we're going to build. And in Matt's site he does have this section, which is divided into two columns on the very first column you've got the about, Ah, nomadic Matt with a picture of him and some text and then to the right he has. He is most popular travel advice with some links to his blood posts. And then he also has the featured in and then, of course, several our logos of some media companies. Now we're going to do something very similar, except rather than having the articles and the featured in section will what I have our instagram feed. So this is what we're going to try and achieve Now you can see they were gonna have two columns, and then one of the left will have my pictures and text, and then we'd know about me. It's a button and into the way, we're gonna have our instagram feed, all right? And then, of course, at the top will have about Alexander, which would be the title off this section and then also note that there is a different background color. It's kind of, like grace and not pure white. So let's get started. Now. Before we do this, you need to go ahead and install these particular plug in called social feed Gallery by quarter layers. It's pretty good. There are lots of other plug ins out there for display, Neil Instagram. But I tested just about all of them, and I found this to be the best and easiest to use. It will also help if you are already looked into your instagram account, by the way and all. Look at this. This is such a cute little book, you little animal. What is this? This is Ah. Oh, it's a panther. Uh huh. Okay. Looked like, Ah, look a tagger or lying to me and it. Anyway, uh, let's let's move on. All right, So I have already installed the social feed Galatea. Plotkin. So let's do this. I'm going to go over Teoh Instagram Gallery. You will see down here once you've installed the plug in. So let's go to account. All right. So the first thing you would have to do here is you would have to give authorization basically to the plug in to connect to your instagram account now because I already logged in to my instagram account. I'm just gonna come in here and click on add new account. And that's what for a few more seconds. And there you go, so automatically, because we are already looked in the plug in detective that Okay, this person's looked in. I'm just gonna connect Hii's instagram accounts to the website. So very go. I have looked in successfully, So in here you can, ah choose just how frequently you would want. Ah, the cash to be cleared by instagram, meaning that basically, how often would you want to plug in to fetch the letters, images from your instagram, a council, even the type who polls maybe once in the wild and you know, you don't really need to add anything in here. I think Warne's just one hour should be fine, ever. Even if regardless regardless of you post regularly, I think one hour should be should be ok. All right. You don't need to do anything in here. Let's go over to feeds now. In here. This is where you can our control how your images will be displayed. What kind of message will be displayed. So let's click on Add new Gallery and all right, so in here, you can either choose to display images based on your user name or a tag. In this case, I'm gonna go with user just very simple certain. Display all my images and then, with a free version of the plug in, you can choose either gallery or camisole. I'm going to go with the gallery. Let's cool down. All right. Number of images to display is going to be six. I will keep the columns at three. Our image sciences standard images space and it's 10 images. Pop up, okay, and it's fine. Images mask. Okay, Instagram button. We're going to create our own buttons. So let's go ahead and check this one. Let's go ahead now and updates and that is it. All right. So what I'm gonna do right now is to simply copy this shot code. So let's copy that. Now, let's go over to the home page. Now let's go about creating our structure. First of all, gonna calm down here. Let's click on edit with elements of first half of that of that. OK, let's come down here. All right. I'm gonna go with the inner section. First of all, let's drop that in there. And then let's go with the head in going to jump the heading above both columns. So this is going to be, uh, about Alexander. Okay. All right. For the second column, this is we will add the instagram feed. So let's click on the plus button right there. And then what I'm gonna do is I'm going to drag the shot cold element, OK? It's under general, so shut code. I'm gonna drag that, drop that in there and then in here I'm simply going to go ahead now and paste the short code for instagram feed. Now, the one rather annoying thing about this particular plug in the social the instagram plug in Is that in your editing page, General going to see it load. But then, if you now decides to go and preview the page, let's refresh this page. Wait a minute. What's happening? Oh, let me updates. I'm sorry. I don't think I hope Date said the page. Okay, it's not updated. Let's go back in here. Let's refresh. Okay, so, now or kiss and how you can see it's actually loading right in here. But then on the backhand, where your trance you edit the page, it's not going to load, so it's a little bit annoying, but, um, beyond that, a plug in walks off perfectly fine. So if you can just, ah, you know, ignore the fact that it doesn't load in the back end, you should be fine. Anyway, let's go ahead and add, Ah, button. I'm going to make sure it's just beneath the instagram feed. Let's add the booking right there. Let's make it center. And then in here we can just add a link to Instagram if you want to, you know, do what I'm doing for the text. What, did we wait for the text in here? It's a view. My instagram. Okay. Gonna change a text here to view my instagram. Okay. All right. Now, let's go ahead and add the text full. The first column and it's going to be Let's see, what do I have? Any ever have an image and then I have some text. Okay, let's do this. I'm gonna go ahead and drag the image, and here I'm gonna choose my image with the dog. Let's insert that image right there. And then on the next, I'm going to drag the text eight, or I'm gonna pace it in there and all those Go ahead and grab this text. It's old dummy content. Lets us copy that coming here and paste that Ah que And then finally I'm going to take the button and then put it in there and then say, Ah, read more about me. Okay? It is Read more about me, Read more about me and then for the link, I could just add four slash abouts. Ah, the size is Ah, small centered. Okay, that's what happens. Go ahead and update this. And OK, now let's go back. Let's refresh the page. Oh, so this was actually nine images, not six. Uh, okay. And any something was wrong. OK, so this should be nine images and not not six. Okay, a lot of problems just simply clicking here will go to the dashboard sets, ends up on that in a new tab. Come down, hit you instagram gallery. Let's go t feeds. Oh, let's go ahead now and edits the feet that we currently have. Let's come down in here. Let's genders to nine. And that should do the trick. Let's go ahead and Ah, School down. Hit updates. And Okay, let's go back. Inhale to refresh the page. And there you go. OK, so it is almost It looks almost exactly what we have in here except for the background image and some space and issues. Let's go ahead now and add the background color for the about Alexander section. However long. Just quickly Check what color this words. And Okay, so let's see. We have to figure out what element this is. I do apologize for the fact that I did not write this down earlier before he said every corden. But at least you get to see how I gather information. So it's gonna have to be one of this section classes. Let's do this again. And I'm just closed us again. Right. Great. Click over here. Inspect. Okay, let me come up here. Section class. I could ship it. This one. Okay. Here you go. Back on color. Is this OK? E f f one f two is gonna go ahead and copy that. Okay, I've gotten the background color. Let's go back to this page and I'm going to go to the main section. Let's go to style. Choose the beggar on tablets, classic color. And I'm going to go ahead and pays the code. Let's go ahead now and updates and ah yeah, let's go back in here. Let's refresh the page and voila! Okay, All right. So it looks almost like will be currently Ah, have in here, except for the fact that you might notice a change in the fund family. It's a little bit different, but then, more importantly, is the actual space in. And you know, it is that there isn't quite as much space that we have in the sample website compared to the one we're building right now, you can see there's a lot of space between about Alexander and then the top of the section and then between Alexander and then the the content, the instagram posts and all this stuff. So what is actually happening here? Why do we have more space here in the lone medic Come compared to the one for the sub them , and basically so join Avonex video. Bell will take a look at themes and how they impact your elemental website. 8. Switching WordPress Themes: welcome back in a previous video has successfully added the about US section. But then we noticed that that appears to be a lot of space and issues. Ah, way too much space between elements and sections compared to the sample side at already built over here. Now the main difference, or the reason why this is happening is because we're using a different theme over here on the sample side compared to the low no matter com site. Over here, we all using the WordPress 2020 theme, and it is the theme that is adding ALS these extra space and I don't know why the developers thought it would be a great idea, but left to me, I will not have added This are much space in now. There is a very easy fix to this. If he knew CSS, or you would introduce to go into the style that says this file and simply removed the cold at in the pattern. But if you're watching this, you probably don't know much about CSS, and you don't touch any cordage is why you use an element in the first place. So the easiest fix for us here would be to simply change the theme Now, we should have selected our theme right from the start. But there isn't. Why I chose to not do so until now is because I want us to add some content in first and then you see ah, the impact that can or the changes that kind of call when you decide to switch themes. So let's do this. I'm going to go over to the back end and I'm gonna come over. Your parents go to themes. Now, the theme that you decide to use will depend very largely on whether or not you're going with the free version of elemental or with the paid vision off Elemental. So years of, you know, the free vision of elemental is very limited, and as a result, you want to go with a theme that elemental can support a lot of the functionality. A lot of the exam will be drawn from the theme, but element will be there to support creating content displaying continents on. If you're gonna go with the paid version of elemental, then it becomes the opposite. Is your theme that will now be supporting elemental and not the other way around element will be the main driving block on the demand driving main building block. Whether of your website that they will booby that you just support it. Since we use in the few vision of elemental. For now, I would recommend you go with a theme like Astra Astra has been tried and tested it iss free. Well, there's a pay division, but if your vision is is very, very good, it is free and it offers you some functionality even with the free version. So although commend you go with Astra, I'm gonna go ahead now and simply activate the Astra theme. Now, if we go back to the sites and, uh Oh, look at that. The site has changed drastically. What is happening? Hit. Well, this is what happens when you sue each themes. Okay, a lot of things can get broken, but provided you know what you're doing. These can be a very, very simple fix. So because we are using the free vision a lot of the prevention of elemental, we're gonna use Astra. So I'm gonna show you how you can make the changes needed to get the site looking like how it's used to be. Let's do this. I'm going to go over to customize. All right. Know anything about Astra is that it offers you lots of customization abilities. So let's do this. I'm gonna go to Global first of all, and we do have the container. So I'm gonna change the layout of the foot layer from content boxed to fool with 62 edged page layout. We're going to go with full it stretched as well. And then for blood, post archives last. We'll just leave that as it is. Let's come back in here folded Topography are based. Topography is going to be Mont Sarah. Let's choose Montserrat's variants. You can add the normal 400. Ah, you can add, Ah, normal intimacy there. There's a Metallica's. Well, it's Halik. Let's cool down here. Okay, so we have 400 italic. I think that should be fine. Let's go back. Let's go to headings. Will also had the heading F. Jolla one. Remember, that's the one we chose for headings. Azadi, Variant, Normal 400 And okay, let's go ahead now and hit. Publish. Let's close this. I'm going to go back to the back end. Let's go over here to appearance. Go to menus. Okay, so the menu, it's still as it is, the men who did not change. That's awesome. Okay, let's save that menu. Okay, fine. Let's go back to the front page and OK, Still having some issues with the background image? Let's go down. But now at least our content is going full with. That's fine. Let's click on edit page and then come down. Hit now with Astra, you're also going to get access to the Astra settings for each page where you can set things like but they should have a sidebar, but they should displayed it the title and so on. Ah, sidebar. We're gonna choose No sidebar gonna lay out. We're gonna go with the full with and then stretched. Okay, Let's go ahead now and update this. Let's go back. View the page. Okay, So, still not working the way we have appear? Let's now go ahead now and edit with elemental. So it is possible that I use which themes seven things you might need to we do. Basically, let's go back to the main edit section button for the men one. All right, so the layout has changed from heights default. We're going to go with feet to screen, all right, that should be fit to screen. Let's come down here. Note also that the text has changed. It's no longer whites, it's now black. And if we go to style, notice that the text color is still set to white. So this is one of the very, very strange things that happens whenever you start switching themes, never clicking here, and I may decide to choose a different color notice that it's not changing its still black . It's not gonna change. But if I go ahead and let's say a drug head in in here and the place that right there, if I go to style come down here to text color, maybe choose like a red, you can see that now it's actually working. Now, the reason why I'm showing you this is just to let you understand and realize that sometimes feeds just break and it's perfectly fine. You don't need to understand why what's happened. Just know that, okay, you can simply just redo or what you've done before, so let's just simply do this and in fact, we should have used a head in in the first place and not from the text elements which we use. We use the texutil for the high. My name is Alex. We should have used the head and instead, So let's do this very quickly. It Let's rectify this issue. I'm gonna go ahead and grab this text. Let's copy that. Then for the heading, I'm going to go ahead and our content and I will add my content right there. Let's go to style changes text color to White and Ben. We're gonna go ahead and delete the text. Any toast? Let's my click. We have the pen kid'll eat. And now let's click biking here for the text. Let's go to content. Make sure it is set to the age to Okay, Still not big enough. Let's go to style. Let's go to typography right now. Okay, let's go. Topography. Not from here. We're going to change the size. Okay, lets see how big this should be. Atletico check how big the text here actually is. I'm just quickly heated with elemental, um bottom bump. Um, but, Adam Okay. I'm just coming here and see style. Pretty iffy. Okay, It was 52. All right, that's that's quite big. So let's go to 52 and they go. They make any of the changes? Yes, line height is 1.3. Let's come down here to where we have the line height and I'm gonna go all the way to 1.3 line high, basically, would be the amount of distance or separation between lines and your in your text. Basically, that's what it is. Okay, let's go ahead now and hit updates and let's take a look at how this would look like Come down here, right click, view the page and let's see what we have. Okay, so now it's looking normal. Okay, so it's not looking very, very, very close to what we have on a sample site right here. As you can see, however, you might also notice that, um, the text right here like, for example, with the main background image the Texas for the down compared to what we have in here, where the text is actually right up here, it doesn't look all that great. And then not also that these pacing here is a little bit better. We've got more space saying that as much as the 2020 thing, which was an extreme. But the spacing here is quite nice compared to you. What we have. It's kind of like modeled up a little bit like letters, block posters too close to the edge of the background image. And then in here you have about Alexander. It's very close to the main section, and then there is no more space between the mobile post and then the new section. So join the very next video available. Now take a look at how we can add space and using the elemental space and element. But before I have on this up, I hope that you've not been too overwhelmed. We were just happened in this particular video. But I did is because I wanted to really show you what can happen whenever you switch themes and how it can affect your elemental designs. And, more importantly, why you need to decide at an L stage the thing they're going to use and just by the way very, very, very quickly. If you're gonna go with the pay division of Elemental, which I would recommend you want to go with these particular theme called the hello theme It is by elemental just typing. Hello, Right there When you're searching for a theme Hello. And this will be the thing might hate is by elemental Don't worry, it wants me. Which The section where we begin working with the provision of elemental I will show you how to walk with this particular theme. But for now, if a friend along just use Astro will switch teams a bit later. Thank you for watching. I will see the next class. 9. Spacing Elements and Tactics: well, come back. In the previous video, we successfully switched themes from the 2020 theme to the Astra theme. But unfortunately, now we're having some issues with the space in. So what I want under these videos to introduce you to two ways how you can fix space and issues that you might have on the website. And the first way would be to make use off an element known as the spacer element. And you will find it on the basic. It's right here, spacer. So what? This guide, those is that basically just adds space in between sections, columns, elements, you name it so on a push. Ah, hi. My name is Alex on the prisoners. Takes down a bit more. So let's do this. I'm gonna drag the space at and I'll drop. It's just a bullfight there, and I'm going to go all the way to 200 with this one. So let's see. And there you go. So now this is much, much, much better than we had previously. OK, it's awesome. Let's come down here where we have late test block posts. I'm going to do something very similar him as well. So Let's go ahead and do so. I'm going to go back. Let's drive the same space elements just above latest book posts. And, ah, when I'm gonna go as high as 50 I think it would be too much. Let's let's try. Maybe 25. Uh, okay, let me close this. What do you think? I think this is fine, right? I think it's fine. Letters, book posts. It's Ah, it's not. It's not too bad. Okay, that's fine. Let's close this. What else do we have in here? All right, So there is to most basic issues we need to fix. The 1st 1 here is the read More Block Post is a bit too close to the edge off the new section. And Andy, about Alexander, Want to push this down a bit more now to fix this, I'm going to introduce you to the second way off Adan spacing, and that's going to be margins and patents. Let's go over to the section the one containing our lady's book posts. I'm gonna click on the edit button. I'm going to go all the way to advanced. And now in here you have margin and pad and I want to introduce you to this too. Elements basically Destry publicity's They're both useful ad in space. However, which one you choose? Depends on what? Elemental add into space in two. Now, margins and patterns go quite technical. It can be a bit complicated when you're going very deep into CSS. But for the purposes of working with elemental lenders, particularly to you, this way, even trying to create space between columns or between sections. You want to go within margin if you want to create space around an element. Dan, you go with Padden. Now, over here, we're gonna add some spacing between this section that contains lead visible posts and this section that has the about section basically so we're gonna do is we're gonna go over, make sure where editing the section at the top, but kind of going to come down here to margin now notes that you have this thing here called Link those together Basically whatever value add for top, it will add exact same thing for white bottom left. We don't want that. So I'm going toe on link these values so that now we can add value separately for top wide bottom you name. It's up for the bottom. I'm gonna go ahead now and say 20 pixels and they've just cooled down. Notice that the third section here containing about those pages now been pushed down. You see that? It's going down, down. So now we've added 20 pixels of space between the bottom off the little post and then the top off the about Alexander section. You could do the reverse away rather than adding the 20 picks. Also the bottom off this top section. You can add a 20 pixels to that. Hop off the about US section instead. OK, that's another way of doing this. Fine. Now finally breadstick it about Alexander. Okay, here we're not dealing with a section. We're dealing with an element, and we're trying to push. These Element is about Alex, and it takes Wanna push it down a bit more so that it's not very close to the edge off the section. So this one, possibly going to go ahead, go to advanced and will do with pattern instead. Again, let's on legs, values and then pattern from the top. What does go ahead and say it maybe 20 as well. And there you go now there's most place between about Alexander and the top off its section . Let's updates. And now let's come back here. Let's go ahead and view the page and see what is looks like. There you go. Look it much better. That is blood posts O R K. Come down here about Alexander. Now everything is looking much, much better. One more thing to do before we found this up is let's fix the letters blow post heading and then the about Alexander headed Let's make them capital that has, as opposed to the smaller doesn't. Maybe we need to make them a bit big. SL. Let's go back to edit with Elemental. Just fix this issue really, really quickly. That is blood posts. Let's come down here to style topography. Let's gold away, too. 50 for the blood posts transformation. That's transform to upper case. Let's see how this looks like. Okay, this looks much better. I think it's a bit more imposing. Let's do this exact same thing here for about Alexander. It's clicking their go to style. The biography transformed to upper case and then the size are 52 couldn't on ift to oh So it was 15 not 52. Sorry about that. 50. Okay, let's update. And this should be fine. Okay, let's check this out one more time. View the page. Calif. Facebook posts about Alexander. And there you go. So that's it. We've successfully added some space in using the space an element as well as margins and pad and second fortune. I will see you next class. 10. Creating the Header: Alrighty. Welcome back. I hope you're enjoying this material, my friend. I hope you're not feeling too overwhelmed. And I hope you're finding value in the tutorial. Let's move on. So far, so good. With created quite a bit of content. We have the main ah, bag on image with our main head in. We have a section with our latest book posts. And of course, we also have the about US section along with an instagram feed. Now we're going to do next is interesting, but not compulsory. What am I talking about? Well, I would like us to go ahead and create our own header and footer using elemental Now. The reason why I said it's interesting is because we're gonna get our hands deep into elemental. But it's also not compulsive because depending on the theme you're using, you might already have a pretty decent head of and food. For example. Over here we do have our text alone, Ahmed and we have our main menu. The Footer. There wasn't much here, but that's because we haven't added any widgets to our food. If we did, it will look good. Astra does a pretty good job of this. However, despite this the functionality and what we can actually accomplish in the head on foot, I is still limited. With elemental, we can go much further. We can add a lot more are customization. So here's the thing. If you are going to use the pro vision of elemental, you will have the functionality in built with the profession. But since we're isn't a free vision, we're gonna have to use this plug in called the Elemental Header Footer and blocks. It is by brimstone force and nickel Chavan so you can go ahead and download and install it . However, note that this particular plugging Onley works with about eight themes, and here they are. Astra been number one. The Navy has degenerate press, Ocean WP, Genesis Flocks and the A Tessa themes. If you're not using any one of these themes, well, you can either decide to switch to one of them all. You can just stick with the theme reason. If you're happy with the head out and foot again, it is not compulsory that you have to customize your own head on photo with elemental. If you're happy with what your simple virgin by default then, by all means stick with it. We're gonna go ahead now and make use off this particular plug in. So I have installed and activated it. I'm going to go over to the back end. So that's jumping here, and you will come back here to your parents. You will see Head out. Foot are builder. That's the plug ins. I'm gonna click in there. So let's go ahead now and add in new template and this is gonna be head out calling head up now. In there, you can see it's a type of templates. It is the head up display on basically, where would we like to display our header? Well, guess what? It's gonna be on every page. So basically entire website, you can, of course, be very, very, very specific. We wait, wanted split your blocks. You can choose to display on set and posts maybe only on pages or search page things like that. So Yeovil's options in here and ah, that's pretty much it makes sure that over here you have the templates. Choose the elemental full with Astra statins. Choose no sight bar content layout go along with the full with contained just to be on the safe side. So I'm gonna go ahead now and hit. Publish. Okay. All right. Now, let's go ahead now and edit with Elemental. Now let's go over to match site and see what he has. So basically, he has his logo to the left. He's got his main menu right here. And then his good social media icons on top. He's got the search this site ritually ignore. He also has a strap in language. Really good often now as well. So we're just gonna add the logo, the social media icons as well as the main menu. So let's do this. I'm going to go over back Teoh Elemental. So we're editing the header right now. So the first we're going to do, basically, is to drag the intersection so can have two columns. And then what I'll do is I am going to make the first column just ah, let's say 25% in with leave the other 1% 5%. And now in here, I'm going to go ahead now and add the image elements. I'll job that in there. I'm gonna choose my image, and this is going to be my logo. So it is the one white here local a PNG's. I'm going to go ahead now and insert that into the media. That's the logo. Now for the image science. Make sure this is set to full at all times. Okay, so that's a full. And then for the background for the main section, I'm going, of course, change this content with two full with and then on the style. Let's go ahead and add the black Coehlo, which to be in black. OK, so you go. Let's go ahead now and update the head up. Okay, let's come back in here and refresh the page. Fine. So now we have our logo. We just now need to add to social media icons as well as menu. So that's the very first step German over next video belt will go ahead now and add the men many. And the reason why we're gonna need a separate video for this is because even dough on the war press section you do have access to the physical down the navigation menu element. You can't really apply much style and save your coming here. You choose the men menu this is what you get basically and this is pretty ugly. So enough to find a different way off. This plane made many so Germany Vendex video where I will show you how to do this. 11. Adding the Header Menu: Welcome back. Welcome to part two, essentially of building. Ah, main head up. So in part one, we added the logo and I want enough to go to mention is that your logo, ideally, should be the link to your home page. So make sure that when you add your image, but you have the link in here, add your costume, your will and, of course, add the link to your website. That should be right here, so that's under difficult to mention. But thankfully, I remembered. So let's move on now to add in the menu now, Like I said in the previous video, we cannot make use off the default. What press? Well, because you're not gonna get, Ah, many options to customize it. Now we're going to do here is we're gonna make use off a plug in called the Max Mega Many plugging by Megha Mittal com and what is plug in? Not only can you create Regula menus, but you can also create mega menus if you wanted to. Now, just as an f. Y. I. I made an elemental tutorial last year, and in that same tutorial I created the head are in a different style. Basically, if you want to learn what I did in there, you can check out the video. It's right here. Just typing. Elemental completed Toronto in 19. And I do have the time stamps, which you can see over here. Just choose the one that Cesar creating the head apart one and you will see how I created the head. It's going to be a little bit different from what we're gonna do now. Just in case you're interested. Let me close with this. So I have it installed and activated the Max McGann menu plug in. So let's do this. Okay. I'm gonna be fresh the page for editing the head out. All right? Okay. So if I scroll down, let's see, we're not going to see anything just yet. It normally you would see the Max Mega menu. I'm so under what press? It should be on the WordPress. So Okay, we do sit right here. Actually, it's active, but we do need to make seven changes in the back. And before the the Adam would actually become active. So let's do this. Okay. Going to go to the back. And first. Now let's go over here to appearance. Click on menus. Now, I've also created two extra pages just to make the menu look a bit more in a professional. Those are travel tips and resources. I'm going to add those two being contact down here. And OK, so we're editing the main man. You know, if I go to Max Mega Menu Settings, I'm gonna go ahead now and check this box to say enable. So basically, we're enabling the Maxima cum a new functionality on this particular menus. Let's go ahead now and save. We'll save the menu as well. Now let's come down here. You will see mega menu link, right, Hear clicking there. So over here, this is where you can apply. Your customization is okay. Let's wait for the pitch to load, OK, so you can see the different kinds of changes you can make in here. You can change the click event behavioral do with some sisters as well. You can not hit too many themes. This is where you can begin to change the way it actually looks. So you can change the Advil style if you wanted to. There isn't much to change in here that all the comment. But again, it's up to you. You can make changes to the whole transitions and your shadows. It's all relative. It depends on you. I'm going to go to many bar now in here. I'm gonna change the color from ah to to to So let's look in there. And I'm going to go with the Regula 000 which is black. And then I'll do the same for the second part as well. So Hashtags 000 that's what Black Ah, hashtag f f f that's for whites, just in case you are wondering All right. Nothing else to change in here. Many items are lying. I'm going to switch this to write and came Was such that you light Ah, let's see. Is there anything else to change in? Yeah, I don't think so. Okay, let's just go ahead now and, um, save our changes. That's for the menu bar. Let's go to mega menus. There isn't much to change here either. Lenders make sure. So we've got the panel pad in column pad in widgets. Ah, OK, what does go ahead and leave this as it is and we'll just go now to the header section. Let's go to our elements. I'm gonna go ahead and we first this page. First of all, refresh the page. Let's wait for it to load. OK, so we're gonna find the Max Mega Menu elements on the What press. So here it is, right here. Mexican menu. I'm gonna click drag dropping in there and now in here will choose the many location, which is going to be opted Primary menu. And there you go. So I've got home blood about travel tips. Resource is and contact pretty awesome. Let's go ahead now and apply update as well. Now let's come back in here. Let's see how it looks like, OK. The only thing, though, is that it's not going full with. For some reasons. Let's try to fix what might be happening here. Ah, let's go to Let's see what might be happening in here. Let's click on set sins so the page layout stays elemental fool with OK, let's go to the main section itself, content with it goes full with OK, let's go ahead now, and let's just go ahead and view the page normally and this just see what it looks like Okay, let's go to the low nomad. Let's go back. Oh, there you go. Let's refresh. Let's make sure this is real. Oh, okay. So it's actually going full with, So I'm guessing whenever you edits in the head up in the back, and it won't go forward. So don't be confused by this, okay? All right. So let's go back in here. This looks pretty good. I like the way it looks. Except maybe we can make the text. Maybe a little bit bigger. So let's go to the maximum gut menu. Let's see. Let's go to make a menus. Ah, let's look for the menu bar. I think it should be over here. The top level menu items. Okay, so sizes for 10 pixels. Maybe we can make this, Ah, 18 pixels instead. Um, I think it should be fine. Let's go ahead and save changes. Now let's see how this would look like. Let's refresh. Okay, it's bigger and like this looks much better than what we had initially. So that's it for adding many German event exuded away. I will now show you how to add the social media icons above our main menu. 12. Adding the Social Media Icons: welcome back to Part three off building our main header and ah, in part one, we added logo part. So we added mint menu and I'll finally part three. We're going to add our social media icons just like Matt has on his own sites. So let's do this. This is gonna be fairly simple. Let's go over to our elemental elements and you will find social icons. This would be under the general plus drug special icons drop it just above the main menu. And, ah, by default, we have Facebook. We have Twitter. We have YouTube. I am going to shoot off course. Add the one for Instagram, so let's go in there. Click on instagram, click on insert. And of course, you would come in here like, for example, under Instagram, you can add the link to your actual INSTAGRAM account right there. Click on Facebook. You come down here, you add the link and so on so you could do all that. Let's make some changes to the shape. I'm going to go with the square, which is a my God, that's horrible. I don't like the square shaped Let's go in a circle. Yeah, let's go with circle alignment will be to the light again. Let's come down here to style. Now again, this is all of relative. You can go with the standard color, which is which is fine, but I'm going to go with a custom color. And the practical in this case right now would be, Ah, let's go with Black and then the secondary. Coehlo. Well, we don't have to Changeable. I'll just go ahead and choose. Ah White. That's what Matt actually has. So Matt has black circles, and then the white I couldn't econ themselves, actually. White. Okay, so we're going to do the opposite. So practical here would be, Ah, white. And then the ah, secondary Kahlo would be black. I'm guessing Wait, what's going on? I'm confused. No, it is. No, we were right the first time. Whatever. Okay. Primary cola is gonna be black. I'm gonna call is going to be whites. Okay, Well, we'll just We'll just stick with this. It's fine. It's fine. It's fine. All right. Size. I think the size is decent enough. Let me close this. Yeah. What do you think? I think it's OK. I mean, doesn't have to get any bigger or smaller than this. I think it's fine. Okay, we can do one more thing over here way. Have the icon hover. We can add an animation so that whenever anyone like hovers over the icons, maybe they might blow up on them. Might shrink. What does Met half a can. That has nothing. So maybe we can just, ah, do this hover animation I'm going to go with Let's say shrink shrink seems fine. Let's see. Ah, grow. Maybe. No, I don't like go see pulses. Ah, yeah, I'll just stick with shrinking because feel free to ah, which is whatever animation was. You can also add our colors as well. Maybe you want Teoh change like the color. For example, You had green in here. You know, you could add effects like that if you wanted to feel free to play along with all these options. Ah, but that's it. I'm gonna go ahead now and updates and ah, yeah, yeah, baby. Let's, uh let's refresh this page and, uh, see it. Well, we have in There you go. There you go. We've got ah, logo, the social media icons. And we also have ah main menu as well. So that's pretty much it for building our head. Uh, thank you so much for watching, and I will see the next video. 13. Creating the Footer: Now that we have our head are builds. It's time to take a look at how we can also build our costume footer. Now over here on mats site, you can see the way the foot. It looks like he has the light blue background. He has five columns for which have links and head out. And then the fifth and final column has such bar as well as, Ah, social media links. And then finally, of course, down here, he's got his copyright link right there. So let's try to build a face out. I'm going to go over here to the back end. Let's go over to appearance and then head a foot a builder animal. Go ahead now and add a new templates. And of course, we'll call this the Footer. It's like option will be Fouda display on entire Web sword. Let's come down here to post attributes. Ah, full with no sign. Bark on layout for with contained. Let's go ahead now and hit! Publish! Bomb, bomb, bomb! Bomb! Bomb! Okay, now let's go ahead and edit with Elemental and OK, so we're looking for five columns. Basically, Let's do this. I'm gonna go ahead and drag the intersection element. Let's drop that in there. Let's go ahead now and add the background. Kahlo first for the main section. It's a bag on type is classic of the color. Now I know it is. Ah, three a nine. The one thing you should be careful about with this color picker is debt. When she starts happening like numbers, it'll try to fill in the rest for you. Which is kind of annoying, actually. So let's try it again. Three a nine and then ah, three beats you. Okay, that's the bad gun call. Oh, ah, Let's go to lay out, let's ensure that this goes full with. Okay, Now, I'm gonna come in here and just take a look at what he has. So it is. You can see. Basically, he has, like a Hedda. And then the header has like, ah, water might call a dotted border at the bottom. And then he's got the links to his content in post. So let's really create something very, very similar. We're gonna drag, they head up right in here. Let's make this on h three. So I'm gonna say about ah, me basically Ah, let's go to style. Text color will be wides. Ah, what else can we see? Okay, lets go back. Lets try to reduce the weight. This is way too. Bulls. Let's go to topography. Ah, the weight. Let's go. Maybe 300 list. Rifle 100. Uh, no change. 500. Maybe No change. 600. Okay, let's just go back to 400 for now. Um, the style there is no more, but decoration we can do and underline. We don't have the dotted border style, but we can go with the regular on the line. So that's the head up. Now, let's try to replicate what we have you with the links. Now, I thought about the best way to do this. And I've come to the conclusion that the best will just be to use your Regula text. Eddie Tool. So let's job that in here, and let's just type help remove the defaults contents, so ah, let's say I'm gonna typing right now about ah, Alex. OK, now, no, very carefully that when I press the enter Botton, I'm going to use the shift key as well. If you press enter just as it is, it creates this amount of space, so you don't want other case. So to reduce that space, just simply press the shift button and then enter. So now it's you don't get as much spacing between your text. So that's dead and gone typing. Now call P our fight. Let's try that again. What else does he have? Privacy policy, privacy policy and endless to say our rightful me. Okay, Now, to make this as links, it's just very, very simple, as usual is the same as, like your Bigelow. What press? Just highlight the text coming here at the link. So we'll go ahead and add a link for about Alex. I'll just read it again, has come back in here and said, Link hash tag apply. Can't ah listed the same for copyright as well? It's gonna add a hash tag applying. Actually, we don't even need if you're going to even creating a real content for your own set. Of course, add are the links, But since for me, this is dummy text, I'm just gonna go ahead now and how light everything. And I'm going to go over to where we have the tuggle toolbar toggle clicking there So we now have access to the text color, which we can now change. Now I know the college Jama'at is using is going to be a limb. Just take a look here. It's C six e and then D f full. Let me go ahead and hit, OK? And yes, there's going to be like No, it's very, very, very similar. There are some other things that we should try to verify. Ah, the text. I'm sorry. Topography here is going to be actually 16 pixels, 16 pixels and then the weight is 300. Okay, so if you consider it now, it's very, very close to what Matt has on his one side as well. And Ah, there you go. I think I'm happy with what we currently have. I think it's okay. I'm just gonna go ahead now and updates. And OK, so now that we've gotten the very first column off content figured out, I'm gonna do something right now I'm going to simply right click on the column holding the about me section. I'm going to right click in there and I'm going to say duplicates. Okay. Again, we're gonna do that again. Duplicates and then one more time, do you? Placate? Okay, so all you would need to do it now it will just be to come in here and, ah, change the text to the appropriate information. So let's if example travel tips and I can come in here. Ah, call this one. Let's say ah, bum bum back. Ah, travel, Blawg, backspace And ah, and so on and so forth. Basically, So I don't I'm going to spend entire video changing older texting here, but I'm going to do is to take a look at the fifth and final column, which has the social media icons. He does have a such bar in here as well, but we're gonna ignore that instead. But is gonna drag the social media icons. The button element here was job that in there. And then, of course, I'm going to add the instagram because we are on instagram. Let's go quite there inserts and ah, we're going to stick with the circle style A lemons will be to the left and let's go back up in here style. Now I'm gonna live the official color this time around. Okay, So and I think when it two pixels seems fine. Okay, The 11 last thing we need to do will be to you. Add some padding and, of course, the copyright text as well. So ah, let's add some petting at the top. So we're going to go over to the main section. Let's go to advanced on Linda Value. So we'll add pattern at the top so we can push. It takes down just a little bit. So let's go with. Ah, 10 pixels. Should be fine. Let's go back in here. So finally, we're gonna come down in here now. They had a food town blocks plugging also offers those a copyrights elements. I'm gonna drop the corporate element all pasted down here. And then, of course. Ah, line to dissent. Ah, the text card would be white. Couple 2020. A long, long, long nomad. Excuse me. Powered by the loan nomad about. I think that should be fine. Let's go ahead now and updates and ah, let's take a look at what we have. It's view the page. Let's ignore this, and we're going to go to the actual link for the homepage itself. Okay, so this is our home. Pick them just refresh. Make sure nothing is cached. Let's scroll down here and Ah, There you go. We now have our footer with the tax. The links the couple of Texas Well, in the social media Aikens. Oh, let's add Let's add a head. Uh oh, my middle. We shouldn't I know he has the, um Follow me on the web over here. Ah, let's do that. Okay, let's quickly do that. So to make an edits to the footer that we have in here, we're going to go over here where you have edit elemental You know, you can see we have added the header or edit The foot is let's do the one for the food real quick, which is gonna add a head Assane full of me. Basically. So heading. Let's drag that in here, please. That's right. There was Well, I will just say follow me. Make that an age three and then we'll just change the text color to White and ah, we also need to make changes to the weights as well. I lived the wait was that was it 400 and ah, the decoration on the line off dates. Okay, let's go back. Let's view the page? No, By the way, if you take a look at your bell in, he can see it say's elemental H F fota. So don't let this confuse it, because now it's not going full with. Just ignore that. Go to the real are your really homepage instead, so you can see the actual photo in action. Let's go down in here. And there you go. Okay, so it looks a little better. One final thing to do before I found this a very quickly is to add some space in between the about Alexander section and then the footer. But actually, we don't need to do so because we're gonna add another section, which will be the mailing list section. Mitchell do so in the very next to Bill. So germy, then And I will see you then. 14. Adding the Subscription Form: we're moving on and one with we're gonna add it to the footer would be the male in list. Now, Matt has his get my best off since sent street to you. And then, of course, you've got a box for your name email, and then the button it Cesar sent me tips. Now, you might also notice that he tends to have this particular link off this section on. Just about every page is that he has again in Hagen. Ceiling is about pages. Got it right here. I have to go to the start here. Page, Let's go down. You can see again. It's like this. Basically, this is actually attached to his foot. And personally, I think it's a very, very smart way to end ties and remind people to subscribe to his mailing list. So we're gonna do something very, very similar. We're gonna add our own mailing list to our food, So let's go ahead down. Let's go to edit with elemental. And actually, I'm sorry. Before we do that, we're going to make use of a plug in here, and the plug in is called the opt informs by fancy things. It's not a very popular plug in, but I have been using it for a very long time, and I like it because it's very, very simple to use it, provided with lots of options. It's free. Plus it's very light weight. So we're gonna make use of the opt informs, plugging, Please go ahead, download and still activate a plug in. Now, when you do the same, if you go over to your back end, you should see the option forms link hear clicking there. And now the first thing we need to do with beats you connect often forms with our email solution. So you've got different types in here. I use mail chimp, and depending on which one you choose, you may have to provide eyes any kind of information. So, for example, if you used a convert kit, you we did your user I d. You needed from I D. But there is a milk chimp on. All I need is a from action. You are well now, if you're completely new to the walled off email markets and I'll recommend Mill chimp first of all, because even though they have paid versions, did you have a free subscription that you can used to get up, Teoh. I think 2000 contacts first, and then you'll have to start paying some milk is a great way to get started. And plus, I do have a complete tutorial on how to use male champion Watching is on YouTube. It's the comfortable person built into two off between 19. And basically, I show you how to create your account, how to send emails since like that. So feel free to check it out now for male chimp. We're gonna need a form action. You are l. And if you click on the question mark right here, basically you will be guided on how to get this particular from actually. Well, I am logged into mill chimp right now. So to get my information here about, I'm gonna choose the audience that I'd like to add such campus shoes, and this is right now is going to be my monkey students. So I'm gonna go over here to manage audience. I'm going to click on sign up forms and then from here, I'm gonna go over here to embedded forms. Click on select. And then over here, where you have the tabs I'm gonna choose on Styled. Let's come down here And there you go. So this is exactly what I'm looking full from action. HCPs Yet yet yet up. Let's take a look at what they said. What exactly do we need it? Let's go down here. So all we need is the form action in the quotation marks. So let's do this. I'm going to go ahead now and try to copy just that, but it won't allow you. So basically, we just have to go ahead and copy everything and then I'll just go ahead now and type in. Ah, note pad. Let's paste all that in there. Let's expand this. So from note pad, we can now go ahead and grab the from action Your well note. I'm only campaign. What's inside? A quotation marks. Okay, let's go back to back and has come up here. Let's add from action. You're well and ah, there you go. So let's go ahead. Save the changes. So whenever anyone subscribes to our form, there will be added to my our monkey students are mailing list. Basically, that's how this works. So now that we've connected mill chimp with website, let's go over to the form. So in here you have different from designs. You've got one up to six. And honestly, I like most of them. I think the very last one Ah, this one is not good. It's very, very ugly. But five is actually quite nice. You can see the way it looks, but I'm gonna go with one, and we're just style. The form Let's come over here. So for the fund biographical, I'm going to stick with White for the form Bada Koloa will go with White as well. So basically it has no border. Ah, let's cool down here. The button background. Coehlo, Let's go with our red, Actually, let me see. I think the Columbia used in for the opt in form for the red color is actually it's his hash tag. Uh, if it was it 61 two won't see. So I'm trying to make sure that our colors are consistent basically. So on the lips of a reason Black were using very as well. So let's give you consistent. So Ah, there you go. This is exactly what it would look like. Let's go back to study it. Form what else do we have? I think that's OK. Nothing. There's anything else to change in here. So form options again. You have options of hiding the titles of Titley, Connecticut. Some CSS ah, from functionality. You can open the form submission in a new window if you wanted to, but And finally, this is important form placement. So by default, it say's after the post after the page, we're going to choose, don't display in posts and then also don't display on pages, will use the short code instead and specify where where they would like to display the form self. I'm gonna go ahead now. Copy the often from short code. Let's save our changes part. Ah, Okay. Now let's go over to our front and we're gonna go with edit with elemental. Go to Fouda and oh, Okay. All right. So basically, we'll just coming here. We're almost done. Was it Ah, short code element will drop that in there. Paste the shortcut for the opt inform. Let's drag this above the main fitter itself for the kind of we're going to go with 9 60 pixels. Okay, so make this 960 pixels in with Okay, lets updates and ah, this should be finals. Go to the back and let's go to the front end. Now let's come over here and ah, there you go. So not bad at all. I like the way it looks. It's fine. It's OK. All right. So one final thing is, let's add some Padden for the about Alexander section against right now. The view, my instagram and with more about me. Barton's a bit too close to the edge, so let's just quickly do that. I'm gonna go with edit with elemental, very quickly space and is very, very important for your design. So let's do this. All right. So I'm gonna go over to the main section. Let's go to it, fans. And, of course, padding. Let's only develops of Pat and let me scroll down here. So I said, I'm doing some padding Bottom. Let's go with Ah! Oh, I'm sorry. I'm, uh I'm on margins. I'm an idiot, not margins, but patterns the cape. So let's go ahead now and add, Let's say if you've 10 pixels, I think that should be fine. No, let's make a twin, actually, 20. Okay, let's go ahead. Updates and ah they should be fined. It should be fine. Now let's go ahead of you. The page. Okay, let's go down here it looks much better and Ah, but there you go. Successfully created are Fouda and Ah Header. Now let's make sure it's actually working properly. If we go to, let's say the complete guys to visit South Africa. Let's see a block post. You can see we have headed right there and then, of course, at the bottom we do have the get free email updates as well as, ah actual footer itself. So don't worry. I can see that this goes full with these. Athens will correct later on as we progress. But for now we've successfully are created Our head R and R. Fouda Thanks so much for watching and I was in the next class. 15. Working with the Slideshow Element: Welcome back. Now we're almost done with the home page. But there is one most section I would like us to add. Never go over to Matt site where he has the about nomadic Matt section. He does have this featured in and then considered logos of where his articles has been featured in. So I want to create something very similar to this using a slide show. So let's do this. I'm gonna go over here to the home page and pull off course added with elemental. So to create this, we're going to make use off several images for the gallery. And, of course, we're gonna make use off the image caress Ole Element. So it's right here. It's under General, it's the 4th 1 So let's do this. I'm gonna schooled way down here. Let's drag the image console and then drop it in here. So right now we'll have to choose all images and just let you know I already have five images from Trib Argo Hotels, com, Expedia, Airbnb as well as booking dot com. Now, just to give you a tip whenever you're walking with carol souls and things like this, make sure that your images off the pink former T p n g former because they will have a transparent background. So you want the background to blend in with the background off the container. It will look very old if you had a J peg. Say, for example, that Zhivago logo here was J pic and it had a black background, and then you put it in the carousel, and then the color of the carousel has ah, white background. I will be very, very only. It'll blend in, so make sure your images off the pink format and then try as much as possible to make sure that they're all off the same with as well. Ah, height wise. They didn't necessarily have to be able to same height, but it should be close enough because if example, Trevor Go is to 50 Basics to three hotels is to 50 but 49. Our experience to Dubai 71 ah mbasu, fitted by 78 then booking dot com is to 50 by 42. So all of the same with. But then, when it comes to the head to make sure it's not the differences included than 50 or say 60 pixels basically. So I'm gonna go ahead and settle this five. So let's create a new gallery. I'm going to click and said Gallery and there you go out. So by default, image size has been set a thumbnail, but I'm going to go with the full size instead. All right, it's less to show the more slaves you choose to show, the smaller there would be something. I'm gonna go with five so you can see how it looks. We need to add some space, so let's go over here to style. Let's go down. Hits the image a space Enough. We're going to give this thing 20. Should be fine. Maybe you think when it's fine and in vertical our line, make sure that you align them to the center. That way they're all aligned essentially, all right, so that's good. Let's go ahead and add a small Hedda saying, Ah, featured in that's That's a regular drug head element. Let's put it in here and then we're going to see in capital letters are featured in an Emory three dots. Okay, let's go ahead and add a background for the section, and I will go head to style Bad guns have his classic We're gonna go with the color and the color I have in mind is going to be ah e There you go. Let's go ahead now and updates And what I'm gonna do is I'm actually gonna drag this section and we'll put it just beneath the main background image on top right here. So let's do that. Let's go ahead now and updates. And now let's Ah, take a look Going to a click View the page O K C. Consider it now it sees. Featured in Chicago hotels a column. Expedia Airbnb booking com Awesome. We can make a slight change in here like the featured and let's try to create some space. And that's at some patted in that. So I'm gonna come over here. Let's go quite there, Go to advanced on Leak on Link the chain and then we could give it maybe, Ah, 10 pixels. Think that should be fine. 10 pixels. Let's go ahead now and updates and ah, there you go Looks so I click one more time of freshly pitiful more time, brother, and that you go. So we've successfully created our Carol soul. Let me just show you a few more things. You can actually do the carousel. Come back in here so you can change the position of your arrows. We can make them inside or outside gender size, the collar, things like that. If you go back to content are in here You can choose how many slaves you like to show at once. This is useful if you have plenty of logos. But if you go far I've six out of the commanders lost. Lived on default. You don't need to do anything. Our image stretch. I will never commend you Ever do this? Basically, what this does is it will stretch it, stretch the images so that they occupy had the full with off the slight show itself. In most cases, this is not often a good idea because when you stretch an image, you're basically gonna lose quality off that image image, lose part of its quality. So I keep this on No. And ah, that's pretty much it. Of course you've got the auto play options are Paulson. However, things like that you can, ah change the direction from right to left is all All depends on you. So that is it. I think right now we've successfully come to the conclusion off the home page, and I think we don't quite okay. We have the main background image with the main head are willing to the blawg featured in ah, let us block post three of them and about a section. And of course, Ah, our email subscription form And in our photos. So that's it for the home page. Thank you for watching. I will see you the next class. 16. Building the Blog Page: Okay, we're moving on. And now that we're done with the home page, let's now move on to the next page, which is just as important. And that's going to be the block page itself. So by default, Astra, the thimble using already shows the block page pretty decently are just to give you a heads up. If you clicked on the customize button right up here, this will take you to Astra's theme options and on the global. What you want to do is go to container, make sure that the layout to set to fool with contained ah, page layout is full with contain and then you block post layout to set You boxed. All right. That way it will be displayed in a container and just a few other things. If you click back here and let's go over to the actual blow glink right here in here, you can make some some some custom changes or you could choose to hide Ah, the future image. So that this way, you only have, like, the title uh, the blood meta and then things like the except you could hide the author of the category of things like that. And, uh, yeah, there's a lot of the changes you can make. I would also headed recommended that in such a scenario like this, you can you can see that the sidebar to the light it has are such function missing posters and comments. The sidebar is pretty short, while the post gold way down this usually is not a great design look, so one thing you could do them. Just publish the changes. One thing you could do is to make sure that when you go to your set, since you go to ah, reading, make sure blocked pages show it most. You can maybe make this like maybe let's say, five posts at the most. So let's save the changes. And now let's take a look at the block page just to see what looks like right now so you can sit. This is now this Now look so much better, so that's one trick you can apply. That's basically it with the Astra thin. Now, if you want to use elemental elements, are pro offers you lots of functionality with which he could design are really good looking blocked pages, both the free version. It's limited but taking a look at Matt's site, you can see basically, he's got the head L in his book posts, and then he has, like, the future image and in the title of the block post. And then down here, he's got the origination right. We could do something very similar to this. All you would need to do basically, would be to create a new page and then simply use the alum. Just come over here, make use of the post greed element, which were already worked with Elliot. That's what you could do. However, Let me point something out very carefully, right? Note that on the settings reading, we have said The Post's page to be blawg. All right, If we go to the blood page now and I go to edit page and then I click on edit with Elemental, look at what's gonna happen night. You're going to get this ever message saying that you must call the content function yada, yada, yada. Basically, what's happening here is this because we've set the postage to be blawg. What press automatically takes full control over how the contents of the block page is displayed and it will use your theme to display the content. All right, so basically, in this scenario right now, our theme has priority over elemental limiter cannot take over. If you wanted to create a similar blocked page like this using elemental, what you can do is to simply make sure that the post pages sets to the select button. Okay? You're not using any pages your post page simply come down in here. Ah, save the changes. And now if we go back to edit in the page for the bloke post, I'm just first page. Okay, So now if we click on edit with Elemental, you will now notice that yes. Now we can begin to walk with Element is so to create something like this again, we've done this already before. Just come down all the way here, choose your post grid. And then in this case right now, you could just go with ah posts as as many as you want. You might not be able to create the pagination like we have down here, but honestly, I don't know having all the bloke your page is shown on one single page. Actually think that's actually quite nice. I don't see anything wrong. There are to minimize or to make it shorter. You could choose not to display the excerpt. You could choose also not to show the read more. I would also recommend that you would hide the metadata say coming here. Or maybe remove the comments So you show only the date and ah, of course. You come in here as well. You would add your head. Ah, you will call it. You know the block page. And then you really have something very similar towards you have over here. So that's Ah, basically it full the block paid. Hopefully you learned a few tricks here and there. Thank you for watching German invented video. Where will now take a look at building out the about page. 17. Building the About Us Page: when we don't know to edit in the about us page. And Matt does have his own about pigeon. Honestly, if you have a blogger or any kind of website, you really should happen about all page. Where you rights. You're positive you're history. Provide some information about you basically, and I try to make your cellphone relatable and mad. Those an excellent job right here. You know, he talks about himself, provides ah, some insight, injuries, history, how he said it traveling. And this is what people trust him, right? People find him very relatable because, you know, he shares ah information about himself. So we're gonna build something very similar and in fact, on the sample site already built out the about page. And here's what's gonna look like we'll have the title. Ah, welcome fellow travel our and that will have the video playing the background. And then, of course, there's some takes about me some pictures and then down here will have the testimonials basically. So let's go ahead now and build this page. Go over to the about page edit with elemental and ah, all right. So the first thing we're gonna do is to Add the welcome fellow traveler. Let's do this. Gonna add the head in and we'll change the text to welcome fellow travel. Ah! Ah Well, make it an h one who centralize it as well. Next will be the video elements. We're gonna jump that in there. No, for the video, you do have different sources where you can host the video. You go. YouTube Vimeo. The emotion self hosted self hosted simply means that, um, individual will be in your media library. Now, I would not recommend it do this because videos tend to be heavy and ah, they will occupy space on your Web server. You don't want that on Lee Go itself hosted. If your video is very, very short, let's see if it less than 10 seconds, then all the command going self hosted. But mine is about 25 seconds. So I already uploaded to the meal, and this is the video right here. I'm just gonna go ahead and copy the video that this is a video he made about my my travels . Um uh, you know, around Brazil in Argentina and so on. And I'm gonna go ahead and, um, Jews v meal and, of course, all pissed a link right here. Now, if you do have a YouTube channel, it will be a very smart idea to host on YouTube instead, this where you can send people to YouTube channel. So just a quick tip above. I do auto play. We're gonna go with Yes, we're going to mute the video. Al. We moved the Inter title. Old intra portrayed intial byline. We moved all of those and then on the style we can choose the aspect ratio. Do you want to go 16 by nine? All 21 by nine? Here's what it will look like, basically what your number. And then you will have the black edges right there. But the video will be small in size, but with 16 by nine, no black space. But then the video. It's gonna be pretty big. So let's go ahead updates and let's just see how this would look like. And over here I chose the 21 by nine, but let's see, how are 16 by nine. I would actually look like So let's take a look. Let's come here. Oh, I forgot one thing. So we did not set the with here to go full with. So let's try this. Let's come back in here to the main section. Ah, let's go with full with. Okay, let's updates and let's see how this would look like if it goes full with and Ah, Well, there you go. This is 16 by nine and Ah, this is big. This is really really, really, really big. So you can either go with the 21 by nine. I'm just going to show you how this would look like. So, gentlemen, there will make the video more compact. But then are you also gonna have the black edges? So this is one. All right. So this is one way how you could display your video all if you want t still stick with the 21 by nine. We can just say OK, look, you know what? We're not gonna go full with why we're gonna go with the box instead. Okay? So you can try, boxed and then switched the aspect of issue from 21 by 9 to 16 by nine. I think this is probably probably probably the best a way of displaying the video. I think I'm just fresh and Ah, there you go. So it's really relative. It depends on you on. You know how you want to display the old video. Let's move on. So the next partner I was going to be Alex, Nice to meet you. I got a copy of this text real quick. Let's copy that. Let's come back in here. So by now, you should know that the next element we're going to add would be the inner sections less job that in here in a section. So the first section has the first column. Mother has the images image right here. Let's go ahead now and add image trumpet in there. I'm going to choose my image. It's the swan and set. The media said this to full size. And then, of course, for the next one will be the text Eddie Tool. And I'll dump the texts that I just copied. Let's drop that in there. And ah, we do have the head s and M. Alex. Nice to meet you. Let's do that as well. Strip it in here now. Was that in caps? Lock. It isn't caps. Look OK, I am Alex. That's nice to meet you. And Ah, let's centralize that oneness. Well, okay, So what's next is from the cubicle to the airport? The same process really has come back in here, will jump head in elements. And then I'm going to say Linda's copy this copy. Come down in here. Let's pace that one. Central lies. Choose the image elements stripping here, choose our image and said media and then underneath will be the text. Eddie Tool. I'm going here. Text ed. It'll on the new image. Okay. What do we have in here? Good. Oldest texts. Bomb. Let's copy the text coming here. And we're gonna go ahead now and paste all that text. Okay? Now you might notices something in here. I was about to about page on the refresh. You might notice that. Hold on a second. The texts goes beyond the image you can see right here. Is that the image? Sensible, like central lives. But then the text goes up. Not exactly full with, but it goes beyond the day, the edges off the image. But over here, you can see that that's not what happened, right? The text is perfectly aligned. It is the image. So what exactly could be going on in here. Why do we have this happen? Never coming here. Let me show you what I did. Basically, what's happening here? Is this all right? The image that we have this particular image, it's not big enough to occupy the full with off its container. So as a result, we need to do to ensure that this particular text doesn't go beyond the edges of the image is to set a fixed with in this case. Right now, we give it 10 24 because this image is actually 10 24. So the text is not going to go beyond the image because now they're setting a particular are with. If we came in here right now, he said full with instead. Well, guess what? The text will go wild while the image cannot stretch beyond its 10 24 out with. So here's exactly what you need to do in such a scenario. Less of the exact same thing in here. Gonna come over here, go to the section, and of course, we'll set a 10 24 right there. So let's go ahead now and old dates and Ah, there you go. All right. So the last thing right now would be the testimonials section, which will cover in the very next video. 18. Adding Testimonials: Welcome back. All right, So let's add the Simone als toothy about page. So let's do this. Will, quick gonna come back in here and, ah, we're gonna go ahead and choose first of all, the head up, We should say, Ah, what people are saying about this website. So let's and the head, uh, elements. We'll go ahead now and paste. How will centralize as well, And ah, well, now, take a look at ad in the inner section element because we're gonna be dealing with columns . You can see we've got four columns basically, So we're gonna go ahead now and make use off. The testimonial element is gonna be on the general and ah, where is it? It's right here, next to tabs. Let's drug testimonial. Let's ah, put it in here. Okay, So I do have images of some people's. I'm going to use this lady. John Doe is a name. I'm going to copy this random things we have in here. They all called John Doe. By the way, I didn't have time to change. The names was going here. Dump the text. Okay. So you can change the alignment. You maybe go like the left center things like that. You can switch the image position from aside to top things like that. But I think aside is actually ah, better. Okay. Ah, on the style, we can make changes to the topography. Ah, the size here will be 16 pixels, which would be 300. And I think the line hides we can go with, Ah, thinking maybe 1.2, I think should be fine and Ah, Okay. Let's just take a look in here, all right? I think that's pretty much a We don't need to change anything else. Okay, so now that we've got in this all set, we're gonna by clicking here duplicates. Ah, And then again will do the exact same thing. Duplicates duplicate one more time. Let's delete the last column And what does come in here and change the images? This guy looks evil, by the way. Like this is the kind of guy you typical would having like the James Bond films. You know, the James Bond villain. You know, he looks It looks like a megalomaniac who wants to take over the world. Okay, Anyway, we've got ah is gave it Looks evil may look at those eyes. Anyway. Let's move on. John Doe. I'm gonna come in here, change, uh, to the lady here, and ah, we do have formal, pleasant looking men in hair as the last best in provided this morning. L ah. Okay. Ah, one more thing will be the background color. And I believe this was Ah, si, si, si. If I'm not mistaken Ah, come back in here. Style like on type color is going to be C C C Uh, no, I think it's e either. Not not C c c ah e. Okay. Yeah, I think that's more like it. Let's Ah, OK, one more thing. Of course, you can see what people are saying is to be too close to the edge. So we'll add some padding to the head. Uh, has come to advanced on link, and then padding from the top would be Ah, let's go. 20 pixels, I guess. Let's update, and I think we should be fine. Well, first the page come down here and Ah, Well, there you go. So we've successfully are created the about us page. Thank you for watching Hope you enjoyed this. And I will see in the next video 19. Quiz: Welcome back. All right, So before we continue, I would like to give you a small Cui's just to get your hands dirty tester brain cells and see if we can figure out the solution. So the quizzes this we have so far displayed video making use off the video element. But can you figure out another way how to display off video without actually making use of the video element? I'm going to give you a small hint. You may or may not need to make use off the inner section element. That's all I'm going to say. So you can pause the video right now and try to figure out how to display a video without making use of video elements. I am going to provide the solution now. So here's a solution. OK, one of display video without making use of the video element. Well, let's do this school down here. Let's drag the intersection element in here, and I'll just first of all to lead the second column because we don't actually need it. Here's what I'm gonna do. Okay, so for the main section itself, check this out. All right, I'm gonna go to style and then bag on type. That's right. I'm just gonna go ahead and choose the video and then I'll paste the link to the video from video. And there you go. Very, very easy out. OK, but we're not done. Because of course, right now you can see nothing is actually playing. So what we need to do is to, uh, festival set a height Teoh section. So I go over to lay out. You can see over here we've got the heights of default. I'm gonna changes right now, Teoh. Minimum height so we can go pretty high. Let's go as high as let's say, Ah 6 630 maybe. Yeah, let's go with 630. And then if we go back to style in here, we can choose the time you want the villages starts. I'm going to say, Ah, start at the very 1st 2nd and then end time after 70 seconds. I guess our play wants. Okay, so you just put once and then stop and ah, that's pretty much it. I'm gonna go ahead, change the layout. You can go with a full with in this case, let's updates And now let's go ahead and view the page in you tab Let's see what we have a la la HLA a bad It was come down here and Ah, there you go. Let's just with for a few seconds for the video to play And it's not playing I don't know exactly why it's not, but let's plastic. Let's take a look again and see what might be happening. Our case that time more. Okay, let's be the end time at 50. After the 1st 30 seconds, the video will stop plane. Ah said to play once. OK, it should play. I'm gonna update now and ah Lim, try and do a hard refreshing this and see it should play. Actually, it should play. Uh, let's see. And ah, this is the first time playing the 1st 1 Should be playing the 2nd 1 for some reason. Doesn't want to play. Okay, let's do this. All right, I'm gonna open up a new blows out, and sometimes you just need to test Ah, these things out. I'm gonna grab the rail. Let's go over to Firefox that's coming here and paste and see. Sometimes you just need to change your bells and just see if it completely to play or not. I start school down here and let us see. Oh, there you go. It's actually playing on a different browser. So the reason why it did not play here with the bridge blows up is probably cause we assigned in. We'll log in as an admin, so it's like it doesn't want to play. So whenever you're in doubt about videos not playing or slight as just open up a new blouse , our pace it in there and then see you can see it. It plays very well on Firefox. So there you go. That's how to display a video as a background. In fact, let's do this. I'm gonna go ahead and ah, deletes the first video. That was Just go ahead. And when we moved this one and I know simply drag this one right here, let's take it all the way to the top. You can paste it right there. And in fact, how about we dragged the header beneath the video itself. So we have, like, a whole new designing. Hear them just come in here, give the head in some pattern from the top. But she done little bit. Let's give it 20 pixels. Okay, lets off dates and then we'll just see how this actually looks like. Go back to my Firefox. Refresh the page. So let's see, The new design was cool back appear. Okay, So there you go with video. Plane has a background welcome. Fila Travel. I'm Alex. Nice to meet you. I think this might actually be better What we initially had so well, there you go. That's the quiz. And hopefully you've now learned a different way off this plane. Your videos. Further than using the video elements, you can make use off the video as a background. So that's it. Thank you for watching. And I will see you in the next class. 20. Elementor and WooCommerce: Let's move on now, Teoh, the e commerce section off our website and you may not need this particular section because it's possible that you may not be selling anything any website. But if you are and they are virtual products, maybe their e books or videos of things like that, I think you're gonna love what I'm about to teach you. So are nomadic, Matt. He does have his travel guides, which he sells. And if you click on the link right here, it will take you to a page where you can see all his books at a glance. And, of course, in a short description and in the button, Teoh odd to cart or by themselves. We're gonna try and create something very similar to this on the home page. And in fact, on his home page, he does have the same section down here, as you can see. So we're gonna try and create something very similar to this Now, in other To do this, we're gonna have to install a new plug in called the Wu Commas Plug in. You probably have heard of it. It's a very popular plug in, so I'm gonna do this right now, and ah, very, very, very quickly. Ah, Typing Calmus to install was it is very, very quickly. I'm gonna go ahead and stole. Now let's go ahead and activate the plug in. All right? So I'm going to run through the seven Boys are very, very, very quickly. Okay, so ah, address was gonna go ahead and type in something random. It's going to be in United States dollars. That's the currency I plan on selling digital products. Let's go. Let's continue. Ah, What? I'll go ahead and hit. Continue here. I just want to get this over with. Very, very, very quickly. Let's get the step. Ah, this is cool down here. Skip this step again. Ah. Okay. All right. So we already So what I'm gonna do right now is to go ahead and visit the large board. Now, if you've never walked with Wu commas and you like to learn how to properly set up Oh, commas, I do have an extensive tutorial. It's called a complete will commerce elemental tutorial for 2019. You can check it out on YouTube In here. I show you everything about willkommen as how to you. Ah, set it up. How to create your shipping options? Do with three phones, accounts, things like that. So everything you would need awful commerce is in this video. Okay? I don't spend time talking about it in this particular lesson because it will take way too long. Sleeve got his option to check out my video on Whoa! Calmus to Tokyo. All right, let's go back in here now. One thing I didn't show you in the welcome US tutorial on YouTube is how to create a virtual product because we're gonna be selling R E books. Right? We're not selling physical products in this case, so I'm going to show you how to creates a visual product. You just simply go to add new product. So just coming here, I'm going to paste some text of copied, and I'm gonna call this Ah, book the vacation in in Ah, Wesley. Brazil, for example. Codification in Brazil. I'm going to come in here. So there you have product data. You can just use simple. I'm gonna make this now, virtual and of course, downloadable as well. Wriggle applies. The regular price is gonna be 99 now in here you'll have to add the u R L for the actual file itself. So you click on add file and then in here you choose your file. If it's ah, it's a pity if you can simply put it's your media library. I don't have any pdf's. And yes, I'll just choose to president flag just to represent the actual book itself. And in here I will add some domestics for the product description. And then in here I'll set the product image, which would be the Breslin for, like itself. Little set that and ah, well, there you go. I'm going to go ahead now and simply just ah, publish this particular product. Okay? All right. Now let's go over its you the front end and let's see how we can display this product. I'm gonna come all the way down here. Let's display. It's just above subscription form. So I'm gonna go ahead and edit with elemental, and we're gonna make use of a new element which we haven't made. Use off yet. Scroll down. All right, so we're looking for is going to be under the ah, the General and is the image box. This is the element, but make use of this element. Let's actually, actually, we don't need to use it in a section. I was thinking of something. Just now Let's make use of the United States in a in a section actual. Let's make make use of it again. I'm gonna jump in the intersection. All right, so let's do this right. I'm gonna come back in here, drag the image books element. Let's job that in here. All right? So, yeah, I'm gonna choose the image off the Brazilian flag our and sit into the media image size. It's full. And then I'm simply going to leave this dummy. Texas as it is, the title is, And description here will be vacation in in Brazil. Okay, And let me see what else I can do is go to style. Ah, with in this case, I'm gonna make this Ah, 100% for the image. So you can see it's very, very bold. And, ah, let's go back to the elements. I am going to drag the button now. Button element on an eighth, right there. A line into the center. Ah, for the color. They're going to go with something a bit different. So it's coming here where we have ah, button background Coehlo And this case will be Let's go with Green. Okay, I will change the content of the booking from Click here to buy now. Okay. And that's what Matt actually has on his site. I believe he displays the price. So OK, so you consider Price right? It's let's do something similar as well. Let's display the price are we can make use of the head in right in here, and I'll just drag it underneath the text. And I could just type in Ah, the dollar sign and we can call his 9 99 Well, all I need to the center and ah, well, there you go. So we do have the image off the book, the title of vacation in Brazil. In effect, I'm gonna change the, um, the content title itself. Let's gender total. Teoh Ah, capital letters. Let me see if I could do that on the style. Image content is good on content right here. Title Look its own attack so we can go to temper Griffey and I will just transform this to upper case. Okay, vacation in Brazil. We do have a short description of the pdf book, the price and then a link. Now, this by now, Link, of course, is going to be very, very important because you wanted to link to the actual product itself. So to get this link, what you want to do is to come back in here, go to where you have the vacation in Brazil or whatever the name of your product is, and then just click on the view product, OK, view to protect itself. And this will show you the U. S. Also, there's the actual put in here. So just copy this. You just come for the euro will come back in here and then where you have the content. Ah, for the link. Just coming here and then paste. How it right there. That's for the image. That's this is if you want to make the image are clickable and then, of course, don't forget for the bottom itself. The buy now button, Go ahead, added the button coming here where you have the link and of course, pays the link right there. So if anyone clicks on the image and then click on the button either one of these tubes will take them to the park page. So now that I'm happy with the design off this first kilometers, I'm just gonna go ahead and simply duplicates and then duplicate one more time. Let me delete the last column. Let's change this one too. Ah, vacation in in. Ah, this is gonna be Spain. So let's ah, going here vacationing in Spain and then last but not least, the good old us early. I'm gonna choose my image of the U S. A. And said the media. And if girls vacationing in U. S. A. All right, let's go ahead and simply updates. And ah, well, there you go. Let's go ahead now in view the page and see what it looks like. Let's go to home. Let's come down in here and Ah, there you go. Ok, OK, so we wanna add some sort of a head up. So let's go back. So the very, very top off the entire intersex I'm gonna drug ahead in place. It's right there, and we can see ah in capital letters. Loan nomads. Ah, travel guides called a travel guides. Uh, let's make this. What size are we going to give this. Let's see, topography we can make. This will be 40 pixels, even not mistaking. These are 50 pixels that even just quickly changed this because I think they'd be too big. So I'm gonna go Teoh Alexander. Let's make this 40 pixels. Let us blow Costa's well, assess changes to 40 pixels as well. This is all relative. If you want your text of the bigger by all means are stick with the size. I'm just, ah, agent in this business model this question. So there you go. All right. One final thing will be to add some padding so it can push the title down a bit. So it's good to advance on the edit head in patting. That's on Linda values and in petting from the top. Let's go ahead and give this 20 pixels. Let's updates. And now let's take a look what we have. One more time. Let's refresh. Let's come down here, okay? Looking much better. However, we're not done. So one very good design concept you might want to adopt is to differentiate between sections you typically want to use different backgrounds. All right, so say, for example, in here we have the main Baghlan image, and then we have the Carrousel section that has, like the great background, let us block posts, has a white background about Alexander, has the grace background. Now the travel guides has a white background. But then our subscription form also has a white background. So you could either decide to give one of this to a different background, Kahlo or there's another method to separate its too. And I'm gonna show you how to do that. Right now, we're gonna make use off a border. We're going to set a border in between the travel guide section and then our subscription section. Right now, I'm gonna add the border to the bottom off the travel guide section. But you could also add the bottom to the top off these subscription form. It all depends on on what you want, But remember that the soft uniform is constant. It's part of the footer. So just to be on the safe side, other command add in the background. But as I'm sort the border at the bottom of the travel guide sections, let's do this. I'm going to go over here. The travel guides section click on edit section, Let's go to advanced and then I'm so not advanced. Our style should be on the style, so we have border right here. So in here, right now, I'm gonna choose the kind of Bobby wants. And let's try daughter. Now. By default, the bottle will surround the entire section on all four sides. So to remove that, what you want to do is to, first of all, on link the values of the with. And then there's simply choose for the bottom against give this maybe two pixels. Let's go ahead updates. And now let's see what we have done. Let's refresh the page and ah, well, there you go. So it's not the best, but I think it's OK. We could still make a few more changes in here, such as changing the actual border itself. So let's see again. What else can we do? We've got dotted. We've also got dashed, which I don't like that that's try groove. Maybe collectible the group does. You could also reduce the with, make it less thick, let's updates, and let's see how this looks like. Let's go back, inhale. It's their 1st 2 page. Let's see. Okay, I think this is much, much, much, much, much, much better now. One final final final thing to deal, of course, would be to again at some space. You want to add some space between the buy now buttons and the actual border, and it's gonna scenario whenever you're dealing with borders and space. Deal with patterns. Alright, patterns, what you want to use to create space between elements and their borders. Let's go back in here favour weight. Quickly I'll click onto the in a section itself. Let's go to advance and now only developed for the padding. So petting from the bottom, Let's go ahead now and give this Ah, 20 pixels updates and voila! Let's just refresh the page and we done. Come on, There you go. And OK, so that's it. A nice oppression between the travel guide section and substitution form are once again, if you'd like to learn more about elemental Bishop from set by the water must be sure to check out the full tutorial 1/2 on YouTube concerning elemental, and we'll commas. Thank you so much and others has been invaded along video. I'll shut up now and see you in different X one 21. Working with Animations: one particular functionality that we haven't talked about, which elemental provides would be the animation functionality. So elemental provides you with different ways how you can display your elements and your content slumbers walk you through a few of them. Let's go ahead. Edit with elemental. So to access the animation functionality, you would need to choose an element or maybe even a section. So this gives. Right now, let's try choosing the letters book posts section entirely. So I'm gonna click on edit Section and then what you want to do is you want to go to advanced, All right. And then on the advanced you will see motion effects so you can click in there And then from here you can choose an entrance animation. So the falls is just no animation. But then you if you click on the drop down arrow you've got fade in. All right, you've got to Let's try something Mawr dramatic. Okay, let's say bounce in. Okay, let's go ahead. Update this and you're going to see what this actually does. Let's go ahead and ah, view our page. All right, let's come in here. I must go down here. So you can see right now the way the book posts are bounced. Let's do that again. Let me refresh the page so you can see right now the way it bounced then. So you do have access to, ah, lot more animations. You could also change the tuition from slow to fast. Let's take a look at some more animations, so I've got slayed in left. Okay, these are the kinds of animation I typically like. Whenever something slides and left, slides invites. So that's at Slate and left for. They let his book posts and then the about Alexander section. Let's a slight invite. Let's try that one. Let's come down here. Slight invites. Let's go ahead now and update. Let's see how this is gonna look like Let's refresh the page. All right? So little blue close leads into the left about Alexander to the fights. So, yeah, that's been much it, actually. So you can add different kinds of animations that has lots and lots of them, like speed Jell O Ted, are, you know, swaying had shake. I don't even know what some of these are. I should take a look at them lates up. So you can also add your animation delay, ritual delay, the start of the animation based on the amount of you know, milliseconds you put in here basically. So that's just something I thought I would mention just in case. Ah, you're interested in animations. However, lenders provide you with one very quick tip are all make use of animations when they actually make sense. If you add way too much animations in your sights, it can become very distracting, and it could also slow down your website. I keep in mind that animations typically require just a beat mawr process in part through one so over doing animations will definitely have a negative impact on the speed off your site to make sure that use your animation sparingly and where they actually make sense. So that's it. Full animations. Thank you for watching. I will see you in the next class 22. Responsive Design Part 1: well will build. The time has come for us to now walk with responsiveness. And if you don't know what responsiveness is, it's implements. How does your site look like on mobile devices? How would it look like on a tablet on a mobile phone and so on? And this is extremely important because, well, most people now used Internet on their mobile devices. It's not just about deck stops or laptops, but it's more about Tom Mobile devices. Now, thankfully, Elemental does have inbuilt functionality that would let us design our science ful mobile devices as well. So how do we actually access this? Well, they're going to see this symbol right here. It's called Responsive Modica looking there and then you've got table it and you've got mobile, right? So let's go ahead now and switch to tablet and let's see how outside it would look like on a tablet device. And life from the body can see that we have a bit of an issue because the menu it's not looking quite as neat as it used to. Now it's like fall into two lines, so that's not very good. Let's go down in here. The bag on image still looks fairly decent. You can still see me consider text. You can see the bottom that say, this is the blawg. Okay, um, the Karl Soule seems to be working. It's there. Maybe it's not working. Well, take a look at that a bit later. Okay? It is working. Fine. Let's go for the down. Ah, let us block. Posts are not looking good at all because now we have plenty of empty space in here, which is not good at all. Let's call further down and see. Ah Instagram. We still can't see this because we're on the editing mode. But I'll show you very quickly to fix this kind of issue. Are the travel guides are looking very good? I don't think we need to change anything in here. The subscription box looks good and finally the foot are still looks good as well. Okay, we do have mobile viewers will, but we'll take a look at that a bit later. Let's fix some of the issues that we have in here starting off with the main one, which is going to be the menu. And in fact, there's another way how we can fix the entire header itself. Okay, so let's do this. All right, I'm gonna go back, Teoh decks top of you again. And let's just go ahead and view the page. Oliver. Again. What I want to do is to edit the head up in a responsive mode. So let's come in here and it with elemental. Let's click on Header and I'll go ahead and ah, calm down here. We have responsive mode. Let's switch to tablets. Okay, Now we can fix this for for the tablet off view. What I want to do in this situation right now would be to simply us have the logo stand on its own and full with and their letters, social media icons and the menu fall to the second and third lines. So we're gonna do here. Is this a way where you have the column holding the logo? I'm gonna click in there and you call him with In this case right now, I'm going to say 100. So now it takes over the entire with off its own container. And then for the second column, of course, we'll do the same. Will give it 100 as well and There you go. All right. We could also choose to centralize the social media I can, so let's allowing them to the center. And that's pretty much it. You may also notice, though, that the many items themselves are still aligned to the right and not to the center. Now, fixing this is gonna be a little bit challenging and let me show what I'm talking about. If we go to the back end, let's go over Teoh Mega Men. You remember we used to make a menu plugging for this, So I'm going to go over to the Was it now? I'm sorry. The many themes. Let's go to many things. So where was it? But I think it was a menu bar, Okay. So in your right neck and said, We said the many items to ah lie in light. Unfortunately, if we switch this to center while it looked good on the table, it it's not gonna look as good on the deck Stop. Remember, we set the menu items to align to divide on Dexter because we wanted them to align with the social media icons. So the easiest fix for this will beat you. Actually convert the menu to what we call the hamburger menu. How do we do this ever coming here? Note that the break point for Tablet it sets you 768 pixels. What this means is launched. The screen size gets to 768 automatically elements mobile switch from a text of you to a tablet view. Now what we're gonna do is we're gonna set the break point for our maximum menu to be 768 other ones. The screen size, which is 768 The menu will switch to a hamburger menu. And how do we do this? Let's go over to a maximum, got menu plug in and are over here on the mobile menu. You will see the responsive break point. All right, changed 600 default now to 768 So now we're saying was the screen size, which is 768 Switch to the mobile menu. So let's go ahead. Save changes. And now let's see how this would look like Linda's quickly updates what we've done so far. And, ah, let's refresh this page and let's see how this is gonna look like Okay, so that's of use to look in good. Let's come down. Hit a responsive switch to table it. And there you go. So now you can see that the menu has now switched from the Regula to the hamburger menu. It's a line to the white. Quite OK. We'll cook on the menu, and now we have the nice drop down. So not bad. It's not the great test way of displaying your hamburger menu, but I think this is very, very effective, and it's also are on it. Okay, well, that's it for the head up. Let's go back to the front and and let's take a look at the other issues that we had. Ah, let's edit with elemental part. I doubt Adam. Okay, let's come in here. Switch to responsive mold tablet. All right, just come down here. So the carousel, Whenever you have sliders of parasols, you typically want to hide them. Ah, for mobile devices because they tend not to do as well. So to hide this carol soul, but you want to do is simply go to the section holding the council. Element can click in there, actually, for table it. I think it's fine. It is for the mobile phones mobile devices. I think that's where he might actually have an issue with this. So let's ignore. Let's ignore the council for novel Handle the council once we reach the the mobile of you. This one right here, Mobile. Okay, but still in CIA. But I think it's fine now for letters, block posts. We have this issue and we have all this empty space because now we've got two posts on one column and then just one post. And the second column. What we can do here is fairly simple. Okay, we can either decide to switch from two columns to three columns instead. So now you have all the columns, all the posts in one single column all. We could do the opposite switch from three and go toe one instead. So now you know, actually have are eligible. Possible pint of full with off the tablet device. So this will depend on you are Let me try this one. And see, I think I prefer this particular one where you have all the three blood posted. One single column. I think I like this. I'll stick with this one. So that's only to fix that for this one right here. What you might want to do would be to simply switch, but I change the withs off the individual columns. So again we'll come in here right now the column containing ah, my picture and the text. I'm gonna change the content with and switch to 100. Let's go with 100 zero. Okay? And then, of course, I'll do the exact same thing for the second column containing my INSTAGRAM 100. So now you're gonna have about Alexandra popping up first and then the incident sectional popping underneath. So that's how you fix this kind of a particular issue. And then, of course, the travel guides are looking fine. And ah, that's pretty much it. The foot tell looks good as well. I don't think we need to change anything in here. And ah, well, there you go. We've successfully checked out the mobile. I'm sorry, detective you for our home page. Let me updates. And let's take a look at the about page that have created just to see how that would look like, Let's view our page, go back to the front and go to about Let's edit elemental. Okay. Ah, but, um bum. All right, let's switch from responsive to tablet. Okay, so video is still there. Bad. All right. Hello. I'm Alex. Blah, blah, blah. Nice to meet you so again. But you're doing this kind of scenario would be to simply change the column with to make this 1 100 And then, of course, do the exact same here as well, Make it 100. So now this looks much, much, much better. Keeps going down for the testimonials again. You could just make this could make them 50 make the 2nd 1 50 as well. And then just repeat the exact same thing makes the 1 50 then the final one make their own 50 as well. And that's pretty much it. So really. Switch and things for tablets or the mobile views is pretty easy. You can either decide to high setting elements all you can make elements are gold full with instead of just simply change the wits film 100% of every few 2% or 25% to 50%. That's basically how you'll display your elements and content full will view. So that's it for Pat one. Germany, in part to Bill, will not take a look at the actual our mobile view for home page and the about US page. 23. Responsive Design Part 2: welcome to Part two Off are Responsive Syriza. In Part one. We dealt with how our country would look like on the tablet view. But now it's time to take a look at how it to look like own the mobile view. And it's full screen sizes, furniture and 60 pixels or less. Let's switch to Mobile. Let's see what we have And ah OK, so the man had us Looks pretty good. Other school down here. Bag on image is okay, but we could play around with how this will be displayed. So let's come in here. Let's edit the main section for the Big One image. Let's go to style. So in he can see the under image. You have this icon, same mobile. This tells you that will ever change you make to this particular function. It would Onley effect the mobile view. It's not gonna affect Hebert. Ultimate effects are text up. If you make any chance to call, the Pensacola has no symbol that next to it. So whatever change you make the call here would affect all views, whether it's text up a tablet or mobile, right, so option one for the background image we could choose a different background image specifically for mobile view. Option two would be to change the position. So right now it's center center. We can go with, let's say ah top left. So now you can see the focus of the image has shit shifted to top left. You could go with the bottom, right? Is an example Say cancer. Right now the focus has shifted again. So this will depend on the pagan images. Actually using this might work for you. Another option would be to go, but the custom positioning where you switch the costume And now you can very specific on where exactly you want the focus of the image to be so you could say to fight five and then why would ah affect the, uh, physical axis? So you can just play on this options? But again, it all depends on the actual image that you're using as your background. You could also try switching from cover to auto as an example and just see how it would look like you could try content as well. It all depends on the bag. One image to using but playing with his values and find the best fit. I'm going to stick with cover. I'm so I'll stick with the auto in this case. Right? And then I'll switch the exposition a bit more in here. Okay, That's okay. Let's go down here now for your castle. You might want to hide this for mobile. The attended to do quite as well. So to hide this, you click on the main section button holding the cow. So let's come to advanced. And then on advanced, you will see responsive you click and responsive. And then in he can now see visibility so we can choose to now hide things on mobile. And there you go. It's now being hidden. Do not make the mistake of hiding on Lee the Cara soul. Remember that. We also have the featured in heading Element contained inside off the section of the also contains the carol sore. So you want to hide the entire section and not just a castle element itself. Let's go down. Blood poster looking quite good. Let's keep scrolling down. Okay, this looks fine. Shovel guys have now switched to one column. That's fine. Like, this looks pretty good and Ah, there you go. Pretty awesome. All right, let's go ahead now and updates this and I'll go ahead and ah, view our page so we can take a look at the about us page it was good to about. And now let's edit with elemental behind it out of that. Uh, okay, let's come down here. Responsive. Switch to Mobile. All right, So for the video, you might want to hide the video as well on mobile detainer to do quite as well. So again, I'll go to edit section, go to Advanced, Responsive and ever Gonna hide this on mobile so it doesn't show. All right, so you go to welcome fellow traveler, Alex. Okay, let's cool down here Looking good. Testimonials have switched to one column, which, however, you might want to make a change to the title that say's what people are saying about this website. It's a bit too close, so let's click on Edit the content itself. Let's go to style. Others go to topography, and now, in him again, you can see that whatever changing make for the line height, it will affect on the mobile so we can make this a little bit more at a bit more space a ago. One point we should be fine. That's cool down here. And Ah, there you go. OK, so not bad at all for the footer. Let's make one change the food time. Maybe we can make these go full with Maybe. Let's try that. Lets view a page ended with elemental Let's go to food. But Adam, Adam and ah, let's go ahead now switch from responsive to mobile. Let's come down here so we could make this goal full with so beautiful with actually. Let's see what else we could maybe change my reaches the alignment. Ah, topography Text the line center. Okay, so we could do this. We could make the columns a line to the center. I think this looks better. There you go. So I just did the exact same thing for Ah, the many columns very, very quickly and then sent Ah, about me style topography sent up and then last but not least, follow me to the promised land. Gay social Media Aikens I learned to the center and Ah, there you go. So that's one change we could also make to the footer. Make them go full with our line items to the center as well, going to go ahead now and updates and ah, that is pretty much it for the responsive design. So it really comes down to you either making columns go full with aligning the items to the center on. Maybe just even, just ah hiding, setting elements like videos and cows souls on your mobile view. So that's it. Thank you so much for watching and I will see the next class. 24. Recap: already. So just about come to the end off this section were built out, a blogger using the free version of Elemental. But before I go, I just wanted to mention a few things give you a few tips here and there. Now, at this point, you can pretty much build any kind of pigeon want with elemental, especially if you use in the nomadic. Matt's cite as an example. So let's say we went to Destinations Page just as an example that you can pretty much see the structural and you can build out these kinds of pages using what Elemental has to offer . You would use the H, the head and element for travel guides. For example, you would use the text element for the text right here. Now, in this connection, everywhere you have, let's say this unique kind of functionality where you have a map that's clickable. You typically would use a plug in for something like this, and then simply output. That poor gin developed the contents of the plug in using a short code with elemental. That's how you'd go about doing something like this. Now I know we do have a contact page that we created, which we do not build, but it's pretty easy. You would normally have a form on the contact page are you can use plug ins like contacts from seven and gravity forms, ninja forms, civil created form and then display. That form is in a short code. That's how it would work with elemental. Now we do have elemental add ons are which would encourage you to check out many of them you would have to pay for. But many of them also do have free versions, just like with elemental itself. So there's a ton of them. Okay. Ultimate Adams Power Pack. Elemental Extras Element Pack As an example, I went ahead to install if one of them, let me show you the one that I installed is the album coming here. Plug ins installed plug ins. So it's called the elemental add ons. Live mesh Adams for elements. You can see it. It's right here. So what will now happen as a result, is if I wanted to edit, Let's it is pages an example with elemental, you would know. See a special section specifically for the elements that the Adam has provided you so anyway, you can see now have access to the life mesh Adams, right? You can see them team members, testimonials or the water meters heading and so on. So this is typically how it will walk. You install an add on, and then you would come to edit page, and then you will see the section off elements generated by that particular Adam wants. An old recommend, though, is that each one of this Adams's If example, the elemental Adams ever went to settings. I want you to understand that you can choose to also deactivate any of the elements you would not be working with. There's an example right now with the elemental Adams. I can come in here and deactivate odometers. I can deactivate team. I can't activate testimonials and then simply save my settings. And then if I go back to edit the page on C, those are elements animal. All hell encourage you to do this. As this world are, boost your effectiveness and productivity. Essentially, I do also have I don't forget on YouTube. I do have the wall comin elemental to Tokyo. See if we feel in the build out your shopping page. Things like that. Oh, you wanna learn more about elemental withdrew commers? Be sure to check out this particular tutorial. I do have one for Cocoa Block. It is 1/3 party. Add on for elemental on in this particular video, I discussed how to use many off. The elements are provided by this particular now Adam Saving interested? Be sure to check that one out as well. And one thing I should mention before I go speaking about Welcome us. Now, Matt, ciders have this shopping link. The shop in botany can click on when you cook in there to take you straight to the shopping page. Essentially, I would encourage you to try and do something like this especially, of course, if you're selling things on your block so you want to quit like a shopping page so that when he clicking there, it will take them straight to the patriotic and view all your products. I would also encourage you to have some like a card button. It doesn't have to be this particular kind of shopping cart. I can not necessarily, but at the very least, you should have texts that say is caught so that when they say, for example, that come in here and they add, I pull up to the up to the basket again. Click on that button until thick them streets to the art check out page. Do you want to do something like that as well? So that's pretty much it. At this point, Um, I'm not sure there's anything else I need to add, but that's I thank you so much. Fortunate, Truly hope you've enjoyed this particular section and now let's move on. 25. Intro to Elementor Pro: All right, welcome to the official introduction to elements or pro, and I'm real excited to show you what you can do with this very powerful vision off elemental. Now I have really going ahead to install. I've activated the plug in, and now you can see that in here where we can add elements we now have access to several new categories. We do have the pro section on the basically will have access to a lot more elements for displaying different kinds off contents. We've got the form animated headline price list, price, table, culture, action and so much more. And then we also have access to this site. Elements such as the site low gold, Enough menu. We're gonna be using this to build out a brand new Hedda and, of course, the single elements with which we're going to use to build out a template for our posts. And then we also have access to the Wu commas section. However, note that these has been displayed because we do have the woke almost plugging installed. So if we don't have woken was installed on your science, you're not likely to see this particular section. Okay, so I hope you're as excited as I am to get started with elemental co German Vernet video, Bearable now create a brand new footer using elemental pro. 26. Recreating the Footer: already welcome to walking with elements of pro. And the first thing I want us to do will be to recreate the footer that we currently have. Now, we're gonna handle the header in the next video. But for now, let's go ahead and try to recreate this particular footage that we have making use off elemental prone. And remember that we do have this plug in active the elemental ahead on foot. A plug in It is this plugging that we used to create the head up and foot up. But if I was to go to plug ins now and I deactivated this particular plug in because we don't need it anymore Well, guess what? It wants to refresh my page. Now you would notice instantly that the fota is no longer exists and ah, header is now broken. So how all we going to delete this plug in? Because we no longer needed bet At the same time we were able to retain, the content was created with the plug in. Let's do this. I'm going to go back and I'm going to activate the plug in again. You're right. And then I'm gonna go to appearance Let's go to header for turning Builder. Let's go to the footer and I'm going to edit with elemental, very, very important. And then the tree care is to simply go ahead and save as a templates. I'm gonna click on save ist templates. Let's Antioch template name and is going to be foot. Ah, let's say foot. Uh, temp. Temporary, I guess. Let's go ahead now and save that. Okay? And awesome. All right, I'm gonna go ahead now. I'm going to close this. Now, let's go ahead and create a brand new foot up using elemental poll. So let's go over to you the back end. All right? So elemental, you have templates. And when I click on add new template, I'm going to select Fota as a template. And of course, I'm gonna call these the our food Toppo. Let's create a template. No, I know. Check this out. Okay, Let's wait for the pitch to load. Another thing about Elemental Po is that it has pre built templates. They can choose from animal of these, if you're interested. Locators are a wide variety of them. Many of them, in fact, but for the purposes of this video. I'm going to go over to my templates when I click on my templates and then taken seafood attempt. Let me go ahead. Simply insert that and then click. Yes, and here to import documents, settings as well. And the au go. Let's just wait for a second for the page to load. And Ah, OK, so we have the food right now. We do have our subscription formas well, and just like that, I'm gonna go ahead now and hit. Publish. Add the condition to displayed on the entire site. Saving close. And there you go. It is now live. So check this out. I'm gonna go back to the dashboard again. Let's go back to the back end and now I'm going to go over to plug ins. Let's go ahead now and the activates elemental head off return blocks. And in fact, I'm gonna go ahead and delete it. Yes. I'm gonna go ahead and do it. The plug in it is gone. Let's go over now to the front end. Let's rich first a page fresh. Come on, let's go. OK, so the header still blocking, But that's OK. We'll handle that next school down you can see that we still have the footer from the plug in. So that's how you can save your templates and an import them into elemental pro. And they can simply go ahead and elite whatever plugging you used to create a template in the first place. So that's it for recreating off with Germany over next video available now eight ah Hida using a mentor pro. 27. Recreating the Header: welcome back in the previous video were successfully recreated the footer using elemental pro. But now it is time to recreate the head out as well. So that's what I head out current looks like and we're trying to get it to look like this, like So how do we do this? Well, first things first. I'm gonna go to my theme options, so I'm gonna come down, hit your appearance. I'm gonna go to Astra Options. All right. What we're gonna do is we're going to upload our logo to the theme itself. Very, very important. And I'll tell you why. Very, very soon. Let's come here. I'm going to go over to I believe is going to be in head up. So where we have cited instant gonna click on select logo and I'm gonna go ahead now and choose. Ah, logo select. I know the logo is white, it's transparent. So I'm gonna make sure everything ISS elected slimming truck that up Click on cope image. O K. So I'm gonna go ahead now and hit publish. So if published our logo or Kip? Now let's go back. I'm gonna close this. Let's go back in here. go back to the back end. I'm sorry. I'm trying to edit Ah, sample site Wolf. That was close. Forgive me for trying to edit the loan Umit side and not the elemental test commedia set. Okay, let's go back to elemental templates. I'm gonna click on add New and I'm gonna choose the head up. And of course, we're going to call these d head out parole because of professionals, Right, Let's click on create templates. And just like with the foot, you're gonna have pre built templates for your head. As there's a lot of them writing here, you just simply choose one inserts and make whatever modifications you need and save. But we're gonna go ahead and create are very owns. I'm gonna close this. Alrighty. So how are we going to do this? Will remember. But then they used the intersection elements. Let's track that. Except that in them, let's go ahead and choose the background, which is going to be black. Of course. So that's black content is going to be full with, So now it's drug elements. So for the logo, we're gonna use this element cold site logo. I'm gonna drop it in here. Now. The reason why we had to upload our local to the theme first is because elemental. We used this elements that the local elements will pull the image directly from the theme. That's why you need to upload the ligature theme first and then are coming here and use elemental to display its Let's change with off this column to 20% well cape And then, of course, for our navigational many. We do have the element right here. So let's drag on the menu job that in them main menu has been chosen. Let's aligned to the lights. And of course, you can see right now that we can also go to style how we can change the topography. Let's go with, ah, family default size is going to be 18 pixels. All right, the weight will be 300. Let's change the color. Very, very important text call is going to be ah wides. And I believe we can do a text transform. Yes, let's do it. Text transformers well transformed upper case and there you go. All right, but almost there. One more thing, of course, would be to add our social media. Aiken's so Let's do that the old fashioned way. We're gonna come over here to Ah, under General Ah, social media Aikens, where are they? Social likens. Okay, drop that in here. Let's add, uh, we're gonna add Pinterest. I'm sorry. Not pincers, but rather instagram at an instagram and set that one. I lined to the Vides change the colors from official to custom premise color is going to be black and Ah, there you go. Let's go ahead now and simply hit. Publish at the condition to display entire site saving close and the Voila Let's go ahead now and ah, phew the page I'm going to go to the back And first let's go back two different age and ah , there you go. We have successfully are we created the head of using elements of probe And of course, there's a few more things you can change in here you can handle or what happens when you hover over each menu item you have access to more. Our future is essentially so if you want to go back in here and let's say we edited the head of pro just to show you So if it came in here Right now, I can simply go over to style and you've got the main menu, right? And then you have this option of choosing what happens when you're on the Khobar categories . They can change the text called the point of color. You can also change the colorful, active our menu items as also against you have access to a lot more options When using the now menu element, you could also choose to change the placement of the logo make it may be a bit more central . So you come over here to the column, for example, change vertical alliance, you middle. So that will push the local down just a bit more. And ah, well, that's it. I'm just gonna go ahead updates and let's just view the head out again. Make sure everything is as it should be. And Ah, there you go. So that's a burn. You header. I like it. I hope you like it too. So that's it. Think of watch in Germany. Thanks very well. Will continue working with the elemental Prue 28. Creating the Blog Post Template: Now that we've generated our new blawg post Creed use an element of pro. It is time to now create a templates which we can use to display all our single posts currently. Right now, if anyone clicks on any of our posts, this is what they would see. This is being handled right now by Astra. We're gonna try and create something like this using the element of pro. Now nomadic Matt will use his own site as a template. So you can see in here that his template for the posts is divided into two columns. The first column will handles the content off the post itself. They can see the title, the image, the contents. All right. He does have some meta data in here as well. And then to the variety has got like a side by essentially having his subscription form categories is books and so on. Let's create something similar to this. I'm going to go over to the back end and we're going to go over to templates. Click on add New And of course, we're gonna choose single, and we'll choose the post type to be post will name this single pro create the template. And just like with the header and footer, you'll have access to pre built templates. Which hole look really good. But we're going to get our hands dirty. I'm gonna close this. We're gonna build up our own templates or Kate. So first things first, we're going to use the intersection, and we'll make this the first column. Let's make this 75%. And with, uh, okay, 75 So first things first, he does have the title of the post. So to do this, we're gonna make use off the single element. So we have post title in here, so I'm gonna drug post title and drop that in there now, by default, Elemental would use your latest post are to pull in the content. Oh, to just just choose it as a template. Essentially. So right now, my liver's post is the complete guide to visiting South Africa. If I wanted to change the street different post, choose it as the template. I can come over here, but you have settings clicking preview sentence, and then in here I can type in the name of the post someone to use the Swiss Alps post the beauty of the Swiss Alps. I'm gonna click on that point preview. So now elemental, be using all the content from the Swiss Alps post to populate these particular template. Right Next, it will be the featured image which I'll drop in there. And sure, the image size is always said to fool. Okay, so what does he now have? The post is set suit, capital letters, the title. So let's do the exact same thing. Let's come in here. We'll go to style. Ah, Topography transform to upper case. OK, that's fine. Now on. And if the featured image, he does have his meta data posted on blah, blah, blah. OK, does that exact same thing I'm gonna make use of the post in for which is down here. Let's jump that in there so we don't need the time. We don't need comments. We don't need offer. However, I would like to add to the category off the post or go to add item type. We're gonna go with terms and then choose our categories as the term Let's go ahead to style. And before we do that, we need to remove the icons I don't like this Aikens next to the meta data. So for dates where you have the icon will just choose none. And we'll do the exact same thing for the category as well. None. Okay, awesome. I'm gonna go over to style. Let's add a divider will make the divider black, but you can see right there I will also make the text to be black as well. And I think that's fine Light. We've got the Met, the dates, the category, if that's okay. So next he does have the actual content of the post itself. So again, we're gonna go over to a single elements and now jack post content. And let's drop that in him. Make sure it's inside the first column and not outside the columns. So there you go. We got the contents. Let's go down here. Next is going to be the ah social media icons, right? Okay. Facebook's treats up interest email. So let's do this note, however, that these are outside the first column. Okay, these stretch to the end of the second column. So we're going to do the same thing. Let's go over to the pro elements and you will see in here the share buttons. So let's drag that and jump that outside outside the first call me consider it now that the blue and extends to the end of the second column as well. Let's drop that in there. We're gonna add Let's use Pinterest's case. We're gonna go with Pinterest Ah, Aikens and Texts shape We're going to go with round dead, you know, like let's see what else we can dio are. Let's go over to style How button size We're gonna make this quite big. Actually, it's also aligned to this center. All right, let's go over to style. All right, so I consigns. We're going to make this as big as we can, but for some reason, we're not seen the icann's show up. It's OK. We'll handle this in just a second. Let's go over to topography. Change the text, two up a case and ah, what else do we need to do in here? Okay, well, let it posts. Okay, so again, we'll come in. Here we go over two posts. Job that just underneath the Shiming Aikins. Ah, change the a mix Science to full. I will go with just three posts in here. That's also add Ah, head up on the basic head in so cold ists related posts, related posts and ah, it's central lossless, that exact same thing. That's but it's at the center and then for the post themselves. Let's ah, remove the meta data comments. Listen of comments. Ah, he doesn't have any except as well. So let's not show the excerpt. Uh, read more as well. It's hide that one, and we'll just change the color off the of the text in here. Let's go to the content title collar. We're gonna make this black and ah, that's it Will do the exact same thing for the meta as well. Click on color for two black. Okay, so that's it. Full related posts. What else does he have in here? Is good. The comments Finally. Okay, so we're gonna come in here, go to the single and then down here we have the ah, where is it? Post comments will drop that in there. Post comments. And then finally, I'm also gonna add the pagination. All right, First come down here and then we can add post navigation. Drop that in there. She have got previous you got next as well. I like those. I think those are fine and OK, so that's it for the post content side. Now for the right side, which has a sidebar. Are we gonna handle this by simply going over to the pro section? So under pro? Ah, you're going to see Ah. Where is it that isn't on the pro? How is it? Wasn't under general. Oh, I'm sorry. It's on the general. It's on the general. You will see the sidebar element of idea. So what does drag sidebar drop it into the column and then he can choose whatever said about you want to display this Because I'll just go ahead with the main side bar. So of course, these is controlled in the back end. So you can simply go to your back end widgets and then change whatever we that you'd like to display in here, One with an elected. It would be to add some extra space between the columns you consider it. Now it's a bit too close to themselves. So let's go over to the button handling the email sections. I'm gonna click in the intersection, you know, in here you've got the columns gap. You can go with the extended wide, but I'm just gonna go with wider. So there you go. And now we have a lot more space between the post content and site bar and ah! Oh, well, look at that. All of a sudden, the icons are now showing. Remember, we had an issue with the icons of the social media. Barton's not showing up now. They're showing all of a sudden Yeah, well, the mystery's off elemental. Okay, so that's it. I think we're pretty happy with what we currently have. I'm gonna go ahead now and hit, publish and, of course, and showed that dissipation on all posts. Let's go ahead now, save and close and you go, OK, so let's go ahead. Now see the dashboard or just go to the front and and let's try to view any one of our posts making friends while traveling. And there you go. So that is it. We now have, uh, template for the posts and off course, by the way, uses as an assignment try at in some space in between the social media icons and related posts, of course, also add some space in between are related posts and the actual post themselves. I'm gonna handle this off screen. Thank you so much for watching the video. I hope you found it entertaining and informative. I will see you in the very next one. 29. Creating a Contact Us Section: Alrighty. Let's go ahead and create a new section, which would be the contact also form section using elemental probe. And we're going to display this just underneath the travel guides sections. Let's do this right. Gonna go ahead and ah, ad. Oh, actually, before we even do any of this, that this reminds me we're gonna be making use off the form element, right? And in that form, we're going to add a recapture functionality just to prevent our bots from spaniels with different kinds of e mails. Wait. So to do this, we're gonna have to integrate capture with elemental. So if you come down here to lament or citizens and then on settings integrations, you will see the boxes right here. So we do have access to be capture and recapture Vision three. I'm gonna go with the capture, the first ones. I'm gonna click on the link right here that says, recapture. This is from Google. So you do need to be signed in. I am signed in, so I'm gonna click on admin console. All right, so in here, you'll have the gift button. I'm gonna click in there and now in here, I can add a domain. So in this case, right now, it's going to be ah, loan and Nomad. Don't come. Okay, so let's add that now. In here, I do have my recapture keys. So I'm gonna click on this. And now I can see both aside key and a secret key, So I'm going to copy the site key. First of all, coming here, paste that. I'm gonna do the same for the secret key as well. Coming here, paste that. And Okay, I'm gonna come all the way down here, save the changes on my site. Now go to Google, of course. And also save because I've added in your domain and all case, I'm just gonna go ahead and close Google. Let's close this as well. Now, over here, I'm just gonna refresh this page. So that element of kind of recognize the fact that we have added or whether we have integrated recapture with elemental, But let's come down here. Let's add in a section. So for the second column, let's do this. Well, quick, I'm gonna add an image off me holding what looks like a phone. That's his way there and said media image, science is said to fool. And for the left, we're going to make use of the form elements. It's right here form. Let's just that in there. So by default, we have name email message. I'm gonna add the capture now, but you'll be item full. What we have type. I'm gonna go ahead and choose the capture. So there you go. Right now, under capture is ready to go for the forms themselves. I don't like it when you have the label. And then you have the placeholder, Aziz. Well, so we'll just do this. We're gonna remove the labels for each individual filled. So let's go to name. First of all, let's click on name Out label. I'm going to simply remove that. Okay, let's do the same for email. I'm going to remove the label, and we'll do the same for messages Well removed. The label. Okay. Looking much better now. Well, of course, also had a head in. Let's quickly do this a heading in here just above both columns. So this would be contact contacts. Ah, me. Okay, let's gender sized Teoh believe we're using our 50 pixels If I'm not mistaken, Sighs goes all the way to 50. 50 pixels. Yep. Seems about light. Okay. All right. So what else can we do in here? You can see right now that the form itself is a bit short compared to the image. So what you can do is you can go to the message filled. So let's go to the message, Phil, which is item three. And now in here you have rows. You can increase this and they go to seven of those. Unless we make it eight. I think eight rules should be fine. Cape sets from Phil's. Now the submit button itself. We could change this to maybe medium maybe, you know, small, large, really All depends on you. But most important thing here is the actions after submit. What happens when someone comes in here? Feels the name email as a message, shows it another war board and then click send what's gonna happen by defaults. We have email, but you can also have all the options as well. Email to the red crab hook. So dependent on the option you choose in here, you will have another option down here. So right now it's set to email. So we now have email here. You quick on email and right now you can see what happens. The contents of this message will be sent to Alexa Taliban kill and calm under the default message, saying New message from the long nomad. This will be the message or fills from email from them and so on. So you can come in here right now and change all these if you wanted to, or if I came in here right now and changed email to, let's say, our redirect now on the redirect, I can simply add the u R L to redirect them to maybe like a thank you page full comments in or something like that. You could do that. We could also go with Let's say, for example, are mill chimp. So we have militant click on Mill Chimp. Now we can add the a p a key, and then we can choose the audience. Choose the least, essentially, baby want these contacts to be sent to. So again, it all depends on which option you choose on their the actions after submittal. I'm just going to go with the default email, okay? And then the emotions in the Al does leave that as it is, and then finally got the additional options. You can add custom messages. You turn this on and then you can add. Hey, you know, I got your message. Thank you for contacting contacting me. I'll get back to you later. Stuff like that. You know, you could do all that in here. Okay, Well, that's pretty much it. Before I go the legis update this and see what it looks like. Let's go to view that page, and that's wait my internet ish low. OK, so you go contact me, and, uh, it's looking okay, But remember now that we no longer need the border because what we can simply do is we can simply use the Baghlan Coehlo for the about Alexander section. We can use that for the Contact Army section as well. So that's what we don't need the border anymore to separate one section from the order. So let's do this on a go over here and let me just get the background color that was used for the about section Ah, background color. Okay, I'm just gonna go ahead and copy this. Let's go over to you. The contact Miss Section has got to style back on tape is classic the color going to pace that. Okay. Already looking much better. Ah, let's add some Padden to the section and fenced on. Link those together pad and let's go with let's say 25 pixels from the top and effect pickles from the bottom as well. And of course, we're gonna move the border from the alone. Nomads travel guides us Go to the section right there. Go to style border. And what was gonna go ahead and remove the border because we don't need that anymore. And Ah, there you goes. Go ahead now and updates and let us see what we have done. Refresh the page and there you go. Although, ha, wait, wait a second. I don't think is the same color that we used for the about Alexander section. It doesn't look like it, right? No, no, no, no, no, no. Okay, we gotta change this world quick. All right, let's go back in here. Hit it. Section style bag on type. Oh, we didn't The cold didn't save for some reason. Ah, OK, that some of this Let's pace that again. Now let's updates I don't know why that did not save the first dance. Refresh again. Come on. There you go. Okay, so now it's showing us the actual background background color. Okay, so that's it. That's how to create a contact me. A contact or section using elemental pro. Thank you for watching. I will see you in the next class. 30. Creating an Archive Template: All right, let me show you exactly how you can create a template for your archive pages in back of pages, I'm talking about your category pages, the archive pages, the search results page and even the block page itself. Now, remember that we already took a look at creating ourselves. Ah, blocked page. But that was specifically use in the Astra theme and making a few modifications. But if we wanted to create a template for the blood page with elemental ah, there always how we can do that now taking a look at my at Nomadic Matt's site This is this book page you can see. It's a very simple design. You've got the headline and then you've got your posts being pulled in and in pagination at the bottom, right? We can do something similar right now as it is of a click on Blawg. We're going to get basically this blank page with nothing in it. And that's because, as it is right now, we don't actually have a blocked page. If I come down here to settings and I go to ah reading, you can see in here that we have a study page has been set for the home page. Fine. But then the post page, we haven't said it. Right. So they come in here right now on that shoes. Blawg, save the changes. What's gonna happen now is that watercress would use the template from Astra's. If I click on Blawg right now. So you can see this is the template, basically that Astra famous providing us right. But we're going to create our own template non specifically for this picture. To do this off course, we're gonna jump into the back end, and we're gonna make use off templates. Let's go ahead now and add a new template. So what we're going to choose right now would be the archive, like, that's gonna be the template archive, and we can call this, um, Let's just call this the prole archive, I guess. Create templates. All right, let's with for a few seconds three page to load. And again, just like with the head of Fatah and so on, you will have yourself access to different people. Templates. I'm gonna close this. And now in here, you can see we now have all Clive the section for archive. So keep in mind that whenever you build in specific kinds of templates, you might have access to a very special elements. Like, for example, if you're building a template for a single post, you would not have access to the archives, for example, light. But we're building a knock a template. So we now have access to the archive elements. All right, let's do this. First of all, we have the headline latest posts, so we'll just go ahead now and add that head in, and then we'll just call this, um, latest latest blawg posts. And of course, we can make this on H one, put it at the center, and then next, right now would be the archive posts, and that's basically all we need to do. But just gonna change the image size, Make sure it's a full Columbus is said to three. And, um, yeah, I mean, there's nothing really left was to do besides maybe just making a few changes. So if example maybe, like the meta data, you could come in here and add, um, category, maybe hold on a second category. Ah, cats. I think it would be having We've got comments. We got time of good author. That's interesting. I don't know why we don't have access to the category, but it's OK. Anyways, we good access to data. I'm sorry. To date, you can add access to the comments as well. You can change the excerpt, the length of it and so on. And ah, yeah, Pagination began. You have access to that, and then under advanced, you can choose a specific kind of message. So let's say, for example, someone searched for a post that no longer exists. This would be the default message that they would seek. And, of course, change this if you wanted to. I'm just gonna go ahead now and add some very quick padding to the top was give this maybe 25 pixels of padding and Ah, that's pretty much it. There's nothing else to do. I mean, hey, it'll depends on your personal preferences. I guess I'm just gonna go ahead now and hit publish. So because we now have to add to the condition, I'm just gonna see all all kinds. All right. So bear in mind that you could choose specific archives, maybe to set results page. Maybe the Post archive. This would only show on the block paid itself and you could just four categories. And so Obama's gonna go ahead and choose all our kinds, right? I was going seven close, and that's pretty much it's ever come back down here to Blawg and I refresh this page. You cannot see that elemental will now take over from the Astra theme. So that's how I can create yourself on. Like, I simply think if watching, I will see you in the next class. 31. Introduction to Pro Elements: Okay, so I wanted to take some time out to walk you through a few off the pro elements, which you might find useful. We're not going to be using them to build any more content, but I realize that your own website might have different needs. So I just want to walk you through a few of my favorite elements from the pro version off Elemental. So first off, we have the gallery elements. So basically, with this element are you can create multiple galleries or display images from just one single gala. Be in here where you have type you can go with multiple, which means they're gonna have multiple galleries. So by default, we do have the first gallery added for a second click in here we have any gallery. Ah, let's change this to let's say people, for example. So people gallery are click on the post button. And now let's add our images with people. So I'm going to go this one. Go with me right here. Go right here. Creating new gallery in set the images into the gallery. Okay, Onda, always make sure that your image sizes are set to full, so that they're not blood. Okay, we can add a second gallery now by clicking on add item down here. So the new gallery right now we can call this. So let's say the nature Nature Gallery, okay? And then you just use your images that will go with this one right here. This one, this one. Let's create that inset into the gallery. And of course, again make sure the image cited said to fool and ah, there you go. So now you consider you've got to galleries. You can display images from all galleries at once. All if they clicked on that city, people gala be. You know, Onley images When people gather, always show you click on nature only images within the trick gullible show and so on. So gallery element is favor useful. You do have the log in element with which you could use to create yourself looking pages with elements if you wanted to um you do have slides as well. You do have your animated headline so you can add a different kinds of animation If you wanted to. What else do we have in here? You got your price stable for your wu commerce elements as well price lists and so on. You have the flip box, which is actually pretty interesting. I used it on my own personal website in he can see the fix off the flip books. Basically, you would have maybe an image. And then when the user holders of that image, it turns around, it flips. And then you could have, like a text. For example, saying here, Right now you can see are the fixing here. So there's basically the flip books are in action, so you could use this on your own site as well. You've got call to action. The testimonial, caress, soul reviews, Table of contents. You can add a countdown, a swell, so this would be great. For example, if you are counting down to maybe a major sale on your Web site, maybe it's, you know it's Valentine's. They coming up. It's the New year. You can have, like, a countdown and say something like, You know, ah, major sale or new content coming stuff like that and you can get creative with your countdown, and that's basically it's you know, you got your Facebook page. Facebook comments. Physic in bed. If you wanted to. So we're not gonna be walking with any of these because there is no need for me to use them on my blood. But again, I just want to introduce you to the elements. Don't be afraid to get your hands dirty. Play with them. You conclude like a blank page, for example, and just put this element send and judicial. You'll find at least one or two of them. That's you're going to make good use off on your website. So that's I think, is about fortune. I will see you in the next class. 32. Elementor Popups: It would be a massive crime for me to not talk about elemental pop ups because this is one of the most powerful features that elemental pull offers you. I do have an extensive tutorial on how to create pop ups on YouTube. It's right here. That's me looking worried for something for some reason. But it's a 90 minute tutorial, and I don't want to be too repetitive, especially considering that I already do have, like a fool to trailer on how to walk with our elemental pop up. So if you're interested in creating pop ups and I'll encode you to have one on the website , they are a great way to increase your subscription. Wait. You can drive people to products and services and so on. Our hopes are really, really powerful, and with elemental pro, you do have access to create them. So if you're interested in working with pop ups, be sure to check out my tutorial on YouTube. Just go to YouTube. Com and limited pop ups had a cripple with elemental, and you'll see light there. So that's it. Foot problems. German Avonex video. Where will continue working with the elemental pro 33. Introduction to Pro Animation: Now we've talked about working with animation with the free version of Elemental. But with the pro vision of elemental, you have access to even more powerful animations. Let me show you a few of them. Let's choose the letters, book, post section as examples I'm gonna click on edit section and then from him, gonna go over to advanced and then under advanced all truths, motion effects. And now in here you're gonna have access to this thing called the scroll and effects every Turn it on. Basically, you can apply animation based on whether or not a user is calling downwards or upwards. So, as an example, let's choose the vertical school. All right, in here, you've got these direction up. So basically, even schooling, that's it from the top, right? Such a school down. You consider that this block post section is also schooling up as we ask. Falling down the opposite would be here. But if I choose direction, if I go down now, it's going to be the opposite. Every scrolling downwards, the blood possibly scoring upwards and every school op words on the page. The block post was also are screwing up with excuse me. There's a mistake if rascal and upwards there's blood possible school opposite with us. But it was scrolling down on the page against the blood courses also schooling down with us as well. So that's that effect. I'm going to show you the horizontal school in just a second ballistic. Look at transparency. Okay, now, in here, you could choose the direction of the transparency wanted to fade in, or maybe fate out or fade out and then in or fit in and then out to make them simple is go with fade in a light. Saracen. We want the block post to feed in as we're scrolling down. Right, So in here, you can see that as was cooling down. It's fading in, its fading in its fading in. And then if we keep on scrolling down at this point now, you can see that it has completely faded in. The animation has ended. Now you can control how quickly the animation will complete, either by walking with the level or changing the view ports. The view ports are a bit more complicated because now you are telling elemental to completely animation based on how far we are from the top off the page, intelligent Teoh to half away from the bottom off the pages a bit more complicated when I like to do, though, is to simply walk with the level or a level is a lot easier here. If the level is very short, let's of 1.9. Basically, that's a bit extreme. It's a 3.2 white. If I scroll down, you consider it's fading in its fading in. But then it quickly fades in. So their mission has ended very, very quickly. But if I took this Alexey 8.7, so if I'm schooling down, you can see that the animation takes a bit longer to complete, because I will have to school down to this point before the entire section has basically faded in. So you control how quickly these admission lawns itself, based on the level our appointment with a level where than working with the View port. Okay, that's that. I'm gonna turn this off. Let's come down here and let me just show you how to walk with the remaining, um, admission effects. I have added this image of a plane. Okay? And I'm gonna show you some really cool things in here. Now note that when you are applying animation to maybe a section of column, you will only have access to the scroll in effect a Zaken see. Like here, however, if I chose to add animations to the image directly. So if I click on Edit Image now and I went to advanced, I came over here to the emotion effects in here you will have access to mouse effects. We'll talk about that very, very sympathetic about two schooling effects. And let's talk about the hallways until school, right? If I turn is on, basically we can control the movement off our plane, either from the left or from the white. So basically, by default, it saves to the left. Okay, so but if it's cooling down over, it's going on. You can see the plane moving to the right policy the opposite. We're gonna go with to fight instead. So if I was going down, if I was going down against that right now that the plane is now moving from left to Vytas , he can see right, let's increase the speed. So what's going down? And now you can see the plane flying at the speed of 7.5. So that's a very cool effect that you can apply. You can also do something you can combine. The horizontal school would, let's say the scaling effect as well so we can say we're going to skill up as we're scrolling down. So let's see against the right now that the plane is going bigger, as was cooling down and you go, let's include this. But a bit more came. So it's cooling down against the plane is getting bigger and bigger and bigger and bigger as we school down so you can combine this effects and get really creative and create some really interesting animations. You also have the will Tate effects where you know you could create is gonna really, really, really, really interested in effect does increase the speed. Is this going down? You can see this plane like Oh, that's a crazy pilot right there. So you know you can create, like, really, really, really cool effects. Maybe you have maybe like a circle or something like that, Like the possibilities are endless, you know, and again, you can combine transparency with maybe horizontal scroll or it will take effect as well. You could get really, really created by combining all these effects. So I spent some time playing around with all these options. Let me show you the mouse effects. Not really too much in here. But you do have this thing called the mouse track with basically, when you hover the mouse on the particular element, it will affect the way that elements are moves so good direction have got direct as well. So if I over to the left, if I'm pushing my mouth to the left, you can see the image moving backwards as well. But if I move, my mom was over to do it against the image. Also move into the light as well. We can increase the speed you can see. You can see right now you can see how this works. Very, very ver interesting. Does the mouse our track? You do have a three D tilt as well. The books be much in the same way. So again, this will work in relation to the mouse. You can see how that works. So again, this could be very useful for very specific kinds. Off contents, old. I just want you to be a way off what you can do with the pro vision off elemental when it comes to animation. So get creative. And I hope you find this affects pretty useful for add in some vibrancy and some life into your website. Think of watching. I will see you in the next class. 34. Final Thoughts: all right, so just about come to the end off mega tutorial on Elemental. But before I go, I would information if you he are important points. And the first year would be the issue off themes right now. So far, we've been using the Astra theme, but the only reason why we've been using Astros because we used the free version off elemental earlier. Now that we're using the paid vision of elemental, you don't need Astra Animal. And I would highly recommend you go with the hello elemental theme from Element of Themselves. In fact, if you go to elementos official blawg, they do have an extensive tutorial on the theme and why you may want to use it now. The reason why all the commend the Hello themes because it's extremely lightweight, which means on its own, it offers very little functionality. But what that means is that it's gonna be very, very fast. So basically, the theme just supports Elemental pro. Basically, that's what it does. But since we're using the free version of Elemental that we could know used to build templates for blocked page, a single postings like that we had to use Astra Elia. So I'm just letting you know that if you're going to use elemental pro to build templates for your single posts for your blog's for your all kind of things like that, then you really don't need Astra anymore. Just switch over to the hello thim. Don't forget, though, that if you're going to go ahead and switch the theme in fact numbers quickly do this. Let me just quickly show you what's gonna happen. So now that the hello theme is active, if I go back to my a website, you would notice that the logo is missing, okay? And that's because remember them when we build a head out. We used the site local elements that draws the logo from the theme. So what you want to do is you want to go to customize so basically a customizing the hello theme and in here, where you have cited density, just come over here and then add the logo right here. That's basically what you want to do. So I'm just quickly do this. Choose the logo. Select. Make sure everything is cropped, cropped the image and ah, that you good. You look now I'm gonna go ahead now and hit. Publish. Ah, OK. So let me close this our case and that he can see the logo is showing. So just keep in mind about this particular change. This happens whenever you switch themes. Okay, so that's it for the hello theme. Ah, one last intermission would be the third party elemental Adams area. Talked about this in the first section where we talked about the revision of elemental. But even if using the paid vision of elemental, there might still be one or two kinds of elements that elemental put miners offer You don't be afraid to explore our or the third party add on. So you've got plenty of them over here and like I said earlier, So if they even have free version so you might be able to get the necessary elements that you need from sorts. Adams. So that's basically eat walking with elemental pro. It definitely offers a lot more functionality than the fruit vision of elemental up practice. Our command, you check out the other elements which we did not walk with, there was there's a ton of them available, so I withheld, recommend you check them out, play with them. Play with the Stellan Options with the advanced options. Things like that. You know, you've got plenty of off elements to work with here. So that's it. Thank you so much. And I will see you in the next video. 35. Elementor 2020 Course Conclusion: Well, there you have it. We've come to the end off this elemental masterclass on skill share and from the bottom of my heart. Thank you for making it this far. And I hope you found the course very, very useful. I don't forget to peruse my other courses here on sculpture. I do have a lot of them, other WordPress courses and even courses on cybersecurity as well. Be sure to follow me on Facebook. My page is the Web monkey online. And since your restaurant here on school should be sure to join my Facebook group called the Web Monks, you'll find the links in the project section. If you found this elemental masterclass, yes, will please do constant living review reviews really do help me, and I appreciate it a lot. My name is Alex. Once again, it's been a pleasure to tell you how to use elemental, and I hope to see you in another one of my courses, chairs and all the best