Customized Page Design

Although Yapla offers a basic template for your site, it is also possible, with a minimum of technical knowledge, to completely customize it to your image.

Before starting the design, it is advisable to choose a template that most closely resembles the desired style, or the blank template which is uncluttered, and to place your various elements.

You can change the skin of your site, a master page or a single page according to your tastes and needs.

Customizing the master page

Master pages serve as a template for content that is common to all of your pages. Most of the time, the header and footer will end up in a master page along with blank lines for the personalized content of the different pages.
Lines with no content or blanks will not be generated on the site, regardless of whether they are from a master page or a regular page. You can therefore provide several sections to customize according to your needs.

It is possible to create many master pages, in order to create different layouts.

mceclip0.png

 

CSS class of a master page

To make the dressing of your page easier, you can add classes (separated by a space) on the master page. These will appear on the <body>  of every page created from the master page.
 
The CSS Class field is found in the Configuration submenu of your master page, in the Graphic Presentation section.
This field is also available on individual pages, in order to create a unique style for a specific page.
mceclip1.png

Organize the lines of your master page

For effective targeting of the lines of your master page, consider adding a class that defines each line. By default, each line already contains the line class. In the following example, we have defined each line class with the prefix "line-". This allows you to target a line without conflicting with classes that may potentially exist elsewhere in the code, such as: logo, content and footer.
 
3.jpg

To add a class, in your master page interface, hover over a row and click Define line style located at the top right corner of the row.
 
mceclip2.png
 
The CSS Class field will be available to you.
 
mceclip3.png
 

Customize website

To dress up the basic elements of your pages, start by adding your styles in the Customization section of the website application.
 
mceclip4.png
 
The Guided sub-menu makes it easy to choose colors and fonts for your site.
 
mceclip5.png
 
In the interface of the Basic submenu, you have access to the following tags: body, h1, h2, h3, h4, hover and active link and the buttons.
 
mceclip6.png

After the basic dressing, you also have access to Advanced customization. This text box allows you to add CSS in its pure form. This will be generated frontally inside <style> ... </style> tags. Note that this css will be called last on the page, which will allow you to replace the default styles with yours.

mceclip7.png
 

Skin of a single web page

Finally, it is possible to change the design of a specific page of your website, without changing the design of the whole site.

Choose the page you want to change from the list of pages on your website

mceclip8.png

Then choose the Personalization sub-menu and check the Personalize my web page box.

mceclip9.png

You will then see the same menu that allows you to change the color and fonts of that particular page. Modify your selection and click Save.

You can click mceclip2.png  at anytime to see the changes made to the design of your website.

Was this article useful?

Comments

0 comments

Please sign in to leave a comment.