Help » Content Component

The Content component transforms the content that is placed within the shortcode and can display a background image as well as magazine style columns. This component can also run a column of text that is offset to the left or right.

To use this component, start with the opening component tag, then continue writing. Close the component tag when you’re ready to close that section.

Options Overview

Color of Text – Set the color to be used for the text of this component. This is especially helpful when using a colored or image background.

Background Color – Optionally set a background color for this component.

Width of Component – You can enter the size as 40% or 500px. Enter the word content to restrict the width to that of the main text.

Height of Component – Enter an optional height for the component. By default it’s set to auto. Use a large height like 1200px to have a large blank area with small text.

Number of Columns – Here you can optionally set the number of columns that the text should be split into. Example 2 will make 2 columns of text.

Text Block Alignment – This is optional and allows you to float the text block to the left or right. This is useful when using a width like 300px.

Floating Text Position – By setting this optional position, the text will be floated on the content component. In the example “10px, 20px, auto, auto”, it reads as 10px from the top, 20px from the right, and automatically positioned from the bottom and left. For further information, refer to the illustration below or this blog post.

Background Image – URL for the image. Click Select Media to open the WordPress Media Library.

Image Repeat – If using a background image, should the background image repeat? Useful for using tiled images.

Content – All of your actual content (text, HTML, etc) goes here.

Floating Text Position

tip Some components allow you to pass the word “content” as an option for the width. This will only work if your theme is built to support this feature. If you’re a developer and are interested in adding Aesop support to your products, click here.