The Text with Image Block

The Text with Image block in WordPress allows you to combine text and an image in one flexible block, which can enhance the visual appeal of your content. This block includes options for adding a call-to-action button, reversing the column order, and adding a background. Each block has a “Content” and “Settings” tab for easy customization. Here’s a step-by-step guide on how to use the Text with Image block.

Step-by-Step Instructions

1. Log in to Your WordPress Admin Dashboard:
   • Open your web browser and navigate to your WordPress login page (usually yourdomain.com/wp-admin).
   • Enter your username and password, then click “Log In.”
2. Navigate to the Page Editor:
   • In the left-hand sidebar, click on “Pages” and select the page where you want to add the Text with Image block.
   • Click on the page title to open the page editor.
3. Add a Text with Image Block:
   • Scroll down to the “Flexible content blocks” section in the page editor.
   • Click the “+” button to add a new block and select “Text with Image.”

Content Tab Configuration

1. Add a Subheading:
   • In the “Content” tab, enter an optional subheading in the “Subheading” field.
2. Add a Call-to-Action Button:
   • Click the “Select Link” button in the “Button” section and enter the URL for the call-to-action.
   • Customize the button text and appearance as needed.
3. Add an Image:
   • Click on “Add Image” in the “Image” section to upload a new image or select one from your media library.
4. Add Text Content:
   • Enter the primary content for the block in the text editor. Use the formatting toolbar to style your text, insert headings, create lists, add links, and more.

Settings Tab Configuration

1. Section ID:
   • In the “Settings” tab, you can add an optional ID for the block. This is useful for one-page websites where you want to create smooth scrolling links in the main menu.
   • Enter a unique ID in the “Section ID” field.
2. Remove Bottom Margin:
   • If you want the Text with Image block to sit flush with the block below it, toggle the “Remove bottom margin” option to “Yes.”
   • This removes the default margin added to the block, ensuring it aligns perfectly with the next section.
3. Reverse Column Order:
   • Toggle the “Reverse column order” option to “Yes” if you want the image to appear before the text.
4. Add Background:
   • Toggle the “Add background” option to “Yes” if you want to add a grey background to the block.

Save and Publish

1. Save Your Changes:
   • After configuring the content and settings for your Text with Image block, ensure you save your changes by clicking “Save Draft” or “Update” if the page is already published.
2. Preview and Publish:
   • Use the “Preview” button to see how the Text with Image block will appear on your page.
   • Once satisfied, click “Publish” to make your changes live.