Habillage personnalisé des pages

S’abonner

Bien que Yapla offre plusieurs templates pour votre site, il est également possible, avec un minimum de connaissances techniques, de le personnaliser complètement à votre image. 

Avant de commencer l'habillage, il est conseillé de choisir un template qui se rapproche le plus du style désiré, ou le gabarit vierge qui est épuré, et de placer vos différents éléments.

Vous pouvez modifier l'habillage de votre site, d'une page maîtresse ou d'une page unique selon vos goûts et vos besoins. 

Habillage de la page maîtresse

Les pages maîtresses servent de gabarit pour le contenu qui est commun à toutes vos pages. La majorité du temps, l’entête et le pied de page se retrouveront dans une page maîtresse avec des lignes vides pour le contenu personnalisé des différentes pages.
Les lignes sans contenu ou vides ne seront pas générées sur le site, peu importe si elles proviennent d’une page maîtresse ou d’une page régulière. Vous pouvez donc prévoir plusieurs sections à personnaliser selon vos besoins.

Il est possible de créer plusieurs pages maîtresses, afin de créer différentes mises en page.

mceclip0.pngmceclip1.png

Classe CSS d'une page maîtresse

Pour faciliter l'habillage de votre site, vous pouvez ajouter des classes (séparées par un espace) sur la page maîtresse. Celles-ci apparaîtront sur le <body> de chaque page créée à partir de la page maîtresse.
 
Le champ Classe CSS se trouve dans le sous-menu Configuration de votre page maîtresse, dans la section Présentation Graphique. 
Ce champ est également disponible sur les pages individuelles, afin de créer un style unique pour une page précise.

Inkedscreencapture-s1-yapla-web-fr-masterpage-edit-siteId-1507-pageId-16080-2020-02-20-10_28_35_LI.jpg

Organiser les lignes de sa page maîtresse

Pour un ciblage efficace des lignes de votre page maîtresse, pensez à rajouter une classe qui définit chaque ligne. Par défaut, chaque ligne contient déjà la classe line. Dans l’exemple suivant, nous avons défini chaque classe de ligne avec le préfixe “line-”. Ceci permet de cibler une ligne sans entrer en conflit avec des classes qui peuvent potentiellement exister ailleur dans le code, tels que : logocontent et footer.

3.jpg

Pour ajouter une classe, dans l’interface de votre page maîtresse, survolez une ligne et cliquez sur Éditer le style de la ligne situé au coin supérieur droit de la ligne. Le champ Class CSS sera à votre disposition.
blobid0.jpg
mceclip3.png
 

Personnalisation du site web

Pour habiller les éléments de base de vos pages, commencez tout d’abord par ajouter vos styles dans la section Personnalisation de l'application site Web.
 
mceclip4.png
 
Le sous-menu Guidé permet de choisir facilement les couleurs et les polices de votre site. 
 
screencapture-s1-yapla-web-fr-web-guided-siteId-4967-2020-02-20-11_34_25.png
 
Dans l'interface du sous-menu Basique, vous avez accès au balises suivantes: body, h1, h2, h3, h4, lien en survol et actif et le boutons. 

mceclip5.png

Après l’habillage de base, vous avez aussi accès à la personnalisation Avancée.
Cette zone de texte vous permet d’ajouter le CSS dans sa forme pure. Celle-ci sera générée en front à l’intérieur de balises <style>...</style>. À noter que ce css sera appelé en dernier sur la page, ce qui vous permettra de remplacer les styles par défaut avec les vôtres.

mceclip6.png


Habillage d'une page web unique

Finalement, il est possible de modifier l'habillage d'une page spécifique de votre site web, sans modifier l'habillage de l'ensemble du site. 

Choisissez la page que vous désirez modifier dans la liste des pages de votre site web

mceclip0.png

Choisissez ensuite le sous-menu Personnalisation et cocher la case Personnaliser ma page web.

mceclip1.png

Vous verrez ensuite s'afficher le même menu qui permet de modifier la couleur et les polices de cette page particulière. Modifiez votre sélection et cliquez sur Enregistrer!

En tout temps, cliquez sur mceclip2.png pour voir les modifications apportées à l'habillage de votre site web.

 

Utilisateurs qui ont trouvé cela utile : 0 sur 0

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.