Créez un site Web d'une seule page avec une navigation sur une seule 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 de grande envergure ? Ou vous n'êtes pas prêt à vous engager dans la maintenance d'un site Web à long terme ?

Ensuite, vous devriez opter pour un site Web à page unique avec navigation sur une seule page. Un site Web d'une seule page fournit 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 d'une seule page dans WordPress mais aussi comment ajouter un formulaire de contact dans une pop-up en bonus.

La plupart des gens quittent le site Web s'ils ne trouvent pas un moyen approprié de contacter le propriétaire. Cette astuce bonus ajoutera donc 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 un Navigation sur une page Elementor. Vous pouvez consulter l'aspect final du site à partir du bouton ci-dessous :

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

La navigation sur une seule page, comme son nom l'indique, est un menu de navigation spécialement conçu pour naviguer vers différentes parties d'un site Web d'une seule page. La navigation sur une seule page avec un effet de défilement fluide rend la navigation vers 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 sur les autres. Un site Web d'une page est idéal pour les petites entreprises telles que les organisateurs de mariages, 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 s'adresser à un public plus large, le site Web d'une seule page n'est pas pour vous.

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

Vous ne devriez pas penser à créer un site Web d’une page pour votre entreprise simplement parce que votre entreprise est petite. Avoir un site Web d’une page présente de nombreux autres avantages, en particulier un site Web WordPress d’une page. Jetons un coup d'œil à quelques-uns des avantages :

  • La plupart des gens préférez un site Web simple, beau et pertinent plutôt que d'être inutilement long. 
  • Google compte Au niveau du domaine et de la page autorité de liaison à un degré de 40%. C'est un autre domaine dans lequel votre site d'une page aura un avantage.
  • Les sites Web d’une seule page se chargent plus rapidement que les sites Web contenant des tonnes de pages. Compte tenu du fait que les gens disposent aujourd’hui d’options illimitées, avoir un site à chargement rapide n’est vraiment pas négociable.
  • Les sites d’une page sont faciles à maintenir.
  • Étant donné qu'un site Web d'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 utilisateur apaisante.

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

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

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

 Alors, commençons…

Étape #1 : Installez les plugins WordPress requis pour créer Elementor One Page Scroll

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

un site Web Elementor avec défilement d'une page :

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 ElementsKit

ElementsKit fournit de nombreux pages et modèles prédéfinis et des sections afin que les gens puissent créer un site Web avec la conception, la mise en page et le style qu'ils souhaitent également sans codage. Pour ce blog, je vais utiliser le Page de destination de l'organisateur de mariage par ElementsKit.

Pour créer votre site Web, depuis le tableau de bord WordPress, accédez à Pages ⇒ Ajouter un nouveau

Accédez à l'élément de navigation d'une page WordPress New Page
  • Donne un titre comme Accueil, choisissez Elementor pleine largeur à partir des options du modèle
  • Cliquez pour publier et après la publication cliquez sur Modifier avec Elementor
Créer une page avec le générateur de pages Elementor, élément de navigation sur une page
  • Cliquez sur le bouton ElementsKit (EK) une fois la fenêtre Elementor Builder ouverte.
Cliquez sur le bouton ElementsKit
  • Allez au Page onglet, Rechercher Mariage Page et cliquez sur insérer
Rechercher et insérer une page d'accueil de mariage par ElementsKit Navigation sur une page dans WordPress

Maintenant Cliquez sur sur la mise à jour pour enregistrer

Cliquez sur Mettre à jour pour enregistrer les modifications Elementor navigation sur une page

Étape #3 : Comment ajouter la navigation sur une page Elementor en utilisant ElementsKit

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

Examinons maintenant le processus étape par étape pour ajouter 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 une navigation par défilement à votre site WordPress, nous devons d’abord activer le module de défilement Onepage.

  • Aller à: Tableau de bord WordPress ⇒ ElementsKit ⇒ Modules 
  • Allumer Défilement d'une page
  • Cliquer sur Sauvegarder les modifications mettre à jour
Turnon Onepage Scroll par ElementsKit élément de navigation d'une page Elementor défilement d'une page élément de défilement d'une page

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
Activer le défilement d'une page à partir des paramètres Elementor One Page Navigation dans WordPress

Note: Si vous ne trouvez pas l'option Paramètres de défilement d'une page, vous ne l'avez probablement pas fait. activé votre ElementsKit Pro

3.3 Choisir le style de navigation

Il est maintenant temps de choisir le style de navigation. ElementsKit vous offre plusieurs options de navigation. Par exemple, sous le cercle, vous obtenez Mise à l'échelle, Remplissage, Remplissage, etc. Pour le motif carré, vous aurez des options telles que l'échelle et dans le cadre de Ligne, vous obtiendrez des options telles que la ligne à agrandir, le remplissage de la ligne. , rétrécissement de ligne, etc.

Option de style de navigation de défilement sur une page

Vous pouvez choisir le style de votre choix, 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 soit dans la liste bibliothèque d'icônes ou téléchargez un personnalisé Icône SVG

Pour choisir une icône personnalisée

  • Choisissez une icône personnalisée option dans la liste déroulante des styles de navigation
  • Flotter sur l'icône de navigation et Cliquez sur sur la bibliothèque d'icônes
  • Rechercher et insérer l'icône que vous aimez
