A Better Way to Build WordPress Websites with Gutenberg | Introducing Spectra
Vložit
- čas přidán 27. 04. 2022
- When building a WordPress website if you use Gutenberg Block editor, it can be frustrating due to lack of features and customizability.
We aim to change that and upgrade your WordPress website building experience with Spectra!
Spectra is all you need to build amazing websites with dozens of essential, carefully crafted, customizable blocks and hundreds of templates so you do not have to start from scratch either.
Our mission with Spectra is to help you build fast and modern websites while also being easy enough to use even if you’re a beginner.
In this video we give you a walkthrough of Spectra and how it can help you build fast and beautiful websites easily.
Learn more about Spectra below:
wpspectra.com/spectra-2-0-beta
-------------------------------------------------------------------
✅✅ 👇🏽👇🏽 Here are some of our recommended products 👇🏽👇🏽 ✅✅
✅ Astra - The Most Popular WordPress Theme 👉🏽 bsf.io/astra/
-------------------------------------------------------------------
💘💘 Find out more about us on our website: brainstormforce.com/ 💘💘
💘💘 Subscribe to us for more WordPress tutorials and guides!
czcams.com/users/TheBrain... 💘💘
💘💘 Follow us on our Facebook Page : / brainstormforce 💘💘
💘💘 Follow us on Twitter : / webrainstorm 💘💘
💘💘 We're on GitHub Too : github.com/brainstormforce/ 💘💘
UPDATED VIDEO HERE: czcams.com/video/Jgwrpfkhio0/video.html
Very disappointing. Tried mimicking the tutorial, with my knowledge of elementor, but containers does seem to have problems nesting and it is not as smooth as elementor for sure. Probably because, it is used on the top of Gutenberg.
Just as a reminder: Heading tags should not be used to decide about the size of the text, but to markup the structure of the page content; i.e. H1 is for the page title, h2 for the subtitle and so on. Consequently, H1 shouldn't be listed as an option on this level, since the page title is fixed on the top of the page and there should be always only one title.
Thank you for your suggestion, we will improve this with future updates.
Also, you may find this documentation helpful: wpastra.com/docs/change-site-title-tagline-html-tag/
Elementor is great but Im really impressed with this builder, the Concept and all that you guys have worked hard to develop. Congrats,, cuz im sick of Elementor trying to dominate and weed out the rest. 💌💌💜💜
Thank You! 😊
Elementor is slow and lazy.
whats crazy about this is im reading a year later for 1st time
is i use Elementor everyday practically (??)
and actiually a founding member on Elementors' support forums( founding groups...not sure called now?), but darn i forgot the OFFICIAL TITLE... what evvvv... ha ha..
umm.... i refuse to pay for PREM
i try to only support Open-Source, but we as ghumans...are bombarded with time and pressure
and we have to adjust accordingly.. so ,some projects get set aside ;(
my site is still in development ..this 1 like almost 2 years later because i overextended myself..
just a little insight,,,
Hello & Goodbye
When you disable unused blocks with the toggle does that do anything to speed up the load times? Is there any drawback to keeping all possible blocks enabled?
Hello! I am confused. when there is now released full gutenberg, does it make spectra useles, or does they add more value eachothers? or what I should think about this. My main question is, is spectra relevant still? should I use it. as you can see, I am totally beginner with this stuff. thank you in advice!
Thanks for this tutorial--very helpful!
You're very welcome! Have you seen the updated version? czcams.com/video/Jgwrpfkhio0/video.html
Will be great to see how this competes with Kadence Blocks
Hi, I wonder if I could get some advice about a problem I have had with the Spectra plugin. I have a Wordpress website that I use to showcase my business baking business. I do not have any knowledge of coding. I use the Neve theme with the block editor and Kadence blocks. I do not use many plugins beyond the ones provided by my host Ionos and Wordfence.
My site is pretty simple and until yesterday, my homepage scored 91 in performance at Pingdom speed test, which I think was very good. Yesterday I loaded Spectra onto my site and was experimenting with the blocks on an unpublished page. I did a page speed test and found my homepage was loading much more slowly, its performance dropping to 81. Also, it had gained about 150KB of data. Since the only difference to the site was the Spectra plugin, I disabled it, but the problem persisted. It appears my CSS and JS files are now loading separately. I have traced this change to the File Generation function with the Spectra blocks. Can anyone help me fix this problem? I don't really want to use a caching plugin. I would prefer to go back to the original settings.
My respects! excellent plugin, very useful, thanks!
Glad to hear! 🙂
Excellent!!! Can I create a three column podcast page with spectra and say the simply simple podcasting plugin?
Hi
I installed your template (Astra) and a starter template.
When I go to the site I'm building and choose a product and go to the sales page (it doesn't matter which product, it appears on all sales pages) I have the inscription "+free shipping" next to the price of the product.
I have not defined any definition of free shipping on the site.
On another website I opened (I'm a website builder) I installed the Astra template and the start template and once again I have the same problem, once again "+free shipping" appears on all sales pages of the website.
This has not happened in any template I've worked with.
How can I download the inscription + free shipping from the sales pages on the website?
Avi
Hey. Thanks for presenting Spectra. It's really great.
How do you add a contact form to the hero section with spectra, with another web builder i know how to do it but i cant work this out with Spectra! Please help.
superb!!!! improve it more and extraordinary leads to ultimate plugin for the wordpress planet
Howto import template kit with full included header & footer. I need header from template kit for my website. I can’t import header from template kit please help
Many thanks! It was killing me to make Gutengber work, can not really get it ready after assembling DIVI extra theme~👍👍👍👍👍
You're welcome!
This was very helpful. Now, I just need to find the video that shows how to add the other pages like, about me
page, services page, blog page, etc. Thank you for this :-)
You may create separate pages with the above-mentioned name and then start using it.
Love it. You hit my hot button for sure. I have attempted to build my site with WP using Elementor (free); ASTRA (free); Astra Starter Templates; and Elementor Premium templates several times. I always hit a snag and have to start again. The last video had me activating Spectra but it still used Elementor. Can I build a customized Header, Footer, blog as part of my header menu and separate pages corresponding to certain blog categories? That's my goal. If I want a fresh start should I just delete Elementor & its premium plugins but keep Astra Theme , Starter Templates, and Spectra? Should I delete any existing pages, menus, Headers or Footers? Spectra looks a lot like Elementor's editor so that is great. Any advice would be a big help. Thanks
Thank you so much for your comment!
(1)The best thing would be to first try to build on a testing website to see if it fits your project and not do it on your live website.
If you want to do this by modifying your current website, check this tutorial on how to clone your website (to a testing website for example): czcams.com/video/qe7_RX29CQY/video.html
(2) If you want to build customised headers / footers / and blog, 2 options:
A - Astra FREE : here is one of the latest tutorials that shows the whole process: czcams.com/video/b8L8GKzvgWQ/video.html
B - Astra PRO : Astra 4.5 now comes with a theme builder! czcams.com/video/k6fppThePl4/video.html
Hope it helps!
Amazing tool and well presented. Thanks a bunch!
You are welcome and glad to hear that 🙂
How can I set my header to show on post template? Now it automatically had been added to normal pages but not on post template. Why?
The container block did not work well, it shifts the elements to the right.
I need help to solve this please :(((((
I am struggling with the Z-index on your "plumber" template. I am setting a photo to appear in front of a background below it (just like in the template) however, for me (even in the life version) the photo is behind the background below it. I tried setting the z-index to a higher # than the background below it and previewed the live version yet still this does not fix the issue. Any tips on this?
You may set the z-index by following this documentation: elementor.com/help/how-to-use-z-index-in-elementor/
I want to have a page that has nothing, no navigation, menus or banners to embed in a none wordpress website. Can this do that if so how?
hello, i can't see any of the templates kits... i don't know why...
This is amazing
Thanks for watching!
The template feature doesn't work for me. I'm not sure if you have to buy a subscription to Spectra, or what. But it has an "Insert" button with a lock. When I click on that button, it has me create yet another account with ZipAI - something I don't want to do. There must've been a major update this this video.
Amazing! Good job!
any issues using spectra with blocksy?
I was considering buying astra pro but in the past I hd trouble with the theme (free version) and I am still not lucky - just tried installing a starter template on one of my websites and I keep getting an error message: database missing tables related to spectra. Are you guys not addressing spectra issues because it is free? Then, probably you shouldn't include it in the starter package. Any ideas?
Could you open a ticket from our portal, so we can have closer look at the issue?
This was super helpful, thanks!
Any idea if Spectra Pro will be included with our Astra Pro Lifetime Licenses? Considering how much I have invested already, it would be a good move to include this as an upgrade. Thanks!
Spectra Pro will be available for Growth bundle license-holders next month. Each month we will add new features leading up to an official launch later in the year.
@@BrainstormForce I have the lifetime version of Essential Bundle for Elementor... so I assume that I will have to pay much more, which is too bad. According to your website, I will need to pay another $300 to upgrade to the Growth Bundle to own something that is unproven and slower than GeneratePress Premium. I will decide later, but I have better options compared to your price for this upgrade. Thanks.
Wow. just wow
hi i am new to wordpress and spectra. one quick question. if i install spectra is it possible to use at the same time gutenberg editor for some sections/pages AND spectra for other sections/pages, or is it one of the two?
Spectra is simply an extra set of blocks and functionality built on top of Gutenberg. You can actually mix-and-match Spectra blocks and Gutenberg blocks on a single page if you'd like.
I love it... BUT..... Why is there still no support for tags and category pages. Those are the pages that lack any customization in Wordpress since day one yet they remain so important for bloggers that post a lot of content. It just doesn't match. 20 years later, tags and categories are still basic and Spectra could fill in a HUGE gap here.
I have been trying for over an hour to figure out how to add an image that spans the full width of my screen. Is there any service where you can talk to a spectra professional in person because I'm sure the answer is quite simple? In the video there is a link called "template kits" and the link on my page is called "design library", but there are no templates.
For further help please get in touch with Spectra support team here: wpspectra.com/support/
The container block did not work well, it shifts the elements to the right.
This happens when the full width option is activated 😓
this is great. one of the things that caused me issues was with the 3rd party page builders that updated / changed over time & breaking websites.
Thank you for your comment! And here is the new version of this video: czcams.com/video/Jgwrpfkhio0/video.html
OK, this is a beginner question, but how do I edit the menu for header & footer? I can see them when I update the home page, but cannot see them while on editing page.Thanks
This video may help: czcams.com/video/0AcZFnzcx64/video.htmlsi=vwdIHOSyMihTujBQ&t=21
Thank you very much. I'm subscribed to your channel. Amazing class.
Spectra is very interesting. Please add a scheduler to each container and each block. So you can set the visibility (or invisibility) of each element on a specific day and time.
Thank you very much.
Unfortunately the Plugin creates nearly after every second or third update a mess! This time the plugins changes some Css settings without any announcement!
I do not know if this is the claim of some developers o spectra, but at the moment I need to check every time after a update if a brainforce plugin has broken something on my page.
Not recommended.
same for me, there should be a option where we can choose to automatic update off or on?
I did the same as you, but the background image was not in full screen at the top of the site, what could it be?
Please check the block container width and the page layout settings.
It's great to have such a rich resource. Kudos! Good wishes for further development. 👍
Thank You! GP😊
You should be able to give any element a hover-over effect.
How is Spectra different from Ultimate add-on or Astra? I'm a bit confused :(
Hey James, Astra is the theme the WordPress uses to display the content / Ultimate Add-Ons is an add-on package for page builders like Elementor & Beaver Builder / Spectra is an add-on package for the the core WordPress editor (Gutenberg).
This may help: czcams.com/video/rqJGYkxmRMY/video.html
why did you also install astra theme in addition to the spectra?
Very good question. WordPress requires a theme to display a website. Previously that meant relying solely on theme options to control how pages were displayed, or that meant coding.
Whereas now, Spectra is a visual website builder that allows you to manipulate how the content and elements are displayed without the need to code.
This looks so beautiful and amazing. I want to ask a question.
Can this be applied to WordPress blog posts?
Yes, absolutely. For example with our "Spectra One" block theme you could customize the "Single post" template, and use our "Spectra" plugin to change the layout :)
@@BrainstormForce Thank you for the answer.
I noticed that the CTA button links doesn't have a nofollow tags, how can I make links in the button nofollow?
What about a slider? in the call to action block that describes the issue using a diagram and waits for a chick to initiate a set of responses - like asking for an email address or contact number, etc
You can create a slider by following this: wpspectra.com/docs/slider-block/
Well done!
I have a question. So each time you make a block, add a container and then add the contents into that. Why not skip the double step and just have block and container combined in the first place? Call them containers.
To achieve a clean structure such as default margin padding we used a container and then added the contents into that.
Awesome tutorial. I'm now designing my first web site with Spectra and trying to follow along with your video but a lot of these buttons are not there anymore and have been shifted around. You seriously should consider making an updated how-to video lest you fall into the crevasse so many tutorials have done before by not staying relevant anymore and creating confusion for your would-be future users.
Glad it was helpful! We have release an updated video here: czcams.com/video/Jgwrpfkhio0/video.html
Very impressive! Thank you.
You are welcome and glad to hear that.
Amazing👍👍👍👍👍
so you guys built Elementor for Guetenburglar? oooofa
At 10:47, how do you enlarge the Call-to-Action button so that other functions such as Full Width and Boxed appear on the side to the right?
I don't see that symbol near the arrow inside the box, it's completely missing, I assume it's the plugin, but I updated it and it's not there.
Best Regards, thanks for sharing.
I'm a graphic designer, not a web designer. Is Spectra something you us as a stand-alone tool or can it be used With Elementor? Sorry, if that's a stupid question for the techies here🤣🤣
Hey no stupid questions here! Your question is totally legit. Think of Spectra as tool similar to Elementor, but using the core WordPress blocks (also called Gutenberg).
So while technically you could have a website with some pages using Elementor and some pages using Spectra, it's better to choose just one.
This way your website speed will be better optimised.
And if you are concerned about speed, this is really the focus of Astra (theme) and Spectra (widgets / blocks).
Thanks for the video.
I hope to seek an advanced photo gallery option available in the feature.
where are the the presets? I dont see them and am following your video exactly.
We have an updated video about Spectra here: czcams.com/video/Jgwrpfkhio0/video.html
When will UAG be updated to Spectra? Thanks.
I am stuck with Wordpress. It is just too intimidating and too technical. Help!
Please let us know about the thing you're struggling with.
Your video whips through interesting features--but presupposes the user is able to stably find him/herself on a screen that is laid out with the menu features that you display. For me, that's the killer. Maybe I need something more like an old-fashioned manual. I've recently installed spectra in connection with newly getting dreamhost on wordpress. One minute, i can sort of follow along with your video, then the next thing I'm kicked somewhere else, and can't find an "undo" or get back the screen with the menu items along the left or right of your display.. And there are other gaps in what the video presents, such as how do i know or define what happens when the viewer of a page clicks on a button you make? In days when I was more up-to-date, I worked with Visual Basic. There, if you put in a clickable button, you could explicitly see and control where it took you. Does your videa assume we already that know that part somehow?
Thank you for your comment, and sorry to hear you are having trouble following along that video.
A more in depth video is planned in the future.
Thank you again for watching.
When it comes to tech topics it is rare that you will find a definitive resource for accomplishing your unique set of goals. It is all layers of complexity on top of one another.
I would suggest seeking out a WordPress 101 type of guide or video that doesn't get into anything fancier than a default template like "Creating a blog using Twenty Twenty-One and Gutenberg", or something like that.
It's amazing but surely it needs more improvement.
I want to see how to convert elementor website to this one.
Take note of what you used from elementor. Uninstall the plugin and recreate those sections or elements. What problems do you think doing this will cause your page?
😊👍
😀
After a lot of testing, sad to say, I am very disappointed with the new Spectra version. Functionality from the old version is missing and almost anything I test has some issue. The container block doesn't take the default value for inner width, has no ability to have columns within a container, so difficult to adjust content alignment when several blocks are nested, flex box settings barely work, just to name a few. I have tested with a default WP theme. I've indicated the issue with the inner default width to the support and after a lot of back-and-forth emails with the support, they told me that I have to go to Spectra Settings and re-enter the value that is already there, in order to make it work, because apparently, that was a placeholder, not actual value. And didn't show any intention to fix this in the future. I am over my head with this. And there are a lot of other issues like this. The UAG blocks were one of the best, most intuitive, easy-to-use blocks for Gutenberg, and I've tested a lot of block libraries. Unfortunately, I can't say that for the new version.
How to remove space between two containers in spectra
Do you want to remove space vertically or horizontally?
@@BrainstormForce horizontally
PLEASE NOTE: Heading tags have SEO implications, so don't just think of tags in terms of visual styling, but as how Google bots (et al) see them. For instance, it's generally not a good idea to have TWO H1 tags on a page...better to use a lesser heading unless it's a title page and then style the font size separately. Am I articulating that clearly?
#MyWordPressGuy
As an expert what would you recommend as your MOST fav plugin for media management and file management please?
Guitarist with Boss pedals ;-)
Thank you 🙂
Difficult to find the place in the video where you start with an existing website. Maybe Spectra is easy, but the video structure is not
Sorry to hear that. We have an updated tutorial. Hoping this will work for you: czcams.com/video/Jgwrpfkhio0/video.html
Do spectra support WCAG2.1AA guidelines? How accessible a page can be created using Spectra?
Not responsive for mobile
😶❤️
This plugin is SO buggy! It installed automatically with an Astra template and now I have to start from scratch. Terrible.
You are missing the steps, or what you say is not what is shown on the site, frustrating.
Sorry for that. Here is a newer version of this tutorial: czcams.com/video/Jgwrpfkhio0/video.html
Getting rid of elementor. I’m going to try to pull it from all of my sites. Not worth what they’re asking now after the huge price increase. Plus wordpress is trying to make page builders obsolete. Good thing cause too many plugins and themes trying to prey on novice web developers that aren’t rich like them.
Qué comes para ser tan inteligente? eres vegetariano? yo me enfermé siendo vegana... ahora soy flexitariana, pero prefiero comer pescado que carne
Good information, BUT YOU TALK ENTIRELY TOOOOOOO FAASSSSSST....my head hurts trying to hear 1/2 of what you are saying. Please take a breath.
Thank you for your feedback!
bud... your plugins don't work with each other, what a waste of money
Sorry to hear you are having issues with our plugins. Which specific plugins are you referring to?
This video is way outdated!
We have an updated tutorial. Hoping this will work for you: czcams.com/video/Jgwrpfkhio0/video.html
Please add a module *popup* . So that you can add it to the buttons: call us, orders!!