GLOBAL AND LOCAL STYLING

Freedom and Diversity

Style and design websites with ultimate freedom and flexibility. With V5 we're introducing Global Styling, a powerful tool in designing websites to be unique, without ever having to touch the CSS code itself.

Change all elements of styling within backgrounds, borders, spacing, and typography in one central place to create dramatic affects in design with just a few clicks or drags of your mouse. Local styling then allows you to differentiate design on individual pages or elements if desired.

Styling can also be defined by viewports for the ultimate user expereience on any device. Make sure to watch the videos on this page to learn all you need to know about V5 styling.

THE BASICS IN STYLING

Within global and local styling there are four main design elements to focus on - spacing, borders, backgrounds and typography. These define the design of rows, columns and modules, essentially the overall look and feel of the website. Watch the video below to see global and local styling in action.

SPACING


Margin determines the space outside an element while spacing determines the space on the inside. You can define margin and spacing for rows, columns and some modules.

BORDERS


Adjust the styling of borders on rows, columns and some modules including the thickness, style (e.g. dotted) and color. You can also choose to round edges of elements.

BACKGROUND


You can easily define both global and local styling for your background settings including color, transparency and images to create unique affects across rows and columns.

TYPOGRAPHY

Typography is one of the most defining features of any website. Style elements like fonts, text sizes, colors and more for content elements like headers, content, buttons and more.

GLOBAL STYLING


Global styling is what gives you ultimate power in design with V5. Make simple changes that then apply across the entire site with just a few clicks, making web design at scale easier and more professional. Do all this without ever touching CSS code.

GLOBAL LAYOUT SETTINGS

Global Layout Settings include the Body, Main Wrapper and Content Wrapper. Adjusting these three settings allows you to design the overall frame of your website. You can create a unique feel for the website by adjusting the spacing, borders and backgrounds within these settings. Watch the video below to learn more.

The illustration below shows the relationship between these three elements. Note that the Content Wrapper does not include the site's header or footer. Settings for these elements can create stunning and unique design for pages and websites as a whole.

GLOBAL MODULE STYLING

Within Global Styling you can define design and styling for modules, allowing you to style them down to the smallest detail, without ever needing to code the CSS. The styling you define for modules here is the design that will be used as default when you then drag the modules onto the pages you’re building. Remember you can always edit individual modules to edit 'local' styling. Watch the video below to learn more.

DESIGN HEADER AND FOOTER

The design of your website’s header and footer is very important both from a visual perspective but also for calls to action. V5 gives you the ability to highly customize both your header and footer, just as you want. Build them up in the Global Styling area just like you build up pages.

PAGE STYLING

Page styling is also what we call Local Styling. Local/Page styling is done in the PAGES area of the editor, where you build up the pages themselves. Local styling refers to individual elements that you want to differentiate from the website's Global Style.