French 
English 
German 
Spanish 
Italian 
Danish 
Portuguese 
Swedish 
Polish 
Korean 
Japanese 
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 :
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.
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 :
- Premièrement, il est adapté aux mobiles. C'est une chose cruciale à considérer lorsqu'il s'agit de référencement de sites Web (optimisation pour les moteurs de recherche). À partir de 2021, 70% d'un citoyen américain utilise un appareil mobile pour effectuer une recherche sur Internet. Des données comme celles-ci sont la raison pour laquelle Google donne la priorité à un site Web adapté aux mobiles. Avec une conception d'une seule page, votre site Web figure dès le départ dans les bons livres de Google.
- 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.
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 :
- Élémentor (Version gratuite)
- ElementsKit (Version gratuite et version 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 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
- 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
- Cliquez sur le bouton ElementsKit (EK) une fois la fenêtre Elementor Builder ouverte.
- Allez au Page onglet, Rechercher Mariage Page et cliquez sur insérer
Maintenant Cliquez sur sur la mise à jour pour enregistrer
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
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
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
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.
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
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.
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
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.
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
- Choisissez Type comme Entête, Conditions comme Site entier, Allumer l'option Activer/Désactiver et enfin cliquez sur Sauvegarder 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 allez dans 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 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.
É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
- 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
- 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
- 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)
- 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.
- 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
Vous pouvez consulter plus de détails sur notre blog sur différentes façons d'utiliser le widget modal contextuel d'ElementsKit sur votre site WordPress
- 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
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.
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 :
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.
Laisser un commentaire