What is Flexbox? Well, basically, it’s replacing the old inner sections you used in Elementor. Flexbox allows you to have more customizability, faster load times, leaner code, and better responsiveness. And I’m going to show you how to use it in less than five minutes.
Table Of Contents
00:00 – Intro
00:16 – What is Flexbox?
01:03 – Flexbox tutorial
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart — https://www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers — https://www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player — https://www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows — https://www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss — https://www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra — https://www.wpcrafter.com/spectra
🟡 Elementor — https://www.wpcrafter.com/elementor
🟡 Beaver Builder — https://www.wpcrafter.com/beaverbuilder
🟡 Divi — https://www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List — https://www.wpcrafter.com/hosting
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero — https://www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround — https://www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
So flexbox is quickly becoming the new Standard for designing an Elementor if You've started a new project with it Recently you might have seen this Basically it's just replacing the old Standard intersections change may be Scary but this is actually a really good Thing because flexbox basically allows You to quickly create more interesting And better looking layouts and it's much Easier and much more flexible than the Intersections used to be it gives you More ability to control how your content Is displayed and it really streamlines Your whole workflow within Elementor and Another nice little bonus is that it can Help you improve your page speed because From a back-end perspective it has a Leaner code so as the saying goes less Code less load time all right listen I'm Not a comedian alright but I am a Designer and what I know is that flexbox Is awesome so anyway I think the best Way to show you this obviously is with Some context so I've pulled up a home Page and I'm going to show you how Easily you can recreate the individual Sections of it using the new container And flexbox options within Elementor Let's get into it alright so here we are We all love nature we all love flexbox Even if we don't realize it yet so to Recreate create this section the first Thing I'm going to do is add this
Background image so I'm going to click These six dots choose my image and Choose that easy enough now the first Thing I'm going to do is add a container Right here and let's add this text here So we're going to drag in two headings And we'll say we all love nature and Then we're going to drag in a text Editor underneath these guys then we're Going to click this and we're going to Align everything to the Center for style We're just going to change this all to White and we're going to make sure that This is an H1 all right so all I did was Make both of these H1s and now I'm going To add another container right under This and you'll see why in just a second So they got two buttons here so we are Going to add one button drag in another Button now the way we're going to change This to fit this we're going to click The corner here and we're going to Change the direction to row or Horizontal and then we're going to Justify everything to the center and There you have it there's your hero Section all right next we are going to Do the services section so once again I'm going to start with a container it Looks like there is a header and what Appears to be a divider so I'm going to Drag the heading in and a divider our Services and this is definitely smaller Up here so I'm going to take our
Services we're going to put that in the Center we're going to take this we're Going to make it way shorter like 10 so Up here this looks a little bit thicker So let's give it a little more weight And now let's make it yellow it should Be here in the global colors or the Theme colors and now we have this Section so basically this is going to be If you wanted to do something like this You're going to add another container And then you're going to put containers And containers and containers and then We're going to search for image box I'm Going to add that in so you'll see Already it's starting to take form like This is the container The Heading the Divider and this is going to be the Container within the container and this Is the beauty of flexbox so if we wanted To drag another in the easier way to do That is to duplicate it I don't know why I did it that way but now we can see That this has our three image boxes so If we click this we can organize Everything horizontally and you can see How this is going to start to take shape So now if we go here we can choose our Image we're going to pick that one go Here choose image and we'll pick that One you might notice that these pictures Are a little bigger than these ones what We're going to do is we're going to go Over to style image and we're going to
Make the width 100 percent We're going to do that across the board And then it looks like the text up here Is aligned to the left so what we're Going to do is we're going to once again Click and in style align we're just Going to click to the left and there you Have it there is that section so there It is that is how you can put flexbox Into your Elemental workflow I hope that Helped if you have any questions of Course as always leave them in the Comments below thank you so much for Watching subscribe if you haven't Already and I will see you in the next One [Music] Thank you
