Creating Responsive Image Blocks with Text in Flatsome Theme

Learn how to set up eye-catching image blocks with text on the left or right using Flatsome’s UX Builder in WordPress. This tutorial will walk you through each step to design responsive image blocks for your website that look great on desktop, tablet, and mobile.

Step-by-Step Guide

1. Access Flatsome UX Builder

• Open your WordPress dashboard.
• Navigate to the page where you want to add the image blocks.
• Click “Edit with UX Builder” to start making customizations.

2. Add a Row and Choose Columns

• Once in the UX Builder, click Add Row.
• Select a layout with two columns to have one side for the image and the other for the text.
• Adjust the padding (space around the content) as needed to give it a clean look. Set padding values for desktop, tablet, and mobile views to ensure consistency.

3. Insert an Image Element

• Click on the left or right column, depending on where you want the image.
• Select Add Element > Image.
• Upload or select the desired image for the block. Ensure that your image is responsive by checking the mobile preview.

4. Add Text Next to the Image

• In the opposite column, add a Text Box element.
• Type in your content, such as a title or short description. For example, use phrases like “Launching Soon” to grab attention.
• Adjust font size, alignment, and color as desired. Flatsome offers customization for different screen sizes, so make sure text size and placement work well on all devices.

5. Customize the Background and Colors

• For a smooth loading effect, set a background color that matches the primary color scheme of your site.
• Go to the section’s background settings and select the color that complements your image, making sure it aligns with your overall website design.

6. Fine-Tune Spacing and Alignment

• To make everything look neat, go to Row Settings and adjust column spacing.
• Align the text vertically in the middle of the column for a balanced look.

7. Make It Mobile-Friendly

• In the UX Builder, switch to the Tablet and Mobile views.
• Rearrange columns if needed, placing the image above the text for a better layout on smaller screens.
• Check the height and width of elements to ensure they fit within the screen dimensions on mobile.

8. Preview and Publish

• Click Preview to review how your page will look on different devices.
• Make any final adjustments, then click Publish when you’re ready.

You’ve now created a responsive image block with text using Flatsome’s UX Builder! With just a few steps, you can design professional-looking layouts that adapt seamlessly to any screen size, ensuring your site looks polished and engaging. Use these steps to create dynamic, mobile-friendly content that keeps visitors interested, whether they’re on a desktop or mobile device.