Site Origin Page Builder Masterclass - Build a One Page Website with SiteOrigin | Alexander Oni | Skillshare

Site Origin Page Builder Masterclass - Build a One Page Website with SiteOrigin

Alexander Oni, Web Developer & Cyber Security Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (1h 49m)
    • 1. SiteOrigin Page Builder Promo Video

      1:51
    • 2. First things First

      4:20
    • 3. SiteOrigin Page Builder Plugin Preview

      4:28
    • 4. SiteOrigin Widgets Bundle

      2:35
    • 5. SiteOrigin North Theme

      2:30
    • 6. SiteOrigin North Theme Preview

      1:39
    • 7. Setting Up the Homepage

      2:28
    • 8. Adding the Header and Logo

      3:47
    • 9. Adding our Video Part 1

      3:19
    • 10. Adding our Video Part 2

      5:58
    • 11. Adding our Headline

      2:46
    • 12. Adding our Text Block

      5:21
    • 13. Adding the Image Gallery

      6:51
    • 14. Adding a row inside of a row

      3:57
    • 15. Adding the Second Headline

      3:08
    • 16. Adding the Speakers Block

      10:02
    • 17. Creating the Pricing Table

      8:06
    • 18. Adding the FAQs Section

      7:59
    • 19. Creating the 2 Column Layout

      2:41
    • 20. Adding Google Maps

      3:45
    • 21. Adding the Address Block

      3:21
    • 22. Adding Social Media

      5:02
    • 23. Introduction to Anchor Links

      1:36
    • 24. Creating the Navigational Menu

      4:11
    • 25. Clean Up

      3:04
    • 26. Pre Built Layouts

      2:50
    • 27. Conclusion

      1:19

About This Class

In this class you are going to learn how to use a very powerful free page builder known as SiteOrigin to build a full one page website. 

SiteOrigin is one of the most popular page builder plugins with more than 2.5 million downloads already.

The website we are going to build together will be for an event known as the 'Black Hat Convention'. The purpose of the website will be to market and promote the event to potential attendees. 

This website is going to be a full one page website complete with a video, image gallery, text blocks, pricing tables, FAQ section and much more.

You will master the art of using the SiteOrigin page builder plugin to work with columns, rows, widgets and addons. You will learn how to build all the previously mentioned content by utilizing the full power and features of the plugin. 

I will conclude this class by teaching you how to work with the pre-built layouts available with the plugin.

Transcripts

