Column Spacing Options

Column Spacing Options

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. Also, please see the How To Control Spacing With Avada & Fusion Builder doc for more information on this topic.
Overview
Blog Element With A Grid Layout
Portfolio Element With A Grid LayoutImage Carousel ElementColumn ElementWooCommerce Featured Products ElementWooCommerce Carousel ElementRelated Posts / ProjectsGeneral Blog and Portfolio in Fusion Theme OptionsBlog Element With A Grid LayoutStep 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 LayoutStep 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 ElementStep 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 ElementStep 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, 20px. This setting can take any valid CSS unit.
Step 3 – Once finished, click 『Save』.
WooCommerce Featured Products ElementStep 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 ElementStep 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』.
Related Posts / ProjectsStep 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 OptionsInside 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.

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注