Choisissez une icône de navigation personnalisée Navigation sur une page dans WordPress

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 position de navigation : Ici, vous pouvez choisir 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 pour l'info-bulle.
Autres paramètres de style de navigation, élément de défilement d'une page ou navigation sur une page

3.5 Ajouter des sections de page aux liens de navigation

Maintenant que tous les réglages sont effectués, il est temps d'ajouter les sections que vous souhaitez voir apparaître sur la navigation. Faire cela

  • Flotter sur la section et cliquez sur le Modifier la section icône
  • Allez au Onglet Avancé
  • Développer Option de défilement sur la page ElementsKit
  • Activer activer la section pour rendre la section visible
  • Activer activer fairet option pour ajouter cette section comme l'un des liens de navigation
  • Donnez 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
Ajouter une section de page au défilement de navigation d'une page

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

Note:  Vous pouvez ajouter une section à la navigation, pas la section intérieure. 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, mettre à jour et cliquer pour voir le Aperçu de navigation sur une page dans WordPress et également pour vérifier les liens du menu de navigation.

Navigation sur une page dans WordPress à l'aide de la navigation sur une page elementor

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

Eh bien, vous disposez désormais d’un site Web de navigation sur une page dans WordPress, mais vous avez toujours besoin d’un en-tête de pied de page 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 vos informations importantes afin que vos clients puissent les voir facilement.

ElementsKit vous propose de nombreux En-tête prédéfini et Sections de pied de page à choisir. Pour utiliser le pied de page d’en-tête ElementsKit :

  • Aller à ElementsKit ⇒ En-tête de pied de page ⇒ Cliquez sur Ajouter un nouveau
Ajouter un nouvel en-tête ElementsKit One Page Navigation dans WordPress
  • Choisissez Type comme Entête, Conditions comme Site entier, Allumer l'option Activer/Désactiver et enfin cliquez sur Sauvegarder les modifications.
Créer un en-tête à l'aide d'ElementsKit
  • 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 allez dans l'onglet Sections
  • Choisissez le design d'en-tête que vous aimez et cliquez sur Insérer 
Insérer une section d'en-tête par ElementsKit

Vous pouvez suivre la vidéo ci-dessous pour créer un magnifique pied de page pour votre site Web.

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

Télécharger le gif ElementsKit

Étape #5 : ajouter un formulaire de contact en tant que fenêtre contextuelle modale (PRIME)

Il est temps d'ajouter un formulaire de contact à votre site Web afin que vos clients potentiels puissent communiquer plus facilement 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 une popup modale, je vais remplacer le RSVP bouton avec un modal contextuel et ajoutez-y un formulaire de contact.

  • Allez dans ElementsKit ⇒ Widgets ⇒ Activez le popup modal ⇒ Cliquez sur enregistrer les modifications
Activer et enregistrer le widget modal contextuel par ElementsKit
  • Accédez à votre page Toutes les pages ⇒ page d'accueil (ou quel que soit le nom que vous avez donné à votre page) et cliquez sur Modifier avec Elementor
Modifier la page d'accueil avec Elementor
  • En mode édition, faites défiler jusqu'à la section RSVP et supprimez le bouton RSVP
  • Glissez et déposez une fenêtre contextuelle modale à la place du bouton RSVP
Glissez-déposez la fenêtre contextuelle modale par ElementsKit et supprimez le bouton Navigation sur une page dans WordPress
  • Pour modifier le texte du bouton modal, allez dans Contenu ⇒ Bouton bascule ⇒ Étiquette et remplacez « Open Modal » par RSVP (ou tout ce que vous voulez)
Modifier le texte du bouton modal contextuel
  • 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 survolée.
Changer le style du bouton modal contextuel par ElementsKit Elementor une page de défilement une page de défilement elementor
  • 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
Activez le modèle et cliquez pour ouvrir le panneau Elementor
  • Recherchez Metform, faites glisser et déposez le widget
  • Cliquez sur le formulaire Modifier pour choisir le formulaire Contact 
  • Choisissez le formulaire souhaité dans la liste et cliquez sur enregistrer et fermer
  • Enfin, cliquez sur mettre à jour pour enregistrer
Ajouter Metform dans une fenêtre contextuelle modale dans un site Web Elementor avec défilement d'une page et défilement d'une page

Note: J'avais déjà créé le formulaire RSVP à l'aide de Metform et j'avais é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 comment créer et styliser des formulaires de contact à l'aide de Metform

Vous pouvez également consulter le vidéo ci-dessous pour les instructions sur la façon de créer un formulaire de contact personnalisé à l'aide de Metform.

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

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

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

Site Web d'une seule page avec élément de navigation d'une page ou élément de navigation d'une page ou élément de défilement d'une page ou élément de défilement d'une page
Aperçu

Vous voulez en savoir plus sur ElementsKit ? Découvrez la dernière mise à jour sur ElementsKit en savoir plus à propos de ce génial addon Elementor.

Derniers mots sur le site Web Elementor One Page Scroll

Donnez-vous une tape dans le dos ! Parce que vous avez réussi à créer un beau site Web moderne avec une navigation sur une seule page à l’aide d’Elementor et ElementsKit. En utilisant un site Web d'une seule page, les clients peuvent facilement naviguer vers 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 permet de communiquer 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 d'Elementor pour expérimenter et créer un site Web impressionnant. 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 du magique ElementsKit, suivez-nous sur nos comptes de réseaux sociaux.


commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *