Up next in 10
Spectra - FREE WordPress Gutenberg Page Builder Plugin (Review)
3K views
Jan 24, 2024
In this video review, viewers will gain insights into the Spectra, a free WordPress Gutenberg page builder plugin. Released in 2023, the content provides a comprehensive overview of the plugin's features and functionalities, offering practical insights for WordPress users looking to enhance their website building experience. Whether you're a blogger, business owner, or website administrator, this review guides you through the capabilities of Spectra, providing valuable information on how to leverage this free Gutenberg page builder for your WordPress site. Discover the strengths and potential limitations of Spectra to make informed decisions about incorporating it into your WordPress website development workflow.
View Video Transcript
0:00
Hi everyone welcome to keytoblogging and in this video I will review the Spectra page
0:04
builder plugin which is based on Gutenberg and you can easily create a responsive WordPress
0:08
website using this. So it is a very lightweight plugin and here you will get a lot of blocks like here you
0:16
will get 28 blocks to build your website and you can use like flexbox container and you
0:22
can use the one click block reset or you can copy paste styles to fast track your design
0:28
process and here you can also get the typography and color supports with this page builder
0:33
So let's check what are the features in details. So let me just install this plugin in WordPress
0:40
So what I can do I will go to WordPress dashboard and I will go to the plugin section here and
0:46
I will click on add new here and here I will search for Spectra
0:53
And by the way if you found this video helpful then make sure to hit the like button
0:58
So let me just install this plugin and let's activate this plugin
1:02
Okay now the Spectra plugin is installed let me just show you the website first
1:06
So this is a complete new installation of WordPress and there is no design added in
1:11
this website so far. So let's start designing the website using the Spectra plugin
1:17
So let me just show you the blocks that we will get in this plugin. So here you will get the container so this is just like a flex box and you can use different
1:25
container or different sections and create a amazing WordPress website and here you will
1:31
get headings with additional options and here you will get images, buttons, info box, call
1:36
to action, block codes and here we will also get some SEO features like FAQ schema, how
1:42
to schema, review schema and you can also add table of content within one click and
1:49
here you can integrate forms with your website and here you can add social share buttons
1:54
testimonials or you can add different post counter or different modal post carousels
2:00
So let's explore each and every blocks. Let me just first check the settings that comes with this plugin
2:07
So here you can set the default content width and here you can set the content padding
2:12
element gap, element editor spacing and here you can enable the copy paste style option
2:18
and you can also enable the automatic block recovery option. So let's enable this one
2:24
Now let's click on asset generation and the asset will be generated in separate CSS and
2:30
JS file. So that's why it is the file generation is on and you can also regenerate assets if you
2:36
are getting any difficulties or if you are having problem, then always regenerate the
2:40
asset to fix your problem. Now let's click on the template here and the template button is enabled and here the version
2:47
control and here you can enable beta, but I don't recommend to enable beta here
2:52
Now let's click on performance and here you can see load Google font locally
2:56
So you can load all the Google fonts locally in your server and you can also preload that
3:02
local font so that it will load the font faster in mobile or desktop devices
3:08
Now let's click on the block setting here and here you can enable recapture with your
3:12
website and there are coming soon page also. If you are designing a new website, then you can enable a coming soon mode on your website
3:22
So let's go to a page here and let's create a homepage first
3:27
So I will name it like home and let's click on the Astra button here and here you can
3:33
choose the layout. So here I will choose the full width layout and here you can also enable or disable sidebar
3:40
here and you can also disable header or footer if you want
3:45
And there are some additional options so you can enable transparent header if you want
3:50
So I don't want that. So let's design the homepage. So I will click on the plus icon here and let's browse all the blocks that will get
3:59
in this Spectra plugin and as you can see container heading image and here you can see
4:04
all the blocks here. So let's enable the container here. I will click on here and as you can see that here you will get different layouts
4:12
So you can add a single layout with 100% or you can add two layout with 50-50%
4:18
So let me just select this one and as you can see that the two block is added
4:23
So in the first block you can add a heading so you can simply search for heading
4:27
So by default we get heading with WordPress or you can also add the heading through Spectra plugin
4:33
So in Spectra you will get more options in heading. So let me just add the heading like welcome to our website and let's add a subheading here
4:47
So what I can do is I will click on insert after and let me just click on plus one
4:55
Let's click on heading and let me just change the heading style and let's change it to something
5:03
like H4 or I can change it to a paragraph and I can add some paragraph here
5:19
Okay I have added a heading and a paragraph here. Now let's click on the heading here and let's decrease the spacing from the bottom
5:26
So what I can do is I will click on the style here and here as you can see that here you
5:31
can change the typography, you can change the font family here, you can change the font
5:36
size, font width and here you can change line height, line spacing and you can also change
5:42
the text color to classic or gradient. So let's keep it as classic and you can add text shadow here
5:49
So we are going to use the spacing option here. So let's keep the bottom margin to something like five pixel and let's add the top margin
6:00
to five pixel and let's select the paragraph here and in the same spacing let's add a negative
6:08
margin of minus 10 pixels. So I will decrease the margin from here
6:15
Now let's add an image in the right section. So I will click on the plus icon and let's search for image and I will choose the image
6:23
from the spectra plugin. Now let's upload an image. So let me just find the image here
6:31
So let me just find this one. Let me just use this image
6:36
So I will simply just save this image. Now let's upload that image from here. Okay
6:46
Now let's select the paragraph here and let me just increase the size of this paragraph
6:52
So I will click on the heading here. Let's click on typography and let's increase the font size a little bit
7:03
26 pixel. Let's select the heading and let's increase the heading size here
7:10
45 pixel and you can also adjust the text size according to your devices
7:17
Like you can change the mobile size and desktop size. So let me just select the tablet here and I can adjust the tablet heading font size
7:29
here like that. And I will select the paragraph and I will decrease the size in tablet
7:36
Now let's click on the mobile here. I will click on the typography here and I can decrease the font size in mobile
7:44
Now let's click on here and let's select the spacing option here and let's add the top
7:51
margin to something like minus 20 pixel. Now select the heading here and I can just change the spacing
8:00
So I will add a bottom spacing. So I will set it like zero or I can add a negative spacing here like 30 pixel
8:11
Now let's close this one. Let's select the whole container here and here you can set different preset
8:18
So let's click on the container here and you can set it as box container or full width
8:24
container and you can also set the container box width and you can also set the overflow
8:30
to hidden or auto. So I will click on visible. Now let's select the flex property
8:36
So by default it is set to column. You can set it to as row if you want to display it side by side and you can also reverse the
8:45
order in mobile. So by default the right section will show at the top and the heading will show at the bottom
8:52
So let's select the desktop here. Now let's add a background. So to add a background, let's click on style here
9:00
Now let's click on background and let's choose a background color from here
9:05
So I will select a color like this. So this color is looking good
9:13
And I can just adjust the opacity of this color. Now click on the spacing here and let's add a padding from the top
9:23
So let's add the padding. So let me just increase it to something like 50 pixel and let's add the
9:33
So we have to uncheck this button and let's select the right to zero and let's set it
9:40
to zero. Now let's change it to 100 pixel and set the top to 100 pixel. Okay
9:49
Now our hero section is added. Now let's click on save draft here and let me just preview in a new tab
9:56
So as you can see, our hero section is ready. So you can add a button here
10:01
So let me just quickly do that. So I will click on insert after
10:06
So I will click on plus search for a button and I will select the button here and by default
10:13
is set to two buttons. So you can select one button and remove one button from here and I can add the button
10:20
like subscribe and let's select this one here and I can set it as left align. Okay
10:32
Now our button is added. So here you can change the spacing here
10:37
So let's set the bottom padding to zero and top padding to zero and let's select this
10:45
one and top padding to zero and bottom padding to zero. Now it is looking good
10:52
Let's click on save draft and let's preview this in a new tab. So as you can see, we have created the hero section using the spectra plugin and in the
10:59
same way you can create the entire website. And if you don't want to create it from scratch, then you can use the template kit feature
11:07
So I will click on the template kit here and here you can import an entire page to your
11:12
WordPress website or you can use the patterns here and here you will get different options
11:17
like you can import some about section here, you can import contact section like that
11:22
You can import some FAQ section or you can import an entire hero section and in the same
11:28
way you will get the wireframe features. Here you can get different wireframes so you can easily create a website using this templates
11:37
So let me just close this and I will show you some different blocks here
11:41
So let's select this block like contents timeline and here you can add a content timeline like this
11:49
Let me just add some more blocks here and here you can add a form like this
11:54
Let me just click on form here and here you can create a simple contact form or newsletter form
12:00
So let's click on contact form here and as you can see the contact form is added to our website
12:06
So let's click on plus here and let's add a FAQ section
12:10
So I will click on here and as you can see the FAQ section is added
12:15
So let's click on the plus icon here and you can add more FAQ question like that
12:20
So I hope you got the idea how this Spectra plugins work
12:24
With Spectra plugin you can easily create a responsive website and get amazing speed
12:29
in PageSpeed Insights. So if you have any doubt regarding this Spectra plugin then you can ask me in the comment
12:35
section and if you found this video helpful then make sure to hit the like button and
12:40
all the links of this Spectra plugin will be given in the description
12:44
So you can check that out and test it in your website and I will see you in the next video
12:49
Thank you
#Skins
# Themes & Wallpapers