Créer un site Web à une seule page avec une navigation sur une page dans WordPress (avec bonus)

Vous cherchez à créer un site Web pour votre entreprise, mais vous n'avez pas le temps d'en créer un grand? Ou n'êtes-vous pas prêt à vous engager dans la maintenance de votre site Web à long terme ?

Ensuite, vous devriez opter pour un site Web à page unique avec une navigation sur une page. Le site Web d'une seule page donne toutes les informations de manière attrayante et donne à votre site Web un aspect époustouflant afin que vos utilisateurs puissent s'engager davantage.

Dans ce blog, vous apprendrez non seulement comment créer un site Web d'une seule page avec une navigation sur une page dans WordPress , mais également comment ajouter un formulaire de contact dans une fenêtre contextuelle en bonus.

La plupart des gens quittent le site Web s'ils ne trouvent pas un moyen approprié de contacter le propriétaire, donc ce conseil bonus ajoutera vraiment une valeur extraordinaire à votre site Web.

Ne perdons plus de temps et commençons le processus de création d'un site Web époustouflant avec une navigation d'une page Elementor . Vous pouvez consulter l'aspect final du site à partir du bouton ci-dessous :

Qu'est-ce que la navigation sur une page ?

La navigation sur une page, comme son nom l'indique, est un menu de navigation spécialement conçu pour naviguer dans différentes parties d'un site Web d'une seule page. La navigation sur une page avec un effet de défilement fluide fait de la navigation dans différentes sections une expérience simple et conviviale.

"La simplicité est la sophistication ultime." - Léonard de Vinci

Et cette simplicité donne aux sites Web à page unique l'avantage dont ils ont besoin par rapport aux autres. Un site Web d'une page est idéal pour les petites entreprises telles que les planificateurs de mariage, la photographie, les petits salons, les restaurants, etc.

Cependant, si vous avez une grande entreprise de commerce électronique qui vend trop de produits ou fournit plusieurs services et doit répondre à un public plus large, le site Web à page unique n'est pas pour vous.

Quels sont les avantages d'un site Web à page unique avec navigation sur une page ?

Vous ne devriez pas penser à obtenir un site Web d'une page pour votre entreprise simplement parce que votre entreprise est petite. Il existe de nombreux autres avantages à avoir un site Web d'une page, en particulier un site Web WordPress d'une page. Jetons un coup d'œil à certains des avantages :

• Tout d'abord, il est compatible avec les mobiles. C'est une chose cruciale à considérer en matière de référencement de site Web (optimisation pour les moteurs de recherche). En 2021, 70% des citoyens américains utilisent un appareil mobile pour effectuer des recherches sur Internet. Des données comme celles-ci sont la raison pour laquelle Google donne la priorité à un site Web adapté aux mobiles. Avec la conception d'une seule page, votre site Web figure sur les bons livres de Google dès le départ.

• La plupart des gens préfèrent un site Web simple, beau et précis plutôt qu'un site Web inutilement long.
• Google compte à 40 % l'autorité des liens au niveau du domaine et de la page. C'est un autre domaine où votre site d'une page aura un avantage.
• Les sites Web d'une seule page se chargent plus rapidement que les sites Web avec des tonnes de pages. Compte tenu du fait que les gens ont aujourd'hui des options illimitées, avoir un site à chargement rapide n'est vraiment pas négociable.
• Les sites d'une page sont faciles à entretenir.
• Étant donné qu'un site Web à une seule page contient toutes les informations sur une seule page, la navigation par défilement facilite grandement la navigation et un effet de défilement fluide rend l'expérience de l'utilisateur apaisante.

Je peux continuer encore un peu, mais je pense que les informations ci-dessus transmettent le message que si votre entreprise est petite, vous pouvez obtenir de gros avantages, en fait, de très gros avantages en utilisant le petit site Web avec une navigation sur une page. Passons donc au processus principal sans perdre de temps.

Comment créer un site Web unique avec une navigation sur une page dans WordPress

Dans ce blog, je vais vous montrer non seulement comment créer un site Web, mais aussi une navigation d'une page d'aspect moderne dans WordPress qui impressionnera vos clients potentiels. Pour ce tutoriel, je vais utiliser le constructeur de sites Web populaires WordPress (je sais que cela est indiqué dans le titre !)

Alors, commençons…

Étape 1 : Installez les plugins WordPress requis

Une fois WordPress installé sur votre système. Vous devez installer les plugins WordPress suivants :

• Élémentor (version gratuite)
• ElementsKit (version gratuite et Pro)
• MetForm (version gratuite)

Une fois que vous avez terminé d'installer et d'activer les plugins WordPress requis, il est temps de créer le site.

Étape 2 : Créer un site Web à l'aide de la page prédéfinie d'ElementsKit

ElementsKit fournit de nombreuses pages, modèles et sections prédéfinis afin que les utilisateurs puissent créer un site Web avec la conception, la mise en page et le style de leur choix sans codage. Pour ce blog, je vais utiliser la page de destination du planificateur de mariage par ElementsKit.

