Personnaliser le design de pages web sur un site internet

Ajoutez des styles de design à vos colonnes et vos lignes sur votre site internet. Grâce à l'outil de création de pages web, il est désormais possible d'ajouter des lignes de séparation ou de mettre en avant certains de vos contenus en surbrillance ou dans des encadrés.

Les couleurs de fond ou de séparations sont définies en fonction de votre thème mais il est possible de les changer facilement via votre manager permettant la création de votre site internet.

Des styles personnalisés pour créer de belles pages

Comment ajouter ces options sur des lignes et des colonnes ?

Ajouter une ligne de séparation entre les colonnes

Vous pouviez déjà ajouter vos contenus sous forme de colonnes. Désormais celles-ci peuvent être scindées par une ligne de séparation à l'image des 2 colonnes de cette ligne.

Cela permet de créer des séparations nettes et plus esthétiques entre vos colonnes et d'utiliser l'intégralité de l'espace sur votre page. Le contenu est donc plus aéré et mis en valeur.

Ajouter une séparation entre les lignes

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.

Ajouter un effet de surbrillance aux colonnes

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.

Mettre une ligne en surbrillance

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.

Appliquer l'effet de survol sur les colonnes

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.

Appliquer l'effet de survol sur une ligne

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.

Mettre du contenu en avant ou en arrière

Ajouter une ligne avec un effet accordéon (Montrer/Cacher)

Personnaliser le design: couleur de fond, effet de survol etc...

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.