This is one of the most valuable tutorials I have seen. As a newcomer to website building, this shows a great workflow to follow to not fall into a cobweb of changes all over.
Being able to select the framing of an image and how it displays on desktop vs tablet vs mobile, is super exciting and genius - especially when that image is of a person - and that person should always be the feature of that section. Nicely done Spectra Team! What I love about the Spectra products is that you guys (even in it's early days now) have this well thought out. And not having to have additional products and plugins like Elementor and Beaver Builder (though they are great) installed .. just takes the load off the site and ultimately the overall complexity and potential complications/conflicts that can be caused in the backend, when we add more plugin features. I'm all for streamlining and simplifying the task.
Thank you for this Spectra Tutorial. I bought the Astra Pro and I am trying to understand the Spectra page builder. I am happy that I bought the Astra Pro because with these tutorials I find a good startpoint. Greetings from Germany
Wow. You convinced me that I have to use Spectra Flexbox instead of Elementor. I just inactivated Elementor and deleted all my pages and menus! When you got going you were really flying! A bit fast for a newbie. I am going to start my site again. Hope I can keep up and stop you fast enough. I have one suggestion that would REALLY have made this a lot easier to follow. In your intro you cautioned us how many features are available but not to use too many of them just because they existed. But once you started building it seems that's what you were doing. My suggestion is to show us your finished product FIRST and what each section is for and how many containers each has even though we can't see them. Many lecturers advise a design first complete with colors and text before building and you must have had one. Now I can see why. Then when you start with the first blank container we can see what it will ultimately look like. I was expecting to see 3 columns in 3 colors (without A, B, and C in them!) If I knew the pipe smoker was the end product and not the coloured columns, I would have known they were just part of transitioning. I have been starting with the background image first in the top container (Elementor "section") and built on top of it so this was very confusing. Sorry if this sounds like a disapproval - not so. I will watch many more on Spectra & Flexbox now. Thanks.
Hi - Great tutorial - great speed especially. Many tutorials take forever to follow as presenters tell a story instead of teaching the essential. I like your style much better. One question: Between the changes you frequently « go to the FRONT END ». What exactly are you doing to get there and how can I access this on my computer? Thank Dirk
Thank you so much for your comment Dirk. Usually: 1 - I open the WordPress Admin in "incognito / private" mode on the web browser 2 - Then from the WP Admin, just hover over the name of your website (top left corner), you will see a link that says "Visit Site" -> click it then just copy the address (URL) in the browser bar 3 - Open a new browser window, but this time in normal mode (not in incognito / private), and just paste the address in the browser bar Then just bounce from one to the other :)
Back in the day, we used CSS float property to design one-dimensional layouts. Now we use CSS Flex property that makes our life easier. Love to see Spectra use the modern CSS Flexbox.🤩
hello Mehdi, Astra is the theme that WordPress needs to display the content. And Spectra is a visual website builder based on WordPress blocks, that allows you to use drag and drop to unleash your creativity. This part of this video may help you better understand: ua-cam.com/video/7lQDlIPXO9U/v-deo.html
Hello, great videos. I have a question if I purchased the Astra pro along with the spectra pro,Do I still need elementor pro to create custom websites such as header footer product page. Thank you so much.
You're very welcome! Thank you for purchasing Astra Pro. With it you have total control over your website, and since v. 4.5.0 you have now access to the Site Builder: wpastra.com/docs/site-builder/
You're very welcome! Just go to Plugins > Installed Plugins and you can update from there. But as usual we recommend making a backup of your website before making a maintenance session. It's always best.
@@BrainstormForce Thank you for a speedy response. I'm a beginner in building my site, so I appreciate any and all help. I've followed your suggestion and clicked Update and Apply. Nothing happens and it remains 2.12.8. Auto-updates had already been activated, yet it won't budge. I just read that there is now a 2.8.0? My site is way behind.
Why don't you give it a try with the free version? If you already know Elementor it will be even easier. It just take a few hours to get used to the differences.
Please, how can I build a one page website with one basic stationed background & a scrolling smaller page(s) moving/ rolling over this one stationed background using this spectra + flexbox? Is there any free template with such characteristic I can download & customize? I want to limit myself to Gutenberg wordpress.
Thanks for this video. I started working with spectra moving from Elementor but there is one very useful option that I miss quite a lot. It is the Align Self option that is available in the advanced tab in Elementor. I could not find that option with spectra pro. Did I miss something or it simply doesn't exist?
i am getting better and better at gutenberg with spectra But got an issue i cant figure out. I want to have 2 columns next to each other which is easy. But the second column on the right it has 2 background images below each other with heading, text and a cta button on each of the images. But for some reason i cant get this to work. How could i fix this? you start with 3 containers in your video correct? but i need to have 2 containers while the right container has a nested container in it. both on the right have 2 background images with header, description and a cta button. what you are showing are 3 containers. Should i create 3 containers and then group the last 2 containers and direction down?
If you want 2 contsiners (A & B) with container B having 2 stacked containers, then either: - container B should have direction set to Column Down, then nest 2 containers inside (B1 & B2)
Would you recommend putting all content (containers) from a page into one flexbox? It says that flexbox helps with responsive design, but isn’t it true that all blocks are already responsive?
@@BrainstormForce I just want a page / website that is responsive. I came accross your blocks, and I think it is the best and only way to solve, once and for all, the issue with responsive websites. Just use blocks, create a rule saying blocks can never overlap, and voila problem solved. Good job. I did use the flexbox to better place some info cards, so maybe that is what the flexbox is meant to be used for. I have to watch your video again.
It's better to choose one or the other for speed purposes :) If you want to easily give it a try, try creating a free website in a few minutes with zipwp.com Enjoy!
Hello Astra team i need your assistance my toggle button is not working on my Mobile divice it working just fine 2days ago i dont know what to do anymore and my theme on my Mobile is not the same as the one from my desktop oleae assist 😭😭
Hands down the best Flexbox tutorial on the web! A lot of Wordpress "gurus" could learn a lot from how you teach people. Thank you!
Thank you so much for your comment Bruce! Glad you enjoyed the tutorial :)
This is one of the most valuable tutorials I have seen. As a newcomer to website building, this shows a great workflow to follow to not fall into a cobweb of changes all over.
Wow, thank you so much for taking the time to write this comment. Glad you enjoyed the tutorial :)
Being able to select the framing of an image and how it displays on desktop vs tablet vs mobile, is super exciting and genius - especially when that image is of a person - and that person should always be the feature of that section. Nicely done Spectra Team! What I love about the Spectra products is that you guys (even in it's early days now) have this well thought out. And not having to have additional products and plugins like Elementor and Beaver Builder (though they are great) installed .. just takes the load off the site and ultimately the overall complexity and potential complications/conflicts that can be caused in the backend, when we add more plugin features. I'm all for streamlining and simplifying the task.
Wow thank you so much for your comment!
Thank you for this Spectra Tutorial. I bought the Astra Pro and I am trying to understand the Spectra page builder. I am happy that I bought the Astra Pro because with these tutorials I find a good startpoint. Greetings from Germany
Glad it was helpful! You will see Spectra will give you a lot of freedom :)
Thanks for the tutorial. Cheers.
Our pleasure!
Wow. You convinced me that I have to use Spectra Flexbox instead of Elementor. I just inactivated Elementor and deleted all my pages and menus! When you got going you were really flying! A bit fast for a newbie. I am going to start my site again. Hope I can keep up and stop you fast enough. I have one suggestion that would REALLY have made this a lot easier to follow. In your intro you cautioned us how many features are available but not to use too many of them just because they existed. But once you started building it seems that's what you were doing. My suggestion is to show us your finished product FIRST and what each section is for and how many containers each has even though we can't see them. Many lecturers advise a design first complete with colors and text before building and you must have had one. Now I can see why. Then when you start with the first blank container we can see what it will ultimately look like. I was expecting to see 3 columns in 3 colors (without A, B, and C in them!) If I knew the pipe smoker was the end product and not the coloured columns, I would have known they were just part of transitioning. I have been starting with the background image first in the top container (Elementor "section") and built on top of it so this was very confusing. Sorry if this sounds like a disapproval - not so. I will watch many more on Spectra & Flexbox now. Thanks.
Thank you very much for your comment, it is and constructive one and it really helps.
We will take it into account for future tutorials :)
Very clear and concise tutorial!
This is tremendously helpful!!! Thanks a lot!!!
Our pleasure!
Hi - Great tutorial - great speed especially. Many tutorials take forever to follow as presenters tell a story instead of teaching the essential. I like your style much better. One question: Between the changes you frequently « go to the FRONT END ». What exactly are you doing to get there and how can I access this on my computer? Thank Dirk
Thank you so much for your comment Dirk. Usually:
1 - I open the WordPress Admin in "incognito / private" mode on the web browser
2 - Then from the WP Admin, just hover over the name of your website (top left corner), you will see a link that says "Visit Site" -> click it then just copy the address (URL) in the browser bar
3 - Open a new browser window, but this time in normal mode (not in incognito / private), and just paste the address in the browser bar
Then just bounce from one to the other :)
Back in the day, we used CSS float property to design one-dimensional layouts. Now we use CSS Flex property that makes our life easier. Love to see Spectra use the modern CSS Flexbox.🤩
That's why we love the web! Constant evolution :)
Hi There, I am just a little bit confuse between Spectra and Astra ... what is the value of using theme both ? is Spectra only sufficient ?
hello Mehdi, Astra is the theme that WordPress needs to display the content.
And Spectra is a visual website builder based on WordPress blocks, that allows you to use drag and drop to unleash your creativity.
This part of this video may help you better understand: ua-cam.com/video/7lQDlIPXO9U/v-deo.html
Hello, great videos. I have a question if I purchased the Astra pro along with the spectra pro,Do I still need elementor pro to create custom websites such as header footer product page. Thank you so much.
You're very welcome! Thank you for purchasing Astra Pro. With it you have total control over your website, and since v. 4.5.0 you have now access to the Site Builder: wpastra.com/docs/site-builder/
This was so so helpful!
Glad it was helpful!
great tutorial, great features.
Glad it was helpful!
Great job on the tutorial!
Thank you!
This is a fantastic video to explain this powerful control. Well done !
Thank you for watching!
Cool. Now, will we see CSS Grid come to Spectra as well?
Nicely explained! 👌
Glad it helped :)
Spectra is love
Haha nicely said :)
Thank you for this great tutorial! I notice on my Spectra dashboard that I have version 2.12.8. How can I update to version 2.4.0?
You're very welcome! Just go to Plugins > Installed Plugins and you can update from there. But as usual we recommend making a backup of your website before making a maintenance session. It's always best.
@@BrainstormForce Thank you for a speedy response. I'm a beginner in building my site, so I appreciate any and all help. I've followed your suggestion and clicked Update and Apply. Nothing happens and it remains 2.12.8. Auto-updates had already been activated, yet it won't budge. I just read that there is now a 2.8.0? My site is way behind.
Great tutorial, thanks !
What if you use a tablet or mobile in landscape mode.
Is it still recognized as a tablet / mobile or ... ?
Yes, it will recognize as a tablet/mobile view.
Thank you for this
Thank you for taking the time to watch & comment!
I’am thinking to move from Elementor to Spectra, some recommendations ? Thx
Why don't you give it a try with the free version? If you already know Elementor it will be even easier. It just take a few hours to get used to the differences.
Please, how can I build a one page website with one basic stationed background & a scrolling smaller page(s) moving/ rolling over this one stationed background using this spectra + flexbox? Is there any free template with such characteristic I can download & customize? I want to limit myself to Gutenberg wordpress.
This was super helpful, thanks!
You are welcome and glad to hear that.
Thank a lot.
Welcome 😊
Thanks for this video. I started working with spectra moving from Elementor but there is one very useful option that I miss quite a lot. It is the Align Self option that is available in the advanced tab in Elementor. I could not find that option with spectra pro. Did I miss something or it simply doesn't exist?
You can align the heading text by following this: wpspectra.com/docs/advanced-heading/
i am getting better and better at gutenberg with spectra But got an issue i cant figure out. I want to have 2 columns next to each other which is easy. But the second column on the right it has 2 background images below each other with heading, text and a cta button on each of the images. But for some reason i cant get this to work. How could i fix this? you start with 3 containers in your video correct? but i need to have 2 containers while the right container has a nested container in it. both on the right have 2 background images with header, description and a cta button. what you are showing are 3 containers. Should i create 3 containers and then group the last 2 containers and direction down?
If you want 2 contsiners (A & B) with container B having 2 stacked containers, then either:
- container B should have direction set to Column Down, then nest 2 containers inside (B1 & B2)
@@BrainstormForce yeah, my problem was that i created a group which is more difficult to control. it worked.thank you
Do you have any video talking about Spectra vs Spectra Pro (or Essentials)? thanks
Hello, have you checked this video? (Spectra Pro Walkthrough): ua-cam.com/video/3zDGUBaDwiU/v-deo.html
Do you have a tutorial that covers more details about content width/height inside containers and children width/height?
You may follow our helpful documentation regarding this: wpspectra.com/docs/spectra-container-block/
Would you recommend putting all content (containers) from a page into one flexbox? It says that flexbox helps with responsive design, but isn’t it true that all blocks are already responsive?
Yes blocks are responsive, but regarding using a main container, it really depends on which specific layout you'd like to achieve :)
@@BrainstormForce I just want a page / website that is responsive. I came accross your blocks, and I think it is the best and only way to solve, once and for all, the issue with responsive websites. Just use blocks, create a rule saying blocks can never overlap, and voila problem solved. Good job. I did use the flexbox to better place some info cards, so maybe that is what the flexbox is meant to be used for. I have to watch your video again.
Awesome!
Thanks :)
Great!! How can i add a button to directly to checkout using only the astra theme config?
Does this mean we dont need Elementor? Is it a choice of which we prefer or can we just use both in conjunction
It's better to choose one or the other for speed purposes :)
If you want to easily give it a try, try creating a free website in a few minutes with zipwp.com
Enjoy!
Is there a new spectra theme? Have you a vídeo about It? Is It free and fast?
In this video why do need to used Astra theme with Spectra builder, not Spectra theme with Spectra builder? Thanks
You can use the one you prefer. Astra is a "Classic" WordPress theme whereas Spectra One is a "Block" WordPress theme
Hello Astra team i need your assistance my toggle button is not working on my Mobile divice it working just fine 2days ago i dont know what to do anymore and my theme on my Mobile is not the same as the one from my desktop oleae assist 😭😭
how apply position relative on container
starter templates plugin is not working in wordpress what is the issue
Strange. Did you try on a fresh install?
@@BrainstormForce i tried in bluehost wordpress
but it was not working
hahahaha it could me messi ! jajajajaja
🤣