Comment ajouter des plans d’activités et des abonnements à votre site Web en utilisant le progiciel de mise en page de Pottery Studio

Si vous avez déjà voulu ajouter un plan d’activités à votre site Web, il s’agit d’un tutoriel pour vous. Le plug – in de calendrier d’événements moderne, combiné à la belle mise en page de Divi, est une combinaison efficace de conception et de fonctionnalité. Dans ce tutoriel, je vais vous montrer comment ajouter la planification d’événements et les réservations à la disposition du studio de céramique de Divi. Je vais vous montrer comment ajouter de nouvelles activités et comment créer des raccourcis personnalisés pour afficher le calendrier des événements sur votre site Web de la manière que vous pouvez penser. Voici une brève description de ce que je vais présenter:
Comment configurer les paramètres du plug – in de calendrier d’événements moderne. Comment créer un nouvel événement. Comment faire en sorte que la fonction d’abonnement inclue un formulaire d’abonnement, une passerelle de paiement et une notification par courriel dans la page active. Comment créer un court code personnalisé pour afficher le calendrier des événements de différentes façons. Comment modéliser une page d’événements pour correspondre à la disposition Divi. Allons – y! Voici un aperçu de la page active que nous allons créer. Voici ce dont vous avez besoin pour compléter ce tutoriel:
Sujet Divi (installé et actif). Kit de mise en page de studio en céramique. En fait, je vais utiliser la mise en page de la classe Pottery studio. Plug – in de calendrier d’événements modernes (installé et actif) Paramètres de calendrier d’événements modernes pour commencer, je vais voir les paramètres nécessaires pour obtenir les fonctionnalités requises pour la planification d’événements et l’abonnement. Lorsque vous planifiez ou réservez une activité pour optimiser l’expérience utilisateur, il existe de nombreuses options très puissantes.
Options générales Je garderai ces options générales par défaut parce que pour la plupart de ce que je m’attends à
Et obtenir la clé API. L’option compte à rebours sélectionne le style inverse du compte à rebours. Ça sonne bien sur la page de l’événement. Réseaux sociaux je garderai tous les réseaux sociaux actifs afin qu’ils apparaissent sur la page des événements. Si vous souhaitez afficher un événement à venir sur une seule page d’événement, sélectionnez pour afficher le formulaire d’événement suivant sur la page d’événement.
Lorsque j’envoie des événements de première ligne pour ce tutoriel, je ne permet pas aux utilisateurs de soumettre leurs événements. Cependant, vous devez sélectionner ici la page sur laquelle vous souhaitez voir la liste des événements ajoutés par l’utilisateur, ainsi que la page sur laquelle vous souhaitez que l’utilisateur ajoute et édite ses événements. Envoi d’événements frontaux section ces options permettent à l’utilisateur de personnaliser ses événements. Ce tutoriel n’est pas pertinent. Jours d’exception activez cette option pour vous permettre d’exclure certains jours de la date de l’événement lorsque vous ajoutez un nouvel événement.
Réservation C’est une option d’importation. Cliquez pour activer le formulaire d’abonnement. Les utilisateurs auront maintenant la possibilité de s’inscrire à l’événement en utilisant le formulaire de réservation sur la page de l’événement. Il leur permet également de payer les billets de l’événement sur la page. Je recommande également de sélectionner toutes les options qui permettent la validation automatique pour un enregistrement plus fluide. Les coupons activés afficheront le formulaire de coupon sur la page active. Vous n’avez pas besoin de cette option pour le moment, mais c’est bon de savoir qu’elle est ici.
En activant les formulaires de frais et de dépenses et en les ajoutant ici, vous pouvez les sélectionner lorsque vous ajoutez de nouvelles activités. Intégration de buddypress il s’agit d’une fonctionnalité importante pour les utilisateurs de buddypress. Vous permet d’afficher tous les participants sur la page détails de l’événement et
– Oui. Ensuite, cliquez sur l’onglet options de style. Il s’agit d’une partie importante de l’alignement de la conception de la page active sur la disposition Divi. Parce que j’utilise le paquet de mise en page de Pottery studio pour mon site, je vais utiliser une couleur qui correspond à la couleur principale (orange) de l’accent de mise en page. Saisissez l’apparence de couleur personnalisée suivante: # fdb467 dans la typographie, sélectionnez Poppins comme famille de polices de titre et de paragraphe. Ajouter une étiquette pour identifier les événements en fonction de leur difficulté pour ajouter une nouvelle étiquette, allez sur le tableau de bord WordPress et naviguez vers mon calendrier > Étiquettes. Ajoutez les noms \
Pour les activités. Assurez – vous que l’image est suffisamment grande pour couvrir toute la largeur du Navigateur pour obtenir de meilleurs résultats. Je pense que la taille 1920 x 600 est idéale. De plus, vous devez garder toutes les images de premier plan de l’événement de la même taille afin qu’elles apparaissent cohérentes lorsque vous visualisez l’événement dans une liste ou dans un format de grille d’événements enregistré. Maintenant, regardons à quoi ressemble la page de l’événement: Dans ce tutoriel, j’ai créé un total de trois ateliers. Configurer des événements hebdomadaires réguliers pour configurer des événements hebdomadaires réguliers, suivez les mêmes étapes que pour créer un événement d’atelier unique, mais avec la différence suivante: activer la répétition d’événements. Sélectionnez ensuite la façon dont vous voulez que la classe se répète. Comme je voulais que mes cours se répètent le lundi, j’ai choisi plusieurs jours de la semaine comme option de répétition, puis lundi comme option de plusieurs jours de la semaine. J’ai également sélectionné les événements qui se sont produits six fois plus tard. Cela équivaut à six lundis ou six semaines. De plus, vous devez choisir un cours comme catégorie plutôt qu’un atelier. Voici le résultat final des activités en classe: Dans ce tutoriel, j’ai créé un total de trois classes. Créer un court code personnalisé pour afficher le calendrier des événements maintenant que nous avons créé une page d’événements séparée, nous pouvons créer une page pour afficher tous les événements. Heureusement, mec vous offre de nombreuses options pour voir les activités. Je ne plaisante pas. En utilisant le générateur de raccourcis pour les calendriers d’événements, vous pouvez voir les calendriers d’événements de presque n’importe quelle façon. Vous pouvez accéder au générateur de code raccourci en naviguant vers le calendrier me > Code raccourci. Le générateur de code court vous permet de choisir parmi 16 peaux différentes. Chaque peau a ses propres options de style: Vous pouvez filtrer et
20 à afficher dans les options de filtre. Vous pouvez également choisir d’afficher le formulaire de recherche en haut du calendrier, ce qui permet aux utilisateurs de filtrer le calendrier par eux – mêmes. Une fois le Code court terminé, il suffit de copier le Code court dans la zone de code court et de le coller sur la page. Pour ce tutoriel, je vais créer deux courts codes personnalisés pour afficher mon calendrier dans les vues de défilement et de grille minimale. Vue du curseur Code court pour créer une vue du curseur, ajoutez un nouveau Code court et mettez à jour ce qui suit: peau: style de vue du curseur: type 3 Enregistrer le Code raccourci. Code court d’apparence de la grille pour créer un code court de la grille, ajoutez un nouveau Code court et mettez à jour ce qui suit: apparence: styles de vue de la grille: affichage minimal des formulaires de recherche: désactivé Enregistrer le Code raccourci. Maintenant nous avons tous créé le Code court. Nous créons des pages d’événements pour afficher nos événements. Pour construire une page d’événements personnalisée pour la page d’événements, je vais utiliser la mise en page de classe Pottery studio. Créez une nouvelle page, nommez – la cours et atelier, et déployez le constructeur de visualisation. Ensuite, Téléchargez la mise en page du cours Potter studio à partir de la bibliothèque. Ajoutez une section pleine largeur sous la première section et utilisez le formulaire de code pleine largeur. Vous ajoutez ensuite un raccourci vers la vue du curseur que vous avez créée précédemment à la zone de contenu de l’onglet contenu. Ensuite, spécifiez une marge personnalisée de – 20 Px sous le design Board. Enregistrer les paramètres. Supprime la partie supérieure originale utilisée comme titre de page, de sorte que le curseur devient maintenant la partie supérieure. Dans la deuxième section, il y a trois lignes. Cliquez pour modifier m
Texte à la deuxième ligne. Dans la zone de contenu, supprimez le texte virtuel et ajoutez un code court pour le Code court d’apparence de maille que vous avez créé précédemment. Supprime la ligne juste en dessous de la ligne. Changez ensuite l’arrière – plan de la section en blanc. Il y a maintenant un curseur qui montre les activités de l’atelier et de la classe, ainsi que la disposition de la grille pour les mêmes activités. Les utilisateurs peuvent cliquer sur l’un de ces événements et seront dirigés vers une seule page d’événements où ils pourront voir des informations sur les événements et s’enregistrer. Gérer vos réservations mec vous permet de gérer toutes vos réservations à partir du tableau de bord WordPress. Vous pouvez également ajouter des réservations manuellement, ce qui est une bonne fonctionnalité. Je ne peux m’empêcher de penser que la raison pour laquelle j’ai supprimé ce tutoriel est simplement parce que le plug – in de calendrier d’événements moderne fournit plus de contenu. Le générateur de code Court peut créer de nombreuses autres options. Laissez – moi vous montrer à quoi ressemble la vue complète du calendrier: La vue du Carrousel est la suivante: Ce n’est que le début de toutes les différentes options pour voir l’activité. En résumé, une fois que tous les éléments ont été placés, ajouter et afficher des événements est un processus très simple. De plus, la possibilité d’intégrer du Code court dans Divi Builder présente un avantage supplémentaire, de sorte qu’il n’y a aucune raison de ne pas offrir une bonne option de planification d’événements pour votre site. J’ai hâte d’entendre vos commentaires. Bonjour!