Website design – Astra+Elementor

SPEAKER_00 (00:01 – 00:31): Okay, we’re going to do a run-through of getting your website to look like you want. This is just a recommendation, how I suggest you do it. There’s probably hundreds of ways to do this. WordPress has such a dynamic community of developers that can help you make your site look exactly how you want. That said, we have… we recommend you use Astra and Elementor,
SPEAKER_00 (00:33 – 00:47): and I’ll show you how to do that right now. So you start off, you’ll be using, it’ll just be using a standard out-of-the-box theme. So the first thing you want to do is activate the Astra theme.
SPEAKER_00 (00:50 – 01:27): When you customize this, you’ll notice that you can, straight away you can go in, set up your… you can change the header here. So everywhere you can click on the design and change your colors here. I’d actually recommend you start by, when you’re customizing it, start with this global section and start by picking your font. So choose the font you want to use. So we use Poppins, for example. So you want if
SPEAKER_00 (01:28 – 01:46): you’re wrong, poppins on your heading and your body or whatever you choose, obviously. And every time you want to update it, you can change it here. So every time you make a change, you’ll see that it changes it immediately, which is kind of cool.
SPEAKER_00 (01:49 – 02:22): The next step is… oops, sorry. The colors, so it’s a good idea to set up all your main colors here. So, you know, if you want your main color to be brown, and your secondary color to be something like that, and then headings, probably black, text, probably dark gray, and then white. Probably does the job.
SPEAKER_00 (02:25 – 02:36): and then you can change all these colors, obviously. But you can also go in, change your standard buttons.
SPEAKER_00 (02:39 – 02:57): Standard button could be like this for example if you wanted to. I’m going to leave that for now. A bit of fiddling around for your standard colours.
SPEAKER_00 (02:59 – 03:30): With the header you probably want to click on Edit here, which edits the primary header. You can change the background of that to whatever you want. All of these settings can be changed. You can do the same with the footer. I can also put it in here. Actually, I’ll show you something with the… Oops, sorry, I kept jumping out of that.
SPEAKER_00 (03:32 – 03:59): When you edit the footage, the way the theme works is it has three different sections. At the moment, we’ve just got the copyright one, and you can edit. It’s basically got three rows. So for each row, you pick how many columns it’s got. type a layout and you can click the background color. So that for example.
SPEAKER_00 (04:01 – 04:24): And if you wanted another row, you could add that one in and also set that to the same color. If that makes sense. Then, so then in each one of these boxes, you can drop something. So we could, for example, drop our social icons in there.
SPEAKER_00 (04:26 – 04:38): You might have to edit them. Make the icon colors white, for example. And then you could even add, like, a menu or a button here.
SPEAKER_00 (04:40 – 05:05): Note that out of the box, we don’t get all of these… are paid, certain paid elements are not available, but you can always use HTML to insert that information. What else? Yeah, so…
SPEAKER_00 (05:09 – 05:39): It’s actually a button would be a bad example of something you can do without having to pay for it. So back to the header. The header also has the same concept, so you can have a left and a right. So the menu is on the right, title and logo are on the left. If you want to change the color of that, probably easiest from here. Background color, there we go. And publish. So now you have a header and a footer, and you’ve got your fonts like you want it, colors like you want it,
SPEAKER_00 (05:39 – 06:16): and you probably want to put a logo. You do that here from the site identity. You just upload a logo. You should preview your site in mobile mode, in desktop mode. And then you probably want to create your own menu, otherwise I’m not quite sure how it chooses what to put up there. So I’m going to create a main menu and assign it to these three things.
SPEAKER_00 (06:19 – 06:33): And then you can add your own pages. So I’m just the home page and the uncategorised blocks.
SPEAKER_00 (06:35 – 07:02): So there we go. If you go into this mode, you’ll notice that we’re missing the menu icon, even though it’s there. And the way you fix that is you go into this one, click on the mobile version, and then on the off-canvas menu, you can edit…
SPEAKER_00 (07:04 – 07:18): Oh, sorry, you click on the toggle button here, and you can change the toggle button but also the important bit here is you probably need to change that to white so that it’s visible and you can change the icon.
SPEAKER_00 (07:19 – 07:36): When you click on that you can also choose how it toggles out. See, so you can have a that or whatever menu, etc.
SPEAKER_00 (07:44 – 08:04): And now if we go to our site, that’s it. We pretty much have our site in the most basic form. Obviously you’ve got a bit of work to do to make it exactly how you want it.
SPEAKER_00 (08:06 – 08:23): Just notice we probably want to change these, so we go to the footer and we edit our social So it’s a block that you can actually add in different places. So you could go to each one of these and add your own social icons.
SPEAKER_00 (08:25 – 08:48): URLs, sorry. What else do we need? We probably want the header title to be wiped. So let’s edit that. Change the color to… Edit that. Title color to white.
SPEAKER_00 (08:50 – 09:26): What else do we want? Same with the bottom here. Design text color to white. Maybe you want to have a homepage. Let’s create a homepage. Add a new page called Home. OK, this is where I suggest that you use Elementor instead. So what we do for that is we go into Plugins and we activate Elementor.
SPEAKER_00 (09:29 – 09:52): I find that this is a lot better for editing, especially the front page. So we go… Oh, so first of all, go into Settings. reading and we’re going to set our home page to the new homepage page that we created and then edit that.
SPEAKER_00 (09:56 – 10:12): So under here, you should… I’m not sure why that’s not showing up yet. So again, this is like a free version. You probably probably need to do some…
SPEAKER_00 (10:14 – 10:44): you will need to pay for it if you want to use it. Oh, there is an important step here you should do, which is to turn the default colors of Elementor off. I highly recommend that you do that. That way the colors from Astra’s theme is used rather than Elementor’s theme. So back to our page here, Edit with Elementor.
SPEAKER_00 (10:48 – 11:02): What’s great about Elementor is it’s much more structured. So first of all I want to turn off the title and then I’ve got all of these widgets to choose from.
SPEAKER_00 (11:04 – 11:42): The Pro and there’s a few other things down here that you have to pay for but that you’ve got a pretty good choice to start with. All right, so for example, so basically each block here, you work with blocks and so blocks is good to start with a layout. So there’s different pros and cons to using a grid versus a flex. So a grid is a particular shape, whereas a Flexbox is better for…
SPEAKER_00 (11:45 – 12:13): this is all so that you can have your mobile websites look as good as your main site. So, for example, if you were to have this one, and let’s put in some, like a heading here, and a heading here, you would expect that in mobile mode, it’s going to have to go above each other.
SPEAKER_00 (12:18 – 13:03): So that’s where you have to take into consideration what kind of containers you’re using. It’s about fiddling around with these containers to get your flow to work the way you want it to. So the structure menu here is kind of handy for seeing what blocks are available. So if I wanted that first block to have a color, you could set that for example, and then your next one is…
SPEAKER_00 (13:06 – 13:11): I’m just making up stuff here. That’s how it works.