Split Columns With The Text Block Element

11/06/2019

The Fusion Builder Text Block element now allows split columns for running text, images, dropcaps, highlights, and other non-block elements. You can split your post content to up to 6 columns. This would be great for a newspaper/magazine look on your site. Please continue reading below to know more about this new feature, which is available in Avada version 5.5 or higher.

IMPORTANT NOTE: Choosing the number of columns (1-6) and how that is displayed on your page will be affected by, and dependant on, what size Column the Text Block Element has been added to. If added to a 1/1 Column, the site width is taken into account. If added to a 1/2 Column, the width of the 1/2 Column is taken into account, etc. Some usage examples are shown below.

Usage Examples

  • 1/1 Column – Text Element added with ‘Number Of Inline Columns’ set to 3, ‘Column Min Width’ set to 270px and ‘Column Spacing’ set to 1em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Morbi consectetur lectus a est posuere, in congue sem porttitor. Vestibulum at iaculis dolor. Fusce laoreet, ligula sed aliquam feugiat, leo erat rutrum augue, vehicula auctor turpis nisl eu massa. Nunc ac ex euismod, commodo enim id, dictum enim. Donec eget lacinia enim, sit amet rhoncus sapien. Integer est nisi, ullamcorper at nunc a, auctor condimentum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla suscipit pharetra libero, non aliquet elit aliquam ac. Quisque faucibus ex id egestas commodo. Sed tempor dui massa, sed hendrerit justo feugiat id. Pellentesque dapibus enim orci, ut blandit metus lobortis nec. Mauris iaculis leo ac mi vulputate dignissim. Quisque hendrerit venenatis aliquam. Vivamus dolor diam, volutpat sit amet tincidunt malesuada, laoreet eu ligula. Vestibulum eget mauris fringilla, lacinia lorem non, pharetra eros. Morbi eleifend arcu dolor, congue facilisis nisi euismod sed. Fusce blandit at diam non varius. Vivamus euismod consequat magna at scelerisque. Pellentesque dapibus enim orci, ut blandit metus lobortis nec. Mauris pellentesque tortor eget ultrices sagittis.

  • 1/2 Column – Text Element added with ‘Number Of Inline Columns’ set to 2, ‘Column Min Width’ set to 200px and ‘Column Spacing’ set to 0.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Morbi consectetur lectus a est posuere, in congue sem porttitor. Vestibulum at iaculis dolor. Fusce laoreet, ligula sed aliquam feugiat, leo erat rutrum augue, vehicula auctor turpis nisl eu massa. Nunc ac ex euismod, commodo enim id, dictum enim. Donec eget lacinia enim, sit amet rhoncus sapien.

  • 1/3 Column – Text Element added with ‘Number Of Inline Columns’ set to 2, ‘Column Min Width’ set to 120px and ‘Column Spacing’ set to 0.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida.

How to Split Columns with Text Element

Step 1 – Create a new page, and add a container and a column choice using the Fusion Builder. Inside the column, add a ‘Text element’.

Step 2 – In the ‘Number of Inline Columns’ option, set the number of columns the text should be broken into. You can choose from 1 to 6. The default selection of 1 for this option is the default Text Column Element. Choose more than one, for example, 2-6 and additional options will be displayed. Note: This feature is designed to be used for running text, images, dropcaps and other inline content. While some block elements will work with it too, their usage is not recommended, and others can easily break the layout.

Step 3 – Set the minimum width for each column through the ‘Column Min Width’ option. This allows your columns to gracefully break into the selected size as the screen width narrows. Leave this option empty if you wish to keep the same amount of columns from desktop to mobile.

Step 4 – Set the ‘Column Spacing’ option, this will control the column spacing between one column to the next.

Step 5 – Set the ‘Rule Style’ of the vertical line between columns. Choose between None, Solid, Dashed, Dotted, Double, Groove, or Ridge. Some of the styles depend on the rule size and rule color.

Step 6 – Next, set the ‘Rule Size’ option, which sets the size of the vertical line between columns. The rule is rendered as “below” spacing and columns, so can span over the gap between columns, if it is larger than the column spacing amount. It can be set from 1 to 50.

Step 7 – Set the ‘Rule Color’ option to your preferred color. This controls the color of the vertical line between columns.

Step 8 – You can add your content in the Content’s Visual/Text editor.

Step 9 – Once done, save the Text element and the page.