Spectra Flexbox Controls CRASH COURSE
HTML-код
- Опубликовано: 27 июл 2024
- Ever wanted a Spectra Flexbox Crash Course? Well here it is! Get the Spectra Page Builder here 👉 wpspectra.com
#wpspectra #wpastra #wordpress #brainstormforce
Products mentioned in the video:
🟣 Spectra: wpspectra.com
🟣 Astra: wpastra.com
🟣 Starter Templates: wpastra.com/updates/starter-t...
Tutorials
🟣 Build Websites Faster With Starter Templates 3.0 - • Build Websites Faster ...
🟣 Astra Theme Full Tutorial | How to use the Astra Theme (Step by Step) - • Astra Theme Full Tutor...
-------------------------------------------------------------------
📽📌 Table of Content 📌📽
00:00 - Spectra Flexbox Crash Course
00:28 - What Is Flexbox?
01:49 - When To Use Flexbox?
02:55 - Flexbox Basic Concepts
03:13 - Direction
03:39 - Align Items
04:52 - Justify Content
05:47 - Wrap
06:53 - Building A Page With Flexbox In Spectra
07:33 - Page Setup With Astra
08:13 - Creating The Hero Section
08:19 - Creating The Structure
20:15 - Styling The Hero Section
25:18 - Creating A Card Layout
25:25 - Creating A Visual Banner
31:34 - Creating A Sidebar
-----------------------------------------------------------------
🤔 Just starting to create a website?
Refer to this ultimate guide: wpastra.com/guides-and-tutori...
🤔 How to use the Astra Theme (Step by Step)
Refer to this ultimate tutorial: • Astra Theme Full Tutor...
-------------------------------------------------------------------
📌 About Us 📌
At Brainstorm Force, we believe creating a website should not be complicated.
We build quality WordPress products and tools that are simple to use, affordable, and reliable to help entrepreneurs, professionals, and bloggers grow online.
Brainstorm Force is the team behind popular WordPress products like:
🟣 Most Popular WordPress Theme Astra: wpastra.com/
🟣 Starter Templates with 300+ pre-designed website templates: startertemplates.com/
🟣 Spectra to power your WordPress block editor: wpspectra.com/
🟣 Ultimate Addons for Elementor: ultimateelementor.com/
🟣 Ultimate Addons for Beaver Builder: www.ultimatebeaver.com/
🟣 Schema Pro to add schema markup to your website: wpschema.com/
🟣 Convert Pro to generate more leads: www.convertpro.net/
🟣 WP Portfolio to design your beautiful portfolio: wpportfolio.net/
🟣 ProjectHuddle to get sticky-note style feedback on your websites and designs: projecthuddle.com/
-------------------------------------------------------------------
📝 Are you a WordPress enthusiast who wants to contribute to our team? 📝
We are hiring across multiple positions: brainstormforce.com/join/
-------------------------------------------------------------------
🚨 Follow Us To Stay Updated 🚨
Facebook Community: / wpastra
Facebook Page: / brainstormforce
Twitter: / webrainstorm
LinkedIn: / brainstorm-force
RUclips: / brainstormforce
Messi image by Hossein Zohrevand in Wikimedia Commons | Usage license: commons.wikimedia.org/wiki/Fi... | Background was removed from original picture
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 :)
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 :)
Very clear and concise 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 :)
This is tremendously helpful!!! Thanks a lot!!!
Our pleasure!
Thanks for the tutorial. Cheers.
Our pleasure!
Great job on the tutorial!
Thank you!
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 :)
This was super helpful, thanks!
You are welcome and glad to hear that.
Nicely explained! 👌
Glad it helped :)
This was so so helpful!
Glad it was helpful!
Awesome!
Thanks :)
great tutorial, great features.
Glad it was helpful!
Thank you for this
Thank you for taking the time to watch & comment!
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 :)
Spectra is love
Haha nicely said :)
Thank a lot.
Welcome 😊
Great!! How can i add a button to directly to checkout using only the astra theme config?
This is a fantastic video to explain this powerful control. Well done !
Thank you for watching!
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 :)
Cool. Now, will we see CSS Grid come to Spectra as well?
how apply position relative on container
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.
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/
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.
Do you have any video talking about Spectra vs Spectra Pro (or Essentials)? thanks
Hello, have you checked this video? (Spectra Pro Walkthrough): ruclips.net/video/3zDGUBaDwiU/видео.html
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 😭😭
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/
Is there a new spectra theme? Have you a vídeo about It? Is It free and fast?
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.
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.
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!
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: ruclips.net/video/7lQDlIPXO9U/видео.html
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
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.
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
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
🤣