Controlling spacing in websites has traditionally been very difficult for non developers. Custom CSS has long been used to style pages, including margins and padding. But Avada Builder goes a long way towards making spacing a breeze, even if you have no coding knowledge whatsoever. Read below to find out where and how to take control of your site spacing using Avada Builder.,Overview
The Difference Between Margins and Padding
Where To Control Spacing
Controlling Spacing With Global Options
Element Global Options
Controlling Spacing With Page Options
Controlling Spacing With Containers
Controlling Spacing With Columns
Controlling Spacing Between Elements
Custom CSS,The Difference Between Margins and PaddingOne of the first things to understand when trying to take control of spacing, is the difference between margins and padding. Simply put, margins are the space around the outside of elements, between one container, column or element and the next. Padding, on the other hand, is the space around the internal content of a container or column. The following diagram is very simple, but it should illustrate the concept clearly enough. If you want further information, try this article.
There are other types of spacing we can control throughout the theme, like column spacing, letter spacing and line heights etc, but in this post we will mostly be focusing on the main ones of margins and padding.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Where To Control SpacingThere is no one place to control margins, padding or column spacing; there are many. Let』s start at the highest level and work our way down. At each level, there are options that control spacing, either globally or locally, so let』s start by looking at the Global Options, then the Page Options, and then down into the Containers, Columns and Elements, and finally to Custom CSS.
Controlling Spacing With Global OptionsIn the Avada Global Options, there are several settings that directly affect spacing throughout your site. If you use the Boxed Mode layout, for example, the Boxed Mode Top/Bottom Offset setting will control how much margin there is above and below the box. If you use the Wide layout, the Page Content Padding option will control how much padding there is above and below your body content (under the Header and the Page Title Bar and above the Footer). Finally, if you use the 100% Width page template, there is a setting called 100% Width Padding to specify how much left and right padding there will be on content that goes full width.
All of these options can be found in the Theme Options at Avada > Global Options > Layout. These options affect every page, but they can also be overridden on a page by page basis via the Page Options (see below).
Read our doc on Page Top & Bottom Padding!Element Global OptionsStill in the Global Options, there are some Elements which have global options for margins and padding. These are found under Avada > Global Options > Avada Builder Elements > and the individual elements.
The following Elements have the option to set either global margins, padding, or column spacing: Blog, Column, Container, Content Box, Events, Gallery, Portfolio, Syntax Highlighter, Tagline Box, Text Block, and the Title Element. These can also be overridden in the actual Element options, when adding the Element.
Controlling Spacing With Page OptionsThe next level down is to control spacing on a page by page basis. These are overrides for the option we have set in the Global Options, but only apply to one page at a time. Settings that can override global spacing are found in the Content Tab.
These may seem minor, but, as an example in the image below, if you have 55px global Page Top Content Padding, and on a specific page you want it to be 0px, you will be very grateful to find the override setting right there on the page in question.
Controlling Space With ContainersNow we find ourselves in the Fusion Builder. As we are building our pages, we have the opportunity to control the various spacing through the elements we use, starting with the very Containers that make up our page.
By default, Containers have no margins or padding set, unless you are using the 100% width template, where the default padding is 30px left and right. You can of course adjust these settings, either in the Container Settings in the Theme Options (Avada > Global Options > Avada Builder Elements > Container) as seen below, or on a Container by Container basis on your individual pages.
Controlling Space With ColumnsColumns, by default, have 20px bottom margin, and 0px padding. Generally, it is most appropriate to set margins and padding on columns and containers, and to use separators to control the space between elements, if there is more than one in a column. But it really must be looked at on a case by case basis.
Read our doc on Column Spacing!Controlling Spacing in Avada LiveWhether you are using the back or front end version of the Avada Builder, controlling spacing in columns and containers is the same, just with some interface differences. Please see the Adjusting Margins & Padding in Avada Live doc & video for more details on controlling spacing when using the front-end builder.
Controlling Space Between ElementsCurrently, there are only a few Elements that have some form of margin and padding control, and a few others have margins built in. In a future version of Avada, we will be introducing full margin and padding control on all elements as well.
The Separator ElementSpecial mention must be made of the very versatile Separator Element. This Element can be used to space out a page, and can be visible or invisible. See the Separator Element Doc for detailed info.
But plainly put, the Separator Element is a very useful element to space out elements within the same column. Most Elements have no margins or padding themselves, and so when multiple elements are placed in the same Column, separators can be very useful as a design tool.,ExamplesHere are a few examples of controlling spacing using margins and padding in various places.
This column has 40px top margin set, which creates a space between it and the column above. I』ve given the column a background color so you can see the margin is outside and above the column. Below is the 20px padding from the paragraph (within the grey area) and the 20px bottom default margin of the column (outside the grey areas).
This column has 50px padding set all around, which creates a large space around the text within the column. Below is the 20px padding from the paragraph and the 20px bottom default margin of the column. I』ve given the column a background color so you can see the padding is within the column.,Custom CSSFinally, there are times when you will have no choice but to revert to Custom CSS to control your site completely. Some elements have built in margins that have no override, and certain designs and advanced layouts can only be achieved by the clever use of Custom CSS. This is beyond the scope of this document, and quite often, this sort of customization is even beyond the scope of Official Support, but there are links below to our docs on CSS, and our awesome Community Forum and the very active Facebook Avada User』s Group.
So, as you can see, there are a lot of places and ways to control the spacing on your website, but getting familiar with the various places to control it will help you make beautiful designs in no time at all, using nothing but your imagination, and Avada.