Point fort du plugin Divi : Divi Accordions Plus

Divi Accordions Plus est un module tiers pour Divi Builder qui ajoute un nouveau constructeur d'accordéon. Utilisez plusieurs modules Divi Accordions Plus ensemble sur une seule page et ils fonctionnent comme un seul accordéon, donc quand l'un s'ouvre, l'autre se ferme. Donnez du style aux accordéons ensemble ou individuellement, affichez des icônes et des images, et bien plus encore. Dans cet article, nous examinerons Divi Accordions Plus, verrons ce qu'il peut faire et verrons à quel point il est facile à utiliser pour vous aider à décider si c'est le bon produit pour vos besoins. Nous utiliserons la mise en page de la page À propos de Poke Restaurant comme toile de fond pour ce didacticiel. Donc, si vous ne l'avez pas déjà téléchargé, vous pouvez le récupérer maintenant avec votre abonnement Divi.

Module Divi Accordéons Plus

Divi Accordions Plus ajoute un nouveau module au Divi Builder. Ajoutez simplement le module où vous voulez dans vos mises en page Divi.

Sous-modules accordéon

Les sous-modules créent des accordéons individuels. Ajoutez-en autant que vous le souhaitez en cliquant sur Ajouter un nouvel élément. Vous pouvez également les cloner, les réorganiser et les supprimer. Ils suivent les paramètres du module principal, mais ils ont des paramètres de contenu et de conception spécifiques que vous devrez utiliser.

Contenu

Ajoutez un titre, un sous-titre (que vous pouvez désactiver si vous le souhaitez) et le contenu du corps. Ce sont les éléments principaux des accordéons.

État de l'article

État de l'élément définit l'état ouvert ou fermé des accordéons lors du chargement de la page. Il est désactivé par défaut, donc les accordéons sont fermés. Je n'ai pas ouvert l'accordéon dans cet exemple. Il s'est ouvert automatiquement lorsque j'ai activé l'état de l'élément.

Paramètres de conception des sous-modules d'accordéon Divi Accordions Plus

L'onglet Conception des sous-modules contrôle les paramètres de cet accordéon. Vous pouvez les personnaliser dans les paramètres du module principal si vous voulez qu'ils se ressemblent, mais vous devrez toujours utiliser ces paramètres pour choisir les images et les icônes. Regardons les paramètres qui sont uniques au sous-module.

Icône de gauche

Icône de gauche contrôle l'élément graphique qui apparaît à gauche de l'accordéon. Activez-le ou désactivez-le, faites-le pivoter à l'ouverture, choisissez une icône ou une image et stylisez-le avec les outils standard de Divi. Une image ou une icône telle qu'un logo fonctionne très bien sur la gauche. Dans cet exemple, j'ai sélectionné une image et activé l'icône de rotation à gauche (Open Toggle), de sorte que l'image a pivoté lorsque j'ai ouvert l'accordéon.

Pour cet exemple, j'ai ajusté l'arrière-plan et la couleur des icônes.

Icône de droite

Icône de droite contrôle l'élément graphique qui apparaît à droite de l'accordéon. Activez-le ou désactivez-le, faites-le pivoter à l'ouverture, choisissez une icône ou une image et stylisez-le avec les outils standard de Divi. Une icône qui indique l'état ouvert ou fermé de l'accordéon fonctionne très bien sur la droite.

Dans cet exemple, j'ai sélectionné une icône différente, modifié la couleur de l'icône, la couleur d'arrière-plan et ajouté une bordure stylée.

Paramètres de contenu de Divi Accordions Plus

L'onglet Contenu comprend les paramètres Divi de base et quelques paramètres spécifiques à Divi Accordions Plus.

Vitesse

La vitesse contrôle la vitesse à laquelle les bascules s'ouvrent et se ferment. Il est défini en millisecondes.

Mode

Mode modifie le fonctionnement des accordéons.

Mode accordéon

Le mode accordéon vous permet de choisir entre plusieurs bascules actives et une seule bascule active. Plusieurs bascules actives laissent toutes les bascules ouvertes jusqu'à ce que l'utilisateur les ferme. L'exemple ci-dessous montre plusieurs bascules actives.

Les bascules actives uniques ne permettent qu'une seule bascule ouverte à la fois. Il ferme la bascule ouverte lorsque l'utilisateur sélectionne une nouvelle bascule. Cet exemple montre les bascules actives uniques.

Mode accordéon global

Le mode accordéon global est une nouvelle fonctionnalité intéressante. Il permet une seule bascule ouverte quel que soit le nombre de modules Divi Accordion Plus sur la page. Activez le mode Accordéon global dans chaque module Divi Accordions Plus sur la page où vous souhaitez utiliser le mode Accordéon global. Tous les modules qui n'ont pas ce mode activé ne seront pas affectés par le mode. Ceci est particulièrement utile pour créer des accordéons à plusieurs colonnes dans la même rangée.

Dans l'exemple ci-dessous, j'ai ajouté un autre module Divi Accordions Plus et activé le mode Accordéon global pour les deux. Lorsque j'ouvre un accordéon dans l'un des modules, l'accordéon ouvert dans l'autre module se ferme.

