Vous voulez vous débarrasser du style ennuyeux de présentation d’images sur votre site Web WordPress ? Essayez le modèle de boîte d'image d'ElementsKit. 

ElementsKit (un module complémentaire complet d'Elemetor) propose 19 modèles de boîtes d'images différents pour afficher des images avec divers effets et animations. Vous pouvez également inclure du texte, des titres, des boutons, des URL, des icônes et bien d’autres. 

Tous ces éléments sont entièrement personnalisables. De plus, vous pouvez supprimer ou inclure n'importe quel élément d'Elementor avec les modèles de zone d'image ElementsKit. 

✨✨ Plugins requis : 
👉👉Élémenteur : Télécharger le plugin Elementor 
👉👉ElementsKit : Télécharger le plugin ElementsKit 

Créer une zone d'image à l'aide d'ElementsKit #

• Créez un nouvel article/page ou ouvrez-en un passionnant avec Elementor 
• Clique sur le Icône ElementsKit 
• Choisir la « Boîte à images » de la catégorie 

• Tu peux voir 19 modèles différents (11 gratuits, 8 premium) pour la boîte à images
• Clique sur le signe plus (+) pour voir l'aperçu 

• Cliquez sur sur "Insérer"
• Il apparaîtra sur votre page/post 
• Vous pouvez désormais modifier les styles et autres propriétés du modèle de zone d'image.
• Après personnalisation, cliquez sur "Publier"

Personnaliser le modèle de boîte d'image ElementsKit #

Dans la barre latérale gauche, vous pouvez personnaliser la disposition de la zone d'image, le contenu ainsi que les styles de chaque élément. En outre, vous pouvez effectuer une personnalisation avancée pour un seul élément ou pour la mise en page entière à partir des paramètres avancés. 

Personnalisation de la mise en page  #

• Sélectionnez la largeur du contenu (encadré ou pleine largeur)
• Définir une largeur personnalisée 
• Personnalisez l'espacement des colonnes, la hauteur, l'alignement vertical et le débordement 
• Activer/désactiver la section extensible 

Personnalisation du contenu  #

👉 Image 

• Changer l'image 
• Personnaliser la taille de l'image
• Définir la zone de contenu 
• Activer ou désactiver la hauteur égale 
• Activer ou désactiver l'URL 

👉 Corps 

• Changer le texte du titre
• Personnaliser la balise HTML du titre
• Définir l'alignement du titre 

👉 Bouton

• Activer ou désactiver le bouton 
• Personnaliser le texte de l'étiquette du bouton 
• Ajouter l'URL
• Icône Ajouter/Supprimer 
• Définir la position de l'icône 

Personnalisation du style  #

👉 Ligne d'ombre 

• Sélectionnez la ligne d'ombre gauche ou droite
• Définir une largeur personnalisée 
• Personnaliser l'ombre de la boîte 
• Personnaliser le type d'arrière-plan et la couleur 
• Définir l'image d'arrière-plan 

👉 Image 

• Définir le rayon de bordure personnalisé, le remplissage 
• Personnalisez l'opacité de l'image pour un style normal ou survolé 

👉 Corps 

• Définir le type de bordure, le rayon de bordure
• Personnaliser l'image, le type et la couleur d'arrière-plan 
• Définir un remplissage personnalisé, la couleur de l'ombre de la boîte 
• Définir l'espacement des titres, la typographie et la couleur 

👉 Bouton 

• Personnaliser la valeur de remplissage, la taille de la police de l'icône 
• Changer le texte du bouton et la couleur d'arrière-plan 
• Définir les propriétés normales ou de survol 
• Définir le type de bordure, le rayon de la bordure, l'ombre de la boîte 

Personnalisation avancée  #

• Personnalisez la marge, le remplissage, la largeur, la position et l'index z de la mise en page.
• Définir des effets de mouvement pour les éléments (par exemple, fondu entrant, zoom avant, rebond, glissement vers la gauche, etc.)
• Personnalisez la réactivité et les attributs 
• Insérez du CSS personnalisé pour des modifications supplémentaires 

Espérons que vous puissiez désormais présenter les images de votre site Web de manière plus intéressante en utilisant les modèles de zones d'images ElementsKit. Et n'hésitez pas à nous poser des questions ou à nous faire part de vos suggestions.