The Image Layouts addon presents six astonishing layouts for creating attractive visual content. This addon groups an Image, Text Content, and a Button together into a single block. You can even control the grid allocation and add a video modal to this addon. All in all, this is a very advanced tool to have at your fingertips.

How to Add Image Layouts

To add this addon, open the Addons Panel by clicking on the Addons button on the Sidebar or using the plus icon found within a Row. Scroll to the Media section and drag & drop the Image Layouts addon where you want to place it on your canvas.

Image Layouts Settings

Now, it’s time to select the image you want to display using this addon and customize its behavior according to your needs. To do this, open the Image Layouts Settings from the inline editor. 

Image

Choose Image: Opens the Media Manager from where you can select the Image you want to use.

Image URL: If the Image you want is online, you can simply paste its URL into the text field beside the Upload button.

Upload: Also opens Media Manager and from here you can click on the Upload Files option to upload your Image.

Alt Text: Add an alternative text to your Image.

Border Radius: Use this option to round the edges of the Image. Increasing it will give you rounder edges and decreasing it will give you sharper edges.

After adding the Image, an Image Thumbnail will replace the Choose Image button and the following options will appear:

Replace: Hover over the Thumbnail to find the Replace button which will open the Media Manager

Clear: Click on this button to remove this image and add another one.

Options

You can further customize your addon from the Options tab of the Image Layouts Settings. These options are specific to each layout and differ for each one.

Image Order Options: Select the device you want to adjust the Image Order for.

Image Desktop Order: Select the Image Order (position) of the Image in the Desktop view.

Image Tablet Order: Select the Image Order (position) of the Image in the Tablet view.

Image Mobile Order: Select the Image Order (position) of the Image in the Mobile view.

Fit Image: Enable this to enlarge the Image to Fit with the caption label.

Image Container Column: Define how many Columns the Image will span. 

Layout Settings

Click on the Layouts icon on the inline editor to open the Layout Settings. Choose any one of the six available Image Layouts from here.

Link Settings

To link your image to a page, head over to Link Settings from the inline editor. Here you can choose between the options URL, Menu, and Page.

URL: Choose this option to add an outbound link or link using a URL.

Menu: Choose this option if you want to link to a Menu Item from this website. Select the one you want to link to from the following dropdown list.

Pages: Choose this option if you want to link to a Page from this website. Select the one you want to link to from the following dropdown list.

Open in New Tab: Open the added link in a new tab.

NoFollow: Tell search engines to ignore this link.

Button Settings

Some Image Layouts have a Call-To-Action Button, which comes in handy if you want to easily redirect your prospective customers to a page. To start customizing this button to suit your purposes open the Button Settings by clicking on the Button icon on the inline editor.

Under the Basic tab, set the button text in the Label field. The button may not be visible until after this is set. You can also set the Style, Appearance, and Shape from here.

For a more in-depth guide to Button Settings, check out its dedicated documentation.

Image Layouts General Settings

For more options, click on the Settings icon on the inline editor to open the Image Layouts General Settings.

Content

Content: This section is actually a third-party rich text editor known as TinyMCE.

Enter your content within the large text field or simply click on the existing content and edit it directly.

You’ll find a dropdown at the top-left corner with several options like Headings, Inline, etc. From here, you’ll also be able to select the HTML elements you want your content to consist of.

The three-dot icon on the top-right gives you even more options to customize your content like font size, alignment, list, image upload, and more!

Color: Use this option to select the Color of the content.

Margin: Set the Margin space of the content.

Padding: Set the Padding space of the content.

Layout

Content Order Options: Select the device you want to adjust the Content Order for.

Content Desktop Order: Select the Image Order (position) of the Image in the Desktop view.

Content Tablet Order: Select the Content Order (position) of the Image in the Tablet view.

Content Mobile Order: Select the Content Order (position) of the Image in the Mobile view.

Text Alignment: Set the Horizontal Alignment of the Text Content. Options include Left, Center, and Right.

Vertical Alignment: Set the Vertical Alignment of the content. Options include Top, Bottom, and Center.

Title

You can also give Image Layouts a Title. Go to the Title section on the Image Layouts General Settings to do this. 

Title: Enter the text for the Title

HTML Element: Set the HTML element hierarchy as H1, H2, H3, etc.

Color: Select the Title’s Text Color.

Background Color: Select the Title’s Background Color.

Margin: Set the Margins of your Title.

Padding: Set the Paddings of your Title.

From the Typography tab, you can adjust the Title’s Font, Font Size, Line Height, etc. As mentioned previously, you can check out this documentation for more information.

Content Wrapper

Padding: Set the Content Wrapper’s Padding.

Border Width: Set the Content Wrapper’s Border Width.

Border Color: Set the Content Wrapper’s Border Color.

Border Radius: Define how 

Color: Select this option to give the Content Wrapper a solid Color background.

Background Color: Use the Color Picker to select the background color of the Content Wrapper.

Gradient: Select this option to give the Content Wrapper a gradient color background.

Color 1: Select the first Color for the Gradient.

Color 2: Select the second Color for the Gradient.

Start: Define how far the first color will spread.

End: Define how far the second color will spread.

Type: Select if the Gradient type will be Linear or Radial. A Linear Gradient is in a straight direction whereas a Radial Gradient is in a circular direction.

Angle: Set the Angle of the Gradient

Box Shadow: Enable a Box Shadow Effect. When enabled, you will get to access options to customize it.