Columns
There are four types of Column Blocks:
| Block | Description |
|---|---|
| 50/50 Image & Text | Two evenly split columns containing an image, heading, text and button |
| 50/50 Text | Two evenly split columns of text, heading, text and button |
| 33/66 & 66/33 Text | Two text columns, one with subtitle/title and one with content |
| Thirds Image & Text | Three evenly split columns with an image, heading, text and button. |
50/50 Image & Text
The 50/50 Image & Text block is a two column component containing an image, heading, text and button in each column. Each part of it is customizable and editable.
Adding the Block
Click the 50/50 Image and Text graphic in the Add a Block right side panel to insert the block. A two column component will be added to your page with placeholder content:
There are placeholders for:
- Image
- Heading
- Text
- Button
You can click and edit the Heading and Paragraph properties like any other Text Block. Edit and customize the Button like you would the Button Block.
Click the Choose Image button to select an image from the Files library or upload one from your computer. Once an image is chosen, you can edit the image, add a link to it or changed the border radius of the image.
Properties Panel
Click the options button (...) in the block toolbar to open the properties panel. The properties in this panel are either applied to both columns or effect the containing element for both of the columns. You'll find the following properties available to edit:
| Property | Description |
|---|---|
Gap size | Adjust the spacing between the columns. |
Block Height | The height of the block. Padding will be applied evenly to the top and bottom of the block. |
Space above/below | The space above and below the block. |
50/50 Text
The 50/50 Text Block is very similar to the 50/50 Image and Text Block except it doesn't have an image element. It does have an additional subtitle element.
Adding the Block
Click the 50/50 Text Block graphic in the Add a Block right side panel to insert the block. A two column component will be added to your page with placeholder content.
There are placeholders for:
- Left and Right Title
- Left and Right Subtitle
- Left and Right Content
- Left and Right Buttons
You can click and edit the Title, Subtitle and Content areas like any other Text Block. Edit and customize the Button like you would the Button Block.
Properties Panel
Click the options button (...) in the block toolbar to open the properties panel. The properties in this panel are either applied to both columns or effect the containing element for both of the columns. You'll find the following properties available to edit:
| Property | Description |
|---|---|
Gap size | Adjust the spacing between the columns. |
Block Height | The height of the block. Padding will be applied evenly to the top and bottom of the block. |
Space above/below | The space above and below the block. |
33/66 and 66/33 Text
The 66/33 Text Block and 33/66 Text Block are great blocks for calling attention to important text on a page. They consist of two columns: a 1/3 column with a subtitle, title and border and a 2/3 content column.
Insert the block by clicking on either the 66/33 Text or 33/66 Text graphic in the Add a Block > Columns panel.
Initial State
Below is an example of the initial state of the 33/66 Text Block:
And the corresponding 66/33 Text Block:
There is placeholder content for the subtitle, title and Content areas. You can click into each element and edit like any other text block. You can also click the border to update the color.
Properties Panel
Click the (...) options button in the block toolbar to open the properties panel. You'll find the following properties available to edit:
| Property | Description |
|---|---|
| Subtitle color | The color of the smaller subtitle text |
| Title color | The color of the title text in the 1/3 column |
| Border color | The border color below the title in the 1/3 column. Can also be updated by clicking the border itself in the 1/3 column. |
| Space above/below border | The space above and below the border in the 1/3 column. |
| Gap size | The space between the 1/3 and 2/3 columns. Default is 15px. Minimum is 10px. Maximum is 100px. |
| Space above/below | The space above and below the entire block |
33/33/33 (Thirds) Image and Text
The 33/33/33 (Thirds) Image and Text Block is an evenly split three column component with an introductory title and description area above the columns. Each colum in the block includes an image, title, and content elements.
Insert the block by clicking on the 33/33/33 Image and Text graphic in the Add a Block > Columns panel.
Initial State
Below is an example of the initial state of the Thirds Image and Text Block.
Click within the Block title and Block description to edit these fields like any text block element.
Image Options
Click the Choose Image button on each image placeholder to choose an image from your media library or upload a new image. Once loaded, you can access more image controls by clicking the image you've just updated.
The image toolbar includes options for choosing another image, adding a link to the image, updating the height and adding rounded corners to the image.
Properties Panel
Click the (...) options button in the block toolbar to access the properties panel. Properties available for editing include:
| Property | Description |
|---|---|
| Background color | The background color of the entire block. The background of this block stretches the full width of the page. |
| Title color | The title color of the entire block. |
| Description color | The description color of the entire block. |
| Title and description | Controls the title and description color within each column. |
| Block Elements | Toggle the visibility of the block Heading, block Description, column Title and column Descriptions. |
| Image Height | Adjust the height of the column images. Applies to all images. |
| Gap Size | Adjust the size of the gap between the columns. |
| Block Height | Adjust the block height. Applies extra height equally to the top and bottom of the block. |
| Space above/below | Adjust the space above and below the block, between itself and surrounding blocks. |
Full Example
