Comment utiliser le pack exclusif de mise en page Cyber ​​Monday Bakery pour créer une page d'emplacements pour votre entreprise

Cette année, obtenir une offre Cyber ​​Monday signifie également obtenir une tonne de trucs gratuits ! En plus de bénéficier d'une remise de 25 %, tous ceux qui achètent un nouvel abonnement à Thèmes élégants ou mettent à niveau leur compte existant (ou qui ont déjà un abonnement à vie) recevront également 6 packs de mise en page gratuits et exclusifs qui sont UNIQUEMENT disponibles en téléchargement lors de notre vente Cyber ​​Monday.

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Un aperçu du pack de mise en page exclusif Cyber ​​Monday Bakery

L'un des packs de mise en page exclusifs que nous vous proposons en tant que membres à vie et nouveaux clients du Cyber ​​Monday est celui-ci pour les boulangeries. Il se compose de 5 pages savoureuses qui rendront tout site Web de boulangerie irrésistible.

Conception de la page de destination

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Conception de page de recette

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Conception de page de menu

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

À propos de la conception de pages

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Conception de la page de contact

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Obtenez le pack de mise en page exclusif Cyber ​​Monday Bakery

Avant d'entrer dans ce cas d'utilisation, vous devrez mettre la main sur le pack exclusif de mise en page Cyber ​​Monday Bakery que vous pouvez obtenir en devenant un nouveau membre Elegant Themes, en mettant à niveau votre compte existant ou en étant déjà membre à vie avec nous. Si vous êtes effectivement déjà membre à vie, vous pouvez vous connecter à notre espace membres et télécharger tous nos packs de mise en page exclusifs ici. Tout le monde devra utiliser le bouton ci-dessous pour acheter ou mettre à niveau avant de pouvoir suivre le reste de notre didacticiel.

Téléchargez la mise en page exclusive avant qu'elle ne disparaisse !

Déjà membre à vie ? Vous pouvez télécharger le pack dès maintenant, pas besoin de participer à notre vente Cyber ​​Monday !

Comment utiliser le pack exclusif de mise en page Cyber ​​Monday Bakery pour créer une page d'emplacements pour votre entreprise

Pour le reste de cet article, nous supposerons que vous avez soit profité de notre offre Cyber ​​Monday, soit que vous êtes déjà membre à vie et que vous avez accès au pack Bakery Layout.

Une fois que vous avez téléchargé le nouveau Bakery Layout Pack depuis notre espace membres, vous pouvez regarder la vidéo ci-dessous pour voir à quel point il est facile à configurer. Nous vous encourageons également à suivre ce didacticiel pour préparer votre site à une personnalisation plus poussée.

Entrons maintenant dans le cas d'utilisation lui-même.

Lors de la création d'un site Web pour une entreprise ayant plusieurs emplacements, il est important de réfléchir à la meilleure façon de communiquer ces informations aux visiteurs. Ils ont besoin de savoir quel endroit est le plus proche d'eux et toute information importante spécifique à cet endroit. Et, créer une page Emplacements pour le site Web est un bon début.

Dans ce cas d'utilisation, je vais vous montrer à quel point il est incroyablement facile de créer une page d'emplacements professionnels pour votre entreprise à l'aide du Pack de mise en page de boulangerie.

En utilisant le cadre de la mise en page de contact de boulangerie, je vais vous montrer comment ajouter des épingles supplémentaires à votre module de carte pour refléter tous les emplacements de votre entreprise ainsi que des sections bien organisées et conçues pour afficher des informations importantes pour chaque emplacement. Parce que nous pouvons utiliser les éléments de conception déjà fournis par la mise en page, ce processus est rafraîchissant et amusant (du moins pour moi).

Commençons.

Commencez par utiliser la mise en page des contacts pour créer votre page d'emplacements

La mise en page Bakery Contact est parfaite pour servir de base à notre nouvelle page Emplacements. Il a un module de carte en haut que nous utiliserons pour présenter chacun des emplacements de notre entreprise. De plus, il contient d'autres éléments tels que des modules de texte déjà conçus que nous pouvons réorganiser et modifier au besoin.

Créer une nouvelle page

Tout d'abord, vous devrez créer une nouvelle page et lui donner un titre (quelque chose comme "Nos emplacements") et cliquer pour utiliser le constructeur Divi, puis le constructeur visuel.

Charger la mise en page de la page de contact de la boulangerie

À ce stade, vous devriez déjà avoir téléchargé les mises en page dans votre bibliothèque Divi. Cliquez pour ouvrir le menu violet en bas de la page et sélectionnez le bouton « Ajouter à partir de la bibliothèque » avec l'icône plus. Sélectionnez l'onglet Charger à partir de la bibliothèque, puis sélectionnez la disposition Contact Boulangerie dans la liste. La mise en page se chargera immédiatement sur la page.

Publier.

Ajout de sections pour vos informations de localisation spécifiques

Nous n'avons vraiment pas beaucoup de contenu sur la page de contact à utiliser pour créer du contenu supplémentaire pour nos emplacements spécifiques. Alors, allons à la page Bakery Landing et sélectionnons la ligne dans la deuxième section de la page et enregistrons-la dans la bibliothèque.

Revenez maintenant à la page des emplacements. Dupliquez la section en bas de la page contenant le formulaire de contact (ne supprimez pas cela nous en aurons besoin plus tard). Dans la section située juste en dessous de la carte, supprimez toute la ligne de la section et ajoutez la ligne que vous avez enregistrée dans votre bibliothèque.

