Lorsque vous souhaitez pousser un produit, une seule carte accrocheuse bat une grille complète de boutique Le Produit en vedette widget dans Modules complémentaires principaux pour Elementor construit cette carte : une image, un titre, un prix avec un prix original de passage en option, une note, un ruban de coin et un bouton d'appel à l'action, le tout défini à partir du panneau Élémenteur.
Vous tapez les détails en vous-même, donc cela fonctionne sur n'importe quelle page avec ou sans WooCommerce Cela rend pratique un bloc promotionnel, un choix d'affiliation, une annonce de lancement ou un accord que vous souhaitez au début et au centre Ce guide couvre chaque paramètre, des trois modèles de mise en page aux contrôles de ruban et de notation.
Préférez regarder en premier ? ce court tutoriel parcourt le widget Produit en vedette bout à bout :
Ce que fait le widget Produit en vedette #
Le widget produit une carte de produit autonome Vous lui donnez une image, un nom, une description ou une liste de caractéristiques, un prix et un bouton, et il les présente dans l'un des trois modèles prêts à l'emploi. Un ruban et une étoile se trouvent au sommet pour attirer l'attention.
Rien ici ne tire de votre catalogue WooCommerce Vous entrez le contenu à la main, ce qui signifie que vous pouvez présenter un produit, un service, un bundle, ou une offre externe sans mettre en place un magasin au préalable.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Une image du produit et les détails que vous souhaitez afficher (nom, prix, lien du bouton).
Comment ajouter le widget Produit en vedette #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Produit en vedette(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page et un exemple de carte apparaît immédiatement, afin que vous modifiiez à partir d'un point de départ fonctionnel au lieu d'un point vierge.
Remplissez les détails du produit #
Ouvrir le Contenu tab et le Général section détient les champs principaux C'est là que la carte obtient son contenu.
- Dispositions: choisissez Design 1, Design 2 ou Design 3. Plus d’informations ci-dessous.
- Image: choisissez l'image du produit dans la Médiathèque.
- Titre: le nom du produit Il prend en charge les balises dynamiques si vous souhaitez le tirer d'un champ.
- Type de contenu : basculer entre un plain Description et un Liste de caractéristiques.
- Prix et prix d'origine : le prix actuel plus un prix original en option qui apparaît barré, qui se lit comme une remise.
- Texte du bouton et lien : l'étiquette d'appel à l'action et l'endroit où elle envoie des personnes Design 2 utilise une icône de bouton au lieu de texte.
Description ou une liste de fonctionnalités #
Définir Type de contenu à Liste et la boîte de description se transforme en répéteur Vous choisissez une Icône de liste (une coche par défaut) et ajoutez autant de lignes de fonctionnalités que vous le souhaitez, chacune avec un contrôle de duplication et de suppression C'est un moyen rapide de transformer une carte en un mini argumentaire de vente avec des avantages de bullet-point.
Choisissez un schéma de mise en page #
Le widget est livré avec trois mises en page et basculer entre elles réorganise le même contenu sans que vous ne refaisiez quoi que ce soit.
Conception 2 empile l'image sur le dessus, puis met un badge d'icône à côté du titre et de la description, avec la note et le prix sur une ligne Le bouton s'affiche comme une icône ici.
Conception 3 mène avec l'image, puis centre le titre, la description, la note, le prix, et un bouton pleine largeur en dessous C'est le plus propre des trois pour une simple promo.
Le design 1 (par défaut) place la note et le titre en haut, le prix en dessous, puis l'image, la description et un bouton pleine largeur en bas.
Ajouter un ruban et une note #
Faites défiler le champ Lien et vous atteignez le Ruban et Évaluation contrôles. Le ruban est la bannière de coin qui appelle 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
- Ruban (Montrer) : allumez ou désactivez la bannière de coin.
- Type de ruban : choisissez un style de ruban Les styles changent la forme et la position, d'un coin diagonal à un drapeau ou une étiquette de citation.
- Texte du ruban et icône du ruban : l'étiquette (comme NEW ou HOT) et une icône optionnelle comme le trophée.
- Évaluation: définissez la valeur de l'étoile, par exemple 4,5, et la carte affiche les étoiles partielles pour correspondre.
Style la carte #
Le Style tab est divisé en sections qui correspondent aux parties de la carte : Boîte, Titre, Contenu, Prix, Bouton, Évaluation, Ruban, et Modèles (une option Pro).
- Boîte: arrière-plan, bordure, rayon et ombre pour toute la carte.
- Titre, Contenu, Prix : couleur, typographie, alignement et espacement pour chaque bloc de texte.
- Bouton: couleurs, typographie, remplissage et état de survol pour l'appel à l'action.
- Évaluation et ruban : couleur étoile et la couleur du ruban et le style du texte.
Le résultat sur la page #
Publiez ou prévisualisez et la carte restitue avec tout ce qui est en place : le ruban dans le coin, la note, le prix avec son original barré, votre image et le bouton lié à l'endroit où vous le réglez. Vous trouverez ci-dessous le même widget dans deux de ses conceptions.
Cas d'utilisation courants #
- Blocs promotionnels mise en évidence d'un produit sur une page de destination.
- Choix d'affiliation avec une note, un prix et un lien d'achat sortant.
- Lancer ou négocier des appels en utilisant le ruban NEW ou HOT.
- Forfaits services avec le type de contenu Liste indiquant ce qui est inclus.
- Article en vedette parallèlement à un tableau tarifaire ou une section d'appel à l'action.
Conseils pour travailler avec le widget Produit en vedette #
- Définissez un prix original pour afficher une réduction. Le numéro de passage à côté du prix actuel se lit comme un coup d’œil.
- Utilisez le type de contenu Liste pour les avantages. Les lignes de fonctionnalités courtes convertissent mieux qu'un paragraphe sur une carte promotionnelle.
- Gardez le texte du ruban sur un mot. NOUVEAU, CHAUD ou VENTE s'adaptent à la bannière d'angle sans emballage.
- Faites correspondre le design à la disposition qui l'entoure. Le design 3 convient à une grille propre ; Le design 1 remplit bien une barre latérale ou une colonne étroite.
- Pointez le bouton quelque part réel. Définissez le lien vers la caisse, la page produit ou l'URL de l'affilié avant de publier.
Foire aux questions #
Qu'est-ce que le widget Produit en vedette dans Master Addons ?
Il s'agit d'un widget Elementor qui construit une seule carte de produit avec une image, un titre, un prix, une note, un ruban et un bouton d'appel à l'action Vous saisissez les détails à la main et choisissez l'un des trois modèles de mise en page Il fonctionne sur n'importe quelle page, avec ou sans WooCommerce.
Le widget Produit en vedette a-t-il besoin de WooCommerce ?
Non. Le widget ne s'inspire pas d'un catalogue WooCommerce. Vous tapez vous-même le lien du nom du produit, du prix, de l'image et du bouton, afin de pouvoir proposer un produit, un service ou une offre externe sur n'importe quelle page sans gérer de magasin.
Combien de mises en page possède le widget Produit en vedette ?
Trois. Design 1 mène avec la note et le titre au-dessus de l'image, Design 2 place un badge d'icône à côté du titre avec un bouton d'icône et Design 3 centre le contenu sous une image supérieure. La commutation des conceptions réorganise automatiquement le même contenu.
Comment afficher un prix de réduction sur la carte ?
Remplissez à la fois les champs Prix et Prix d'origine dans la section Général Le prix actuel apparaît dans la couleur de l'accent et le prix d'origine apparaît à côté avec un strike-through, qui signale une remise aux visiteurs.
Puis-je afficher une liste de fonctionnalités au lieu d'une description ?
Oui. Définir le type de contenu sur la liste dans la section Général La zone de description devient un répéteur où vous ajoutez des lignes de fonctionnalités, chacune avec une icône de liste Utilisez-la pour transformer la carte en une courte liste d'avantages numérisable.
Envelopper #
Le widget Produit en vedette transforme une poignée de détails en une carte produit Elementor polie : choisissez un design, ajoutez une image et un prix, activez un ruban et une note et associez le bouton Puisque rien ne dépend de WooCommerce, il tombe sur n'importe quelle page en tant que promo ou bloc d'affiliation. Associez-le au Widget de table de tarification ou un Appel à l'action section, parcourir l'intégralité Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.
