Personnaliser le design de pages web sur un site internet

Comme vous pouvez le voir, nous avons appliqué la séparation de ligne pour cette partie du tutoriel, comme dans le cas présent la ligne de séparation s'affichera au dessous de votre ligne. De la même façon que pour la séparation des colonnes, la séparation de ligne permet d'organiser nettement vos contenus.

• Pour appliquer ce style à vos lignes : cliquez sur le bouton Style prédéfini en bas de l'éditeur visuel puis séléctionnez le style Séparation de ligne via le select affiché en dessous du bouton. N'oubliez pas d'enregistrer les modifications.

Il est également possible de choisir le style Colonnes en surbrillance, c'est à dire appliquer une couleur de fond pour le contenu de vos colonnes. Vos contenus, widgets, photos et textes seront donc valorisés et délimités plus clairement. Vous pourrez ainsi ajouter une note plus personnelle à vos mises en page.

• En bas de la ligne de votre éditeur visuel, cliquez sur le bouton Style prédéfini et séléctionnez à l'aide du select le style Colonnes en subrillance. Enregistrez.

Notez tout de même que la surbrillance sera appliquée à chacune des colonnes de la ligne, il n'est pas possible de réserver ce style à une seule de vos colonnes, sauf si vous utilisez le style avancé qui est destiné aux utilisateurs confirmés.

Le principe est le même que pour les colonnes (voir ci-dessus) mais cette fois-ci la surbillance s'applique à l'intégralité de votre ligne. Et ce même si votre texte a été conçu en colonnes. Vous pourrez ainsi diversifier le design de vos pages. Pour ce style, le titre est également mis en surbrillance.

• Cliquez sur le bouton Style prédéfini au bas de la ligne de votre éditeur visuel. Via le select, séléctionnez le style Ligne en surbrillance et enregistrez.
• Vous pouvez aussi ajouter un encadré de couleur autour d'un texte pour faire ressortir de l'information. Pour cela, nous vous invitons à lire le tutoriel : ajouter une class Alert.

L'effet survol des colonnes met en avant, grâce à un fond coloré, le texte de vos colonnes lorsque la souris le survole (survolez la colonne ci-contre pour voir le résultat).

Cela permet de mettre en avant certains de vos contenus sans alourdir la page de fonds colorés comme pour la surbrillance.

• En bas de la ligne de l'éditeur visuel cliquez sur le bouton Style prédéfini. Séléctionnez le style Effet de survol sur les colonnes grâce au select s'affichant en dessous du bouton apparence. Pensez à enregistrer.

Pour que le fond du contenu de votre ligne se colore au passage de la souris, il faut appliquer l'effet de survol sur la ligne.

• Cliquez sur le bouton Style prédéfini situé au bas de la ligne de votre éditeur visuel. Grâce au select apparu en dessous du bouton, définissez le style Effet de survol sur la ligne et enregistrez les modifications.

Les couleurs et l'apparence des lignes en général sont définies automatiquement à partir des couleurs du thème que vous utilisez. Il est possible de les modifier via votre manager. 

Comme vous modifiez les éléments pour l'ensemble de votre site, ces modifications peuvent également entrainer un changement des couleurs du fond et des bordures de vos billets de blog ou de celles des champs de vos formulaires de contact par exemple. 

• Pour cela rendez-vous dans Configuration > Apparence > Personnaliser > Contenu. Choisissez ensuite la couleur de surbrillance et de survol dans le champs Fond alternatif. Pour choisir la couleur des lignes de séparation et de bordure des fonds modifiez le champs Couleur des bordures.