A common design element is to create 2 blocks of content which sit next to each other and are the same height (whichever is the tallest). To do this simply use [flex][flex_half][/flex_half][flex_half][/flex_half][/flex] shortcode.
Admittedly this can initially look more confusing than it actually is, but it makes sense once you’ve done it a few times. Check out some tips here.
In it’s very simplest form, the shortcode is as follows:
[flex]
[flex_half]
Content in first half
[/flex_half]
[flex_half]
Content in second half
[/flex_half]
[/flex]
As always, there are quite a few useful parameters for this shortcode so you can create some really interesting blocks of content. Note that some parameters are only available in the outer [flex] shortcode, whilst others are only available in the inner [flex_half]
Default settings:
[flex bg-colour="white" bg-image="" colour="inherit" border="transparent" height="0" flush="yes" class="" id="" url=""]
[flex_half bg-colour="white" bg-image="" colour="inherit" border="transparent" v-align="center" h-align="left" padding="10px" height="0" flush="yes" class="" id="" url=""]
Content in first half
[/flex_half]
[flex_half bg-colour="white" bg-image="" colour="inherit" border="transparent" v-align="center" h-align="left" padding="10px" height="0" class="" id="" url=""]
Content in second half
[/flex_half]
[/flex]
Parameter options:
bg-colour = the background colour for the element (either the outer [flex] shortcode or the inner [flex_half] shortcode). Use either a hex code or friendly name e.g. #444 or blue
bg-image = the URL of an image to fill the width and height of the block. Make sure it's just the URL of the image and not an img src tag as well.
colour = the text colour for the element. If not specified, it will inherit from further up the stylesheet
border = add a border around the element e.g. solid 1px black
height = sets a minimum height for the box (think how this box gets displayed on mobile screens)
flush = determines if there is a gap between the two blocks. Only use on the outer [flex] shortcode
class = type a CSS class name if you wish to control this box further via a CSS stylesheet
id = type a CSS id if you wish to control this box further via a CSS stylesheet
url = type a URL if you wish this box to be clickable to another page or external address
v-align = set the vertical alignment of the content. Either top, middle or bottom. Only use on the inner [flex_half] shortcode
h-align = set the horizontal alignment of the content. Either left, centre, center or right. Only use on the inner [flex_half] shortcode
padding = the internal padding of the box to control how close the text is from the edges. Only use on the inner [flex_half] shortcode
Depending on the site, some further tweaks to the CSS might be required to ensure that all of this styling works. Ask for help if required.
If you don’t specify one of the parameters then it’ll use the default ones as above.
With this shortcode the possibilities are endless!
And it’s super quick as it just hooks into core WordPress code rather than relying on unnecessary plugins that often slow a site down.
Example 1
[flex]
[flex_half height="350px" bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/stormy-background.jpg"]
[/flex_half]
[flex_half height="350px" bg-colour="white" v-align="top"]
A stormy night
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus.
[/flex_half]
[/flex]
A stormy night
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus.
Example 2
[flex]
[flex_half height="300px" v-align="top" bg-colour="#ffbebe"]
This content is aligned to the top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit elit at dui pulvinar, id euismod quam consequat. In mollis consectetur ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sagittis magna nec sapien pellentesque elementum. Nullam est nisl, dictum nec tempus id, laoreet in elit.
[/flex_half]
[flex_half height="300px" v-align="bottom" bg-colour="#eacbe4"]
This content is aligned to the bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit elit at dui pulvinar, id euismod quam consequat. In mollis consectetur ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sagittis magna nec sapien pellentesque elementum. Nullam est nisl, dictum nec tempus id, laoreet in elit. Maecenas mauris nisi, volutpat sed ornare at, vulputate a tortor. Suspendisse id pharetra enim. Nunc at imperdiet nisl, molestie fringilla sapien. Vestibulum in viverra metus, volutpat posuere urna. In dignissim, augue eget condimentum egestas, ante magna imperdiet turpis, vel tempor risus ex eu est.
[/flex_half]
[/flex]
This content is aligned to the top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit elit at dui pulvinar, id euismod quam consequat. In mollis consectetur ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sagittis magna nec sapien pellentesque elementum. Nullam est nisl, dictum nec tempus id, laoreet in elit.
This content is aligned to the bottom
Nullam est nisl, dictum nec tempus id, laoreet in elit. Maecenas mauris nisi, volutpat sed ornare at, vulputate a tortor. Suspendisse id pharetra enim. Nunc at imperdiet nisl, molestie fringilla sapien. Vestibulum in viverra metus, volutpat posuere urna. In dignissim, augue eget condimentum egestas, ante magna imperdiet turpis, vel tempor risus ex eu est.
Example 3
[flex bg-colour="white" flush="no"]
[flex_half height="350px" bg-image="https://duncanarrow.com/wp-content/uploads/2019/07/hello.jpg"]
[/flex_half]
[flex_half height="250px" v-align="top"]
Hello, good to meet you
Notice the gap between the two blocks. This is because flush="no" is set on the outer [flex] shortcode.
[/flex_half]
[/flex]
Hello, good to meet you
Notice the gap between the two blocks. This is because flush=”no” is set on the outer [flex] shortcode.
Example 4
In fact this whole idea also works if you only use one [flex_half][/flex_half]
[flex]
[flex_half bg-image="https://duncanarrow.com/wp-content/uploads/2019/07/hello.jpg" height="500px" v-align="bottom" padding="30px" colour="#fff"]
It was a stormy night...
Morbi vitae semper nisl. Etiam neque nulla, cursus in vulputate in, porttitor eu dui. Nulla facilisi. Mauris vestibulum odio et lorem sagittis, volutpat luctus urna volutpat. Proin ullamcorper arcu posuere nunc ultricies vehicula. Nunc mollis mauris a sagittis posuere. Etiam eros lectus, consectetur id diam id, scelerisque efficitur nibh. Donec quis nisi tortor.
[/flex_half]
[/flex]
It was a stormy night…
Morbi vitae semper nisl. Etiam neque nulla, cursus in vulputate in, porttitor eu dui. Nulla facilisi. Mauris vestibulum odio et lorem sagittis, volutpat luctus urna volutpat. Proin ullamcorper arcu posuere nunc ultricies vehicula. Nunc mollis mauris a sagittis posuere. Etiam eros lectus, consectetur id diam id, scelerisque efficitur nibh. Donec quis nisi tortor.
Example 5
[flex]
[flex_half height="350px" bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/coffee-mask.jpg"]
[space height="120px]
[at_a_glance border="1px solid #8c8c8c" bg-colour="transparent"]
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Donec dapibus purus justo, consectetur commodo mi consequat vitae. Cras libero ex, tincidunt eu interdum sit amet, cursus a lectus.
[/at_a_glance]
[space height="70px]
[/flex_half]
[flex_half height="250px" v-align="centre" bg-colour="#333" colour="white" padding="20px"]
Maecenas sollicitudin, odio
Fusce ac nunc ornare, tincidunt quam et, blandit eros. Maecenas sollicitudin, odio ac finibus viverra, erat massa facilisis diam, et venenatis orci magna ut purus. Phasellus erat metus, consequat in ante ut, eleifend sodales lectus
[/flex_half]
[/flex]
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Donec dapibus purus justo, consectetur commodo mi consequat vitae. Cras libero ex, tincidunt eu interdum sit amet, cursus a lectus.
Maecenas sollicitudin, odio
Fusce ac nunc ornare, tincidunt quam et, blandit eros. Maecenas sollicitudin, odio ac finibus viverra, erat massa facilisis diam, et venenatis orci magna ut purus. Phasellus erat metus, consequat in ante ut, eleifend sodales lectus
Example 6
In this example, the image on the left is an inline image within the left hand block (not a background image). Then along with some of the standard parameters, we can also assign a class of “pull-left” to the right hand block. In the theme stylesheet, you then create a CSS class called .pull-left and tell it what you want it to do. In this case, the design required the image on the left to be partially overlapped by the text on the right.
.flex_half.pull-left .flex_content { background: white; margin-left: -20%; }
If you do this, you also need to think about mobile and do some media queries for different breakpoints.
[flex]
[flex_half]
<img src="https://duncanarrow.com/wp-content/uploads/2021/02/NYT-portrait-683x1024.jpg" alt="" class="alignnone size-large wp-image-3730" />
[/flex_half]
[flex_half v-align="middle" bg-colour="#f7f7f7" class="pull-left" padding="30px"]
Proin gravida laoreet porttitor
Nullam est nisl, dictum nec tempus id, laoreet in elit. Maecenas mauris nisi, volutpat sed ornare at, vulputate a tortor. Suspendisse id pharetra enim. Nunc at imperdiet nisl, molestie fringilla sapien. Vestibulum in viverra metus, volutpat posuere urna. In dignissim, augue eget condimentum egestas, ante magna imperdiet turpis, vel tempor risus ex eu est.
[/flex_half]
[/flex]
Proin gravida laoreet porttitor
Nullam est nisl, dictum nec tempus id, laoreet in elit. Maecenas mauris nisi, volutpat sed ornare at, vulputate a tortor. Suspendisse id pharetra enim. Nunc at imperdiet nisl, molestie fringilla sapien. Vestibulum in viverra metus, volutpat posuere urna. In dignissim, augue eget condimentum egestas, ante magna imperdiet turpis, vel tempor risus ex eu est.
