How To Split Columns With The Text Block Element
Last Update: May 20, 2024
The 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.
Usage Examples
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.
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.
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 Avada 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.