Modifiez ensuite la disposition des colonnes de la ligne en une disposition deux tiers un tiers.

Localisez le module de texte avec le contenu de l'adresse dans la colonne de droite de la section inférieure. Faites-le glisser sous le module image dans la colonne de droite de la ligne dans la section au-dessus.

Mettez ensuite à jour le contenu dans les modules de texte de la colonne de gauche pour représenter l'emplacement spécifique de votre entreprise. Pour mon exemple, je vais ajouter ce qui suit :

Siège social principal
La ville de New York

Mettez maintenant à jour le module d'image dans la colonne de droite pour inclure une image de l'emplacement de votre entreprise.

Cela servira de section intéressante pour chacun de vos textes de présentation d'emplacement spécifiques.

Il ne vous reste plus qu'à dupliquer cette section pour ajouter des emplacements supplémentaires.

Dupliquez cette section deux fois pour avoir un total de 3 sections d'emplacement. Changez ensuite la couleur d'arrière-plan de la section centrale en blanc pour mieux diviser les sections.

Mettez ensuite à jour les sections dupliquées avec un contenu spécifique à l'emplacement. Pour cet exemple, en plus de mon emplacement à New York, je vais également créer une section pour San Francisco et Houston.

Concevoir la section de pied de page du formulaire de contact

N'oubliez pas cette section que nous avons enregistrée en bas contenant notre formulaire de contact. Cela servira de section de pied de page pour notre page de localisation. Tout ce que nous devons faire est de le peaufiner un peu.

Supprimons d'abord les modules restants dans la colonne de droite. Mettez ensuite à jour la disposition des colonnes de ligne vers une disposition à une colonne. Maintenant, tout ce que vous devriez voir est le formulaire de contact dans une rangée d'une colonne.

Cliquez ensuite pour modifier les paramètres de ligne et mettre à jour les éléments suivants :

Sous l'onglet Contenu…

couleur de fond : #ffffff

Sous l'onglet Conception…

rembourrage personnalisé : 5 % en haut, 5 % à droite, 5 % en bas, 5 % à gauche

Ombre de la boîte : [sélectionnez l'ombre de la boîte]

Ajoutons maintenant une image de fond pour notre section. Accédez aux paramètres de la section et sélectionnez l'une des images d'arrière-plan incluses dans la mise en page.

Super! Passons maintenant au module de carte.

Ajoutez votre clé API Google

À ce stade, vous devrez vous assurer de créer votre clé API Google, puis de l'ajouter aux options du thème.

Mettre à jour le module de carte avec de nouvelles épingles de localisation

À ce stade, la majeure partie de notre page est terminée. Il ne reste plus que les mises à jour du module de carte en haut de la page. Nous devons ajouter les nouveaux emplacements des broches pour les trois sections que nous avons créées dans les sections de page (New York, San Francisco et Houston).

Cliquez pour modifier le module de carte et mettre à jour les paramètres comme suit :

Effacez la seule broche qui apparaît dans le module afin de repartir à zéro. Ajoutez ensuite une nouvelle épingle et mettez à jour les paramètres comme suit :

Titre : Boulangerie de la ville de New York
Contenu : Plus d'informations
Adresse du code PIN de la carte : New York City

Cliquez sur le bouton Rechercher.

Ajoutez ensuite une nouvelle épingle et mettez à jour les paramètres comme suit :

Titre : Boulangerie de San Francisco
Contenu : plus d'infos
Adresse du code PIN de la carte : San Francisco

Cliquez sur le bouton Rechercher.

Ajoutez ensuite une nouvelle épingle et mettez à jour les paramètres comme suit :

Titre : Boulangerie Houston
Contenu : plus d'infos
Adresse du code PIN de la carte : Houston, Texas

Cliquez sur le bouton Rechercher.

Vous pouvez laisser l'adresse du centre de la carte à New York City. Mais ajustez l'affichage de la carte pour effectuer un zoom arrière suffisamment important pour pouvoir voir tous les emplacements lorsque le visiteur consulte la carte pour la première fois.

Ajouter des liens d'ancrage aux zones de contenu des épingles

En tant que fonctionnalité supplémentaire, vous pouvez améliorer l'expérience utilisateur en ajoutant un lien d'ancrage à l'intérieur du contenu de l'épingle qui s'affiche lorsque vous cliquez sur l'épingle. Ce lien d'ancrage fera descendre l'utilisateur de la page vers la section spécifique de la page qui présente les informations de cet emplacement.

Ouvrez le paramètre du module de carte, puis modifiez les premiers paramètres de broche. Mettez en surbrillance le texte dans la zone de contenu qui lit "Plus d'informations", puis cliquez sur l'icône de lien pour en faire un lien. Pour l'URL, entrez "#newyork" et cliquez sur OK.

Faites la même chose pour le pin de San Francisco (utilisez l'url "#sanfran") et le pin de Houston (utilisez l'url "#houston").

Il ne vous reste plus qu'à ajouter un identifiant CSS personnalisé à chacune de vos sections qui correspondra aux URL de lien que vous venez de créer dans les épingles.

Pour la section "New York City", mettez à jour les paramètres de la section dans l'onglet Avancé avec l'ID CSS "newyork" et enregistrez vos paramètres.

Désormais, lorsque l'utilisateur clique sur le lien « plus d'informations » (avec l'URL #newyork) dans l'épingle de New York, la page passe directement à cette section.

Faites de même pour la section San Francisco (utilisez l'ID CSS « ​​sanfran ») et la section Houston (utilisez l'ID CSS « ​​houston »)

C'est ça. Vous avez terminé !