Good practices

Here are a few remarks that will help you better understand and use the layout of your sites, even if it evolves, the trend still remains to create “centered” sites with an extended background or not, this is where the properties of the Box are important.

Boxes, margins and spacer

  • Use of the Box

    As a reminder, the Box is the first component that you drop on a page, it contains one or more lines containing in turn, components (image, button, color area, …).

  • Use of Margins

    One of the new features of this version is the integration of Margins (not to be confused with Spacers). The Margin is present for a Box but also for a large number of components (text, gallery, image, …) and it is the presence of these 2 options that will allow you to create a custom (and original) site. Don’t hesitate to use them to create component offsets for example,…

  • Using Spacers

    Spacers are effective for centering a component (such as a menu) and for defining a display area (such as an image), otherwise in the vast majority of cases, we recommend using margins and horizontal spacing (in a line with several components).

Examples

Example of a good use of the Horizontal Spacer :

../../_images/spacer1.png
../../_images/spacer2.png

Example of a good use of the Vertical Spacer :

../../_images/spacer_vert.png

Same component with 1 px vertical spacer:

../../_images/spacer_1px.png

Using the Keyboard Keys

  • The Shift key pressed :

    This key is used to scroll (navigate) in depth through the elements under the mouse. For example, you are positioned on a text component, by clicking on the mouse (and shift key pressed), you will go in turn from the text component, to the line component and then Box. This will help you to quickly browse through the different properties/options applied to the chosen components.

  • Press the Ctrl key :

    In a more traditional way, this key allows you to select several components in order to copy/paste them elsewhere on the same (or another) page.