Image Left - Text Right

A layout style which is currently very popular is a full width row with an image at one side and text at the other (Figure 1.1).

Figure 1.1 Image left, text right

To create this type of content, create a new paragraph (Figure 1.2).

 

Figure 1.2 Create a new paragraph

And choose the paragraph container item type (Figure 1.3).

Figure 1.3 Choose the paragraph container item type

In the General section:

  • Set the width to full with the content centered (option no. 3)
  • Set the preferred height, background color, font color, and spacing around the container
Figure 2.1 The setup for the paragraph container

Then, you must add two paragraphs under Paragraph by clicking the Add paragraph button (Figure 2.2).

Figure 2.2 Add two paragraphs

The first paragraph is going to contain the image.

Set it up like this (Figure 2.3):

  • Select the image in the General section
  • Set the width to 1/2 on big devices (and 1/1 on small devices)
  • Set the content position to left aligned (no. 1 option)
  • Set the image style to fill
  • Select your preferred crop mode
Figure 2.3 The setup for the first paragraph

The second paragraph is going to contain the text.

Set it up like this in the General section (Figure 3.1):

  • Fill in the title (or not and uncheck the Show title checkbox) and the text
  • Create a button in the Link section:
    • Select the destinaiton page/paragraph
    • Fill in the button text
    • Choose a button design
Figure 3.1 The setup for the second paragraph

In the Layout section:

  • Set the width to 1/2 on big devices (and 1/1 on small devices)
  • Set the content position to right aligned  (no. 7 option)
  • Save and close the paragraph

Remember to save the paragraph container.