Qu’est-ce qu’un carrousel de vitrine divisé et comment en ajouter un dans WordPress

Vous ne pouvez jamais avoir trop de façons différentes d’afficher des éléments importants sur votre site Web. C’est l’une des principales raisons de démarrer un site Web en premier lieu, qu’il s’agisse d’un site Web de marque de luxe, d’un site Web de jeux ou d’un site Web de dropshipping. Vous voulez toujours que les gens voient quelque chose et vous voulez toujours vous assurer que vous le présentez de la manière la plus appropriée et la plus accrocheuse. Un carrousel de vitrine divisé vous procurera généralement les deux.

Dans le plugin Qi Addons for Elementor, une collection complète de widgets pour le constructeur de site Elementor, nous avons inclus un widget Divided Showcase Carousel que vous pouvez utiliser pour créer facilement des combinaisons attrayantes de texte et d’images pour un maximum d’attention. C’est inestimable pour ajouter du contexte aux images ou ajouter des illustrations à votre texte. Quelle que soit la façon dont vous le regardez, il est élégant, dynamique et attrayant.

Si vous décidez qu’un carrousel de vitrine divisé est exactement ce dont votre site Web a besoin et que Qi Addons for Elementor est le meilleur plug-in pour l’ajouter à votre site Web, restez dans les parages pendant que nous vous expliquons comment utiliser le widget. Vous pouvez regarder le didacticiel vidéo que nous avons créé :

Et si vous préférez lire un guide, restez dans les parages. Voici ce que nous couvrirons :

Obtenir le plugin et tout configurer

Avant de commencer, vous devez avoir installé et activé Elementor et Qi Addons pour Elementor sur votre site Web. Parce que Divided Showcase Carousel est un widget premium, vous devrez obtenir la version premium de Qi Addons pour Elementor. Après avoir installé les deux plugins sur votre site Web et les avoir activés, l’étape suivante consiste à ouvrir une page ou un message que vous souhaitez modifier dans Elementor.

Avant d’ajouter le widget, il y a quelques choses et paramètres qui doivent être modifiés pour obtenir le résultat comme celui que nous avons créé pour son guide. Gardez à l’esprit que, selon le thème que vous utilisez et les paramètres généraux, il se peut que vous n’obteniez toujours pas une correspondance exacte, mais ce n’est pas grave. Ce guide devrait servir à vous inspirer et à vous éduquer, et vous êtes libre de créer quelque chose de mieux adapté à votre site Web.

Voici comment nous avons configuré notre page. Nous nous sommes assurés que notre section ne contienne qu’une seule colonne, en premier. Ensuite, nous avons défini la mise en page de la section sur toute la largeur et l’écart de ses colonnes sur aucun espace. Vous pouvez trouver les deux options sous Mise en page > Mise en page lors de la modification de la section. Sous Avancé > Avancénous avons défini les rembourrages supérieur et inférieur sur 175 pixels.

Pour les paramètres de colonne, nous avons seulement ajusté le rembourrage gauche à 10px, sous Avancé > Avancé. Après cela, nous étions sur le point d’ajouter le carrousel de vitrine divisée – c’était aussi simple que de le trouver dans la liste des widgets et de le faire glisser vers la colonne.

Ajout de contenu au carrousel Showcase divisé

La première chose que vous remarquerez lorsque vous ajouterez le widget est qu’il comporte quelques bonnes sections d’options de contenu. Cela est parfaitement logique, car il y a des images, du texte, des boutons et un curseur qui doivent être configurés – alors allons-y.

réglages généraux

Le premier lot de paramètres, les paramètres généraux, vous permettent de modifier le nombre d’éléments dans le carrousel, de choisir le titre, le sous-titre, l’image et le lien pour chaque diapositive du carrousel, et de choisir si vous souhaitez avoir un bouton ou non dans le carrousel et décidez du type d’animation de texte que vous souhaitez utiliser.

La première chose que nous avons faite a été de configurer les éléments. Nous avons conservé les trois par défaut, en leur ajoutant des titres, des sous-titres et des images, ainsi qu’un # dans le lien pour les rendre cliquables. Nous avons également activé le bouton et laissé l’animation de texte par défaut.

Avec cela, nous avons créé toutes les diapositives dont nous avions besoin, il était donc temps de passer au prochain lot de paramètres de contenu.

Paramètres du curseur

Les paramètres du curseur vous permettent de choisir le comportement et l’apparence du curseur. Vous pouvez activer la boucle du curseur, la lecture automatique et choisir les durées d’animation des diapositives et des diapositives. Vous pouvez également définir la navigation et la pagination du curseur, choisir les proportions de l’image et définir diverses options de colonne.

