- Hey, y'all.
Welcome to another WordPress Wednesday.
This is gonna be a very quick tutorial
to teach you this really cool layout of two on top
and three on the bottom row.
This is all, of course, inside of the Divi page builder.
And sometimes,
it's super easy to create a three-column layout,
four-column layout
but how do you stack them if you need two on the top
and three on the bottom like this example?
I'm gonna show you today
really quickly how to make this happen.
And of course,
this is using the premium version of the Divi builder
inside of your WordPress website.
(bright upbeat music)
So to show you how to build that out
where you have the two-column design on the top
and the three-column on the bottom,
I'm just gonna go into my visual builder.
So I clicked Enabled Visual Builder.
Let's go ahead and build from scratch.
And of course, on the top we want that 50/50 split.
Awesome, we're just gonna add in an image module
there for now, right?
And for the sake of now,
we're just gonna let that sit there.
I'm gonna go ahead and duplicate that module,
drag it over here so you can very quickly see
the 50/50 column split.
Super excited, super straightforward, right?
But as soon as you add in another row
with a three-column structure,
and we duplicate that image, and drag it, and drop it down,
because of our width we are going to have an issue
with these don't match, right?
The top row is way too large in comparison.
So what we wanna do here is go up to our top row,
into the gear icon for that row settings.
And we're gonna go into the Design tab
and we're going to change the sizing
or the max width of this.
You might have to tinker
and play around with how this looks,
especially on a mobile device, right?
So we'll wanna tinker and play.
But for now,
let's set it to maybe 800 pixels
and take a look at it that way.
That's looking a little bit more comparable
to the size of the images below.
The other thing you can do is you can enlarge the row below.
So if we wanted to go into this row setting
and we wanted to stay on the sizing max width here, 1200,
you could do that as well.
And go ahead and put in 100% in there if we wanted to.
That tells it to go ahead and extend out
and click the check mark.
And you can start to see
that they're already looking very comparable in size.
So you'll just kind of tinker
and play back and forth with what width you need.
Of course,
all of this is dependent upon the photo size
that you put in there, right?
But that looks very comparable
where you have the two on the top
and the three on the bottom.
And you can, of course, just duplicate that
and build out your structure any way you need to,
but sometimes you don't want maybe two on the top.
Maybe you only want a single column.
So I'm gonna show you one more quick one here
of how to do it with that single column.
Again, you're just going to shrink it down
to your max width, right?
So we're gonna go width 100% here.
And we're gonna say max width.
Again, that would be the image size, right?
So there you go.
Here's a really cool triangular shaped design
of the same size images all stacked perfectly.
And of course,
on a mobile device that should stack all the way down.
You're gonna see, though, here's that width.
That width is larger than this width.
So, and this width goes edge to edge
'cause we've got that 100% here.
So you will have to adjust the mobile styling, right?
So we'd go into that gear icon into each row setting,
go into the size, and go into the size here.
I'm gonna shrink this down
just a little bit so you can see it.
So on max width here, we wanna go into our mobile, right?
Max width here.
And we maybe say 350, see if that's, right.
No. Not percent, pixel.
That's still too large.
I actually really like that size from mobile.
So maybe we want to go here to this row setting
and extend that one out.
So let's go into sizing.
And let's do max width on mobile.
And we're gonna say 350 pixel here.
And up here on the top,
we need to go into mobile and say 100% on mobile up here.
And see how that now stacks those images beautifully?
That third row that we have in here, of course, was 100%.
So we need to go into that gear icon on mobile,
go to Design, Sizing, Max Width on mobile, 350 pixel, right?
There you go.
Looks beautiful now on mobile.
So we've got that addressed.
Let's go back to our desktop view just to double-check.
And all of our images live at the exact same size.
If you're interested in having access to the actual mockup
that I showed you at the beginning of this tutorial,
I have this Divi layout
available for you in the blog link below.
You can export the JSON file and import it.
And it will be the exactly layout
that you're looking at right here.
I hope this has helped y'all.
Obviously, you're running on the Divi builder.
So please be sure to check out my entire playlist.
I have so many videos all on the Divi builder.
Have a great one.
Be sure to click like and subscribe.
Come back
and hang out here with me every single WordPress Wednesday.
I'll see you next week, bye everyone.
(gentle chiming music)
(bell dinging)