Creating professional, side-by-side layouts in WordPress doesn’t have to be a headache. Whether you are building a call-to-action (CTA) section or a clean feature list, the WordPress Media and Text block is the perfect way to balance images or videos with text for an engaging, high-end look.
In this guide, we will walk through how to use this versatile block to enhance your website’s design and user experience.
1. How to Add the WordPress Media and Text Block
Getting started is simple. To add the block, you can just type a forward slash (/) followed by “media and text” in the editor and select it.
Once the block is placed, you have two main options for your visuals:
- Upload: Directly add a new image from your computer.
- Media Library: Choose an existing asset from your site’s library.
2. Optimizing Your Media for SEO and UX
To ensure your site is accessible and search-engine friendly, always remember to include Alt text with your image.
The WordPress Media and Text block also offers a unique “focal point” picker. By selecting the image and choosing the “crop to fill” option, you can drag the focal point to ensure the most important part of your image remains visible, no matter the screen size.
3. Crafting Your Content Section
Once your media is set, you can start building the text side of the block.
- Headings and Paragraphs: Use the slash command within the text area to add headings and body text.
- Call to Action: To drive conversions, you can add a button block directly under your text to guide users to your desired page.
4. Stylizing for a High-End Look
To make your section stand out, you can customize the block’s appearance in the settings sidebar:
- Width Settings: You can choose to make the block full width or wide width to create more white space on your page.
- Backgrounds: Add a background color and adjust the transparency to match your brand’s aesthetic.
- Spacing: Fine-tune the professional feel by adding padding and margins around the content.
- Borders: If desired, you can add a border with a specific color and adjust the border radius to soften the edges.
5. Mobile Responsiveness: The “Stack on Mobile” Feature
One of the most important settings for the WordPress Media and Text block is the “Stack on mobile” toggle. Enabling this ensures that your side-by-side layout automatically transforms into a vertical stack on mobile devices, keeping your content readable and visually appealing for all users.
6. Speed Up Your Design with Ready-to-Use Patterns
If you want to build your page even faster, you can use block patterns. By clicking the “Add” button and searching for “media and text,” you can find pre-designed layouts that you can simply drag onto your site and customize.
Video Tutorial: Visual Step-by-Step Guide
For a closer look at how these settings work in real-time, watch the tutorial below:
Conclusion: Professional Design Made Simple
The WordPress Media and Text block is a powerful tool for anyone looking to create professional-grade sections without needing complex code. By mastering width settings, mobile stacking, and block patterns, you can create a site that is as functional as it is beautiful
