Créez un menu de pied de page ressemblant à une application mobile avec Elementor (incl. modèle gratuit)

Table of Contents

1. 📱 Introduction
2. 🛠️ Creating a Mobile App-Like Footer Menu with Icons in Elementor
   • 2.1 Installing Elementor and Elementor Pro
   • 2.2 Downloading the Free Template
3. 💡 Customizing the Mobile Icon Menu
   • 3.1 Adding the Template in Elementor Pro
   • 3.2 Adding the Template in Elementor (Free Version)
4. 📞 Adding Click-to-Call Functionality
   • 4.1 Adding a Phone Number Link
   • 4.2 Changing the Phone Icon
5. 📧 Adding Email Functionality
   • 5.1 Adding an Email Link
   • 5.2 Changing the Email Icon
6. 🗺️ Adding a Link to Google Maps
   • 6.1 Adding a Map Link
   • 6.2 Changing the Map Icon
7. 🔗 Adding Anchor Links
   • 7.1 What are Anchor Links?
   • 7.2 Adding Anchor Links to Navigate Within the Page
8. 🎨 Customizing the Icons and Colors
   • 8.1 Changing the Icons
   • 8.2 Changing the Colors
9. 💼 Enhancing Your Website's Professionalism
   • 9.1 Importance of a Professional Looking Website
   • 9.2 Tips for Making Your Website More Professional
10. 🏁 Conclusion

📱 Introduction

Bonjour à tous ! Je m'appelle Robert, et je vais vous montrer comment créer un menu de pied de page ressemblant à une application mobile avec des icônes dans Elementor. Ce menu restera fixé en bas de l'écran et vous permettra de cliquer sur différentes icônes pour effectuer des actions telles que lancer un appel téléphonique, envoyer un e-mail ou même accéder à une section spécifique de votre page. Dans cet article, nous verrons étape par étape comment créer ce menu en utilisant Elementor et Elementor Pro.

🛠️ Creating a Mobile App-Like Footer Menu with Icons in Elementor

Pour commencer, vous aurez besoin d'installer Elementor et Elementor Pro sur votre site WordPress. Si vous avez déjà Elementor Pro, vous pourrez placer ce menu de pied de page sur toutes les pages de votre site. Sinon, nous vous montrerons également comment l'ajouter à une page spécifique à l'aide de la version gratuite d'Elementor.

2.1 Installing Elementor and Elementor Pro

Si vous n'avez pas encore installé Elementor sur votre site WordPress, vous devrez le faire avant de pouvoir créer ce menu de pied de page. Voici comment procéder :

1. Allez sur votre tableau de bord WordPress.
2. Cliquez sur "Extensions" dans le menu de gauche.
3. Cliquez sur "Ajouter une nouvelle".
4. Recherchez "Elementor" dans la barre de recherche.
5. Cliquez sur "Installer maintenant" à côté de l'extension Elementor.
6. Une fois l'installation terminée, cliquez sur "Activer".

Si vous avez déjà installé Elementor Pro, assurez-vous de le mettre à jour vers la dernière version disponible.

2.2 Downloading the Free Template

Avant de commencer à créer notre menu de pied de page, nous devons télécharger le modèle gratuit que je mets à votre disposition. Voici comment procéder :

1. Rendez-vous sur la page de téléchargement du modèle en cliquant sur le lien fourni dans la description de cette vidéo.
2. Cliquez sur "Télécharger le modèle gratuit".
3. Une fois le téléchargement terminé, extrayez le fichier .zip.
4. Assurez-vous que le fichier extrait est au format .json.

Maintenant que nous avons tout en place, nous pouvons passer à la création de notre menu de pied de page dans Elementor. Continuez à lire pour savoir comment procéder.

💡 Customizing the Mobile Icon Menu

Maintenant que vous avez téléchargé le modèle gratuit, nous allons voir comment l'ajouter à votre site en utilisant Elementor et Elementor Pro.

3.1 Adding the Template in Elementor Pro

Si vous avez Elementor Pro, vous pouvez ajouter le modèle de menu de pied de page à votre site en suivant ces étapes :

1. Accédez à votre tableau de bord WordPress.
2. Cliquez sur "Templates" dans le menu d'Elementor.
3. Cliquez sur "Theme Builder" pour accéder à la bibliothèque de modèles.
4. Cliquez sur "Ajouter un nouveau" pour créer un nouveau modèle.
5. Sélectionnez "Pied de page" comme type de modèle.
6. Personnalisez le modèle en fonction de vos besoins.
7. Dans les paramètres d'affichage, sélectionnez "Toutes les pages" pour que le menu de pied de page s'affiche sur toutes les pages de votre site.
8. Cliquez sur "Enregistrer" pour sauvegarder votre modèle.

3.2 Adding the Template in Elementor (Free Version)

Si vous n'avez pas Elementor Pro, vous pouvez ajouter le modèle de menu de pied de page à une page spécifique en utilisant la version gratuite d'Elementor. Voici comment procéder :

1. Accédez à la page où vous souhaitez ajouter le menu de pied de page dans votre tableau de bord WordPress.
2. Faites défiler jusqu'à la section où vous souhaitez ajouter le menu.
3. Cliquez sur le bouton "Modifier avec Elementor" pour ouvrir l'éditeur Elementor.
4. Faites défiler jusqu'en bas de la barre latérale gauche et recherchez l'élément "Icône de boîte".
5. Faites glisser l'élément "Icône de boîte" dans la section souhaitée de votre page.
6. Cliquez sur le bouton "Importer le modèle" dans la barre d'outils supérieure.
7. Sélectionnez le fichier .json du modèle que vous avez précédemment téléchargé.
8. Cliquez sur "Ouvrir" pour importer le modèle.
9. Personnalisez le modèle selon vos préférences.
10. Cliquez sur "Mettre à jour" pour enregistrer les modifications apportées à la page.

Vous avez maintenant ajouté avec succès le menu de pied de page à votre site en utilisant Elementor ou Elementor Pro. Poursuivez votre lecture pour en savoir plus sur la personnalisation du menu et l'ajout de fonctionnalités supplémentaires.

(Continue the article by covering each point in the Table of Contents)