Comment créer un livre d'or en ligne pour votre mariage avec Divi & Auto Testimonials

Cet article fait partie 4 sur 5 de notre mini-série Comment créer un site Web de mariage élégant avec Divi. Dans cette série, nous vous guiderons à travers les étapes les plus importantes de la création d'un site Web de mariage pour vous-même ou un client avec Divi.

Dans les trois premières parties de cette mini-série, nous vous avons montré comment créer un site de mariage élégant. Ce site Web contenait une page d'annonce, une page de galerie et une page de liste de cadeaux.

Avoir un livre d'or en ligne sur votre site Web vous permet également de dialoguer avec les invités après le mariage. C'est pourquoi nous avons recherché la solution la plus simple qui fonctionne avec Divi.

Nous voulons vous montrer comment créer un livre d'or en ligne avec les témoignages Divi automatiques de Noou. Ce plugin nous aidera à créer un flux automatique de témoignages entrants. Le plugin rendra votre page conviviale et facile à vivre, en plus, il vous fera gagner beaucoup de temps.

Dans ce tutoriel, nous allons vous montrer étape par étape comment intégrer les Témoignages Divi Automatiques dans votre page de livre d'or et le personnaliser à cet effet. Et comment créer la disposition suivante du module de témoignage automatique qui correspond au site Web de mariage que vous avez déjà créé.

Achat du plugin

Tout d'abord, vous devrez acheter les témoignages automatiques de Divi automatiques de Noou sur leur site Web si vous ne possédez pas encore le plugin. Une fois votre commande passée, vous recevrez un fichier ZIP. Le fichier ZIP contient tous les fichiers nécessaires au bon fonctionnement du plugin.

Téléchargement du plugin Divi Testimonials automatique

Avant de télécharger le plugin sur votre site WordPress, vous devrez apporter quelques modifications à l'un des fichiers inclus dans le fichier ZIP.

Accédez au fichier Zip Divi Automatic Témoignages > Divi-automatic-testimonials > Frontend > Ouvrez le fichier Form avec un éditeur de code.

Dans cet exemple, nous utiliserons Notepad++ pour éditer le fichier, mais n'hésitez pas à utiliser n'importe quel éditeur de code de votre choix.

Modification des titres de formulaire

Le formulaire prédéfini est généralement utilisé à des fins commerciales. Les questions standard auxquelles une personne doit répondre sont liées aux affaires, telles que le titre du poste et l'entreprise. Nous devons faire les modifications dans le fichier PHP avant de télécharger le plugin car ils utilisent un shortcode pour afficher le formulaire dans votre site web construit avec Divi.

Nous souhaitons modifier ces titres, mais comme ils travaillent actuellement encore sur un formulaire dédié que vous pouvez éditer au sein de Divi, nous devrons revenir à la source pour effectuer ces modifications. Voici à quoi ressemble le formulaire sur le site Web, sans les modifications :

Les trois champs que nous devrons modifier sont le champ « Titre du poste », le « Nom de l'entreprise » et l'« URL de l'entreprise ». Vous pouvez modifier ces deux champs en ce que vous voulez savoir sur la personne. Mais dans cet exemple, nous allons les remplacer par 'Famille/ami de', 'Rôle au mariage' et 'Votre propre site web'.

Le titre du poste à la famille/ami de

Remplacez le libellé de « Titre du poste » par « Famille/ami de » et l'espace réservé de « Veuillez entrer votre titre de poste » en « Dites-nous qui vous a invité ».

Le nom de l'entreprise à jouer au mariage

Remplacez le libellé de « Nom de l'entreprise » par « Rôle au mariage et l'espace réservé de « Veuillez entrer le nom de votre entreprise » en « Dites-nous quel était votre rôle au mariage ».

L'URL de l'entreprise vers le site Web personnel

Remplacez le libellé « Entreprise/Votre URL » par « Votre site Web personnel » et l'espace réservé de « Veuillez saisir l'URL de votre entreprise ou personnelle, par exemple http://google.com » en « Entrez l'URL de votre site Web personnel, par exemple http://google. .com'.

