OR Day 20: Understanding Page Builders Block Editor Part 3: Spectra
Using Spectra
The reason we want to use Spectra, and not just the block editor by itself, is that it provides many more settings for customization, so it makes it easy to style your pages more creatively.
Most likely, if you chose the block editor, Astra installed Spectra for you. But if not, head over to Plugins > Add New Plugin > Install and Activate.
When you open up a page in the block editor by clicking Edit, you’ll see in Blocks the Spectra blocks at the top.
Containers
Spectra’s containers offer just about everything you need to create more complex designs with no code. The container is a far superior version of the block editor’s Cover.
General
Under Container Type, you can adjust the width and set a minimum height.
Under Layout, you can choose Flex for the ability to change the placement of blocks within the container more easily or Grid to organize multiple blocks in more fixed rows and columns.
If you choose Flex, you can change the directions of the blocks in the container, putting the picture first on desktop but second on mobile for instance; change their alignment to be at the top, middle or bottom of the container; justify the blocks left, middle, with space in between them, etc.; and more.
Style
You can style the background with colors, gradients, images; add borders or shadows; you can even add shape dividers to the top or bottom of a container; and more.
Other Useful Spectra Blocks
The Info Block is great for promoting services or features, and you can also add icons. The block editor by default does not come with a library of icons.
The Slider, which is essentially a series of Info Boxes, allows you to feature content you prefer, and there are a number of handy settings including the ability to set it to autoplay.
Design Library
If you don’t want to spend too much time trying to create interesting containers or sections yourself, you can click on the button Design Library up top, and insert any of the patterns you like there to get your pages done much faster.
You can also go to Pages to find more layouts and find any design that you liked under Favorites.
Want to Do More With the Block Editor?
Then you should install and activate Spectra, a plugin that adds a lot more options to the block Editor.
Spectra gives you many more widgets to use and customization settings that are the same as in Elementor, and like Astra, it’s optimized for high performance.
Go to Plugins > Add New and search for Spectra. Or go to Dashboard > Astra > Spectra and install and activate from there.
Learn more at Spectra’s website.
GeneratePress
If you’re very serious about building the fastest, best-performing website for the purposes of driving more traffic via SEO AND if you have the budget, I strongly suggest that you invest in premium theme called GeneratePress.
It’s highly reputable because out of the box, it can score 100 on Google’s performance and speed test.
Learn more about GeneratePress here.
Not Seeing Your Edits on the Frontend?
Disabled CDN
If you’re having trouble seeing changes on your website, make sure that the CDN is still disabled until you’re mostly done building the site.
Flush Cache
You might need to clear or flush the cache, and I’ll explain what this means.
When you go to a website for the first time, your browser stores files of the site, so when you visit again, it doesn’t have to download everything each time, which would mean longer loading times.
However, as a result of serving you the old files, the browser may not be showing you the latest version of your website.
So, go to your Dashboard > Managed WordPress in the admin toolbar above, and you’ll see a menu with some settings from your hosting account.
Click “Flush Cache.” That will erase the old, stored files of your website, and then your website will have to download the latest, fresh files of your website with all the changes you’ve recently made.
