Dans ce tutoriel WordPress, découvrez comment créer un site Web avec Elementor en 3 minutes seulement grâce à Elementor Cloud, une solution automatisée pour créer un blog WordPress avec Elementorpour les blogueurs ou webmaster débutants et experts.
Si vous souhaitez plutôt suivre le tutoriel vidéo, alors cliquez sur le bouton au dessus de la vidéo suivante :
Créer votre propre site Web sans apprendre à coder ou embaucher un développeur était presque impossible. Cependant, grâce à des plateformes comme WordPress et à des plugins comme Elementor, ce qui était autrefois mission impossible est maintenant une réalité.
Dans ce tutoriel, nous allons vous montrer comment utiliser WordPress et Elementor pour créer un nouveau site Web et vous guider tout au long du processus étape par étape.
WordPress est un puissant système de gestion de contenu qui peut être téléchargé et utilisé gratuitement et il vous permet de créer tout type de site Web; des simples blogs personnels et sites Web de petites entreprises aux grands sites web d’entreprise et aux applications riches en fonctionnalités.
Elementor, d’autre part, est un constructeur de page facile à utiliser mais robuste qui permet à quiconque de créer facilement son site Web, quelle que soit sa complexité.
Dans ce tutoriel, nous vous montrerons comment créer un site web WordPress en trois minutes avec la nouvelle plateforme Elementor Cloud. Le nom peu être costaud mais la solution est vraiment automatisé et facile pour tout débutant.
la toute première chose est de vous rendre sur la page d’Elementor et allez au bas de la page et de retrouver le lien Elementor Cloud.
Vous serez redirigé vers une nouvelle page. Défilez vers le bas et trouver la section NO HIDDEEN FEES. A sa droite cliquez sur le Bouton Buy Now Comme sur l’image ci-dessous.
La page de paiement s’ouvrira et vous serez invité à à saisir votre email. Après l’avoir saisi cliquez sur le bouton CREATE ACCOUNT
Ensuite dans la page suivante saisissez le pays, l’état, l’adresse, le code zip ainsi de suite, puis cliquez sur le bouton Continue
Après cela, sélectionnez le mode de paiement. Vous pourrez choisir entre la Carte de crédit ou PayPal. Nous avons choisi la méthode PayPal.
Cliquez sur le bouton jaune PayPal à droite de votre écran.
Un popup s’ouvrira et vous serez invité à saisir vos informations de connexion sur PayPal et validez.
Si la procédure a été réussi, vous serez redirigé vers la page de remerciement qui possède deux boutons. Le premier Go to My Account vous mènera vers votre Compte et le deuxième Start creating your website vers la création automatisé de votre site web.
Cliquez sur le deuxième bouton. Vous aurez droit à un nouveau Popup qui vous invitera à saisir le nom de votre site web. Validez en cliquant sur Next.
Attendez que la procédure automatique de création de votre site web arrive à sa fin et ensuite cliquez sur le bouton Let’s go !
Cliquez sur Got It comme sur l’image ci-dessous.
Cliquez sur Open WP Dashboard pour ouvrir votre tableau de bord.
Sur le nouveau Popup de Bienvenue, cliquez sur le bouton Use a website kit
Vous serez invité à sélectionner un modèle de site web dans la liste que propose Elementor. Vous aurez la possibilité de les filtrer par catégorie en cliquant sur l’une d’entre elles à gauche.
Si vous avez trouvé le modèle qui correspond à vos aspirations, passez le pointeur de la souris sur ce dernier, un nouveau bouton s’affichera, cliquez sur View Demo
Vous pourrez ainsi voir, ce dont ce modèle propose. Vous pourrez naviguer sur toutes les pages de ce modèle et si vous êtes satisfait par celui-ci, cliquez le bouton Apply Kit qui se chargera d’installer le modèle sur votre site web.
Si vous ne l’êtes pas, le bouton Back to Library vous fera revenir à la liste des modèles et vous pourrez consulter un autre.
Après avoir cliqué sur Apply Kit, un Popup de confirmation vous demandera si vous souhaitez bel et bien installer tout ce modèle ou tout simplement quelques pages. Vous pouvez cliquer sur Apply All ou Customize pour personnaliser vos choix.
Un récapitulatif de votre sélection sera présenté, cliquez sur Next
Enfin cliquez sur Back to Dashboard pour retourner au tableau de bord de votre site web.
Sur votre tableau de bord, cliquez sur Name Of My Website au dessus et à gauche de votre écran puis sur Visit Site pour voir comment fonctionne votre site web.
Et voila vous venez de créer votre site web sur WordPress avec Elementor Cloud.
Tout ce qui reste à faire est de personnaliser ce dernier comme vous souhaitez. Pour cela, nous proposons un ensemble de tutoriel Elementor que nous vous invitons é découvrir.
Une fois que vous avez terminé avec ce guide, vous voudrez peut-être consulter nos autres guides et tutoriels pour des pages plus spécifiques.
Voila ! C’est tout pour cet article qui vous montre comment créer un site Web avec Elementor en 3 minutes. Si vous avez des soucis sur comment y arriver faites-le nous savoir dans les commentaires.
Besoin de découvrir comment ajouter un effet sonore de bouton sur Elementor ? Découvrez-le dans cet article.
Voyez-vous ces 2 boutons ?
Lorsque vous cliquez sur le bouton du chat, il produira un miaulement, et lorsque vous cliquerez sur le bouton du chien, il produira un bruit d’aboiement. Dans cet article, nous allons vous montrer comment ajouter dans Elementor un effet sonore au bouton lorsqu’il est cliqué.
Comment ajouter dans Elementor un effet sonore au bouton
Étape 1 : Créer un bouton
Tout d’abord, vous devez créer le bouton, vous pouvez personnaliser le bouton comme vous le souhaitez, car Elementor dispose de nombreuses options pour rendre votre bouton magnifique.
Étape 2 : Préparer le lien d’effet sonore
Une fois le bouton prêt, préparez maintenant l’effet sonore pour le bouton et téléversez-le dans la médiathèque WordPress. Vous pouvez utiliser le format de fichier MP3 ou WAV pour l’effet sonore.
Pour téléverser le fichier son dans la médiathèque WordPress, accédez au tableau de bord WordPress et cliquez sur Media -> Ajouter. Vous pouvez faire glisser et déposer les fichiers ou cliquer sur Sélectionner les fichiers pour les téléverser.
Une fois les fichiers téléchargés, Allez dans la médiathèque et cliquez sur l’un des sons, puis sur la fenêtre qui apparait, copiez l’URL du fichier pour obtenir le lien pour l’effet sonore.
Étape 3 : Ajouter le code HTML suivant
Pour produire du son à partir du bouton, nous devons utiliser le code HTML suivants.
Ajoutez un widget HTML dans la zone canvas et collez le code dans le bloc Code HTML.
Utilisez votre lien d’effet sonore pour remplacer Sound-Effect-URL dans l’instruction
var audio1 = new Audio('Sound-Effect-URL')
Choisissez les classes CSS pour le bouton et modifiez le code des classes classe CSS du bouton
$(".button-class").mousedown
Après avoir modifié le code, il ressemblera à ceci.
Étape 4 : Ajouter une classe CSS au bouton
Pour connecter le bouton aux codes, nous devons ajouter des classes CSS au bouton, afin que le code sache sur quel bouton est cliqué et déclenche les effets sonores.
Et c’est pour un bouton avec un effet sonore. Vous pouvez désormais personnaliser votre bouton. Et si vous souhaitez ajouter plus de boutons avec des effets sonores, c’est faisable en copiant une partie du code et en le modifiant un peu.
Ajout de boutons supplémentaires avec des effets sonores
Créer le bouton ou copier le bouton existant
Vous pouvez copier le bouton existant en cliquant avec le bouton droit sur le bouton existant et en sélectionnant Copier, puis collez-le dans n’importe quelle section en cliquant avec le bouton droit de la souris à l’intérieur de cette section.
Copier une partie du code et ajuster les variables et le nom de la classe CSS du deuxième bouton
Copions certaines parties du code HTML précédent qui déclenchent l’effet sonore, c’est le code suivant ci-dessous
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
Après avoir copié le code, collez-le juste en dessous de Audio 1 Ends. Modifiez la variable audio1 et tout le code qui utilise la variable audio1 sur le code nouvellement créé en audio2.
Remplacez ensuite l’URL de l’effet sonore si vous utilisez un nouvel effet sonore pour le nouveau bouton et modifiez le code de classe de bouton dans vos classes CSS de bouton nouvellement créées.
Le code final ressemblera à l’image suivante.
Remplacez le nom de la classe CSS du bouton
Votre bouton nouvellement créé aura également un effet sonore lorsqu’il est cliqué. Vous pouvez en créer autant que vous le souhaitez.
Les éléments audio sont parmi les excellents ajouts à un site Web. Ils fournissent non seulement un élément attrayant pour les sites Web, mais aident également à créer une impression durable pour les utilisateurs finaux.
Cependant, l’action ou le résultat ne doit être accompagné d’un son que s’il renforce ou clarifie considérablement un message important pour l’utilisateur. Informer l’utilisateur de quelque chose qui nécessite son attention, de sorte que cela ne donne pas un impact négatif sur votre site Web à la place.
Voila ! C’est tout pour cet article qui vous montre comment ajouter un effet sonore de bouton sur Elementor. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.
Souhaitez-vous créer un bouton flottant avec l’index Z sur Elementor ?
Nous sommes sûrs que vous êtes familier avec le bouton qui apparaît devant tout le contenu de l’écran et généralement avec une forme circulaire et une icône au centre. Eh bien, c’est le bouton d’action flottant.
Le bouton d’action flottant peut déclencher une action ou vous envoyer naviguer quelque part. Tels que les déclencheurs pour les emails, les réseaux sociaux, l’orientation des visiteurs à s’abonner à une chaîne, et bien d’autres.
Dans Elementor, il existe deux méthodes pour créer un bouton d’action flottant, elles sont les suivantes :
En définissant Z-Index
En créant une fenêtre contextuelle -Popup-
Dans ce tutoriel nous vous montrerons uniquement comment créer un bouton d’action flottant en définissant l’index Z. Et nous utiliserons la version pro pour y arriver.
Comment créer le bouton d’action flottant dans Elementor
Vous pouvez utiliser la version gratuite d’Elementor pour créer le bouton d’action flottant avec cette méthode. Mais, vous devez coller le bouton que vous avez conçu sur chaque page où vous souhaitez que le bouton s’affiche sur votre site web.
Avec Elementor Pro, vous pouvez également accéder à la fonctionnalité CSS personnalisée, que nous utiliserons dans ce tutoriel.
Accédez à votre éditeur Elementor ; vous pouvez modifier votre contenu existant (pages, articles, etc…) ou en créer un nouveau. Dans ce tutoriel, nous allons modifier une page.
Tout d’abord, créez une nouvelle section avec une seule colonne. Sélectionnez le widget Boutonet faites-le glisser et déposez-le dans la zone d’édition à partir du panneau du widget. Ensuite, modifiez le bouton Texte et le lien.
Dans ce tutoriel, nous utiliserons le bouton comme déclencheur pour pousser les visiteurs à naviguer sur le site Web Elementor. Puis, sur l’option Alignement, réglez-le sur la droite et, enfin, modifiez la taille du bouton Sur Très Grand.
Comme vous pouvez le voir dans le GIF ci-dessus, ce bouton est stationnaire dans la section. Ensuite, nous allons le faire bouger au fur et à mesure que nous défilerons tout en le gardant à la même position.
Accédez à l’onglet Avancé. Dans le paramètre Mise en Page, définissez la largeur sur Inline (auto), définissez la position sur Fixe, définissez l’orientation horizontale sur la droite et ajustez le décalage comme vous le souhaitez.
Ensuite, nous allons définir l’essentiel dans cette méthode. Dans le champ Z-Index, entrez le nombre 9999 ; il rendra le bouton toujours devant (flottant).
Maintenant, il est temps de faire pivoter le bouton d’action flottant. Toujours sous l’onglet Avancé, accédez aux classes CSS du bloc Mise en page,puis écrivez rotate à l’intérieur.
Après cela, accédez au bloc Custom CSS , puis collez le code suivant dans le champ :
.rotate.rotate
{transform: rotate(90deg);}
Vous pouvez voir que le bouton vient de tourner, mais il y a un espace étrange entre le côté de l’écran. Alors, corrigeons-le en ajustant le décalage à -92
Enfin, nous allons faire une dernière petite touche pour ce bouton d’action flottant. Accédez au bloc Transformer, sélectionnez le SURVOL, accédez à l’option Décalage et définissez chaque option sur 7.
Il existe plusieurs options pour réaliser une certaine chose dans Elementor. En ce qui concerne le bouton flottant, il existe deux options que vous pouvez utiliser. Ici, nous avons couvert uniquement une méthode, l’autre méthode fera l’objet d’un autre tutoriel.
Si vous souhaitez avoir plus d’options de style, la création d’un bouton d’action flottant à l’aide du constructeur de Popup sera une meilleure alternative car vous aurez des options pour personnaliser le bouton ainsi que le comportement, comme le bouton de fermeture, la durée, l’animation d’entrée ou de sortie, etc…
Vous venez de réaliser facilement cette tâche. Prévisualiser juste votre travail sur tablette et smartphone en essayant de modifier les marges pour qu’elles correspondent à chaque périphérique.
Voila ! C’est tout pour cet article qui vous montre comment appliquer un effet Zoom sur une carte de profil. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.
Bien que ce plugin WordPress facilite les choses, certains pourraient avoir besoin de contrôler eux même le processus en manipulant le code.
Donc si vous avez un site web particulièrement grand, ou si vous voulez juste faire les choses manuellement pour une raison quelconque, il n’est pas non plus si difficile de migrer manuellement votre site web WordPress.
Pour ce guide, nous n’allons pas aussi aller en profondeur parce que nous recommandons seulement cette méthode que si vous êtes déjà à l’aise avec certains fonctionnements les plus techniques de WordPress.
Étape 0 : Certains préliminaires à observer
Avant de commencer ce tutoriel, vous devrez :
Faire une sauvegarde de votre site web
Avoir les Informations d’identification du FTP des hébergeurs du site web existant et celui vers lequel vous souhaitez migrer votre site internet
Et si vous changez de domaine, vous devez également diriger les serveurs de noms de votre nouveau domaine vers le serveur du nouveau site web.
Étape 1 : Déplacer des fichiers vers le nouveau serveur
Il existe plusieurs manières de déplacer les fichiers de votre site web vers le nouveau serveur. Une façon serait de télécharger tous les fichiers à l’aide de FTP, puis de les téléverser sur le nouveau serveur.
Toutefois, comme ce processus peut prendre des heures et des heures, la façon la plus efficace serait de créer un fichier d’archive compressé dans cPanel, puis de l’extraire chez le nouvel hébergeur.
Étape 2 : Exporter la base de données
Ensuite, vous devez exporter la base de données de votre site web existant.
En plus d’exporter facilement votre base de données, WP Migrate DB gère également les données sérialisées et vous permet d’exécuter une recherche et de remplacer les chemins d’accès URL pour vous assurer que tout fonctionne correctement si vous modifiez les noms de domaine.
Installez et activez le plugin sur le site web que vous souhaitez migrer. Ensuite, accédez à Tools → Migrate DB
Choisissez le bouton Radio Export File ( il devrait être sélectionné par défaut).
Si vous modifiez des noms de domaine, vous pouvez également utiliser la fonctionnalité Rechercher/Remplacer pour remplacer les URL de votre base de données de votre nouveau nom de domaine.
Cliquez ensuite sur Export pour télécharger une copie de votre base de données :
Étape 3 : Créez une nouvelle base de données MySQL
Ensuite, créez une nouvelle base de données MySQL chez l’hébergeur vers lequel vous avez migré votre site web, ainsi qu’un nouvel utilisateur de base de données et un mot de passe.
Gardez ces informations à portée de main parce que vous en aurez besoin.
Étape 4 : Importer une base de données
Ouvrez phpMyAdmin chez le nouvel hébergeur web et :
Trouvez la base de données que vous venez de créer à l’étape 3 à l’aide de la barre latérale à gauche
Cliquez sur l’onglet Import
Sélectionnez le fichier de base de données que vous avez téléchargé avec WP Migrate DB à l’étape 2
Cliquez sur Go
Étape 5 : Modifier le fichier wp-config.php
À ce stade, les fichiers et la base de données de votre site web devraient être à leur nouvel emplacement.
Maintenant, vous devez indiquer à votre site web d’utiliser la nouvelle base de données que vous avez créée à l’étape 3.
Pour ce faire, modifiez le fichier wp-config.php sur le site web migré et entrez les informations de votre nouvelle base de données :
Étape 6 : Rechercher et remplacer des URL dans le contenu d’Elementor (en cas de modification du domaine)
Si vous modifiez des noms de domaine, accédez à Elementor → Tools. Cliquez ensuite sur l’onglet Replace URL et utilisez l’outil pour mettre à jour les URL de votre contenu Elementor :
Étape 7 : Régénérez le CSS d’Elementor
Après avoir mis à jour les URL de votre contenu Elementor, accédez à Elementor → Tools et cliquez sur le bouton Regenerate Files pour forcer Elementor à régénérer son CSS :
Avez-vous d’autres questions sur la façon de faire migrer WordPress ?
Et cela conclut notre guide sur la façon de migrer WordPress, y compris votre contenu Elementor.
Si vous avez des questions sur la façon de déplacer en toute sécurité les sites web que vous avez créés avec WordPress et Elementor Pro vers de nouveaux hébergeurs et/ou noms de domaine ? Faites-nous savoir dans les commentaires.
Envie de découvrir la présentation du meilleur Page Builder de WordPress : Elementor ?
WordPress est le CMS le plus populaire dans le monde. Cependant, quand il s’agit de la conception d’une page sur le frontend, la boîte à outils par défaut de WordPress est loin des autres plates-formes de construction de site comme Wix ou Squarespace.
Cet inconvénient de WordPress commence à ne plus l’être avec sa multitude de plugins puissants qui simplifient le travail. C’est la raison pour laquelle nous allons vous présenter dans ce tutoriel, un plugin WordPress qui vous permettra de créer des pages d’accueil impressionnantes, tout ceci gratuitement.
Elementor est un constructeur de pages qui vous permet de créer des pages professionnelles à une vitesse hallucinante, et tout ceci en direct sur votre blog. Le plugin est gratuit et disponible dans le répertoire de plugin WordPress.
Elementor a été récemment présenté sur Product Hunt, et a attiré l’intérêt de beaucoup d’utilisateurs de WordPress sur les groupes Facebook.
Vous pouvez vous demander comment Elementor parvient à s’en sortir avec tant de « Page Builder » qui existent déjà.
L’avantage de la vitesse
Quand l’on a à faire aux « pages builder », la question de la vitesse est importante. Elementor est le constructeur de pages le plus rapide en ce moment. Que ce soit dans le « drag and drop », qui fonctionne sans décalage, ou du temps de chargement rapide des pages conçues par Elementor.
La vitesse et la performance ne touchent pas seulement le site, mais l’expérience utilisateur également. L’idée d’un « page builder » qui vous permet de travailler en direct tout en ne perdant pas en rapidité, est un facteur déterminant pour l’expérience utilisateur.
L’avantage de l’Open Source
Elementor est un open source. Bien qu’il existe d’autres « page builder » libres, aucun autre projet open source similaire, n’offre ces larges capacités de conception, avec un éventail de fonctionnalités et des widgets.
Une version gratuite sera bientôt disponible, mais la version gratuite pourra toujours permettre aux utilisateurs de créer des pages professionnelles.
Après son lancement, il a été doté de plus de 6 widgets. Vous pouvez y compter : l’entretoise, la boîte d’icônes, la boîte d’image, la galerie sous forme de grille, la galerie d’images et la galerie en carrousel.
L’avantage de la communauté
La communauté WordPress a un rôle vital dans le développement d’Elementor. Le projet est sur GitHub, et les développeurs peuvent contribuer à son amélioration.
Il a également été traduit en plusieurs langues, dont le japonais, l’allemand et l’hébreu. C’est l’un des seuls « page builder » compatibles avec les langes RTL (right to left). La communauté ne fait que s’agrandir avec le temps, ce qui est très prometteur pour l’avenir du plugin.
L’évolution du plugin
Elementor a été téléchargé plus de 10.000 fois. Il a été présenté dans le bulletin Product Hunt, et a déjà gagné plus de 700 votes favorables. De nouvelles fonctionnalités sont ajoutées hebdomadairement.
Premier Pas
Après avoir installé le plugin, vous remarquerez un nouveau menu sur le tableau de bord « Elementor ».
En cliquant dessus, vous accéderez à la page des réglages du plugin. Mais cette étape n’est pas réellement nécessaire, puisque les paramètres par défaut peuvent fonctionner sur la plupart des sites web.
Cependant, si vous souhaitez par exemple définir les formats de publication personnalisés qui utiliseront le plugin, alors vous aurez besoin de faire quelques ajustements.
Pour commencer la création d’une page, il vous suffit d’accéder à une page (ou à l’interface de création du type de publication personnalisé). Vous remarquerez sur cette page un nouveau bouton intitulé : « Edit with Elementor« .
Vous accéderez ensuite à l’interface en direct sur votre blog. C’est à partir de là que toute la magie opérera. Vous pourrez donc depuis cette interface ajouter des éléments disponibles sur la droite vers votre interface du blog. Vous remarquerez à quel point les choses se font rapidement.
Vous aurez probablement du mal à vous y habituer, mais vous ne devez pas vous inquiéter. C’est à peu près tout ce qu’il faut savoir pour l’instant. Si vous avez des questions, n’hésitez pas à poster des commentaires.
Voila ! C’est tout pour cet article qui vous montre comment changer une image au survol d‘un texte. Si vous avez des soucis sur comment y arriver faites-le nous savoir dans les commentaires.
Souhaitez-vous découvrir comment personnaliser un thème WordPress avec le plugin Elementor ?
La personnalisation de votre thème WordPress est l’une des principales tâches lors de la création de sites Web WordPress. Puisqu’elle contrôle la conception d’un site web, c’est là que de nombreux professionnels passent la plupart de leur temps.
La création d’un thème WordPress personnalisé implique généralement de travailler avec les fichiers de thème et un éditeur de code. Les modifications de disposition se produisent dans les fichiers de modèle, les modifications de conception via CSS. De plus, vous devrez rafraîchir constamment la fenêtre du navigateur pour afficher vos personnalisations, ce qui peut être un peu encombrant.
Heureusement, avec Elementor, ce processus devient extrêmement facile, donc vous voudrez peut-être le consulter.
Ensuite, revenons vers ce pourquoi nous sommes là.
Qu’est-ce qu’un thème WordPress
Un thème WordPress est, en substance, une collection de templates qui définissent l’aspect visuel d’un site web WordPress.
Le thème WordPress englobe tout ce qui affecte la conception d’un site Web, des en-têtes et des pieds de page à la palette de couleurs, la mise en page, et plus encore.
L’une des principales raisons de la création d’un site Web est de promouvoir son entreprise. Quelle meilleure façon de le faire que de créer un site Web unique qui promeut le style et le design de l’entreprise.
Pouvez-vous imaginer Amazon, eBay, ou Google étant ce qu’ils sont sans leur unique, design ?
Bien sûr que non, et c’est l’une des raisons pour lesquelles nous voulons personnaliser un thème WordPress. Nous voulons le rendre unique et s’adapter au message de notre entreprise.
En outre, parfois, ou plutôt, souvent, vous exécutez à travers un thème WordPress qui est en proie à une mauvaise conception, des couleurs qui ne vont pas bien ensemble, ou un thème qui est trop lourd et les impacts que les performances du site web. Le thème WordPress pourrait être puissant, sauf pour cette chose qui vous dérange. Le personnaliser et changer cette chose pourrait résoudre tous vos problèmes et créer une meilleure expérience utilisateur.
Comment personnaliser un thème WordPress
Il existe plusieurs méthodes pour personnaliser un thème WordPress.
Manuellement, via le customizer WordPress
Avec le code
Avec Elementor
Comment personnaliser manuellement un thème WordPress
Vous pouvez personnaliser le thème WordPress de votre choix via le Customizer WordPress intégré. Si vous le faites sans code, vous êtes souvent limité dans ce que vous pouvez changer. Certains thèmes WordPress premium vous permettent plus d’options de personnalisation, mais en substance, il n’y a pas beaucoup d’options de conception pour vous.
Avant de plonger plus profondément dans ce domaine, nous tenons à souligner que lorsque vous personnalisez un thème WordPress existant, il est préférable que vous utilisiez un thème enfant et non le thème parent.
Thème WordPress enfant
Un thème enfant est un thème WordPress qui a exactement les mêmes fonctions et caractéristiques d’un autre thème WordPress, le thème parent. Le thème enfant est utilisé pour personnaliser et modifier le thème en toute sécurité, sans affecter le thème parent et sans perdre la possibilité de le mettre à jour.
Customizer de thème WordPress
Alors maintenant que nous savons qu’il est préférable de travailler avec un thème enfant, nous allons apprendre à personnaliser un thème avec le Customizer WordPress. Pour y accéder, allez sur votre tableau de bord, cliquez sur Apparence sur le côté gauche et choisissez Personnaliser.
Les principales fonctionnalités que vous pouvez modifier avec ce Customizer sont les suivantes :
Ajout d’un titre, d’un logo et d’une icône de site Web
Pour ajouter ou modifier votre titre, votre logo ou votre icône, vous pouvez simplement vous rendre au panneau Identité du site Web et choisir chacun de ces éléments pour les modifier.
Modification des couleurs du thème WordPress
Certains thèmes WordPress vous permettront de changer leurs jeux de couleurs, mais pas tous, et ils sont généralement des thèmes WordPress premium. Si votre thème WordPress vous permet de modifier le jeu de couleurs, vous verrez cette option lorsque vous accéderez au Customizer.
Ajout de menus de navigation
Le Customizer vous permet également d’ajouter et de modifier facilement les menus de navigation de votre site Web.
Comment personnaliser un thème WordPress avec du code
Vous remarquerez que sous l’onglet Apparence, vous avez la possibilité de choisir l’éditeur de thèmes. En cliquant dessus, vous serez accueilli par une fenêtre avec le code du thème. Cette option nécessite une bonne compréhension du codage CSS et n’est pas recommandée pour les débutants.
Ici, vous aurez accès à des fichiers comme style.css, functions.php, et c’est exactement pour ce scénario que vous aurez besoin d’un thème enfant afin de ne pas casser votre site web.
L’autre façon de personnaliser votre thème par le codage est de télécharger des fichiers à l’aide d’une solution FTP. Le processus consiste à créer des informations d’identification FTP via votre fournisseur d’hébergement, à télécharger et installer une solution FTP (comme FileZilla), à se connecter à votre compte et à modifier vos fichiers, que vous allez téléverser ensuite via la même solution FTP.
Sauf si vous êtes familier avec le codage, nous ne recommandons pas cette option.
Personnaliser un thème WordPress facilement avec Elementor
Vous pouvez le faire directement à partir de l’interface utilisateur. Il n’est pas nécessaire de modifier une seule ligne de code ou de recharger une fenêtre de navigateur, même une fois.
Elementor vous permet de modifier chaque élément du site web rapidement et facilement en quelques clics de souris et vous pouvez même optimiser ces fonctionnalités pour la plateforme mobile.
Elementor facilite beaucoup ce processus en utilisant du contenu dynamique et en vous permettant d’afficher en avant-première vos pages. De cette façon, vous pouvez immédiatement voir comment les changements de conception vont affecter votre site web réel et le contenu.
Personnaliser l’en-tête et le pied de page
Elementor vous permet une flexibilité totale quand il s’agit de concevoir vos en-têtes et pieds de pied. Nous savons tous à quel point cela peut être ennuyeux, que vous ayez un thème WordPress, et que vous ne puissiez pas changer un seul aspect de la conception de l’en-tête ou pied de page. Vous avez besoin de thèmes spécialisés, plugins, etc.
Avec Elementor, c’est facile.
1. Créer un modèle d’en-tête
D’abord configurer un nouveau modèle d’en-tête. Pour cela, accédez à Elementor > Mes modèles.
Ici, une façon de commencer est d’appuyer sur le bouton Ajouter nouveau en haut. Dans l’écran suivant, utilisez le menu déroulant pour sélectionner En-tête comme type de modèle à concevoir.
Vous pouvez également atteindre cet écran en cliquant sur l’onglet En-tête de l’écran précédent, puis en appuyant sur le grand bouton vert qui s’affiche.
Il pré-sélectionnera l’en-tête comme type de modèle. Quoi qu’il en soit, vous devez ajouter un nom approprié pour le modèle (afin que vous sachiez ce qu’il est plus tard) puis continuer en cliquant sur Créer un modèle.
Cela vous mènera ici.
Avec Elementor Pro, vous pouvez choisir parmi des blocs d’en-tête préconçus. Ce sont des modèles de conception que vous pouvez utiliser comme point de départ pour votre propre conception, qui est ce que nous allons faire dans ce cas.
Lorsque vous survolez un bloc d’en-tête, un clic sur Insert vous permet de commencer à le concevoir immédiatement. Sinon, cliquez d’abord sur l’image pour voir une version plus grande. Ensuite, vous pouvez toujours appuyer sur Insert en haut.
Sinon, si vous voulez partir de zéro, il suffit de fermer la fenêtre en cliquant sur X dans le coin supérieur droit.
2. Modifier la conception basique de l’en-tête
Après avoir entré le nouvel en-tête, la première chose que vous remarquerez est que le logo et le menu que nous avons configurés précédemment sont déjà présents.
C’est exactement la raison pour laquelle nous les avons mis en place et nous allons parler de la façon de les personnaliser. Toutefois, voyons d’abord comment personnaliser la section d’en-tête elle-même.
Pour cela, il suffit de survoler sur elle et cliquer sur le bouton de modification en haut. Cela ouvre une liste d’options d’édition sur la gauche.
Voici ce que vous pouvez contrôler dans les différents menus :
Layout – Contrôlez la largeur de la section, la taille de l’espace entre les colonnes, sa hauteur, sa colonne verticale et son positionnement de contenu, sa balise HTML assignée et la structure générale.
Style – Ici, vous pouvez modifier la couleur d’arrière-plan, y compris les effets de survol, même ajouter une image ou une vidéo si vous voulez, ajouter des effets de superposition, des bordures et diviseur ainsi que modifier les paramètres de typographie.
Avanced – Cette partie vous permet d’ajouter des attributs CSS comme la marge, et l’index z, les animations, les ID et les classes. Il vous permet également de rendre la section sticky et de contrôler les paramètres responsive ainsi que d’ajouter du CSS personnalisé.
Tout ce qui précède est assez explicite, et vous obtiendrez rapidement ce que vous souhaitez.
3. Personnaliser les éléments d’en-tête
Toutefois, vous pouvez non seulement modifier la section d’en-tête dans son ensemble, mais aussi les éléments inclus dans celle-ci. Par exemple, pour personnaliser le logo du site web, il suffit de cliquer dessus. Ceci, aussi, vous fournira des options d’édition sur le côté gauche.
Dans le cas du logo, cela vous donne les options suivantes :
Content – Modifier la taille de l’image, l’alignement et l’endroit vers lequel il est lié.
Style – Contrôlez la largeur et la hauteur, ajoutez des effets CSS et des effets de survol , incluez une bordure et une ombre si vous le souhaitez.
Avanced – Ici vous trouverez essentiellement les mêmes options que pour la section en-tête.
Utilisez les paramètres pour personnaliser le logo de la manière que vous voulez afin qu’il s’affiche bien dans l’en-tête. Notez également que chaque élément a son propre type d’options, alors assurez-vous de vérifier chacun.
4. Ajouter des éléments
Bien sûr, avec Elementor, vous êtes également en mesure d’ajouter des éléments à l’en-tête. Il suffit de cliquer sur le symbole en haut à droite pour voir ce qui est disponible.
Lors de la modification d’un modèle d’en-tête, Elementor affiche automatiquement les blocs pertinents en haut de la liste, ce qui est le plus logique pour les circonstances. Dans ce cas, ce sont des choses comme le logo du site Web, le menu nav et le titre du site internet.
Donc, par exemple, si vous voulez ajouter le titre du site web à côté du logo, il suffit de glisser et de le déposer dessus. Cependant, le modèle d’en-tête que nous avons choisi actuellement nous permet de l’ajouter au-dessus ou en dessous du logo. Mais, c’est un problème qui sera facilement résolu.
Dans un cas comme celui-ci, survoler l’en-tête et utiliser le symbole plus –+-pour ajouter une section au-dessus.
Cliquez ici sur le bouton violet pour choisir une conception à trois colonnes.
Ensuite, faites glisser les éléments de la section d’en-tête existante dans la nouvelle section et ajoutez le titre du site web au milieu.
Mais attendez, le style est totalement différent ! aucun problème. Il suffit de cliquer avec le bouton droit sur l’en-tête existant et sélectionnez Copy. Ensuite, cliquez avec le bouton droit sur la nouvelle section et cliquez ici sur Paste Style. Elementor appliquera ensuite le style de la section existante, que vous pouvez fermer par la suite.
Vous pouvez faire le même processus avec l’un des autres éléments d’en-tête et, bien sûr, avec tous les autres éléments inclus dans Elementor.
Personnaliser un modèle de publication unique
Dans Elementor, vous pouvez également personnaliser un seul modèle de publication. Voici comment :
1. Créer un nouveau modèle
La création d’un modèle fonctionne de la manière habituelle. Toutefois, cette fois, choisissez Single comme type de modèle. Ensuite, en dessous, choisissez le modèle unique que vous souhaitez modifier. Dans cet exemple, celui de Post.
Si vous souhaitez créer une nouvelle conception de page, modifiez votre page 404 (plus sur cela plus tard) ou modifiez un type de publication personnalisé particulier, vous choisiriez autre chose. Dans les deux cas, entrez un nom et continuez.
Dans l’écran suivant, vous pouvez choisir parmi les modèles prédéfinis comme d’habitude. Cependant, dans ce cas, nous voulons créer un nouveau modèle à partir de zéro. Donc, cliquez sur le X en haut à droite pour fermer cette fenêtre.
2. Configurer l’aperçu
Ensuite, définissez la fenêtre d’aperçu sur un post existant. Vous pouvez le faire en cliquant sur l’icône de l’œil en bas des options de l’éditeur, puis Settings.
Dans le menu qui s’ouvre, sous Preview du contenu dynamique, choisissez Publish. Après cela, dans la ligne suivante, vous pouvez rechercher et choisir un post existant par nom.
Une fois que vous l’avez fait, appuyez sur Apply & Preview. Bien que vous ne serez pas en mesure de voir quoi que ce soit à ce stade (car il n’y a rien sur la page ), il dira à Elementor d’utiliser les données de ce post à partir de maintenant. Vous verrez bientôt ce que cela signifie.
3. Créons la section Ci-dessus
Tout d’abord, nous allons créer la section ci-dessus. Ici, vous trouverez généralement des choses comme le titre de la publication et les métadonnées comme l’auteur, la date et la catégorie.
La première étape consiste à cliquer sur le signe + et à créer une section à colonne unique.
Lorsque vous le faites, dans la section de mise en page, vous avez la possibilité de contrôler sa largeur, sa hauteur, son positionnement et son style. Dans ce cas, il n’y a pas grand-chose à faire ici. Aussi, ne vous inquiétez pas, vous pouvez toujours revenir en arrière et faire des changements plus tard.
Ensuite, faites glisser le widget de titre de post dans la nouvelle section.
Lorsque vous le faites, assurez-vous d’utiliser toutes les options disponibles pour ajuster la conception et la mise en page à votre goût. Par exemple, voici mes paramètres pour le faire :
Il y’ a aussi une fonctionnalité cool que vous devriez apprendre. Lorsque vous cliquez sur le symbole clé du titre de la publication, vous pouvez ajouter du contenu statique avant et après vos données dynamiques.
Par exemple, si vous créez un modèle pour une certaine catégorie de publication, comme des actualités ou des recettes, vous pouvez l’ajouter au titre de la publication comme ceci :
De cette façon, ces données s’afficheraient pour chaque post dans cette catégorie. Je ne vais pas utiliser cela à ce stade, mais j’ai pensé que c’était une note secondaire importante pour vous.
Sous le titre de la publication, nous allons insérer le Post Infowidgetpour afficher les métadonnées du post.
Voici les paramètres que j’utilise :
De plus, j’ai utilisé les options de style pour faire en sorte que la conception s’adapte au reste de la page. Assurez-vous de faire de même.
4. Mettre en place le corps du post
Après l’entête, il est temps de créer le corps de la page. Si vous voulez que cette partie ait une conception différente de l’entête, vous devrez mettre en place une nouvelle section. Cependant, je garde les choses simples, donc pas besoin de le faire.
La première chose que nous voulons insérer est l’image à la une. Pour cela, vous pouvez placer le widget du même nom sous ce qui est déjà sur la page.
Je n’ai essentiellement pas changé l’un des paramètres, mais juste laissé tout tel quel.
Ensuite, il est temps pour le contenu de la publication. Ici aussi, vous avez un bloc correspondant.
Vous remarquerez que pour l’image à la une et le contenu de publication, Elementor tire automatiquement ce qui est déjà sur le site web. Effectuez tous les ajustements à la conception du nouveau bloc dont vous avez besoin, par exemple en jouant avec les paramètres typographiques.
A part ça, c’est tout. Pas trop de travail à faire ici pour que nous puissions passer à la dernière partie.
5. Configurer le pied de page
Dans ce cas, nous voulons que le pied de page affiche le profil de l’auteur, les options de partage, et les commentaires du lecteur. Pour ce faire, tout d’abord, nous devons créer une nouvelle section avec deux colonnes. Pour créer plus d’espace pour le profil de l’auteur, vous pouvez le définir sur une mise en page 66.33.
Après cela, placez le widget Author Box dans la section gauche.
Assurez-vous de personnaliser le style en fonction de vos besoins. J’ai ajouté un peu de couleur d’arrière-plan, et ajusté légèrement les paramètres typographiques.
Après cela, il est temps d’ajouter le bloc Boutons de partage sur le côté droit.
Vous pouvez voir mes paramètres dans la capture d’écran ci-dessus.
Après cela, tout ce qui reste est de créer une section à une colonne inférieure de plus et y glisser et déposer le widget Commentaires de publication.
(Soit dit en passant, si jamais vous avez des problèmes de localisation de l’un de ces widgets, il suffit d’utiliser la fonction de recherche).
Faites tous les ajustements à la section de commentaires que vous jugez nécessaire (je l’ai laissé telle quelle) et vous êtes prêt à publier. Voici la conception finie :
Personnaliser le modèle d’archive
1. Configurer votre modèle d’archive WordPress
À l’heure actuelle, vous connaissez déjà la solution sur la création de nouveaux modèles. La seule différence est que dans ce cas, vous choisirez Archive comme type de modèle.
Après cela, comme d’habitude, vous obtenez un certain nombre de blocs à choisir ou vous pouvez également créer votre propre modèle à partir de zéro. Cependant, pour les archives, vous avez à peu près seulement deux widgetsElementor qui sont importants de toute façon.
2. Définir le titre de l’archive
Le premier bloc dont je veux parler est le titre d’archive Archive Title.
Outre les paramètres habituels sous Style et Advanced, vous pouvez trouver une option importante lorsque vous cliquez sur le symbole de clé sous Title.
Ici, vous pouvez activer et désactiver si Elementor affiche le type d’archive sur la page comme la partie où il est dit Auteur: ci-dessous. Cela se produit via le bouton sous Include Context.
Soit dit en passant, comme d’habitude, vous pouvez prévisualiser différentes archives à l’aide des paramètres d’aperçu (Eye Symbol > Settings). De cette façon, vous pouvez voir la conception pour les catégories unique, tags, auteurs, et plus encore. Gardez-le à l’esprit.
3. Utiliser le bloc de publications d’archives
Le deuxième widget important pour les archives est Archive Posts. Celui-ci apporte tous les posts appartenant à n’importe quelle archive sur une page. Lorsque vous choisissez un modèle, ils sont déjà là, mais vous pouvez également facilement les ajouter vous-même avec ce bloc.
Examinons les options qu’il vous offre pour personnaliser vos pages d’archive :
Skin – Choisissez d’afficher vos posts dans un design classique ou de style carte.
Columns – Détermine le nombre de colonnes dans lesquelles vos publications sont affichées.
Show Image – Active les images à la une sur les pages d’archives
Masonry – Affiche les articles dans la conception maçonnerie ou non.
Image Size – La taille de l’image que Elementor doit utiliser sur les pages d’archive.
Title – Voulez-vous afficher des titres de post ou non ?
Title HTML Tag – Dans l’affirmative, quelle balise HTML doit être enroulée autour d’elle ?
Excerpt – Inclure des extraits de vos posts ou ne montrer que le titre.
Excerpt Length – Détermine la longueur des extraits.
Metadata – Définit les métadonnées de publication disponibles pour les visiteurs.
Separator Between – Symbole séparateur entre les informations de métadonnées.
Read More – Inclure un lien « lire plus », oui ou non ?
Badge – Vous permet d’ajouter plus d’informations aux publications, telles que les catégories et les balises.
Avatar – Avec cela, vous pouvez changer la photo de profil des auteurs des articles
En plus de ce qui précède, vous avez quelques options de plus. Sous Pagination, vous pouvez définir comment la pagination d’archive doit être traitée. Par exemple, comment l’afficher, le nombre de pages à inclure et l’alignement du texte.
Enfin, Advanced vous permet de définir le message à afficher lorsqu’un visiteur atterrit sur une archive vide. Tout le reste devrait être familier. Il suffit de noter que les options de style changent en fonction de la peau que vous avez choisie.
4. Contrôler le nombre de publications par archive
Une note rapide sur les modèles d’archive. Pour modifier le nombre de publications qui apparaissent dans une archive (ou sur votre page de blog), vous devez le faire dans WordPress sous Settings > Reading.
Ici, il suffit d’entrer le nombre de posts que vous souhaitez que vos visiteurs voient.
Personnalisation facilede thème WordPress avec Elementor
La personnalisation des thèmes WordPress est le pain et le beurre de nombreux professionnels. Bien que cela implique généralement beaucoup de codage et d’édition des fichiers, avec Elementor cela n’est plus nécessaire.
Comme vous l’avez vu ci-dessus, le plugin est un éditeur de thème WordPress à part entière. Il vous permet de personnaliser chaque partie de ce dernier à partir de son interface utilisateur. Vous pouvez modifier l’en-tête du site web, le pied de page, les modèles de page et de publication, les modèles d’archive, et plus encore.
Grâce à la possibilité d’utiliser du contenu dynamique et d’afficher un aperçu de n’importe quelle partie de votre site Web, vous pouvez implémenter toutes les personnalisations à la mode
En bref, Elementor facilite la personnalisation de votre thème WordPress. Au lieu d’apporter laborieusement des modifications avec des dizaines de fichiers et des centaines de lignes de code, vous pouvez rapidement tout faire en un seul endroit.
Voila ! C’est tout pour cet article qui vous montre comment personnaliser un thème WordPress avec le Page Builder Elementor. Si vous avez des soucis sur comment y arriver faites-le nous savoir dans les commentaires.
Confidentialité et cookies : ce site utilise des cookies. En continuant à naviguer sur ce site, vous acceptez que nous en utilisions.
Pour en savoir plus, y compris sur la façon de contrôler les cookies, reportez-vous à ce qui suit :
Politique relative aux cookies
Une fois que vous l’avez fait, appuyez sur Apply & Preview. Bien que vous ne serez pas en mesure de voir quoi que ce soit à ce stade (car il n’y a rien sur la page ), il dira à Elementor d’utiliser les données de ce post à partir de maintenant. Vous verrez bientôt ce que cela signifie.