Pour créer votre site Web, depuis le tableau de bord WordPress, allez dans Pages ⇒ Ajouter un nouveau

• Donnez un titre tel que Home, choisissez Elementor Full Width dans les options de modèle
• Cliquez pour publier et après la publication, cliquez sur Modifier avec Elementor

• Cliquez sur le bouton ElementsKit (EK) une fois la fenêtre Elementor Builder ouverte

• Allez dans l'onglet Page , recherchez la page de mariage et cliquez sur insérer

Maintenant, cliquez sur mettre à jour pour enregistrer

Étape 3 : Comment ajouter la navigation d'une page Elementor à l' aide d'ElementsKit

Maintenant que nous avons notre site Web, il est temps de passer à la partie amusante qui consiste à ajouter une navigation par défilement d'une page. La navigation par défilement ElementsKit Onepage est plus facile à utiliser et donne à votre site un look époustouflant. Il est très peu probable que vous trouviez un autre addon Elementor de navigation sur une page aussi bon que ElementsKit.

Examinons maintenant le processus étape par étape d'ajout d'un lien de navigation par défilement de page à votre site WordPress :

3.1 Activer le module de défilement d'une page

Pour ajouter la navigation par défilement à votre site WordPress, nous devons d'abord activer le module de défilement d'une page.

• Allez dans : Tableau de bord WordPress ⇒ ElementsKit ⇒ Modules
• Activer le défilement d'une page
• Cliquez sur Enregistrer les modifications pour mettre à jour

3.2 Activer le défilement d'une page à partir des paramètres de page

• Cliquez sur l'icône Paramètres dans le coin inférieur gauche du panneau Elementor
• Ouvrez l'onglet Paramètres d'ElementsKit
• Activer l'option de défilement d'une page

Remarque : Si vous ne trouvez pas l'option Onepage Scroll Setting, vous n'avez probablement pas activé votre ElementsKit Pro

3.3 Choisir le style de navigation

Maintenant, il est temps de choisir le style de navigation. ElementsKit vous offre plusieurs options de navigation. Par exemple, sous le cercle, vous obtenez Scale-up, fill in, fill out, etc. , rétrécissement de ligne, etc.

Vous pouvez choisir le style que vous aimez, pour ce blog, je vais choisir l'icône personnalisée. Une fois que vous avez choisi une icône personnalisée, vous aurez la possibilité de choisir une icône pour l'option Style de navigation par défilement d'une page. Vous pouvez choisir une icône dans la bibliothèque d'icônes ou télécharger une icône SVG personnalisée .

Pour choisir une icône personnalisée

• Choisissez l'option Icône personnalisée dans la liste déroulante des styles de navigation
• Survolez l'icône de navigation et cliquez sur la bibliothèque d'icônes
• Recherchez et insérez l'icône que vous aimez

3.4 Configurer d'autres paramètres de navigation

Une fois que vous avez choisi un style de navigation, vous aurez accès aux paramètres suivants :

• Position de navigation : vous pouvez définir la position de navigation en haut, à droite, en bas ou à gauche.
• Décalage de la position de navigation : vous pouvez choisir ici la valeur de décalage de la position de navigation.
• Espacement de navigation : choisissez l'espace souhaité entre chaque icône de navigation.
• Couleur de navigation : choisissez une couleur pour l'icône de navigation.
• Typographie de l'info-bulle : ici, vous pouvez choisir la famille, la taille de la police, la transformation du poids, le style, la décoration et la hauteur de ligne de l'info-bulle.

3.5 Ajouter des sections de page aux liens de navigation

Maintenant que tous les paramètres sont définis, il est temps d'ajouter les sections que vous souhaitez voir apparaître dans la navigation. Faire cela

• Survolez la section et cliquez sur l'icône Modifier la section
• Allez dans l' onglet Avancé
• Développer l'option ElementsKit Onpage Scroll
• Activez activer la section pour rendre la section visible
• Activez l'option Enable do t pour ajouter cette section comme l'un des liens de navigation
• Attribuez un nom au texte de l'info -bulle . Le texte de l'info-bulle s'affichera lorsque quelqu'un survolera le lien
• Enfin, cliquez sur mettre à jour pour enregistrer

Vous pouvez répéter le même processus mentionné ci-dessus pour ajouter toutes les sections souhaitées à la navigation.

Remarque : Vous pouvez ajouter une section à la navigation, pas la section interne. Ainsi, vous ne trouverez pas l'option ElementsKit Onpage Scroll sous l'onglet avancé de la section interne ou de tout autre widget.

Après avoir effectué toute la navigation, mettez à jour et cliquez pour voir l' aperçu de la navigation d'une page dans WordPress et également pour vérifier les liens du menu de navigation.

Étape 4: Ajouter un en-tête de pied de page à l'aide de la section d'en-tête de pied de page prédéfinie d'ElementsKit

Eh bien, vous avez maintenant une navigation sur une page de site Web dans WordPress, mais vous avez toujours besoin d'un pied de page d'en-tête pour compléter votre site Web. Les sections d'en-tête et de pied de page d'un site Web sont très importantes pour afficher votre logo et des informations importantes afin que vos clients puissent facilement les voir.

