ÐÓ°ÉÔ­´´

The Text & Image block combines written content with a supporting image in a single layout. This block is useful when you want to highlight important information while adding visual interest to the page.

Text & Image blocks are commonly used for:

• Feature sections
• Service descriptions
• Program highlights
• Calls to action
• Page banners

By placing text and images together, you can create content that is easier to scan and more engaging for visitors.

When to Use a Text & Image Block

Use a Text & Image block when you want to present content alongside a related image.

Examples include:

• Describing a service or program
• Highlighting a research project
• Promoting an upcoming event
• Creating a page introduction
• Building a page banner

The block can be used with or without an image, making it a flexible option for a variety of content types.

Adding a Text & Image Block

To add a Text & Image block:

1. Click the + button and search for Text & Image.
2. Select the block.
3. Enter a heading and supporting content.
4. Add an image if desired.

The content area can include:

• Text
• Buttons
• Links
• Additional formatting options

This allows you to create self-contained content sections that are both informative and visually appealing.

Adding an Image

To add an image:

1. Select Choose Image or Select Image.
2. Choose an image from the Media Library or upload a new one.
3. Save your changes.

As with all images, remember to provide meaningful alt text when appropriate.

Image Position

One of the most useful features of this block is the ability to position the image beside the content.

You can typically choose to display the image:

• On the left
• On the right

Experiment with both layouts to determine which presentation works best for your content.

For longer pages, alternating image positions can help create visual variety and improve readability.

Block Layout Options

Depending on your site’s configuration, additional layout options may be available.

Common settings include:

• Wide Layout
  A wider version of the block that allows content to occupy more horizontal space.
• Mobile Display
  Control whether the image appears on smaller screens.
• Image Positioning
  Adjust how the image is displayed within the available space.
• Replace or Remove Image
  Swap an image with a different one or remove it entirely.

Available settings may vary depending on your site’s version and configuration.

Using Text & Image as a Banner

The Text & Image block is frequently used as a page banner or page introduction.

A typical banner may include:

• A page title
• Introductory text
• A call-to-action button
• An optional image

Because the image is optional, the block remains effective even when used as a text-only banner.

Best Practices

• Keep Content Focused
  Use a concise heading and supporting text that clearly communicate the purpose of the section.
• Choose Relevant Images
  Images should support the content rather than distract from it.
• Consider Mobile Users
  Preview your page to confirm the layout remains effective on smaller screens.
• Use Buttons Sparingly
  Include a button only when there is a clear action you want visitors to take.
• Alternate Layouts on Long Pages
  Using a mix of left-aligned and right-aligned images can create visual variety and make pages easier to read.

Try it Out

Now that you have learned how to work with the Text-Image block, it’s time to try it out!

1. Add a Text & Image block to a page.
2. Add a heading and some text to the text.
3. Add an image.
4. Change the image position.
5. Preview your results on the front end.