Paramètres de conception Divi Accordéons Plus

Les paramètres de conception contrôlent les styles par défaut pour tous les accordéons. Ces réglages sont écrasés par les réglages individuels du sous-module.

Entête

L'en-tête contrôle la couleur d'arrière-plan, la couleur d'arrière-plan de la bascule ouverte, l'espacement, les bordures et l'ombre de la boîte. Dans cet exemple, j'ai changé les couleurs d'arrière-plan pour la bascule ouverte et fermée.

Icône de gauche

L'icône de gauche contrôle la couleur de l'icône, la couleur de la bascule d'ouverture de l'icône, la couleur d'arrière-plan, la couleur d'arrière-plan de la bascule d'ouverture, l'espacement, la bordure et l'ombre de la boîte pour l'ensemble du module accordéon. Si vous souhaitez uniformiser le style, il est préférable de définir les couleurs de l'icône ici, puis de sélectionner individuellement votre icône pour chaque bascule de l'accordéon. Dans cet exemple, j'ai ajouté et stylisé une bordure autour des icônes pour la rendre plus harmonieuse avec la couleur d'arrière-plan.

Icône de droite

L'icône de droite contrôle la couleur de l'icône, la couleur d'ouverture de l'icône, la couleur d'arrière-plan, la couleur d'arrière-plan de l'ouverture, l'espacement, la bordure et l'ombre de la boîte. Dans l'exemple, j'ai ajusté les couleurs de la bascule ouverte, la bordure et changé la couleur de l'icône sur la bascule ouverte.

Titre

Le titre contrôle la couleur d'arrière-plan du titre, la couleur d'arrière-plan de la bascule ouverte, l'espacement, la bordure et l'ombre de la boîte.

Corps

Corps contrôle le corps de l'élément, l'espacement, la bordure et l'ombre de la boîte. J'ai ajusté la bordure dans cet exemple.

En-tête

Le texte d'en-tête contrôle le texte à bascule ouvert et vous permet de contrôler le titre et le sous-titre indépendamment à partir du même menu. Il comprend tous les contrôles de texte standard. J'ai ajusté les couleurs des titres et des sous-titres, changé la taille de la police du titre et l'ai mis en gras dans l'exemple ci-dessous.

En-têtes de corps

Les en-têtes de corps incluent tous les contrôles de texte standard pour les en-têtes de corps que vous avez spécifiés dans la zone de contenu. Dans l'exemple ci-dessous, j'ai ajouté une balise d'en-tête H2 et H3 au contenu du corps. J'ai changé le poids et la couleur de la police pour les deux titres dans le contenu du corps.

Le corps du texte

Corps du texte inclut tous les contrôles de texte standard pour le corps du texte dans la zone de contenu. Dans cet exemple, j'ai changé la police, l'ai mise en italique, changé la couleur et changé la taille de la police.

Démo finale avec Divi Poke Restaurant

Voici à quoi ressemble l'accordéon final dans la mise en page de la page À propos de nous pour le pack de mise en page du restaurant Divi Poke.

Divi Accordéons Plus Démos

Divi Accordions Plus est livré avec sept démos pour vous aider à démarrer.

Démo 1

La première démo comprend un accordéon multi-colonnes avec des icônes multicolores. Les accordéons ont une seule bordure et le contenu est bordé de tous les côtés.

Démo 2

Notre deuxième démo présente l'accordéon dans une seule colonne avec des reflets bleus et des ombres de boîte. Les icônes ont un fond bleu.

Démo 3

Notre troisième démo utilise une mise en page à deux colonnes et utilise des couleurs différentes pour chacun des accordéons.

Démo 4

La quatrième démo utilise un accordéon à une colonne avec des couleurs chaudes et des bordures claires.

Démo 5

La démo cinq utilise des titres et des icônes rouges et comprend des arrière-plans beiges pour le corps et des arrière-plans verts pour les en-têtes. Les accordéons sont placés sur deux colonnes.

Démo 6

La sixième démo utilise des arrière-plans d'en-tête bleu clair avec un bleu plus foncé pour le texte du titre et un arrière-plan d'icône pour l'accordéon ouvert.

Démo 7

La démo sept affiche chacun des éléments de l'accordéon indépendamment avec des ombres de boîte pour chaque élément.

Acheter Divi Accordéons Plus

Divi Accordions Plus est disponible sur Divi Marketplace pour 9 $. Il comprend une utilisation illimitée, une garantie de remboursement de 30 jours et un an d'assistance et de mises à jour.

Mettre fin aux pensées

C'est notre regard sur Divi Accordions Plus. Il s'agit d'un module simple, mais il comprend de nombreuses fonctionnalités pour les accordéons. J'aime particulièrement le fait que cela fonctionne avec plusieurs modules sur la même page. J'ai trouvé les paramètres intuitifs et tous les paramètres que je voulais régler étaient là. Si vous êtes intéressé par un constructeur d'accordéons puissant et facile à utiliser, Divi Accordions Plus vaut le coup d'œil.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Accordéons Plus ? Faites-nous savoir ce que vous en pensez dans les commentaires.