OR Days 21 – 25: Learn How to Edit Pages Using the Block Editor & Spectra in 8 Minutes!
To help you understand how to use the most common and important features of the block editor and Spectra, I created a video for you to follow along with to help you practice using the features by copying what I do.
This video actually contains a lot of what I went over in the previous lessons. In fact, since the previous lessons on the block editor contain plenty of instructions, this lesson is shorter and more focused on Spectra.
IMPORTANT: You can navigate this longer video with the chapters, and in fact, you can watch one of the 2-3-minute chapters each day, and then practice for 10 minutes. To get to the start of a chapter, click on the breaks in the video timeline, and I’ve also put the exact start time for the chapters below. Once you finish all 3 chapters, you can click “Complete” for the lesson below.
If you finish these lessons in less than 5 days, that gives you more time to work on page designs and website copy.
Please open up a new page for practice and repeat all my actions, so you can quickly learn where to find the key settings.
Naturally, I can’t cover absolutely everything in one video, so make sure you go through the earlier block editor and Spectra lessons to learn about shape dividers, copying all blocks, and other additional features.
Click here to read the full transcript
0:01 So, I’m going to build out a few containers with Spectra and the block editor, and please follow along. Feel free to pause at any time if you need to, to make sure you keep up, so that you can learn how to use the block editor in Spectra, not just understand it in theory.
0:23 So, let’s start by adding a container to us more options for flexibility in design. So, I’ve added one with three containers inside.
0:35 In each one, I’m going to add an info box and let’s have fun with the container. I’d like to add some color.
0:56 To the background, for example, and I would like to add borders to each of the child containers so that they stand out a bit.
1:10 Let’s give a double border. And then to save the effort, of finding the same setting, I’ll just use copy and paste style.
1:24 then for each of the child containers, I’ve decided to give them different background colors. Why not?
1:36 Let’s give them some interesting gradients. So I gave that one the default gradient that seems to be there. But if you go to advanced, you can choose different colors.
1:47 Let’s just choose something random. my theme colors with Astra. And then same with this one. Let’s give this one Well, let’s give this one an image.
2:02 Why not? Let’s just give a random image. that you can see what that looks like there. let’s add an overlay color so that still allows you to read the text more easily.
2:23 So we’ll add white, but we will some opacity so you can see the image a bit popping out underneath the text.
2:34 There you go. Let’s change the icons to different pictures. Maybe I’m some sort of accountant or consultant who will help people make money in the city.
2:48 I’ve got a nice clipboard. Who knows? Hey, I love this pattern. I’m gonna save it. So we click on the container.
3:00 If I’m having trouble, sometimes I do clicking on things. You can go to your document overview, right? And manage it that way.
3:12 Let me create a pattern. I’m going to call it service boxes and click add. now, if I make a change to it, and I have the same pattern somewhere else, same page, different page, I have to edit the original and then the changes will go everywhere.
3:36 let’s create a new section that’s like a homepage banner. A typical homepage banner with a headline, description, image, message. 3:46 button. But I want to add some spacing, right? So I click on the slash just to add some spacing there.
3:52 Okay, let’s click on container. Let’s choose the typical container a homepage. Let’s add a heading, but let’s choose the spectra heading.
4:09 Because there are some more options with that one. Let’s add a text, which is already there, but let’s add some content.
4:25 Hello, for example, and then let’s add buttons for the call to action.
4:40 And then we’ll add an image, also using Spectra Yeah, library. for the button, we want it all to be in alignment with each other.
4:52 So we’ll have them all like that, but the background, maybe this time we’ll give it some crazy shadow. Why not make it pop?
5:03 I’ve decided that for this child container, I would like color to be different for the text. Why not?
5:19 And then for the overall container, instead I’ll have the picture on the other side. Okay, and I want to make it a certain height that the picture is a little bit taller.
5:46 Now let’s go into the different blocks for Spectra so I can the color of the heading, which is really neat, a gradient.
5:57 That’s not something that’s possible with just a block editor. That can look really cool. I can change the background as well if I want, for example.
6:06 love that default gradient, I guess. And for the buttons with Spectra, you can see that there’s different presets that you can use that might suit your content better.
6:21 you want to add an icon, you can, and then you can put it different places. can style different aspects of the button.
6:32 Why not have some more fun shadow? But lots more options than you would have with just a block editor. Let’s pretend that we really like that.
6:45 We can duplicate that whole container. say we want to have it the top of the page, but at least above the info boxes so we can move the arrow.
6:54 And let’s say later on, underneath all this fun stuff, we want to add some more interactive content.
7:11 Let’s say you have a YouTube channel or Spotify podcasts, or the block editor makes it very easy to add all kinds of media because it was originally created for blogging to share content that way.
7:26 So it connects with a lot of different platforms out there. So you can just put in your URL for your YouTube video, for Spotify, same idea, and they’ll embed it in a way that makes it look really neat and cool.
7:41 So let me add a YouTube video here just for the sake of able to manipulate things on the page. This is a YouTuber I like to watch about Google Ads.
7:54 Let’s say I want to add some spacing between my content. I could use Spacer, as you’ve seen me use, or I could just add spacing with the margin. 8:05 So I could put spacing at the top and the bottom because everything’s so crowded together. Oh, that’s not good enough.
8:10 Let’s make it larger. And then there’s more spacing between the content.
Chapters
- Chapter 1 – 0 to 3:00 – Containers & Background Settings, Info Boxes
- Chapter 2 – 3:00 – 5:46 – Document Overview, Creating a Pattern, Heading, Image, Text, Buttons, Parent & Child Containers
- Chapter 3 – 5:46 – 8:19 – Headings, Buttons, Duplication, Media Embeds, Margins