Remarque : il est possible que le fichier soit toujours en mode lecture seule. Pour commencer l'édition, accédez à l'onglet Modifier et sélectionnez « Effacer l'indicateur en lecture seule ».

Après avoir modifié le code, copiez l'intégralité du code et créez un nouveau fichier Notepad++ que vous remplacez par le fichier actuel. Les modifications ne seront probablement pas enregistrées sur l'ancien fichier, c'est pourquoi nous devons remplacer le fichier par un nouveau. Le remplacement de l'ancien fichier par un nouveau fichier contenant le nouveau code vous aidera à résoudre les problèmes.

Enregistrez le fichier et quittez. Votre formulaire ressemblera plus tard à ceci :

Nous avons apporté les modifications à la partie frontale du plugin uniquement, afin que cela ne perturbe pas les invités qui visitent le site Web. Les modifications que nous avons apportées ne s'appliquent pas au backend de tout cela.

Lorsque vous essayez d'ajouter manuellement un témoignage sur votre site WordPress, vous verrez toujours les titres « Titre du poste » et « Nom de l'entreprise ». Cependant, ceux-ci n'apparaissent jamais sur votre site Web, alors n'hésitez pas à taper une réponse aux nouvelles questions que nous avons posées.

Téléchargement du plugin

Maintenant, pour télécharger le plug-in sur votre site Web, accédez à Plugins> Ajouter un nouveau et téléchargez le plug-in modifié enregistré sur votre bureau. Après avoir activé le plugin Automatic Divi Testimonials, il apparaîtra dans votre menu WordPress :

Paramètres automatiques des témoignages Divi

Le plugin Automatic Divi Testimonials permet aux invités de partager facilement l'expérience qu'ils ont vécue lors du mariage. Ils peuvent remplir le formulaire sur le site Web et un e-mail sera automatiquement envoyé au propriétaire du site Web ou à toute autre adresse e-mail de votre choix. Pour effectuer ces ajustements, accédez à Paramètres et ajoutez l'adresse e-mail de la personne que vous souhaitez recevoir des témoignages entrants.

Ajouter un nouveau témoignage

Il existe deux façons d'ajouter un nouveau témoignage à votre liste de témoignages ; manuellement ou automatiquement. Dans certains cas, vous devrez ajouter vous-même un témoignage. Ce plugin en tient compte.

Ajouter un nouveau témoignage manuellement

Vous pouvez ajouter manuellement des témoignages en cliquant sur « Ajouter un témoignage » dans la partie Témoignages Divi automatiques de votre site WordPress.

Ici, vous remarquerez que les modifications que nous avons apportées auparavant ne s'appliquaient pas au backend du plugin. Le champ « Famille/ami de » est toujours appelé « Titre du poste ». Vous devez juste vous rappeler que c'est l'endroit où vous écrivez comment la personne en question est liée au couple de mariage.

Il en va de même pour les deux autres domaines qui correspondent aux témoignages d'entreprises. Le « Nom de la société » est le champ où vous entrerez le « Rôle lors du mariage » et le champ « URL » n’est pas lié à la société.

L'important est que tous ces titres n'apparaissent jamais sur le site lui-même. Nous avons déjà modifié les éléments qui apparaissaient initialement (dans le formulaire) sur le site Web. L'édition que nous avons effectuée avant de télécharger le plugin était le moyen le plus rapide de faire fonctionner le plugin sans avoir à apporter de modifications radicales au plugin lui-même.

Lors de la création d'un nouveau témoignage, vous pouvez également ajouter une image en vedette de la personne qui témoigne. Ce sera l'image qui apparaîtra dans le témoignage sur votre site Web de mariage.

Ajouter un nouveau témoignage automatiquement

Ensuite, nous avons la partie intéressante de ce plugin qui permet aux invités de s'engager avec le site Web et de faire le travail répétitif pour vous. Les invités peuvent vous envoyer leur propre témoignage sans autre travail manuel. Le témoignage que vos invités génèrent, en remplissant le formulaire sur votre site internet, sera automatiquement ajouté à la liste des témoignages et vous recevrez un email de notification.

