The Office of Advancement and Alumni Affairs utilizes HTML and CSS to create flex boxes.
To create a page with this layout, go into the text tab of the editing area in WordPress when editing/creating a page. This tab will be in the top right corner of the large text box.
Add this code in the text editor and fill in your necessary links and images:
<div class="d-flex">
<div class="left-content text-content top">
<h2 class="entry-title">Title 1</h2>
Text content
<p style="text-align: center;"><a class="btn-blue" href="link URL" target="_blank" rel="noopener">Link 1</a></p>
</div>
<div class="right-content bottom"><img class="alignleft size-page-wide" style="padding: 0;" src="https://advancement.clas.ufl.edu/wp-content/uploads/sites/10/turlington-wide.jpg" /></div>
</div>
<div class="d-flex">
<div class="left-content bottom"><img class="alignleft size-full" style="padding: 0;" src="https://advancement.clas.ufl.edu/wp-content/uploads/sites/10/turlington-wide.jpg" alt="" width="960" height="646" /></div>
<div class="right-content text-content top">
<h2 class="entry-title">Title 2</h2>
Text content
<p style="text-align: center;"><a class="btn-blue" href="link URL">Link 2</a></p>
</div>
</div>
Click the red Publish or Update button.
Once published or updated, click on View Page at the top of the screen.
Once you’re on the front-end of the page, click “Customize” in the top black tool bar.
Click the last tab in the Customizer labeled “Additional CSS”
Add this CSS code:
.home .wrap {
padding: 0;
}
.d-flex {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.home .d-flex img {
display: none;
}
.d-flex .top {
order: 1;
}
.d-flex .bottom {
order: 2;
}
h3 {
padding-bottom: 0;
}
.slideshow_pagination {
display: none !important;
}
.text-content {
padding: 1rem;
}
.right-content.bottom img {
object-position: top;
}
Click the red Publish or Update button.