ElementsKit vous propose de nombreuses sections d'en-tête et de pied de page prédéfinies. Pour utiliser ElementsKit Header Footer :

• Allez dans ElementsKit ⇒ Header Footer ⇒ Cliquez sur Add New

• Choisissez Type comme en- tête , Conditions comme site entier , activez l'option Activer /Désactiver et enfin cliquez sur Enregistrer les modifications .

• Maintenant, pour ajouter une section d'en-tête, cliquez sur Modifier dans le menu que vous avez créé
• Cliquez sur Modifier le contenu
• Cliquez sur le bouton EK et accédez à l'onglet Sections
• Choisissez le design d'en-tête que vous aimez et cliquez sur insérer

Vous pouvez suivre la vidéo ci-dessous pour créer un magnifique pied de page d'en-tête pour votre site Web.

Remarque : Vous pouvez suivre les mêmes étapes que Header pour créer une section Footer pour votre site Web à l'aide des sections Premade d'ElementsKit.

Étape 5 : Ajouter le formulaire de contact en tant que fenêtre contextuelle modale (BONUS)

Il est temps d'ajouter un formulaire de contact à votre site Web afin qu'il soit plus facile pour vos clients potentiels de communiquer avec vous. L'ajout d'un formulaire de contact à l'aide d'une fenêtre contextuelle donnerait à votre site Web d'une page un aspect plus attrayant, ainsi que le formulaire indispensable dont vous avez besoin.

Pour ajouter un popup modal, je vais remplacer le bouton RSVP par un popup modal et y ajouter un formulaire de contact.

• Allez dans ElementsKit ⇒ Widgets ⇒ Activer le Popup modal ⇒ Cliquez sur enregistrer les modifications

• Accédez à votre page d'accueil All Page ⇒ (ou quel que soit le nom que vous avez donné à votre page) et cliquez sur Modifier avec Elementor

• En mode édition, faites défiler jusqu'à la section RSVP et supprimez le bouton RSVP
• Faites glisser et déposez une fenêtre contextuelle modale à la place du bouton RSVP

• Pour changer le texte du bouton modal, allez dans Contenu ⇒ Bouton Toggler ⇒ Étiquette et changez "Open Modal" en RSVP (ou tout ce que vous voulez)

• Accédez à l'onglet Style ⇒ Bouton bascule pour modifier la couleur d'arrière-plan du bouton, la couleur du texte, le rayon de la bordure et d'autres paramètres pour la vue normale et la vue de survol.

• Allez maintenant dans Contenu et activez le mode Activer le modèle afin que nous puissions ajouter notre formulaire de contact.
• Cliquez sur le bouton contextuel. Une fois ouvert, cliquez sur l'icône d'édition sur le corps pour ouvrir l'éditeur Elementor

• Recherchez Metform, faites glisser et déposez le widget
• Cliquez sur le formulaire Modifier pour choisir le formulaire de contact
• Choisissez le formulaire que vous voulez dans la liste et cliquez sur enregistrer et fermer
• Enfin, cliquez sur mettre à jour pour enregistrer

Remarque : J'avais déjà créé le formulaire RSVP à l'aide de Metform et j'ai également légèrement modifié la couleur et le style pour qu'ils correspondent au modèle de page de destination que nous utilisons. Vous pouvez consulter le blog sur la création et le style des formulaires de contact à l'aide de Metform .

Vous pouvez également consulter la vidéo ci-dessous pour savoir comment créer un formulaire de contact personnalisé à l'aide de Metform.

Étape #6 : Mettre à jour et voir l'aperçu Site Web unique avec une navigation sur une page

Eh bien, tout est fait. Passons maintenant à la dernière étape, la plus facile et la plus excitante. Après avoir terminé toutes les personnalisations et les étapes mentionnées ci-dessus, cliquez sur le bouton Mettre à jour pour tout enregistrer et cliquez sur le bouton Aperçu pour voir votre site.

À condition que vous ayez suivi toutes les étapes correctement, vous devriez obtenir un site Web d'une seule page avec une navigation d'une page dans WordPress comme celui ci-dessous :

Conclure

Donnez-vous une tape dans le dos ! Parce que vous avez réussi à créer un site Web magnifique et moderne avec une navigation sur une page à l'aide d'Elementor et d'ElementsKit. En utilisant un site Web d'une seule page, les clients peuvent facilement accéder aux différentes sections de votre site Web pour en savoir plus sur votre entreprise. Et cette fenêtre contextuelle modale en un clic avec formulaire de contact rend la communication vraiment en un seul clic !

Si vous êtes impressionné par ce que vous avez construit, préparez-vous à être encore plus surpris car ElementsKit ouvre des possibilités illimitées aux utilisateurs de WordPress et Elementor pour expérimenter et créer un site Web d'apparence impressionnante. Alors, prenez le temps de découvrir d'autres widgets et modules avancés d'ElementsKit.

Pour en savoir plus sur la création de sites Web à l'aide de WordPress, Elementor et le magique ElementsKit, suivez-nous sur nos comptes de médias sociaux.