Le plugin Visual Composer pour WordPress est sans doute un des plugins les plus utiles pour la création de pages WordPress. Simple d’utilisation et performant, il accompagne l’ensemble de nos projets WordPress.

Toutefois et pour des raisons inconnues Visual Composer ne permet pas de créer une rangée de 5 colonnes. Il est possible d’avoir 3, 4 ou 6 colonnes mais pas 5.

Nous allons voir dans cet article comment y remédier en utilisant les classes CSS.

Le principe général est simple, il s’agit de définir la largeur des 5 colonnes à 20% et de masquer la 6ème colonne sans oublier de rendre « responsive » nos 5 colonnes.

1ère étape : créer une rangée de 6 colonnes

1ere etape

2ème étape : Donner une classe CSS à la rangée

Editer la rangée de 6 colonnes en cliquant sur le picto « crayon » et donner lui la classe : conteneur-colonnes

3ème étapes : Donner une classe CSS à la dernière colonne

Pour « masquer » cette 6ème colonne nous allons lui donner une classe CSS spécifique : colonne-6

3eme etapes

4ème étape : Définir la largeur de chaque colonne

.conteneur-colonnes .vc_col-sm-2 {
width: 20%;
position: relative;
}

5ème étape : Masquer la 6ème colonne

.colonne-6 {
visibility: hidden;
width: 0px;
padding: 0px;
}

6ème étape : Adapter le style pour l’affichage responsive

@media only screen and (max-width: 768px){
.conteneur-colonnes .vc_col-sm-2{
width: 100%; }
}

Le résultat final :

final

Vous serez peut être intéressé par

8 commentaires

  • Stéphanie  10 février 2017 à 10 h 38 min

    Super simple.
    Efficace.
    Et tellement utile.
    Merci. Il fallait y penser !!

    Répondre
    • vincent  22 février 2017 à 9 h 36 min

      Bonjour,

      Pour les étapes 4, 5 et 6 il faut soit saisir ces informations dans la feuille de style externe qui se situe généralement dans le répertoire du serveur wp-content/votre-thème.

      Si vous n’avez pas accès à ce répertoire le plus simple est d’ajouter directement ces informations dans la page sur laquelle vous travaillez en cliquant sur la roue crantée à gauche du bouton front-end que l’on aperçoit sur les captures d’écran ci-dessus et de copier/coller les informations des classes CSS.

      Répondre
  • Romuald Paris  20 février 2017 à 13 h 34 min

    Désolé, mais je n’ai pas tout compris. Pouvez-vous détailler chaque étape ?
    ça veut dire quoi ? Donner une classe CSS à la dernière colonne
    le code on doit le mettre où ?

    Répondre
    • vincent  22 février 2017 à 9 h 43 min

      Bonjour,

      Pour donner une classe CSS à un élément de la page en l’occurence les colonnes, il faut cliquer sur le picot « crayon » matérialisé par un point orange sur les captures d’écran ci-dessus, puis renseigner le champs « Nom de la classe additionnelle« .

      Ensuite pour donner des paramètres à ces classes CSS, il faut cliquer sur la roue crantée à gauche du bouton front-end que l’on aperçoit sur les captures d’écran et copier/coller les informations des classes CSS.

      Répondre
  • Matthieu  23 février 2017 à 17 h 56 min

    Salut,

    Merci pour cette astuce !

    J’ai utilisé cette dernière pour une rangée de trois. Ma problématique étant que je me retrouve avec 7 pictos, soit deux rangées – une de 4 et une de 3 en dessous. Je souhaitais garder les mêmes proportions.

    J’ai donc suivi les mêmes étapes – en partant d’une rangée de 4 – mais en modifiant le CSS comme suit :

    /*Visual Composer – 3 Colonnes*/
    .conteneur-colonnes3 .vc_col-sm-3 {
    width: 33.333%;
    position: relative;
    }

    .colonne-4 {
    visibility: hidden;
    width: 0px;
    padding: 0px;
    }

    @media only screen and (max-width: 768px){
    .conteneur-colonnes3 .vc_col-sm-3{
    width: 100%; }
    }

    A+

    Matt

    Répondre
  • Nicolas  27 février 2017 à 16 h 14 min

    Bonjour et merci pour cette astuce.
    Je rencontre cependant un petit soucis à savoir que j’ai sous mes colognes un interligne egal à la hauteur de colonne initiales.
    Y a t-il une petite solution ?
    Merci.
    Nicolas.

    Répondre
    • vincent  28 février 2017 à 7 h 56 min

      Bonjour Nicolas,

      Je n’ai pas compris ton soucis, pourrais tu copier/coller un lien vers la page qui pose problème ?

      Répondre

Laisser un commentaire

Merci de saisir votre nom Merci de saisir une email valide Merci de saisir un message

Real Time Web Analytics