1. SiteOrigin Page Builder Promo Video: Well, Helen, welcome to this special class. I'm gonna show you how to build a one page. What? This website, using a powerful plug in known as site origin Outside origin is a free page with a problem with over 2.5 million and stalls. And with this plug in, we're gonna build out this rip such a looking at this website is known, asked black hat and its purpose is to promote an event known as the Black had convention. So what kind of website All we going to build? Well, as you can see from the homepage right here, we do have a video playing in the background right there describing the event. We're also gonna have a text block with the main title. Welcome to Black Hair. 2018 will have a description off what the event is all about. I'll also show you how to create an image gallery, but you can have pictures from previous events. We'll also have a special role. Where will describe the four main speakers at this particular event, will have their images, their names, titles shut by. As always, links to the Twitter profiles also also had to create a price and table so that potential our customers a cleanse can buy. Tickets will have three different types. Regular priority V I P will also have a table. Highlights in the differences and phages off this Three different types of tickets will build out an F accuse section and finally will have the contact or section with also a Google map as well as links to the social media profiles. So by the end off this class, you will have all the necessary skills to build out a one page website using this powerful free plug in known as site origin. So that was an animal time. Let's get started. 2. First things First: Well, hello. Thank you for enrolling in the course. And before we get started, I wanted to spend a few minutes to introduce you to a few tips on how best to take this course here on skill share. Now I've pulled up one of my courses, which is the absolute beginners Gate of Cybersecurity. Just as an example. So don't worry if you taking a different course this video festival event to you. Now, if you go to the main course page, you should see a few tabs down in here. You should see the about tab, which is basically a short description of what it costs about reviews. If this class hasn't reviews, you'll find them in here now. Community is very, very important. This is where you can either aesthetic conversation. You can ask a question. So please, if there's anything that took the boat in this class that you're not comfortable with, maybe you didn't quite understand. This is exactly where you can ask a question. So please make use off this future. You can also share a project. So if have access to do something, maybe quitted project to do something like that. This is where you would be able to do so. All right, and then finally under Thank the teacher, which is under the committee tab. This is where you can leave a review for the course, and I really hope that you will enjoy the course and you will be motivated enough to leave a review. Just click on thank the teacher, and then you'll be prompted to write a review about the course of Please do that. If you really like the course now, your project is also a very, very important tab. This is where I will provide you with an assignment that you may have to do dependent on the course you're taken. Not all causes on Scotia will have in a 7% but if there is a product that you have to take for this course, this is where you would find the description of that project. Now, to the white, you can see I have attached files. This is very, very important because in this cause she about to take I will make a reference to the resource is or the downloads. Whenever I say seven things like that, I'm referring to the attacks files here on the your project. So please go right now to your project and then download all the attached files. That could be pdf's files that you'll have to read to improve your knowledge on the topic just discussed. Or you would also have zipped files contain images or logos or your father, maybe even video files. You can download them in all likelihood you'll have to use them and this particular course . So please take a moment to download all the attached files that you have in your pocket and finally, under all projects, have other students have done the project or something like that. This is where you would find such our products. That's of course, if they chose to share their projects. So that's basically how to make use of the features here on skill share. Now, if you'd like to connect with me outside of school share, I'm on LinkedIn. You can sit for Alexander only send me a request to connect, but just please make sure that you what time is it saying you a student of mine from school share so they know who you are? I'm also on Facebook. I have a page for my Web monkey, which is the monkey online. So if you're taking any of my what press or Web development courses all the commitment, you like this pitch because in here I upload tutorials are shared lots of useful information about what? Press some of development. So if you're interested, you can like my page on Facebook. I'm also on YouTube have YouTube channel, which is the Web monkey. I upload tutorials on the weekly basis, so as regularly as I can anything regarding website creation. What prayers With development. You will find such cereals in hip. And finally, I also have an about me page if it interested in learning more about me both as a person and as an instructor. I have an about me page on my period platform, which is the Monkey academy. Calm. Just go to the mechanic will come four slash pages for slash about and here you can basically read my life story about my family, my education, my work experience, how I stayed teaching online soon and so forth. So that's it. Just wanna learn more about meat, so that's basically it. Thank you so much. Full choose into in wool in this course and ah, let's get started 3. SiteOrigin Page Builder Plugin Preview: Oh, alrighty. Welcome to this brand new section. We're gonna build a one page websites use in a very interesting plug in known as the site Origin page. Build a plug in. This is a planet that's free. For the most part, they do have a premium version, but the free version is really, really good. You can build really good looking websites using the free vision of the set origin. Plug in. This is a said. I'm gonna walking on black hat daughters kapita dot com. So without wasting time, I'm just gonna go ahead right now and install applicable. I've actually installed and activated the plug in already and I'll show you, Let's go to plug ins and you can see right here page buildup by side origin. So please go ahead and download, install and activate the plug in. Now, from this point on speed, you will see Adam's right here. If you click on Adam's, this will take you to the page where you can buy the opinion vision off this plug in its $29. But what you will get is you'll get additional how widgets like the block animations, accordion, lightbox, Pavelic, sliders, and so much more. So you basically get more features. However, like I said earlier, the free vision of this plug in is also really, really good. I'm gonna go ahead now. Includes this. And what I'm gonna do is to come down here to settings. Click on Page Builder down here. And this is where you can access the default settings off this plug in. And first of all, over here, you can see that by default. The plug in has been set to walk on both pages and posts. You have options like the life. It it'll quick link enabled you had the side, but I'm a little enabled. There is also the upgrade teaser which displays to set urgent premium off great easa in the page. Builder to bar. I'm gonna go ahead and disable this. We don't need that. Let's save this. Let's jump over hits your widgets. And over here you can customize with some CSS and HTML. You can customize the code in the XML cordon off. Your widgets are admitted class enabled, recommended with its enabled instead of permits disable. We don't need to bother ourselves with any of these options. For now, so just leave these as it is now for the layout. This is actually very interesting. This is where you can enable different kinds off views. Using this plug in so responsively off example is enabled. This is exactly how your website of look like or mobile devices. So right now it says it will collapse, rejects rows and columns on mobile devices. So basically what's happened here is that the plug in is going to do what it feels is best for your website. When someone takes a look at the upside on, a mobile device sold the command. You leave these checked by default after the tablet layout. Just live this as it is. You don't need to change anything in here. You can control the with off your off your website, how it's reviewed on a tablet or mobile device. But please, only chances values if you know what you are doing. If you're familiar with CSS, you're familiar with responsive CSS. Then by all means, you can play with his values. If you don't know anything about CSS, then please just leave these values as they are. We might change the values off the roll bottom margin later on. In the course, I'll show you how to do so. So finale. Just leave these as it is. No need to change anything in here. And finally, we have content. So over here it's a is copied content from pitch politicos. Content. Yes, enable that copy styles again. We don't need to bother ourselves with any of these options. So Bordeaux Saver's settings. Now let's go to pages, and I'm gonna go ahead now and add a new page, all right? And let's call this the our front page. If I click on Page Builder over here, this is where you can now access the actual set origin page buildup, Logan. So if I click on add widget right here, you can see that these are the default widgets that comes with a free version off the plug in, and they're not too many of them. I mean, you have our kinds. You have your post loop search Saturday and Barton the editorial video, but that's about it. It's not enough. So we're gonna have to install a second plug and l providers with Mawr regents that we can walk with. So Jimmy never next video. I'll show you how to install this plug in 4. SiteOrigin Widgets Bundle: Alrighty. Welcome back. And in a previous video, I showed you that decide origin page buildup. Logan has very few, which it's by default. So we're gonna do here is we're gonna install a second plug in that will add extra widgets to the page called a plug ins. I'm gonna go ahead and close this, and I'm gonna come down here to plug ins. Now, you don't need to publish this front page. Don't worry about it. Because the plug Annable create a custom from pitch for. So you don't need to publish this page. So it's going to hit the plug ins. Click on add new leave one of the many don't save anything. Let's go to leave. And I'm gonna go ahead now and type in sight origin yet again. Oh, right. And we're gonna do here is we're going to install these side origin budgets, Bond. Dual. This is what we want. This is what we need. And that's what we gonna get. So gonna click on install. Now, click on activate. Alrighty. So from here, right now, what I'm gonna do is to click on manage widgets and you could even see the link here as well. On the plug ins, he will sit side origin. We just can click in there and let's take a look. All variety. All right, so let's take a look at what we have right now. By default. We have the button. We have Google maps, any tool noise we have image. Backslider puts Castle Nice and Ah, that says, but we have so many other widgets out here that we need to act of it. So let's not waste any time was go to disabled analysts. Go ahead and activate. Activate activates. Go ahead now and activate. Every single one of these features activates and activate. So as you can see right now, I have activated every single widgets in our bundle, and we're probably not gonna make use off every single digit in here. But hey, it's free. We can act, activate them. So why not? Let's just go ahead and activate every single one of the widgets. So there you have it. We now have access to this widget, so let's go back to a pities again. Let's click on Add new just so we can see them. Let's click on Page Builder. Click on Add widgets. And there you go. Awesome. So now you can see the ones in blue. These are the additional, which is that have been added because we installed the bundle. And you can see right now that the pitch buildup Logan now has a lot more widgets and features that we can walk with. So there you go. Please. Go ahead now and install the widgets. Pondel, plug in. Think of watching. I will see you in the next class. 5. SiteOrigin North Theme: all right. The next item on a list now will be to install a new theme. And I'm gonna make use of 2017. We don't want to use it. Instead, we're gonna make use off these site origin North theme by side origin so that there's humid . It's that urgent plugging made this theme toe walk with the plug. And so it goes without saying that this is the absolute best theme that you can use with your set origin Page pulled a plug in and against you Right now, we only have 9000 plus active installs. But I can guarantee that this is a very good theme. And it's also very well, men Pain. As you can see, it was last updated 27th of August 28 scene. So let's go ahead now download, activate and install the theme. All right, so I'm gonna head now to activate the theme, and you can see we have to set urging north theme and what you can do is you can click over here on the themes you will see the link that says about said urge North, Let's click in there, and from you can see that you have a very pleasant video highlights and why this same is fantastic. And, uh, they do make some very promicin promises forever free. As an example of that said, North is a completely free about Chris name. We will continue developing and enhancing for years to come, so hopefully it will always remain free. But as usual, they do have a premium vision of the theme. But again, just like with the plug in these free theme, the free version of the theme is fantastic, and you can build a really awesome looking upside with it. So what we're gonna do here is very quickly. I'm gonna go ahead and click on home page right here. Click on home page. And what this theme those is that it can create a custom home page for you. So you click on the home page, just go ahead right now and click on on right here, and this will create a custom home page for you. Click on save home page. Okay, Now let's jump down here to settings, go to reading, and all right, so, by default, I just want to make sure you can see right now that the home page in space has been set to aesthetic page, and that home page has been set to our custom home page. Awesome. Let's go ahead and save changes. Let's now go to our front page and let's see what we have. Awesome. Awesome. Awesome. So right now, this is exactly how your home page should look like. So, congratulations. We have installed and activated the site. Origin North theme. 6. SiteOrigin North Theme Preview: before we begin to walk on the homepage. I wanted to spend a minute or two just to show you the options, the customization options available with this particular theme. So if I click on customize from different end, this will take me toothy back end, where I can access my theme sentence for the theme. So I click in here you can say I have access to all. So so set in Standoff with Brand anyway can add my logo. I can choose to hide or show the site on description. I have access to funds where I can choose the wide variety of forms from the Web. From Google, I can change the coloring as well. I have access to different kinds of icons. I have access to pay structure where I can choose thesis I'd ball with. I can also change the position of the sidebar from right to left if I want to. I have access to the header where I can control the layout of the header. Choose a bag on coaches buttock. Eliza's well, access to navigation. You just have a lot of different options available. You have responsive as well, where you can change the menu Break point, background call. Oh, things like that. And finally you have access to the foot over. You can change how the text will appear in your food. Changed the link colors as well. Change the bag on close to text color and so on and so forth. So this really is a fantastic thing, providing you with lots off different kinds, off customization settings. So that was a very quick preview off this particular theme. We will be walking with most off this options as we progress in this particular section. So thank you for watching, and I will see you in the next class. 7. Setting Up the Homepage: Let's begin to walk on our home page and we're going to do here is we're gonna get laid off Arminia Link. Wait here. We'll get rid of the search button and also hide the site description. So first things first, let's click on Edit page right here, and what I'm gonna do here is I'm gonna change the layout from no side part to fool with. So what is those? Is there are times went, would want to display content that goes full with So we will not be able to achieve that effect if we have the no sidebar layouts but with a full with that will be possible. So let's go ahead and choose full with. That's all we need to do here. Let's go ahead and update the page. Let's go back and review the page so you can't really see the effects just yet because we don't have any content. But let's go ahead and click on customize. All right, quick and customize. Let's go to Alright, awesome. So let's go down here to the theme settings. We're gonna go to Brandon, and from here I'm gonna hide the side description. Let's hide that All right, So it's gone. Let's go back. Let's not come down here to navigation and in our navigation. I'm going to on check the menu search, all right? And then I'm also going to uncheck the sticky menu. What this does is when you begin to school down your menu will still be men at the top off your screen. It's not going to disappear as you school down. I don't like that effect, so I'm gonna go ahead and check this box. Let's go ahead and publish our settings. All right, let's go back. So this is looking good. This is looking good. We now have black hats ritual to replace when we add a logo, but we still have home page, which is the menu. So to get rid of this home page, let's go ahead and create a custom menu. Go to menus and we're gonna go ahead and click on create a new menu. Well named is the main menu. Click on Create Menu and we'll sit this as the primary menu saver menu. And now let's go to our front and and there you go. It has disappeared. So right now our front page is looking almost as blank as it can be. So that's it. Thank you for watching German the next class, but I will show you how to add our logo. 8. Adding the Header and Logo: all right, so let's begin to walk on the header, setting off with adding the logo for our site. So I'm gonna go ahead and click on Customize, which will take Hosted it back And over here, where I will click on things settings, click on Brandon and then under load. I'm going to select the image, which would be this image. I have black hat. I'm gonna go ahead now and choose my image and let's go ahead and publish. Let's see what this looks like. A different end publish. Let's close this, Okay, so the logo itself isn't too bad. The problem is, is that it's not scented, and you can see that the image has a white background, while the actual bag one of the header is not exactly pure white. You can see the outline, so let's fix it. Let's go back to customize and from here we're gonna click on theme sessions. Once again. Let's not calm down hits you where we have header. So first things first, we're gonna change the layout of the header from default to centered. All right, that's good. Now for the background. Coehlo, I am going to change all of this, too. F f f f f f So basically, we just right here is the exit. There's more value off the current column, which isn't exactly pure white. So pure white is f f f f f f f r. I just so you know, six after that shitty Hexi decimal value for Peel White. So now you can see that the image looks a lot better than local looks a lot better. The background blends in perfectly with the white background off the header. Awesome! I'm gonna typing some text in here as well, just to make the head of look more Boston Cell say the or fear She'll website for the 2018 Black hat conferee. And he can see that shows over here, which isn't bad. I kind of like this style. Let's go ahead now and hit. Publish. This is looking good, but there is one more thing I would like us to add. Let's go to Brandon. Let's show the site description Right now. We don't have any side description. I'll click publish. Let's close this now. Let's go to the purple back and itself. Let's come down here to settings. Go to general and for our table, and I'm gonna add Las Vegas USA. That's what I'm gonna add. Let's see what it looks like. Let's save this school downs. It changes. Courted front, Buj. And OK, so this doesn't look too bad, as you can see Black Hellas, Biggest United States of America and then on top of the official website for the 2018 Black Hat Conference. Not bad at all. But there is one more thing we need to you change before we run this video up is that there's a lot off space between the actual headed itself and the bottom. Celestron removes all this empty white space that we have over here, So let's go back to customize. And if I'm not mistaken, it should be on the theme set Sins on the head as well. And OK, so down here you may have the bottom margin. Let's just go ahead and remove the three. Make that zero. Let's go ahead and hit. Publish. Let's go back to the front end and there you go. So right now you may not notice an eastern difference, but if you had added content just beneath the local, you'd have seen the massive difference removing. Imagine mix. So this looks nice and sweet. I like this. Thank you for watching Germany next class where I'll show you how to add our video to the website. Thank you for watching. 9. Adding our Video Part 1: Oh, right. So let's go ahead now and add a video describing the fence. And if we want to add is from YouTube and it's titled The Black Hat Conference 2018 from a video. This is a video and made by the way, and I think it's It's pretty decent. It's kind of flashy, you know? You see people with lines, people talking, Do you have? Ah, some technology on display? You know, the guy with watch right here. Ah, looks looks pretty decent, I think so this trend add this video to a Web site. So I'm gonna go ahead and click on Edit home page and from him gonna click on add low. Let's change it. Look. Role layout to 1 100%. Click on insert. Now let's add all widgets. Now, if you pay very close attention over here, you're not. As we have two separate video player widgets, we have the default video widget that comes with the set. Urgent plug in. But we also have access to decide origin video player. All we did it that came with the alleged spawned a plug in. The difference between these two is very simple. The side origin Video player has a bit more features, so we're gonna go ahead and choose. Decide Origin video player. Let's click on Edit to Now and from here you have the choice of choosing whether your video is self hosted or externally hosted. The difference between just two is cell phones. That means that you have the video inside your media library. Externally Hosted means you have video on YouTube or Vimeo any of the external resource. I'm gonna go ahead and choose exactly hosted. And let's just go ahead now and copy this you a bill. Let's copy that. Come back over here, paste the bill, and I'm also gonna choose Also play because I like auto play. I think it's pretty cool, and we can also choose to We move the show with videos. We don't need that. Let's click done. Let's click Save Homepage And now let's view the page and see what we have and ah, voila. There you go. Not too bad, it's OK. There are quite a few issues, though, and first of all, this video is tall against it's pretty tall and ah, it's big. It's really, really big, and I don't like videos that there's big, But this is very relative. Um, you might be the type of person who likes you. If it has been big on your websites, If that's the case, then fine. But then we also have the issue of once the video ends. You now have this default, please. That comes with YouTube and this doesn't look professional on the website, right? We really don't want to see this. Plus, you also have access to the controls so anyone can come in here and ah, we play the video chance volume, things like that. And it's not it doesn't really look professional. Okay, We want a situation where we can ensure that if you just please automatically, the user doesn't even know that it's from if possible. The use of this doesn't from YouTube user Kant's that plane of the videos directly from here, like you can see right now. So in a lets you do that, we're gonna have to change the will but display off video. So instead of using how video player widgets will have to take a different approach so German next last year, I'll show you a second method off this plane. Your video on your one picture upside 10. Adding our Video Part 2: a second alternative way off this plane. Ah, video would be to come back. It's the home page. And let's just go ahead and remove this widgets. We don't need this. Let's add a different budget this time. And the rigid we're gonna add will be the custom HTML widgets. That's what we're gonna add in here. Let's click on edit. So now in here, we have the content. We're gonna add our embed cold from YouTube now to embed the court for this video. Take a look at this. I'm going to school down here and I'm gonna go to where we have share right here. Click on share and then click on embed right here. Click on in bed. And now over here, you can see we have access to the embed code. But we also have access to additional controls like other options. Like the show suggested videos when the video finishes show player controls, show video title and our player actions. We don't want any one of these. We're gonna go ahead and check this on check. Check the last in a swell. There is one of a hit at safety. Enable our privacy and hands mode. It stays when you turn it on. YouTube wants to information about visitors on your website unless they play the video. So how did not? Personally, I don't I don't care for this option. Okay, so let's just go ahead now and copy what we have in here. Let's copy this code. Let's copy that. Let's close this. Now let's go back in here and I'm gonna go ahead now and paste the code. Click on Done, Save the home page. Now let's view the page and there you go. All right, so some slight improvements right now, if you play the video, you can see we no longer have access to the control. So the Villagers plays as it is. That's cool. However, it's still tall, so we're going to make some changes in here. Let's go ahead and click on Edit home page. Now, the advantage of doing it this way is the fact that you can now control how tall or how wide your videos would be. So in him just gonna go ahead and change this from 33 15. Let's go ahead and choose 4 15 and for the with. I'm just gonna go ahead and choose 1000. All right, let's click on Done. Let's save the home page, Another video page. Let's see what it looks like. And now you can see that the video now looks shorter than it used to be. Pretty awesome. But we also wanted to extend to the very edges of our screen. So let's edit the home page. Let's go ahead now and edit Devo itself and it low now on the layouts. I'm going to school down here. There you have the standard. They're rolling out. I'm gonna change from standard to fool with stretched. All right, let's do that. Click on Done. Save the home page. Now let's view the page And there you go. So now you can see that video extensively edges off screen, which is what I like. Now there are two things when it's you solve here. First of all, the video is implant automatically, plus divisible, also not loop. Once it's which is the end, it will just stop it. Won't we play itself? So we want to change that so there are sitting cold so we can add to our It's a miracle to embed code, and I do have it here on no pad over here right now. Actually, let's go ahead. And I added the home page so we can compare the code Click on edit, right? So we have this little brink the note pad file over here, and hopefully you can see the difference between these two. So right now, you can see that in order for the video to play automatically will have to add this piece of code writer, which say's auto play equals one. But they also have to add the often off mute equals one as well. What I've realized is that if you don't add the musical's one value, the video will not play automatically. So you wanna add other play equals one, and then you'd equals one, and and finally, for the video to loop itself, you'll have to add loop, equals one and then add the playlist equals the value off the the idea value Off the video developed the idea of the video. Here is the Z T. J X on the score I won and how you can get the value is very simple. Go over to your video and what you have in here after the question back. This is the I D off your video. That's exactly how you can get the I d. For your videos. I'm just gonna go ahead now and grab this piece of code right here. Let me copy that, Lemon, I'll go back to you my back end and we move what I have over here and then pays the code, Let's go ahead and he'd done save the home page, view the page and automatically the video's gonna play pretty awesome like this. Like this a lot. So let's wait for the video to end and see whether or not it will actually loop itself and playful a second time. All right, so we're just gonna wait and limits on some commentary. You concede the game, but his watch technology, That's pretty nice. The guy holding the globe in his hands. And then you go. The video once again loops itself. So there you have it. I feel this is a more professional way off displaying the video on a website. We can control the height we can control whether the videos should look automatically what fish it play automatically. So that's pretty much how to add the video to the press upside. Your one picture appears upset. Them kind of lost in thought right here. Thank you for watching the video. And of course, I will see you in the next class. 11. Adding our Headline: the next we're gonna add it will be a headline with the words will come to black half 2018 . So to do that, let's go ahead now and add a nouveau. And once again it will make this a one goal layout and certain that in here we're gonna go ahead and add widgets. Am I gonna go ahead and choose thes site origin headline? Well, let's go ahead and choose that one. Let's click on edit. All right, So for a text right now, we're gonna say, Welcome to Black Hat 28 10. All right for the military. Let's go ahead and choose tag to for color. Let's go and choose Red for now, all right? And, ah, let's just go ahead and click done and see what this looks like. Save the home page. View a page. Let's so it looks like school down. Welcome to Blackout 28 saying OK, it's Ah, it's kind of small, so let's go ahead and make some changes. Let's make it bigger. Let's make it bold up. Let's go back to the actual let's go ahead and use life, Eddie told this time around. Okay, so let's click on life at it all. All right, let's click on the headline Widgets. So for me right now, I'm gonna go ahead and change the font. Size 2 45 pixels make it a bit bigger. The element is to the center, which is fine now for the fun itself. Let's do this. I'm gonna go ahead and choose Monserrat and I know 1/3 is the phones we want to use. But with concert, we have different values for the wait. So all right, so you can see we have Monserrat 708 100. Let's choose Monster at 800. This will make it quite bold. Became one that let's click on Don. And now let's see what looks like Awesome! Cool. Welcome to Black 28 this is a lot more pronounced Now you might notice that we also have a divider right here. You can see and we don't want that. So let's go ahead and remove the one as well. Let's click inside here. Let's call down here where you where we have the divider. It's opened. This noticed Ellis solid. I'm gonna choose none. We don't want any divide out at all. Let's go ahead. Done, and that looks better. All right, let's go ahead now and hit done updates. Now, let's go ahead and view the page once again from different and make sure it looks good. Awesome. Awesome. Awesome. Welcome to Black Out 2018. This is pretty cool. I like this. Thank you for watching, and I will see the next class. 12. Adding our Text Block: Oh, right. So it appears. Video. We added the headline. Welcome to Black 2018. What I want to do next, right now would be to add a text block with some text describing the event. So we're gonna do is I'm gonna go ahead and grab some dummy text from this upset over here . Lauren Ipsum per bank decay. I'm gonna go ahead and grab these two paragraphs. Let's grab that copy. Go to a website click on the edit home page. Now we're gonna do is instead of adding a new role, will simply add a new widgets to our existing vote. And the reason why is because if we go ahead and add in, you've oh, it's gonna create some additional space between the headline and the text. And we don't want that we want as little space or as little much as possible between the headline and the actual text. So this is highlighted right now. Let's just go ahead and add a new widget and very simple. Let's go ahead and add the site origin. A little widgets, so you can see right now we have the two widgets inside of the same role. Awesome. click on edits and I'm just gonna go Ahead Now and Paste text. Very simple. Click Done. Save the home page. Now let's view the page and let's see what we have. Okay, Not bad at all. However, What if we wanted to add some margins between the left hand side and divide hands and make the text? A bit more are sent had pushing more to the center. Here's what we can deal. Okay, I'm gonna go ahead now and click on the Edit homepage once again. Go back to the back end, Click on edit right here. Now, over here, you have the ability to control how the text look like Let's go ahead and click on layout. Now that you have Patton, this is essential for Patty. Right now. I'm gonna add our 300 for right and then 300 full left. Now, the thing about side origin is that for some reason, when you add fellas to your left or right to the top and the bottom values will be populated automatically as well, and we don't want that. So we want 300 for the left and then 300 for the rights. Let's go ahead and hit Done. Save the home page, view the page And there you go. So that's exactly what patent does when you add patterns. Your layout. It will push content either from left by a top a bottom depending on where you added those values. So this is 300 pixels pattern from the left 300 pixels patent from delve ICTs. Now, this might look really, really cool and awesome. However, there is something you need to pay very close attention to. If I click on the life and it's all right here one advantage Life Editor has over the back and eight or is the fact that you can actually view your upset on several mobile devices over here right now I can toggle the Tiber mode Now you can see the local looks good. The video looks good on the tablet, But if I school down Look at that. The tax on it looks really, really horrible. It get was on mobile view right now. You can see that it takes this This this is just horrible. This is exactly how the website look like on a mobile device on the phone. So we really need to fix this Now. How can we do this? I I'm gonna hit. Done. Let's go back, Teoh Region right here. They said, Urgent widgets. All right, click inside. Go back to the layout. Now. Over here, you will notice we have a section for the mobile Padden. All right. It is very, very important that you added values off zero to light and then 02 left. In fact, you can just leave this Saturday's okay, Zero everywhere. So for the mobile devices, when they're no longer gonna have 300 pixels petting from the left and prevented pixies spreading from the white. So said this 20 hit. Done click updates. Now let's go ahead and view our page and animal next up. So it's the looks. Good. Let's go down the Life 80 tool. Now let's click on the table view and voila. This looks so much. Better clear on the phone view and Europe. This looks pretty good. Pretty good over wall. So this is one thing you to pay Very close attention to, whenever you are Is that any websites designed your websites responsibly. Alright. Because wait, Did I just say responsibly? I meant responsive. Sorry, designed Europe says with responsively. Not responsibly. Oh my gosh, These any websites? Responsibly. What? I mean here is whenever you're building your site, make sure it looks good on mobile devices as well. That's what we mean by responsive, Responsive CSS means your website look good. If it's viewed on deck stop on a tablet on a mobile phone. That's one thing you should always think about whenever you are building sites with what prayers would CSS html will have you eso There you have it. We have successfully added our text block to our website. So if you have any questions thus far, please always retail and let me know what you having issues. Thank you for watching a video and of course I will see you in the next class. 13. Adding the Image Gallery: Welcome back. We're moving on on the very next picture we're gonna add would be or grid displaying some images off the previous events that people's black hat events. It's always nice to include videos, pictures just to entice new people to register for the upcoming events. So we're gonna do is we're gonna go to the back and to edit the home page. Now, if you're looking for images, there is this website called Picks obey dot com and you confined well, it's a zoo over 1.5 milion oil, T free stock photos and videos. So this is really an awesome website to go to you for looking for images. So all you would have to do is just to come over here and containment something like hacker , for example. And ah, you will see lots of the images which I'm going to use now, over here, you can download them for free. You don't have to pay anything and it can use them on your website. So let's go back to the back end. And what I'm gonna do now would be to add a new reject. So I'm sorry. We're gonna add a new goal allow. You have to add a new role for our grid. Let's make this one low. Insert that now in him. Gonna add my widgets. Okay. And let's cool down. We have a Let me show you. We have sliders. Now we have Slater's, but we also have the said Urgent image grid. And then we have the site origin. Simple masonry. I like missing me the most. So we're gonna go ahead and choose that one and I were gonna edit and out in here you can decide to begin to add the images. All you would have to just to click on, add on the images and then you see ad you'll see item. Now click on the arrow next to the Adam, right here and now in here. We can now upload an image. Now, what you can also do is to click on image search right here. And this will take you straight to peaks. Obey. It will take you straight to this website so you don't even it's the open. Our picks obey on a separate link. All you have to just come in here such for image type in the keyword and then click search and then picks up. It will provide you with images so I can typing Hacker. Right now, Press enter, and you can see the exact same images that we have over here as well. So it's pretty much the same thing. But I already have the images I need for my middle libraries. I'm gonna go ahead and click on shoes media. All right, so these are the images, and I'm going to go with this one right now. Let's add that one. State media, Let's close this. I'm gonna add another image again. Click down here, Choose the media. I'm going to go with this one, so I'm gonna go ahead now, impose the video and I will add seven more images, making it nine in total. All right, He says against it. Right now, I have added nine images in total to my grid, and I wanted to show you some extra options you have available. You can decide to increase the Columbus spent all day will spending for images. You can add the title at a dis mission. You level as well. Now, once you've finished at in all your images, you have the extra options off. Determined how many columns you want. You're good to be in this case. Since we have nine images, I'm gonna go with three columns, so we're gonna have three images on one go. Three images on 2nd 1 and three images on the last roll. Now, Ghadir represents the space they're gonna have in between your images. But before we play with that, I'm just click done. Let me save the home page. And now let's take a look at what we have. You the page. Let's cool down. And there you go, our images. There you go. Looking all nice. I like this. So we're gonna do now will be to create some space in between the images. Like it. Let's do that. Let's edit the homepage again. Let's come over here. It it. So to add some space in between, the images will have to increase the gotta. So I'm gonna go with five. For now. Let's see what five will do. Let's hit Done. Let's save the home page. Now let's go back to view that page and see what it looks like. Let's go down and there you go. This is what it looks much much better as you can see. So I like this. The images are big. People can come in here right now and see the images off conference. I'm hacking images. We also have some images of Las Vegas, you know, just to entice people. Teoh register. Now let's go back once again to the back end. Click on edits. Let's scroll down here to where we have the tablet layout. So how will the grid look like on a tablet? Let's open this up. You can see right now that by default it says number of columns is set to however, keep in mind that we have nine images, so dividing them to two columns will not work out well, because you're gonna end up having four columns with two images, which would make it eight. And then the very last column over the last roll will have just one image. So it's gonna create an imbalance. So let's just stick this to three, okay? And for the gutter, we can make it maybe one just to have some very slight space. And then let's go to the mobile layouts. Finally, and then he hit in the number of columns is set to one, which is great because already, you know, on a mobile phone the space won't be large enough. So it's always nice to have just one column. Instead, let's hit done, Save the home page. Now let's view the page. Let's click on the life Any tool so we can preview this on our tablets. Let's call down here to to take a look at the grid. Okay, That looks still looks nice. And finally for the mobile device. Let's take a look at what we have. And there you go. They have the images displaying one world one column, which is nice. I like this. Awesome. All right, let's hit. Done. And one of the final thing we're going to do before we close this video would be to go to the vole, edit the row, and now you have attributes. I would like you on the show. I d to type in Vivo Dash Gallery. What? Don't worry about why I am doing this for now. I will show you a little on the course. Why? This is gonna be very, very useful. But just go ahead, typing vote that scalloping and no, I d he done hit updates and that is all for this video. So thank you so much for which individual we have no successfully added a gallery to a website. I will see you in the next class. 14. Adding a row inside of a row: well, come back now. In this video, we're going to do something different, something new. And I want us to create a meet the speaker's role just to give an idea what I'm talking about. Let's take a look at this site over here where you have made to the team, you can see we have the headline with the team. And then we have three people, basically with their names, their titles and then maybe a short bio and in the phone number that then is to create this kind of structural wait site origin Plug in is a little tricky. We've done something quite similar before when we added the headline and text block. But we pay very close attention. These are two widgets inside off the exact same vole. Well, that it is impossible for us to come in here right now and add a new vole. We can add in nouveau inside this existing go as it is, if it were possible. Although although it doesn't do it right now, it just be to click on Add Nouveau and then increase the role layouts to maybe three or four and then begin to add arse because But if you do it this way, when you click inserts you're basically creating a Nuvo entirely. You can create these kind of structural inside, often existing vote. It is not possible. So another. To achieve this kind off structure, we have the very first widget with the headline and then a second widgets. There's divided into three columns. As you can see, we're gonna have to make use off a very special widgets. And the widgets. It's called the actual I'm just go ahead and delete this low will really quickly. Are you sure? Yes. All right. So what? We're gonna go ahead now? And Addie Nouveau? We're gonna make this role one single layout insert. Now do What I'm talking about is the Where is it now? The layout build up. This is the widget we're going to need. This is divided that will allow us to create a role split. There were in 23 or four columns inside off another wall. All right, This may sound confusing, but his watch. I'm gonna add this right now. So in here right now we have a layout builder now in here. I'm gonna go ahead now and click on it it and not from here. I can add my widgets. The very first with that we're going to add will be the headline. Let's cool down here. So we have to set. Oh, Jin headline! Let's hit! Done! Okay, All right. So far, so good inside off this single of all right now we do have the headline, but take a look at this. I cannot come in here. An ad. Ill bull. I am not going to go ahead and spit this roll into four because we have four speakers. It's 25% click inserts And how you can see that inside off our page build a widget We now have to those the very first world will be for the headline miserably meet the speakers And then the second role will contain the images And ah, shut bios off four speakers for the event. So can he Don't right now save the home page. And there you go inside off this single vole right inside of this single widget. When you click on edit, we now have two bulls. The very first row has the headline widget The second more will now contain our meet the speakers or widgets, which all the scores in the upcoming video so that you haven't That's how to make use off the layout builder Low budget, which you said, URGENT Plug in. If you have any questions about this place, feel free to reach out to me. Thank you for watching and I will see you next class. 15. Adding the Second Headline: but let's move on. Let's now add the headline click on Edit and for the text. I'm gonna go ahead and say, Meet the speakers. All right. Now, if Sematech is gonna be one now for the color I'm gonna go ahead and choose White and I'm gonna choose White for the text color. Let's scroll down and I'm gonna choose 45 pixels. Let's go ahead and he done Let's hit Done once again say the home page and let's just take a look at what we have you the page, Let's go down. And of course, you cannot see Mr Speakers unless you highlighted because it's all white. So what I want to do is to make the background of this entire bowl black. All right, so let's go ahead and click on Edit Home page. Let's jump down Teoh Roll right here. Click on Edit Low before we change the bag onto black, go to attributes and then do this. Let's go with role dash speakers. All right, once again, don't worry about this. I will tell you in the litter video why this is important. So we have real speakers now let's heat done. So let's go back. Sorry it though. All right, so we have attributes. Now let's go over to design background call over. Going to go ahead with Black. All right, let's hit Done. Click. Save the home page. Now let's take a look. View the page. Let's cool down, okay? Make this because now you can see the text is in white. And because the background is now black, however, I would like the role to extend to the very edge off our screen. Plus, I'm also gonna go ahead and remove this particular divider, which you'll get whenever you used the headline text widgets. So let's make those two quick changes. Let's go back to edit home page. Now, for the role in an effort to stretch to the very edges. I'm gonna go ahead and hit. Ah, layout. Let's call down here and then for the ruling out, I'm gonna go ahead with full with stretched for now. Okay, let's switch that kid done now for the We just solved the headline. I'm gonna go ahead and edited inside here from old way to where we have the divider changed his to None We don't want to. In divider, he done, he done save the home page. Let's view the page school down and voila! Now this looks much, much better. Now we have the black covering the entire width of the screen because we made the low full with stretched. And then we no longer have to divide that because remove the divider from the headline or widgets. So there you have it. Germany, in the very next video well, will not begin to add our speakers. Thank you for watching. 16. Adding the Speakers Block: all right. In the previous video was successfully added, met the speakers headline, and now it's time to begin to add the profiles off awful speakers. The problem is, is that we don't have a widget that we can use to display the bio off speaker and image. And it may be a link to the social media profiles. I mean, we have widgets for galleries for all deal for text videos for contact forms. But we don't have any four pull files, basically. So in order to do this big enough to install a new plug in All right, so let's come down, hits you plug ins, click on add New, and I'm gonna search for site origin yet again. Site origin and at the Plugger. What we're looking for is called the Widgets for site origin by WP inked. This is the one we want. Let's go ahead and install it. Now activate the plug in, and then from here, I'm gonna come down to settings. I'm sorry. Good plug ins, plug ins, and then click on site. Urgent widgets and our for me. I'm gonna school all the way down here and the particular widget we're looking for You can see they want to look great out. These are the new, which is have been added as a result. Off the at plugging we've just installed so that what we're looking for is the ink person. And it's already active because I activated this particular which had previously. So if yours isn't active, please go ahead and activate this particular Widget Inc person. That's what we want. So I'm gonna go back now to my fund and let's go ahead and edit the home page. And now I'm gonna edit layout builder and an inside of a very first widget in our four column. So I'm gonna add a new widgets and it's going to be the ink person. This is what I want. I'm gonna click in there in person. Now, let's edit this widgets to add a very first speaker. Let's click on edit. So in here we have the name, and the very 1st 1 here is going to be Bruce Wayne. That is Batman, by the way. Just in case you didn't know, I'm a huge Batman fan, so it just move on. All right, So Bruce Wayne is gonna be a very first to speak out. I'm gonna click on person right now. And I do have Bruce Wayne's image already in Miami. The library, If you don't. You mother like home to use the image. Such feature going to choose image. And now this is good swing right here looking all very handsome. All right, so, designation. I'm going to go ahead and say cyber security manager because he doesn't looking major. And then for the bio. I'm just gonna go ahead and grab some very short piece of text right here from Alabama. Epsom website. Copy that. Jump in here. Let's base that. All right. And for social, we have access to different kinds of profiles on the proof. I'm gonna click on add Let's click on the arrow right now to add to the profile so you can go ahead and type in the ones full, like facebook. LinkedIn, Twitter. I'm just gonna go ahead and type in the hash tag, all right? And then, for the icon, I'm gonna click on Shoes Icon and another such icons of Minnesota for Twitter. And there you go. So we have the trace of two different styles. I'm gonna go the very first style. That's Twitter right there. Let's close this one. And now let's jump down, hit its styling and see what we have. So for style, and you can choose to show the image above the buyer, which is what we want. The design is basic, although you can also go with econs off image about over image. I'll just stick with basic finale like Basic now for the corners. I'm gonna go with slightly curved right. And then we have the option of adding an image over overlay Kahlo. And this cause I'm gonna go with ah, gonna go with Blue. Let's go with Blue and then way have capacity. I'm gonna make this to 13 Actually, let's go with nine nine. Should be fine. Let's go with nine. But so you have other options of choosing colors. Full name, a designation for the designation. I'm gonna go ahead and choose, uh, head. Let's go with Red, Mr Red. Let's he'd done he done save the home page and let's just take a look and see what this looks like at the moment. Let's grow old way down here and check it out. We have Bruce Wayne's cybersecurity manager. All right, so the text is doesn't look all that legible. So let's go ahead and make a slight change to the text. Click on it. It's in here. Let's go to our Inc Person edits. All right, so let's come down here to style in and we're looking for is going to be the about call of the buyer. Right? So we're gonna go ahead and choose whites. So it's actually a lot more eligible White if if If. All right and the name color as well, let's go ahead and choose. Don't want to be white as well, just to make it more readable. So we have whites. I came all right, Let's go ahead and he'd done. He done. He'd save the home page, and I was good to view the page. Let's see what this looks like. Let's cool down. Okay, that's Bruce Wayne school down. Okay, this looks much better right now. As you can see, Bruce, win seven. Security manager to shut by and then we have a link to Twitter. Now, this is the image hopefully effects that we did. You know, we made the overlay to be blue. The culture of blue and then the pesty off nine. So whenever anyone drags their mouse over the image, it kind of changes. You can see in the background the changes, and it's ah, looks OK. Now, let's go ahead and add the remaining speakers. And to do this, I'm gonna headed my homepage once again. Come down here at it. Now, what I'm gonna do here is very, very simple. I'm gonna hit duplicates, duplicates, and then I'm gonna drag this in person to the second column, duplicate this one once again, drag to the third and then finally duplicate the last one drug. And let's dump that right here as well. So all I'm gonna do right now would be to change the individual images as well as their designations for each of the many three speakers. All right, well, come back and is against. See, I've read it. Three additional speakers. We have Suresh Anka, Carlos Ortega and Jessica Jones. Let's go ahead and he'd done save home page. And now let's take a look at what we have. Let's view the page. Let's go all the way down here and there you go. Fallout. We have Bruce Wayne to some of security manager. So Russia and Cardy, Hacker, Supreme or coastal, Tegal, the malware expert. And Jessica Jones, the fishing expert. What an incredible lineup off experts. We're gonna make a few changes right now. First of all, the ultimate make minutes because more bold, it's kind of light right now. And then. Second Unit is that the images for Bruce Wayne and Jessica Jones are right up the edge off screen, so we don't want that border at some pattern. Let's go ahead and make those changes. It's good Teoh edit. And then from here, I'm gonna go to the site. Origin headline. Let's edit it and we're gonna go ahead and change the theme fonts. We're going to go old way to Monserrat, Aziz Usual And let's go with what was it now? 800 Monsour at 800? No, I he done he done. And then for the rule, we're gonna go ahead and add it to low attributes. All right, so we really have your speakers. That's good. Let's come down to lay out. This is what we want. So you can see right now that we've stretched it out because we want to make the entire background black. So let's add some padding. So right, I'm gonna go with 50 and then left. I'm gonna go with 50 as well. Let's remove the one for the top and bottom. All right, let's go ahead and he'd done. He had saved the home page. Let's view the page and let's see what we have. If there's any change, and as you can see, there is still no change, even do, if at some patterns, what's happening. Well, if I go back to the vole, I'm going to show you why were knots independent if I would like to lay out. But we have the ruling. How do we have full with stretched? What this means is what stretch here means is that it will ignore any patterns that are available. But if we chose full with stretched padded, this will take into consideration. Any pattern at the May have added, Let's go ahead and choose this one. Instead, he done save the home page. Now let's go back and view the page and see what we have. Let's cool old way down and there you go. We now have pattern. This looks so much better Let's hit the life that it'll make sure this looks descend on our table device. Let's screw old weight down and okay. Not bad at all. That looks good. Let's go to mobile view School old way down and Ah, There you go. Not bad. Add all. All right, so there you have it. We have successfully added Ah Mitt to speak as row. Think of a watching. I will see you in the next class. 17. Creating the Pricing Table: All right, So let's move on in the previous video with successfully created the middle speakers section. Now, we're gonna go ahead and create a price since section. Of course, this conference is not gonna be free, so we're gonna have three different kinds of tickets. Will have the regular tickets will have to be prior to tickets, and then we'll also have the V i p tickets. So we're gonna do is we're going to create a very similar structure to what we have in here . We have a headline, but instead of minutes, because it will be pricing and then we're gonna have a table specifically specifically for the price. And so here's exactly what we're going to do. We're gonna go ahead now on heat Edit home page. All right, let's jump down in here. Let's go ahead and add in Euro and we're gonna make this 100%. That's insert that little. All right, so the first thing we're gonna had here would be ah, headline, would it? Let's track this of here. Settelen site origin headline. Okay. And then we're gonna go ahead now and add a second widgets, which would be wait for it the set Origin price stable which it This is what we need. So I'm gonna go ahead now and add that one. So we now have a headline and we have a price table. Let's go ahead and edit. The headline will Quick the text will be price in price in the color for now. Let's make it. Ah, black Oh, adult school down Theme phones. Let's go ahead and choose Monserrat 800 as usual. Monserrat What's was it? 808 100 17 800. Okay. And of course, the divider. We're gonna go ahead and remove the to fight and make that none. All right. What's he done now for the price table? Check this out. I'm gonna go ahead now and he hit it. It. So here's we're gonna do okay in your columns. This is where you can add the individual price in. And then after adding the columns will now have to add the features. So just follow what I'm gonna do here. I'm gonna had click on add right now. So we have the first column. I'm gonna click on the arrow right here to edit this column now for the title in here is gonna be vague alot All right, this is a big lot 16. Now, let's do this. Let's choose an image. Let's go ahead and eat Image. Search someone typing seats. Am I gonna search for an image we can use? Okay, so we have this image, I'm gonna go ahead and choose this one. Little quick click. OK, download in. Come on. All right. So we have that image. Good. Now we have the price. So in him going to go ahead now on tap into Della sine 19 9 and then for the book in text will hit by and then for the boat in your oval will just add hash tag as a placeholder. So we have successfully created the forced kind off ticket, which is the regular ticket, which is not mandalas. Now we can add features like, what will democratic it get you right? Celeste, heat add again. Click on add for the first feature. Lets clicked it down a button right here and then for the text. I'm gonna go ahead now and add the very first features that would be lunch. That's the very first future you're gonna have access to lunch click on Add a gain for the second future and then I'm going to say, uh, free access to two workshops life. Let's close that. And then the next fish I'm gonna add would be Well, they should actually have been the very 1st 1 that will be a regular citizen Pleasure. Seven. Regular. Ah sits in it. What school down. Let's just close that one. All right, so let's drag with a lesson to the very top. That's what we need. Little a sitting launch free access to two workshops. All right, let's go ahead and he'd done Let's save the home page. And now let's see what we have. Don't so fall its view The page. I'm going to school all the way down here, and that's what we have. OK, Price and regular isn't as $9. That's the image. And now these are the features, and then we have the buy button as well. So what I'm gonna do now is I'm gonna create to Mawr are tickets. I'm gonna create one for the priority seating and an Al Qaeda want for the V. I. P as well already says it can see and acquitted two more tickets. We have the priority and then we have the I. P Pretty has four main features. Pretty seat in large Indiana for access to four workshops and in free access to digital materials and slides. It's 209 U. S. Dollars. And then finally the V i p. The V I. P is 409 U. S. Dollars, and it has all of the pretty benefits you have an after party invited and free access to all the walk shops. So let's go ahead and heat done. Let's say the home page. And now let's take a look at what we have. Let's view the page school down and there you go. Check that out. Price in Awesome Awesome. Awesome, Right? So we have regular prayer. It's E V I. P, and then we have the images for them. And then we also have features Nicholas eating launch factors to workshops. We have to buy buttons as well, breaking so right now that the second column, which is one for priority, is taller than the regular column and every I p columns of this doesn't look neat. So what we can do is we can go back to the back end. Let's do this school old way back. Go to a table, Click edit and I for me. I'm going to scroll down here and when you see equalized role heights, what this does is it will ensure that all the columns off the same height. So let's go ahead and take that button. But what I also want to do is to change the head. Okelo. Let's go with Black for the head of Kahlo and then for the bottom color itself, which is the buy now button. Let's go ahead and choose misters Red. I was just read. Let's heat done. Let's save the home page. Now let's view the page. That's cool down. Let's see what that looks like. Nice. Everything is now off the same height are buy, buttons are now in red, and the header is now in black as well. Pretty awesome. However, there is one final final thing me to do, and that is to add attribute I D to the vote. Let's come down here. Click on Edit Vole and then for the attributes. Let's do this for the I. D. I'm gonna type in Vaux Dash I sin Let's hit Done. Let's save the home page. Now let's view the page once again, make sure nothing is broken. Okay, let's go ahead and hit the life a little. Make sure looks good on responsive devices as well. Okay, let's hit the table view. Let's see how the table looks like and Ah. Okay. Well, that's not bad, huh? Well, they do have some some spacing here, but that's not bad at all. Sorry. I'm just close this. All right, so this isn't too bad. This looks OK. It's decent. Let's check out the one for the phone. And Ah, that's not bad at all. Not bad. Add. All right, So thank you for watching. I will see you in a next class. 18. Adding the FAQs Section: welcome back. The very next section we're gonna create would be the F A cues section. Basically, most websites like these that's advertised some sort of conference or an event will have an ethic used section because people would want to find out things like, Ah, the tickets refund the bull. Can I buy it to get for someone? Els Things like that. Will the event be livestreamed? So we're gonna do next would be to create an F accused section just underneath the price and section. Wow, this looks terrible. I'm just refresh this page. All right, this is expected. All right, So we're gonna creates an epic use section just beneath the price and section. And to do this, we're going to make use off to regions, will have a headline, which would be if accused and then we'll have an accordion widget. So we're gonna create a very similar structure to this one way. Ta. Where we had the text block on the headline. Let's go ahead and duplicate this road right here. Duplicate, entire. Go. And then I'm going to drag the duplicates. Let's drag it down Old way down. Let's go down right here. Okay, cool. Now let's go ahead and edit first headline here, which is going to be ever accuse it. Done. Now we don't need the text Editores. I'm gonna go ahead and delete this widget. Now let's go ahead and add a new reject into that world and whichever looking for here is going to be the accordion, which it decide. Origin. Accordion widget. Lets go ahead and insert that That's cool down. Now Let's go ahead now and edit the accordion, all right, so we don't need to add any title in here because we already have the headland which say's f accused we're going to do There will be to add panels. It's Let's click on add right here. Now, the very first item here, I'm going to click on the drop down arrow. So the title here would be the question. So the very first time going typing here would be are the tickets refund a bull, but a question mark and then for the text. I'm just gonna go ahead now and paste some text already copied previously, let's just paste that. All right, so this is gonna be the answer to this question of the tickets refundable. Let's cool down. Right. So in here you have the initial state. Will the person see this opened automatically over. They have to click on the button to expand it. I'll show you in just a second. What I'm gonna do here. I'm gonna keep this open. But let's get this close. Let's get disclosed just to give an example of what it look like. Let's he'd done Let's heat save the home page. Why not go ahead and view the page so I can show you how this would look like? Let's call all the way down here. All right, so now you can see we have the f A cues. And if I click in here right now, you can see that this is the answer to this question. Other to get refundable. So now let's go ahead and add a few more questions. Let's go back to edit the home page Click school back down here. Edited the accordion. All right, I'm gonna go ahead now and just duplicate this particular question. I'm going to expand it now and in here, I'm going to change this to Will the event be live? Streamed? All right, let's scroll down here, and what I'm gonna do here is I'm gonna keep this closed, just like the 1st 1 However, for the 1st 1 I'm actually gonna go ahead and open this. I'm gonna keep this open. All right, Now, let's just call down here to design. Let's make some changes to design. So in here you can change the headings. For example, you can change the background call off your head in. You can change the types of caller things like that. You can have some borders and infinite panels themselves. You can choose the background call or change the phone call about the color and so on and so forth. Anyway, let's he'd done Let's save the home page once again. And now let's see how this is gonna look like Let's schooled way down here. All right, F accused. And now you can see we have two questions and by default, ignore what you're seeing right here. You can see that the price and section is kind of out of order, but that happens sometimes with Google chrome. So just ignore that over here right now. You can see that we have the at the tickets refundable section opened by default. And then for them to see the answer to this question, they will have to click in here. And then you can see right now that the answer to all the event the left streamed has not been revealed. So I'm gonna post the video here, and I'm gonna add to be more questions. All right, will come back and is against See, I have added a few more questions, which is Ah, can I buy a ticket for someone? Els, that they're special discounts. And can you recommend accommodation options? Let's go ahead and he'd done Let's save the home page. Let's go ahead and view the page and see what is looks like. Let's gold way down here and OK f accuse. This looks decent. Not bad at all. However, I would like to kind of make this a bit less wide. Make it a bit more novel. Kind of like what we have over here with the text block. Okay, so let's go ahead and make some changes. Let's edit the home page. Let's call all the way down here. Let's go ahead now and edit the role and let's jump down to attributes and do this right now. Let's just add Vole fax will, if accuse, Let's at that one now for the layout. Let's do this pat in. Once again, we're gonna go ahead and add 300. Unless you moved one for bottom. We move the one, but it's up. So we have 300 pattern left threat. A pad invites. Let's hit Done. Save the home page. Let's feel the page school old way down here and okay, this looks much better. Actual underst refresh this page once again. Okay, this is exactly how it should look like. And this is fine. I like this. I like this a lot. Let's make sure this looks good on tablets and mobile devices. All right, so let's check out tablet, first of all, and OK, so you can see once again that we do have an issue right now, the F A Q station looks horrible for Tibet as well. From the bull devices, Well, it's gonna look even even worse. So we have to do exactly what we did with the text at it all. We'll have to come back here at a low, go back to the layout and then for mobile. We have to make sure the oldest set to zero. Right? Let's save. He'd done. Let's updates. All right. So always make sure you do that because it's easy for you to forget that. Oh, wait a minute. There were different kinds of use for the Dexter for the table it. So you always want to make use of the life a little and take a look at how your website it looked like on a tib lit and on a mobile device. All right, so this looks much better right now. If accuse looks better changed, too. Mobile phone. And there you go. That looks much, much better. All right, so there you have it. Thank you so much for watching the video with Added the F accused section. If you have any questions about this, please to let me know. Think of fortune and I will see you the next class 19. Creating the 2 Column Layout: welcome back. And now the very final section we're going to add to a website will be the contact or the location role, where will basically provide a Google Maps location for where the event will be held and then will also provide some text indicates in an email address or phone number, which anyone can use to contact us. And they will also add some social media likens as well. So another. To do this, we're gonna have to create a special kind of role, which we haven't created yet, and this will be a road that's divided into two separate columns. So let's go ahead and do this. Let's add a role. And now in here, you can see that by default. Evil layout to set to two, and we want this. We want to have to separate columns. The very first column on the Left will have the Google Maps location and then on the light will have the text indicates in the full number, the email address and then links to social media profiles. Want that? However, what we're gonna do is we're gonna make the very first column wider than the second column because it's gonna content a map and the map is just gonna be bigger than the techs were gonna add. So in here you have the ability to change the ratio. This is a future side. Urgent has. So if you go with, say, for example, try on his example. You can see that the very 1st 2 column, where Whitehall will be 86.6% and the very second will be that in 0.4. But this is the kind of extreme well I'm gonna go with will be thirds thirds itself. In fact, this is even still a little bit of an extreme. I don't like 75% 5%. So let's try. Let's go with Golden sold Golden has and this is a bit better. 16.8 still 58.2. But let's try one more air gun now. Enemy. If you're not happy with the ratios, you can do this manually. OK, just come in here and just drag. Do you have content? So this is what I'm looking for, 66% to 34%. I think this is fine. Let's go ahead now and add our tributes so this will be role. Let's go with full contact instead, though contact. Let's insert that. Let's go ahead now and save the home page and they have it. So now we have created, although with two columns one being 66% in length while the other being 34% and have also added, although I d so Germany next class where I'll show you how to add your Google maps. 20. Adding Google Maps: All right is lemon. I'll show you how to add Google maps to your website Now, in here, where we have the very first column, I'm gonna go ahead and add a new widgets. Now, by default, you do have the side urging Google maps which it which you can click in and you can use it . If your school down here and click on edit, you can actually do some pretty cool stuff with this widgets. You can add your location in here where you have the map center. You can choose from different kinds of settings, such as an interactive imagery, a static image you can choose to hide some level. You have access to different cool stuff. You can add markers, styles, things like that. The problem, though we doing it this way, is the fact that you're going to need an A P I key another for this particular which it to function without the key, the which it will not function. Maybe click on a p a Q. Eight. Here you'll be taken to this page where you can gets your A P I key, but it does appear to be kind of tricky. I have tried a few times to get the key, and I couldn't. Plus, it doesn't. Looks like they're some price and involved right now with Google Maps and not entirely show . Anyway, if you have an FBI key, then by all means, you can use the key. If you don't, there is an easier way off embedding your map, which I'm gonna show you how to do. So right now, all you have to do is to go to Google Maps. The actual site itself, maps that google dot com that's going there and are in here. I'm simply gonna go ahead now and search for the Amanda Lay Convention Center convention Ah , center in Las Vegas. So Mandalay Bay conventions at the South Las Vegas. This will be the location for the event and not from here. I'm gonna go ahead now and he's search. Okay, We found it. Actually, I'm gonna hit the book of many right here. He put the book a menu and then you have the option of choosing the kind of map you want. You can go with the default map. You can go the satellites. You could go with the terrain. Anyone? Anyone you want? I'm going to stick with the satellite. I kind of like this particular Kendall off of you. Now, I'm gonna come over here and I'm gonna click on share or embed map. You click in there enough for making click on embed a map. You can choose different sizes from medium small large. You can also go the custom size. I'm going to stick with medium. And I would just go ahead and copy the HTML. Let's copy that. Now let's go back to a website. Let's close this. Let's delete the set origins Google map widget. Go back in here, add a new rejects and is gonna be the custom html budget custom extent mill school all the way back down here. Edit it. And now in him gonna go ahead now and peace to the code. Now what I'm gonna do, though, is this. I'm gonna change the height from for 50 to 400 and then for the with I'm gonna change from 600 to 100%. What is does it simply means that the mapple compared to fool with off its column, that's what this is going to do. So has he done. Let's save the home page and let's go ahead and view the page and see what we have. It's cooled down and there you have it. Now we have a map looking all nice. I like this. I really like this a lot. So that's how you can embed your Google maps into your side origin lips. I think of Fortune German Next class. We'll we'll go ahead and create address block. 21. Adding the Address Block: All right, Let's go ahead now and add the address Block for location. Let's go ahead and hit. Edit home page. Let's jump over here to the back and let's make sure that the second column here is highlighted. Let's go ahead and choose a very first widgets, which is gonna be the headline hit language, etc. Diligent headline. All right, let's edit this. Let's go ahead and type in contact contact, and that's cool down here. Let's use that thin phones. Once again, we're gonna go with Monserrat 800 as usual, 17 800 front side is going for the five pixels. And of course, we're gonna remove the divider as well because, well, I don't like it, right? None. He done next. We're gonna go ahead and add second rejects, which will be, ah, texted it'll and here, scroll down. Let's hit at it. And now in here, I'm gonna go ahead and paste this text 1/2 the black hat emanating conference will be held in a foreign address. Next. I'm gonna go ahead now and change these two texts and let's do this. I'm gonna go ahead now and add email and I'm gonna say a H ref equals two male, too. Hacker to 45 at gmail dot com and then all typing Hacker 245 at gmail dot com Once again, I'm gonna close this. Now if you're wondering what this is, this is basically a way off creating a hyperlink for your email. So whenever anyone clicks on Hacker to for five regional dot com, it will take them straight to the email client. That's what the mail to code here is full. So you've just Leadsom html. So let's go ahead and changes back to visual. There you have it. Now I'm gonna go ahead and bold the email That's bold that lets you move this dash right here and use the colors instead. Okay, this looks well. I was kid done. Let's save the home page. And now let's take a look at what we have. You the page. Let's cool down. Okay, There you have it. So we have a contact information. The black hat 20. Think of visibly held a different address. This does this email. So if anyone clicks on this link right now, it will take them straight to the client. Their email client as you can see so evil sending to Yahoo or Gmail. These would have gone straight to Gmail or Yahoo, depending on which one was opened. So that's how to create your hyperlink with your mail to order your email address So German Avonex video available. Now conclude this by adding our social media profiles. Thank you for watching. 22. Adding Social Media: already. We're moving on. Next, we're gonna add social media profiles just beneath the address block right here. Let's go ahead and do that. That's added the home page and let's go back. Make sure that this particular role right here is a lighted Let's click on that column so it's alighted. Now let's go back and add Ah, third digit And in this case, it's going to be Where is it? We have the site origin, social media buttons. This is what we're looking for besides origin. So show me the buttons. Let's add that. Let's call back down in here. Click on edit in here. We don't need to add title anymore because it's kind off self exponentially allows people see the Facebook icon on Twitter icon. They already know that this is social media, so we don't need to type in social media for the title. Let's go ahead and add the very 1st 1 slip Network. Not like here is going to be Facebook. And for the largest, we can just live this as the default. Well, that's fine. Let's add the next one click. Add social Network. Let's go with Twitter. Let's close that one Let's add the next one and let's see. What do we go for next? Let's go with Lincoln LinkedIn Page. And then let's add one more. Let's go with, uh, Let's go with YouTube, right? Actually, you know, let's go with Instagram and then we could go YouTube's Let's make it five. Let's make it five. Let's add YouTube as the last one. I think this is kind of like the five big social media accounts. So where do we have YouTube? YouTube is last clean. Let's now go ahead and hit. Done. Let's save the home page and let's see what is looks like view the page. Let's cool down here and voila! Look at that. We have Facebook, Twitter, LinkedIn, instagram and of course, you tube. All right, cool. Now let's go ahead and make some adjustments to how this actually looks like The first I'm gonna do here is to change the background color of this particular our column. So I'm going to do here is I'm gonna click on edit role and let's go to layout. Actually get to design. I'm sorry. Designed back when Coehlo Let's go ahead and choose black. Make it black. It done. And then for the headline, Let's go ahead and change the headline to read, We're going to go with Red, Let's heat done. Let's save the home page. Let's see what it looks like. I'm gonna open his in a new tab for faster access. Let's come in here. Let's take a look. Okay, looks better. Contact. It's in black now Let's go ahead and change the text as well, here to White. And then we'll also change some of the design for our social media icon. So let's quickly do that. Let's jump back down here, Teoh said. It'll click edits in here and then for the design. Let's go ahead and choose the fun color. Two lights make that whites hit Done all right. Last but not least, let's hit the social media buttons widgets. And over here you have the design and layoffs. If you're clicking here, you can actually make some changes. For example, like the icon size you can go with normal, you can go with medium. It's an example. Ah, the alignment. Let's go with center alignment. Ah, the bottom theme. You can also go with flat or wire. So what I want to do here is let's go ahead and choose wire and see how that looks like. So with medium slightly rounded as well at its, um, patting, Let's he'd done save the home page and let's see what it looks like. Let's go back over here. But first a page and see what we have done. OK, not bad at all. This actually looks kind of decent. Not bad at all, because you also have the hover effects as well. And here So this is the Wyatt design. You're more than welcome to try out different kinds of designs as well. You can stick with the atom design and there's also the was a court now the flat design as well. So if you can feel free to play around with his options and you can customize other things like changing the alignment around in the icon size, just play on this options as much as you like. I'm gonna hear done save the homepage once again. And ah, that's pretty much it for the contact roll. There you have it. So if edit successfully, we've successfully added the Google maps and also our contact and address block with the social media icons. So there you have it. Think fortune. I will see you in the next class 23. Introduction to Anchor Links: all right, 11. I'll introduce you to the concept off and coal links Now. So far, so good. We've created lots of different kinds of sections on a webpage with the middle speakers. We have prayers and if accuse and so on now, wouldn't it be wonderful if we had some sort of menu structure where if anyone clicked on, say, pricing, for example in the menu, it will take them straight down to the putt off our page where we have price in? Or if a known click. Don't let's say the F excuse, for example, to take them straight down to this area where we have the F accuse section. Such a concept is referred to as an core links when a user is able to click on a menu item and that action of clicking on that link will take them straight to the specific area. Perpetrate that information is that's what is referred to as an encore link. Here's an example you can see on this webpage. We have two links right here. The very 1st 1 say, is linked to ankle on same page. If I click on this link now, it takes me to the part of the page where you have the specific code for linked to ankle on same page it. Let's go back up and I click on the 2nd 1 link to ankle on another page. If I click on this now, it takes me to the part of the Web page where you have the code for linked to ankle on another page. So this is what was affect you as an ankle link. So we're gonna apply this concept in the next video. We'll will create a menu so germy, then I'll show you how to Kuwait many items using ankle links. 24. Creating the Navigational Menu: All right, let's not proceed and create a menu. Use it. Ankle links. Now, if you remember And if you've been doing this, we have been adding actual ideas to most off all those Stand off with the greed right here . So I click on edit rule, Go to attributes. You can see we have the i d off road dash gallery. Right? So I'm going to go ahead and I'm gonna copy this. I d Let's close this. So what I'm gonna do is I'm gonna jump down to my menus, all right? And we're gonna go ahead now and click on custom links for the link text. I'm gonna hit gallery. That will be the text and it for the UML. I am going to type in hash tag and then row Dash Gala V. This is the ankle link to the gallery section. Let's add that to the menu. Let's save that now. Let's go ahead and view the page. So we have gallery now. If I click on gallery, guess what? It brings me down to the area off a website, but we have the gallery. Let's add one more. Let's come down here to the very next one, which is the layout builder. Let's check the edit. Well, let's see what? After what we added over here. Okay, this is this because section servo dash speakers Awesome. Go back to menus, Good to custom links. Now it's gonna be HVO bash speakers and then all stepping speakers ad That's a menu. Save the menu. Now let's go back and see what we have that's quickened speakers and look at that. It takes so straight down to where we have the speakers. So I'm gonna post the video now, and I'm going to add the remaining and killings for the price in f accuse and then the contact sections well, come back. And as you can see, I have added the ankle links with price and if accused in contact, and I also decide to change the text from small attest to capital letters. I think the menu items look are better this way. Let's go ahead now and see if the menu and let's take a look at what we have. Go to the front page. Okay, now let's check out Price in. Look at that takes the street down to price in. Let's go back up here. Test out The f accused takes us under if accuse. Go back up, Click on contact and it brings us down to the contact section. So there you have it Were successful liquid ated in navigational menu using an callings on our site. Now I want to show you something quickly before I close this video. If you go to customize and from here let's go to the theme set ins and then you go to navigation. Over here you have this option off smooth school. You can see right now by default it is checked. If I own checked this option and then hit publish, then the way the ankle ings will walk will be drastically different. So let's go back. So for me right now, if I clicked on pricing, for example, you can see that instantly. It takes us down to where we have the price in. There is no smooth school from the top to the bottom. Let's try it out with the contact local contact Boom. It takes you straight down to contact. So that's one thing. You should be a veil off. Just in case you saw that option, I prefer the smooth transition. That's why that button day is checked by default. So let's go back to navigation and show that smooth school is enabled. And that's also enable the school to top on mobile devices. Well, let's and cook this one as well. Publish. And ah, there you go. So let's go back. Tested out. More place in small school, down to price in. Let's go back up. Click on contact. Small school down to contact. Awesome. Awesome. Awesome. So that you have it. Thank you for watching If you have any questions as always, feel free to reach out to me. I will see you in the next class. 25. Clean Up: all right, it So it pretty much is done with the functional aspect off all website. But what I want to do now is just to make some slight changes to the design, and this is strictly optional. You can decide to live your side as it is right now. If you've been building along with me all you can decide to go ahead and implement own changes. And you can also go ahead and do your own thing as well. It's all designed. It's all relative. So the first I'm gonna do here is to go to the customize button right here. And I'm going to calm down to my theme settings and let's go to fonts. I'm gonna choose the main form to used other sites. I'm gonna go with Monserrat just a big LeMond said that Let's go with that one. And ah, let's cool down here. See if there's anything I can change in here. All right. For the menu text color. I'm gonna go ahead and change this to Hungary's blue and see what it looks like. Blue. Okay, not bad. Let's go ahead and also changed the menu funds. I'm gonna go ahead and go with Changle. Tengo over. Check Jenga. It was a Changle. I think it's Changle. Yeah, Changle. Not Tango Tango. Okay, not bad. Let's close this out. Let's go to the head out. And then I'm gonna change the background off the very top right here to black like that. Black cool. What's cool? Down to where we have photo. I limit school down here. I'm just click on contact. Go straight down that we have this. I'm gonna go in there and just back on Coehlo to Black as well. Make it black. Right? Will change the text color as well. Two lights. All right. And then I'm gonna go ahead and remove the margin, right? I'm gonna sit down to zero, and there you have it. Ah, the border with I'm going to change it to zero. So there is no bother at all. Let's go ahead and publish. They sense See what we have done. Those far. Okay, So they have it right? Another side looks quite different. He considered Texas changed on Duh. Yeah, I kind of like the monster. What are fund and the future? Looks better right now. Black And those pacing at all Let's go back to the top. Too many items and now in blue. Big like it. So that's pretty much the few design Chinese I'm gonna make to the science. So there you have it. Feel free to implement own changes. You can decide to ignore this change and just leave it as it was. All you can implement your own design. You can change the text call to yellow, purple, pink, whatever you like, whatever you desire, so that you have it some slight changes to use the design taking fortune, and I will see the next last. 26. Pre Built Layouts: before I end up this section on building and one Pedro upside but side origin. I wanted to spend a few minutes to show you one particular feet. Show that you might want to make you soft Whenever you're working with the site, Origin Page pulled a plug in. Now this feature is the layouts feature for him back in fighting if you click on the layouts now, if this is the first time you are accessing this particular functional feature, you would see a important that Cesar enable template to enable people templates or something like that. Click on enable and you will have access to this pre built layouts, which you can use with the plug in. So as an example, the violent I had to create a new page. See, for example, Ah, contact. Ah, page switch to page builder. So vacuum here to layouts. I can come in here and simply insert. Let's say the simple business contacts. I can go ahead, click and sets, and then you have three options. You can insert this template after a temple that it exists on the page before that, simply, or simply replace Commons, I will go with replace comments. Are you sure? Yes. Click again. Then just go ahead and change the page layout from default to fool with He published. And now let's take a look of you the page and voila, just like that. You have this from already built out for you simply by making use off the pre existent template. There you have it. So this is how you can make use off people temples with the site origin. Plug in. Now, if you wanted to make use off a temple that you've built before, So say, for example, if I went back to my home page right here and I wanted to make use off this exact simply template that we've built throughout this particular section, all I would need to do is to go to my new page. And then let's say this. Let's call this page. The about page is an example. You will go to page build out again, you go toe layouts and ever made you go to where you have clone pages, click on clump ages, and then you will see all the existing pages that you currently have. I'm gonna go with the homepage because that's what we want. Click Insert, please. Collins. Are you sure? Yes. Let's go ahead. Change the default layouts to fool with. We moved the page title he'd publish. And just like that, let's view about Paige and voila! It is the exact same front piece that we created a lee up. So that's how to make use off the pre built templates with the set origin page. But the plug and thank you for watching and I will see you in the next video. 27. Conclusion: Well, that's it. You've officially come to the end off this course here on skill share, and I really hope that found it informative, educational, and that you also injured yourself a while taking this course now just to remind you, you can ask a question. If there's anything that you found maybe a bit confusing, simply go down to the committee section and you can post a comment, ask a question, or just simply thank me for creating this course So you can also follow me here on skill share. I do applaud tutorials on what press and cybersecurity on a weekly basis. So I would recommend that you follow me. You're gonna keep track off the new classes that I upload here on skill ship. You can also send me a request on LinkedIn. If you are into that stuff in, just make sure to indicate that you are a student of mine from school share, and I'll be more than happy to accept your invitation to connect on a lengthen. So once again, my name is Alex, and it's been a palatial teaching you discourse. Phil Fritz, you brush through the rest of my courses hair on skill share. And I hope you will enroll in a few more off them. Thank you so much once again and good luck that we showed the very best in whatever it is that you decide to do. And I'll see you next time. But by