Après, vous pouvez toujours décider ce que vous faites avec les témoignages ; comment vous les affichez sur votre site Web et si vous souhaitez les conserver ou non. L'objectif principal du plugin Automatic Divi Testimonials est d'aider le propriétaire du site Web à obtenir des témoignages d'invités sans qu'aucune des parties n'ait à faire beaucoup d'efforts. Les invités n'ont pas à communiquer via autre chose que le site Web du mariage.

Commencer

Maintenant, allez à la page où vous souhaitez ajouter le livre d'or en ligne. Il peut s'agir d'une page distincte, mais vous pouvez toujours ajouter quelques témoignages automatiques à votre page d'accueil. Le formulaire n'apparaît actuellement pas sur le générateur visuel car il apparaît via un shortcode. Pour ce tutoriel, nous allons utiliser le constructeur Divi habituel d'une page pour vous montrer comment faire.

Maintenant, commencez par ajouter une nouvelle page ou ouvrez la page sur laquelle vous souhaitez placer vos témoignages. Dans cette nouvelle page, nous aurons besoin d'une section standard avec une ligne pleine largeur. Ajoutez un module de texte normal à la ligne. Dans ce module de texte, tapez le shortcode suivant [dup] dans la sous-catégorie Texte de l'onglet Contenu. Ce shortcode fera apparaître le formulaire sur le site.

Voici à quoi devrait ressembler votre formulaire si vous le prévisualisez :

Attribution de différentes catégories

Une fois que vous avez ajouté les témoignages à la liste, vous pouvez les classer dans différentes catégories. Rendez-vous simplement dans la section « Catégories » de votre plugin Automatic Divi Testimonials. Ici, vous pouvez créer de nouvelles catégories pour que tout en coulisses soit plus organisé. Vous pouvez, par exemple, créer une catégorie distincte pour les demoiselles d'honneur et les garçons d'honneur.

Présenter les témoignages sur votre site Web de mariage

Utilisation du module de témoignages automatiques

À première vue, le module de témoignages automatiques ressemble à tous les autres modules de la liste. Créez une nouvelle section, ajoutez une ligne pleine largeur et placez-y le module de témoignages automatiques. Si vous avez déjà recueilli des témoignages, ceux-ci apparaîtront automatiquement sur votre site Web.

Et, bien sûr, vous pouvez ajuster le style en conséquence. Dans cet exemple, nous allons faire en sorte que vos témoignages ressemblent à l'image ci-dessous. Ce style s'accordera avec le style des trois premières parties de cette mini-série.

Ouvrez les paramètres de votre module de témoignages automatiques Divi, accédez à la sous-catégorie Arrière-plan de l'onglet Contenu et choisissez le nombre de témoignages que vous souhaitez présenter. Dans ce même onglet, choisissez la mise en page de témoignage 'Standard Divi 4 Column'.

Ensuite, allez dans l'onglet Paramètres de conception avancés et changez la couleur de l'icône de devis en « #9b857b » dans la sous-catégorie Espacement.

Ensuite, allez dans l'onglet Avancé et ajoutez le code suivant à l'élément principal dans l'onglet CSS personnalisé :

border-radius: 25px;
background: -webkit-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -o-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -moz-linear-gradient((-90deg, #fffaf6 , #fae4de );
background: linear-gradient((-90deg, #fffaf6 , #fae4de );

Et tu as fini. Les témoignages auront désormais une couleur de fond dégradée qui correspond aux autres pages de votre site Web de mariage.

Suivant

Dans la dernière partie de cette mini-série, nous allons voir comment créer une chronologie pour votre site Web de mariage où vous pouvez afficher le programme du mariage. Si vous avez des questions concernant ces tutoriels, ou si vous avez des demandes pour de futurs tutoriels ; assurez-vous de laisser un commentaire dans la section commentaires de cet article de blog afin que nous puissions vous répondre avec des réponses !

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !