All About Working with Margins in EverWeb!

When it comes to setting up your page margins in EverWeb, there are a few different ways in which they can be set. Typically, you’ll want to use margins in your site’s pages for those times where your content is either bumping up to other objects, or when your content is bumping in to the left, right, top or bottom of the page. Margins are important to set for any page type in your site as they make it easier for your visitor to scroll your page’s content without obscuring the content itself. Margins also help present your page in a more aesthetically pleasing way to your visitors than if you don’t use them.

In this post, we’re going to look at setting margins for both fixed width and responsive pages.

Applying Margins
The first thing to note is that you cannot set left and right margins for the page itself. Instead you set margins on an object by object basis which we will discuss later on. You can, however, set a top margin for the page using the Top Margin field in the Page Layout section of the Page Settings tab. By default this is set at zero for both Center Aligned (Fixed Width) and Responsive page types. We usually recommend leaving this field value at zero as your page header is typically where you will adjust the spacing that you want at the top of the page, rather than using the Top Margin field. This is not a hard and fast rule however, but usually adjusting the Header spacing is easier visually to. do than having to adjust the value of the Top Margin field.

We’ll talk more about headers later as there are difference in approach between Center Aligned and Responsive pages in their use.

You’ll also notice that there is no bottom margin setting on the page, instead the Footer is used to add the spacing needed to create a bottom margin, so adjust the Minimum Footer Height as you require to get the spacing you want. Some widgets include a bottom margin setting though, whilst others include Padding options, which we will also come to later on.

Note too, that the setting in the Page Layout section of the Page Settings tab is the “‘Minimum’ Footer Height”. This is because the Footer will expand vertically as needed to accommodate the content that you put in it. This applies to both Center Aligned and Responsive page layouts.

Setting Margins for Fixed Width Pages
When using a fixed width Page Layout, such as the Center Aligned Page Layout, you’ll probably find that your use of margins will be something that you do automatically just by where you place objects on the page. You do have the option to set left and right margins in the Metrics Inspector although these are only used when the Full Width option has been checked for the selected object. Typically, because of the free format nature of designing fixed width pages, you won’t usually need to use this option either as you will size the object you are using to the width that you want

Probably the only time where you will be using margins is setting the top and bottom margins of the page. You can easily do this for the Header and Footer sections of the page if needed by adding an empty shape or TextBox in each section at the height that you want the top and bottom margin to be. As the shape is empty, it will not be displayed when you publish your site.

Setting Margins for Responsive Pages
Whilst there is generally no need to set margins for fixed width pages, responsive pages offer a different challenge. A responsive page is constructed in full width sections that run down the length of the page. In Responsive design, there is no header as this is just another full width section of the page so needs no special set up. So simply add a section at the top of your page to act as the Header and set the size it vertically to create your top margin.

As we mentioned earlier, EverWeb does not let you set left and right margins on a page by page basis. For Fixed Width pages this is usually not something you need to worry about, but in Responsive pages, you should set left and right margins for each of your full width objects. This is especially important for mobile devices as you don’t want your content running right to the edges of the phone.

To set left and right margins, simply select the full width object you want to add margins to, then go to the Metrics Inspector. Set the Left and Right margins as you wish. We usually recommend about 20-30 pixels for each margin. Repeat this process for all full width objects on the page so you have a consistent margin going down the page.

Using Widgets To Set Margins
You’ll find that some of EverWeb’s built in widgets also allow you to set margins, for example, the Responsive Row widget allows you to set margins between the objects that reside inside it. The margin value that you set will reapplied to both the left and right of the objects that are within the Responsive Row Widget. This widget’s also allows you to set Top and Bottom Padding. This really acts as a top and bottom margin within the widget which as the field’s name implies, does add padding to the widget. However, padding also can mean something a little bit different in EverWeb…

Using Padding in Widgets
The Responsive Row widget may be the exception here, as padding in other widgets such as the Navigation Menu widget usually refers to an indentation effect, both horizontally and vertically. If you try this, you’ll see your content typically move down and to the right as you increase the value of the Padding.

Setting Margins in Blog Posts
The one place where you won’t find margin settings is in the Blog Post Editor. The reasoning here is that blogs, traditionally, are used for displaying a lot of text with minimal formatting. In EverWeb, you can add formatting using the Blog Post Preview Window which sits below the Blog Post Editor. Use this window to add in your margins and formatting as desired.

Adding margins to your site’s pages makes sense so that your content is displayed to its advantage. Depending on the type of page your create, the way in which you set up your page margins will differ.