Photo And Text
- Blocks
- Section
- Buttons
- Counters
- Blocks
- Comparison Table
- Columns
- Breadcrumbs
- Call To Action
- Landing Page
- Tabs
- YouTube
- FAQ
- Grid
- Hero
- Media Callout
- Voronoi
- Site Preview
- Jump Nav
- Jump Link
- Link-in-Bio
- Logos
- Map
- Media and Text
- Photo Feature
- Posts
- Price List
- Quote Blocks
- Quotes
- Slider
- Structured List
- Socials
- Timeline
- Yearbook
- Vignette
- Video Gallery
- Home ›
- Blocks ›
- Media and Text ›
- Photo And Text
Photo And Text
Display a photo using the Columns format.
Usage
The Photo and Text block is a parent container that uses the Columns UX pattern. The rightmost child block works the same as the Columns child blocks, but the leftmost block is a simple image field.
To access the parent level controls listed on this page, make sure you have the parent block selected. If you need help selected the parent block, we’ve got you covered.
Block Width
Blocks can be set to one of three widths in the editor: Default, Wide, or Full. Blocks will interact with adjacent blocks differently depending on their width.
Adjusting Block Width
The block width setting is found in your block context bar, which will show up above the current block that you have selected. A block that supports the block widths will show its current width icon in the context bar, and clicking it will allow you to change the width.
If you have the Top Toolbar setting selected, the block context bar will always show at the top of your page, not at the top of your block.
Default Width
The default width of your content is determined by the value set in your Customizer. You can find this setting under Styles » Widths » Content Width. This is the default width of most text-based content and most blog pages. We recommend keeping this set so that your content retains maximum readability, which most studies agree is around 50-60 characters per line.
Wide Width
Wide width content will take up 75% of the available width on the page or the default content width set on your site—whichever is larger. In effect, this makes content take up more of the available screen real estate. When used in conjunction with other wide width blocks, you can shape your webpages in many different ways.
Full Width
Full width content will always take up 100% of the available width on the page. When placed next to default or wide width content, margin will be applied to the full width block to give it some room to breath. When two full width blocks are placed next to each other, however, they will suction together and form a cohesive unit with no margin in between them.
Choosing a Photo
Simply click the photo on the left to select one from your media library.
Swap Blocks
Change the order of the blocks on desktop.
The Swap Blocks setting is used to change the order of the blocks on desktop and not on mobile.
This is an important distinction and can be used to control the flow of your website on mobile, giving your users the best mobile experience possible.
Even if Swap Blocks is enabled, displaying your media on the righthand side on desktop, the media block will still appear above your content on mobile.
Example mobile stacking.
The same blocks viewed on desktop. In this example, the second Blocks group has Swap Blocks enabled.