Nous avons choisi de désactiver la navigation par curseur, mais d’activer les paginations et de définir le nombre de colonnes sur deux. Enfin, nous avons réduit l’espace entre les éléments à 25px. Les autres options sont restées sur leurs paramètres par défaut.

Ensuite, nous étions sur les paramètres des boutons.

Paramètres des boutons

Les paramètres du bouton vous permettent de choisir entre un dégradé et une image SVG pour un arrière-plan. Vous pouvez également décider du texte que vous souhaitez utiliser avec le bouton, activer et désactiver le soulignement, choisir l’image SVG et définir son type.

Nous avons défini le texte du bouton sur Afficher plus et activé le soulignement. Nous choisissons une forme de cercle comme SVG, et nous définissons son type sur pleine taille.

Ne vous inquiétez pas de la taille de ce cercle – nous ferons en sorte que tout fonctionne dans la prochaine phase de création d’un carrousel de vitrine divisé – le style.

Styliser le carrousel de la vitrine divisée

L’onglet Style contient de nombreuses sections différentes, et vous devriez toutes les consulter pour voir ce qu’elles offrent. Mais parce que nous avons laissé notre widget avec ce vilain SVG bloquant une partie du texte et obscurcissant complètement le texte du bouton, c’est l’ensemble d’options que nous nous sommes dirigés vers le premier.

Style de bouton SVG

Pour trier le style SVG de votre bouton, vous aurez la possibilité d’ajuster l’animation de survol, ainsi que les couleurs de remplissage et de trait pour les vues normales et en survol. Les options pour ajuster le trait DashOffset sont également là, tout comme les options pour modifier la largeur du trait, DashArray, ainsi que le DashOffset Timing.

Nous avons modifié les couleurs de remplissage et de trait SVG en #fbebc6 en mode normal et n’avons modifié aucune autre option.

Les résultats sont plutôt bons – le texte est visible et notre bouton SVG ressemble à un choix de conception astucieux. Nous pouvons maintenant commencer à styliser le widget à partir de la section supérieure, qui n’est pas le style de navigation Slider dans notre cas, car nous avons choisi de ne pas utiliser la navigation.

Style de pagination du curseur

Dans les options de style de pagination, vous pouvez modifier la position, l’alignement, le décalage, la taille et l’espacement de la pagination. Vous pouvez également activer la pagination numérotée et choisir le type de bordure et de couleur pour les situations normales et actives.

Nous avons changé le décalage de pagination à 73 pixels. Nous avons changé la taille à 9 pixels et l’espace entre les puces à 17 pixels.

Puisqu’il n’y avait rien d’autre dont nous avions besoin ici, nous sommes passés à autre chose.

Style de texte et de sous-titre

Le style de texte est l’ensemble d’options qui s’appliquent au texte du titre des éléments. L’option de texte standard est là – balise, couleur, la gamme complète d’options de typographie, ainsi que le remplissage de texte.

Nous avons choisi H1 pour la balise de texte et 20 % du remplissage de texte de droite.

Le style de sous-titre contient presque les mêmes options, à l’exception de la dernière option qui est la marge au lieu du remplissage. Cette fois, nous avons choisi de changer la taille des lettres à 17 pixels dans les options de typographie, et nous avons mis la marge du bas à 12 pixels.

Style de bouton, de soulignement de bouton et d’espacement

La section Style de bouton est plus riche en options – elle s’ouvre avec la typographie, uniquement pour continuer avec l’alignement, la couleur du texte – normal et au survol, la rotation du texte du bouton et le remplissage.

Nous avons changé la taille des lettres dans les options Typographie à 17 pixels. Nous avons choisi la couleur normale comme étant #1e1e1e et définissons le rembourrage sur 0. Les options restantes sont restées telles quelles.

Pour le style de soulignement du bouton, entre les paramètres de couleur, de largeur, de décalage et d’épaisseur et d’alignement, nous avons défini le décalage sur 6.

Enfin, pour le style d’espacement, nous avons choisi de donner à la marge du bouton 34 pixels en haut et 50 pixels en bas. C’était le résultat.

Bien sûr, vous êtes toujours plus que bienvenu pour apporter les modifications que vous jugez appropriées – utilisez ce widget comme terrain de jeu pour créer le meilleur carrousel possible pour tout ce que vous avez sur votre site Web.

Enveloppons-le !

Vous devez toujours rechercher les meilleures façons d’afficher vos produits, services ou offres sur votre site Web. Qi Addons for Elementor est un excellent plugin qui vous offrira de nombreuses options créatives pour toutes sortes d’affichages. Le carrousel de vitrine divisé que nous vous avons montré ici est une excellente combinaison de mouvement, d’image et de texte, et il ne manquera pas d’inciter les gens à le regarder.