Column Spacing

10/20/2016

Column spacing plays a huge factor in designing a creative website. Avada gives you the freedom to choose the amount of column spacing that shows between columns. There are global options, and element options. Please read below to learn about each area that offers column spacing options.

Blog Element With A Grid Layout

Step 1 – Add a Blog Element by clicking the ‘+ Element’ button in a column.

Step 2 – Click the ‘Element Settings’ icon on the Blog Element, then set the ‘Blog Layout’ option to Grid.

Step 3 – Locate the ‘Grid Layout Column Spacing’ option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 20.

Step 4 – Once finished, click ‘Save’.

IMPORTANT NOTE
Column Spacing for the Blog Element only works for the Grid Layout.

Portfolio Element With A Grid Layout

Step 1 – Add a Portfolio Element by clicking the ‘+ Element’ button in a column.

Step 2 – Click the ‘Element Settings’ icon on the Portfolio Element, then set the Layout option either to Grid, or Grid with Text.

Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 20. You can also click the ‘Use Default Value’ radio field to use the default value set in Theme Options.

Step 4 – Once finished, click ‘Save’.

IMPORTANT NOTE
Column Spacing for the Portfolio Element only works for the Grid, and Grid with Text Layout.

Image Carousel Element

Step 1 – Add an Image Carousel Element by clicking the ‘+ Element’ button in a column.

Step 2 – Click the ‘Element Settings’ icon on the Image Carousel Element.

Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

Step 4 – Once finished, click ‘Save’.

IMPORTANT NOTE
This option is only available with Avada version 3.8 or above.

Column Element

Step 1 – Click the ‘Column Settings’ icon on the Column Element.

Step 2 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 20.

Step 3 – Once finished, click ‘Save’.

WooCommerce Featured Products Element

Step 1 – Add a Woo Featured Element by clicking the ‘+ Element’ button in a column.

Step 2 – Click the ‘Element Settings’ icon on the Woo Featured Element.

Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

Step 4 – Once finished, click ‘Save’.

WooCommerce Carousel Element

Step 1 – Add a Woo Carousel Element by clicking the ‘+ Element’ button in a column.

Step 2 – Click the ‘Element Settings’ icon on the Woo Carousel Element.

Step 3 – Locate the ‘Column Spacing’ option. Set your desired column spacing value in the text box provided. For example, 13.

Step 4 – Once finished, click ‘Save’.

Step 1 – Navigate to Avada > Theme Options > Extra > Related Posts / Projects tab.

Step 2 – On this tab, locate the ‘Related Posts / Projects Column Spacing’ option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 44.

Step 3 – Once you’re happy with your settings, click the ‘Save Changes’ button.

Fusion Theme Options

Inside the Fusion Theme Options which is located in Avada > Theme Options, there are also options for column spacing specifically in the Blog and Portfolio tab. These options only affect the Blog Grid and Portfolio pages, but not the Blog and Portfolio elements. Column spacing for the Blog and Portfolio elements must be set individually per element.

To access this, navigate to Avada > Theme Options > Blog > General Blog.


To access this, navigate to Avada > Theme Options > Portfolio > General Portfolio.


0 Likes
Proudly Serving Over 390000 Satisfied Users!