1. Accueil
  2. Tutoriels
  3. Pages
  4. Personnalisez le style des pages

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.

Pour cela il suffit de cliquer sur le bouton Style prédéfini en bas de chaque ligne de l'éditeur visuel. Choisissez ensuite le style Séparation de colonnes. Enregistrez les modifications.

Si vous avez une colonne de texte et une colonne contenant une image, le principe est le même.

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.

Colonne surbrillance

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.

Ligne en surbrillance

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.

Survol colonne

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.

Survol ligne

Mettre du contenu en avant ou en arrière

Ligne avant arriere

Dans les styles prédéfinis, vous avez la possibilité de créer une ligne avec un effet "Montrer / Cacher" comme pour cette ligne. Il faut placer un titre sur la ligne, qui servira de lien pour que l'effet soit fonctionnel. 

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.

Ces tutoriels pourraient aussi vous aider :

Format d'images

Personnaliser le style des images

Format polaroid ou image ronde : découvrez comment appliquer facilement des styles sur vos images pour rendre vos pages attractives et originales.

Option CSS pages

Utiliser l'option CSS dans vos pages

Grâce aux class et aux ID, appliquez des styles sur des lignes de contenu pour créer des pages au design encore plus personnalisé !