Use the CSS option to build your web page

Creating complex page layouts to make your site dynamic and up to date is easy to do with the page builder tool.

You can fine tune your design by applying class and ID for unique styles on the content within that block or column without affecting the other blocks on your page.

This CSS technique requires base notions in CSS and HTML and is typically used by advanced webmasters. Please note that it is possible to add styles to pages or styles to images using the visual editor. So let's move on to how to use CSS when editing your items if you are ready to advance.

Key definitions

CSS: a language used for describing the presentation and design of an aspect of your site

To personalise the design of your site, you will use the design format Settings > Design > Personalize. This is also where you can add CSS. This can be done in two ways, you will scroll to the bottom of the page where you will add or edit CSS (advanced users) or you can choose to put the stylesheet in expert - CSS mode. For more information, we recommend reading the tutorial : choose a theme and personalize the design.

A class and an ID: These attributes are used to apply your CSS styles to content. While there are few differences between classes and ids, the only one that is important is that ID can only be used once in a page. You can use ID's as anchors(a specific point in your page).

ID's are represented by a hashtag #. Classes are represented by a period .

For example

If I want to create a style for an image frame i would assign the attribute #imageframe

If I want to create a class for an image frame I would assign the attribute .imageframe

In this example, I would want to use the class .imageframe because I want to use this image frame more than once in my page.

Case study : modify the style of a text with an ID

It is easy to use the visual editor toolbar to format your text (like bold, italics, the font and the size). Nevertheless, it is preferable to use CSS if you know that these styles will be used more than once. Like the following example:

To keep a coherent design between all our pages, we decide to apply the same style to each introduction text of every page of our site. (Just as we do on emyspot.com). To do this we are going to create an ID.

Creation of an ID in the CSS Zone

Apply the ID to your block of content

Once you have created the ID in Settings > Design > Personalize.
You can also create an ID or a class in Settings > Global Settings > Editable Zones, in the section CSS styles.
To apply the ID to your content block, edit the page, click on the Design button (found at the bottom of each block to the left), select the style le style Personalized (class/ID) then indicate the name of the ID you created.
Save and view your page on the site to see the applied style