Comment créer une mise en page WordPress personnalisée (étape par étape)

Voulez-vous créer des mises en page WordPress personnalisées pour votre site Web afin de lui donner un aspect unique ?

Quelle que soit votre compétence, il est facile de créer une mise en page WordPress personnalisée sans avoir à engager un développeur.

Dans cet article, nous vous montrerons comment créer une mise en page WordPress personnalisée en utilisant le meilleur plugin de constructeur de pages WordPress, SeedProd. Nous vous montrerons également comment le faire en utilisant Beaver Builder.

Beaucoup d'entre vous doivent se demander pourquoi créer une mise en page personnalisée alors que vous pouvez simplement choisir un thème premium et lancer votre page avec l'une de ses mises en page pré-construites.

Pourquoi créer des mises en page WordPress personnalisées

Vous trouverez un certain nombre de thèmes WordPress premium qui offrent plusieurs superbes mises en page intégrées, prêtes à être utilisées immédiatement. Vous pouvez certainement opter pour ces belles mises en page et donner à votre site un aspect attrayant.

Mais le problème avec de telles mises en page est qu'en raison de leur disponibilité immédiate, elles sont largement utilisées par des centaines et des milliers d'utilisateurs sur le Web.

Cela signifie que si vous utilisez une mise en page pré-construite pour votre site WordPress, vous ne pourrez pas lui donner un aspect distinct à moins de la personnaliser beaucoup. De plus, ces mises en page peuvent ne pas répondre à vos besoins. Créer une mise en page personnalisée est la meilleure option dans ces cas.

Si vous choisissez d'utiliser Gutenberg (éditeur de blocs), vous n'aurez pas la facilité et la liberté de concevoir votre site comme vous le souhaitez. Vous pourriez avoir besoin d'ajouter votre propre CSS pour améliorer vos modèles de publication unique personnalisés.

Créer une mise en page WordPress personnalisée avec SeedProd

La meilleure façon de créer des mises en page personnalisées visuellement époustouflantes pour votre site Web WordPress est d'utiliser le constructeur SeedProd.

SeedProd est convivial et vous donne la possibilité de modifier le front-end de votre site Web visuellement. Vous n'aurez jamais à utiliser de code ou à faire des modifications à l'aveugle pour seulement voir un aperçu et réaliser que cela ne fonctionne pas.

SeedProd est sans aucun doute la meilleure façon de créer des mises en page WordPress personnalisées. Vous pouvez en savoir plus sur ce plugin ici : Avis sur SeedProd.

Pour créer une mise en page personnalisée pour votre site, vous devrez installer et activer SeedProd sur votre site.

Ensuite, rendez-vous dans votre panneau d'administration wp, et vous verrez SeedProd dans la barre des tâches de gauche.

Cela vous permettra d'accéder au tableau de bord SeedProd. À l'intérieur, vous pouvez choisir d'utiliser un kit de thème préfabriqué ou de créer des pages de destination individuelles. Pour ce tutoriel, nous sélectionnerons Constructeur de thèmes » Kits de modèles de thèmes.

Vous verrez maintenant une bibliothèque de kits parmi lesquels vous pourrez choisir. Ces kits sont livrés avec des images vedettes et du contenu fictif que vous pouvez modifier rapidement pour vous les approprier.

Une fois que vous avez choisi un kit, toutes les pages et tous les articles du kit seront importés et publiés sur votre site. Vous pouvez l'utiliser pour créer des modèles pour vos pages et articles.

Pour personnaliser la mise en page des articles, sélectionnez Modifier la conception sous Article unique.

Maintenant, le constructeur visuel par glisser-déposer s'ouvrira où vous verrez un aperçu en direct de votre page ainsi que des options de personnalisation pour la modifier.

Pour apporter des modifications à votre modèle de page personnalisé, vous pouvez simplement sélectionner n'importe quel article et vous obtiendrez des options pour modifier le contenu, la typographie, la couleur, l'arrière-plan, et plus encore. Pour ajouter de nouveaux blocs, faites simplement glisser un bloc du menu de gauche et placez-le où vous le souhaitez dans votre conception comme ceci :

Vous verrez des blocs préfabriqués à ajouter :

• Articles
• Titre de l'article
• Contenu du billet
• Extrait de l'article
• Biographie de l'auteur de l'article
• Commentaires
• Logo du site
• Navigation de l'article

…et plus encore. Vous verrez également des blocs pour ajouter du texte, de l'espacement, des images, des boutons, des colonnes, des formulaires de contact, des compteurs, des concours, et d'autres widgets.

SeedProd s'intègre également à WooCommerce, vous pouvez donc ajouter des champs personnalisés tels que des grilles de produits, des boutons « ajouter au panier » et « passer à la caisse », et bien plus encore.

En gros, vous avez un contrôle total sur chaque nouvel article que vous publiez sur votre blog WordPress.

SeedProd est si facile à utiliser, même pour un débutant, il n'y a pas grand-chose à apprendre.

Nous vous montrerons les bases et vous pourrez explorer les fonctionnalités avancées par vous-même. Lorsque vous sélectionnez un bloc, vous verrez qu'il est mis en surbrillance en orange. Ensuite, vous verrez un menu apparaître au-dessus du bloc où vous pourrez changer sa position, le supprimer, le dupliquer, et plus encore.

Pour modifier ou supprimer une ligne entière, vous pouvez sélectionner la ligne et vous la verrez mise en surbrillance en violet.

Ainsi, vous pouvez mettre en surbrillance la ligne et utiliser le symbole Plus pour ajouter une nouvelle ligne. Vous verrez des mises en page parmi lesquelles vous pourrez choisir.

Ensuite, vous pouvez sélectionner l'icône de navigation pour la faire glisser et la déposer dans une autre zone de la page. Pour réorganiser les lignes et les blocs, il vous suffit de les saisir et de les déplacer là où vous le souhaitez.

SeedProd est livré avec des sections et des blocs intelligents que vous pouvez ajouter à votre page. Dans le menu de gauche, sélectionnez l'onglet « Sections ». Ici, vous obtiendrez des en-têtes, des appels à l'action, des FAQ, des pieds de page prêts à l'emploi, et bien plus encore.

Vous pouvez choisir des blocs de contenu pleine largeur ou en sélectionner un avec une mise en page prédéfinie. En utilisant ces fonctionnalités, vous pouvez créer une mise en page personnalisée pour votre site en un rien de temps. Vous pouvez également ajouter un nom de modèle et l'enregistrer pour une utilisation future.

Les conceptions sont automatiquement réactives. Vous pouvez même utiliser l'aperçu mobile pour vous assurer que la conception de votre site est belle sur les appareils mobiles.

C'est tout ! C'est vraiment aussi simple que cela de créer une mise en page personnalisée pour votre site Web avec SeedProd.

SeedProd est sans aucun doute la meilleure option pour créer une mise en page WordPress personnalisée. Vous obtenez des modèles de publication simples prédéfinis qui facilitent grandement la création de différentes mises en page pour votre site.

De plus, vous pouvez continuer à créer de nouveaux articles WordPress en utilisant ce modèle que vous avez créé.

Il existe une version gratuite de SeedProd dans le répertoire des plugins WordPress. La version pro vous donne accès à des fonctionnalités exceptionnelles pour votre site.

Commencez avec SeedProd »

Créer une mise en page WordPress personnalisée avec Beaver Builder

Le plugin Beaver Builder est un constructeur de pages populaire par glisser-déposer qui vous permet de créer des mises en page époustouflantes pour votre blog WordPress en quelques minutes.

La meilleure chose à propos de ce plugin est le niveau de flexibilité qu'il offre. Vous pouvez contrôler presque tout.

Couleurs, textes, polices, images – tout peut être entièrement personnalisé pour obtenir le look exact dont vous avez toujours rêvé.

Une autre chose que vous aimerez à propos de Beaver Builder est que, contrairement à d'autres plugins de construction de pages, il est très convivial pour les débutants et vous n'avez pas à passer des heures à comprendre comment l'utiliser. De plus, il offre des dizaines de modèles visuellement époustouflants pour vous aider à démarrer.

Consultez notre avis sur Beaver Builder ici. Voyons maintenant comment créer vos mises en page personnalisées à l'aide de ce plugin.

Étape 1 : Installation et configuration de Beaver Builder dans WordPress

La première étape consiste à installer et activer Beaver Builder sur votre site Web. Vous pouvez télécharger le plugin en vous rendant sur le site de Beaver Builder. Une fois activé, allez dans Paramètres » Constructeur de pages.

Ici, vous pouvez entrer la clé de licence pour activer le support et recevoir les mises à jour. Une fois terminé, vous êtes prêt à créer votre première mise en page personnalisée.

Étape 2 : Création de votre première mise en page personnalisée

Pour créer votre première mise en page personnalisée, allez dans Toutes les pages » Ajouter sur votre tableau de bord WordPress. Dans votre éditeur de texte, vous aurez la possibilité de passer au constructeur de pages.

Cliquez simplement sur cette option et vous verrez l'onglet du constructeur de pages se lancer. Vous verrez plusieurs options de modèles ici. Sélectionnez donc celui que vous préférez pour votre mise en page. Vous pouvez également cliquer sur la flèche déroulante et sélectionner le type de mise en page que vous souhaitez. Cela peut être pour vos pages de destination ou vos pages de contenu.

Une fois cela fait, vous serez dirigé vers son constructeur par glisser-déposer. Pour modifier un champ particulier, il vous suffit de survoler cette zone spécifique, puis de cliquer dessus et de commencer à personnaliser votre conception.

Vous pouvez ajouter jusqu'à 6 colonnes, des barres latérales, des audios, des images, des séparateurs et plus encore à vos mises en page. Pour ajouter des lignes et des barres latérales, cliquez sur les onglets Mises en page des lignes. Faites ensuite glisser le nombre de colonnes que vous souhaitez et déposez-le dans votre constructeur visuel.

Cela vous permet d'organiser la hiérarchie de votre modèle.

Une fois vos colonnes ajoutées, cliquez simplement dessus et personnalisez-les pour répondre à vos besoins. Vous pouvez modifier l'arrière-plan, la couleur du texte, ajouter des liens, du texte, des bordures et plus encore à vos colonnes. Ces colonnes et lignes peuvent également être enregistrées pour une utilisation ultérieure. Pour cela, cliquez simplement sur le bouton Enregistrer à la fin de la fenêtre contextuelle.

Pour les autres éléments, vous devez utiliser l'option Modules de base. Vous disposez également de plusieurs autres éléments que vous pouvez ajouter à votre mise en page, tels que des boutons, des accordéons, des tableaux de prix, des cartes, des compteurs de temps et bien plus encore.

Vous devez simplement faire glisser les éléments de la droite et les déposer dans le constructeur visuel de votre gauche. Chacun de ces éléments est personnalisable. Ainsi, par exemple, si vous souhaitez ajouter un nouveau titre, cliquez simplement sur Titre et faites-le glisser dans votre mise en page. Après cela, cliquez sur l'élément Titre pour le personnaliser.

Vous aurez 3 onglets différents ici. Général, Style et Avancé. Le premier vous permet d'ajouter vos textes, liens, etc. à vos titres. Le deuxième onglet vous permet de styliser votre titre avec différentes couleurs, polices, etc. L'option Avancé vous permet de travailler sur les marges, la visibilité, la réactivité, l'animation, etc.

Vous pouvez ajouter autant d'éléments et de modules que vous le souhaitez en utilisant la même méthode, puis les personnaliser pour répondre à vos besoins. Les menus déroulants ici facilitent grandement cela.

Une fois que vous avez modifié vos mises en page, cliquez sur le bouton Terminé dans le coin supérieur droit de votre écran. Vous verrez une nouvelle fenêtre contextuelle avec plusieurs options différentes, comme celles montrées dans la capture d'écran ci-dessous.

En utilisant ces options, vous pouvez soit enregistrer votre brouillon, le publier ou l'ignorer.

Étape 3 : Réutiliser votre mise en page

Beaver Builder vous permet également d'enregistrer votre mise en page WordPress personnalisée et de la réutiliser quand vous le souhaitez. Pour utiliser cette option, allez dans Outils dans le coin supérieur droit de votre écran. Vous verrez les options suivantes sur votre écran.

Maintenant, en fonction de vos besoins, sélectionnez l'option. Si vous souhaitez utiliser le modèle pour une utilisation ultérieure, cliquez sur l'option Enregistrer le modèle, puis nommez votre mise en page. Après cela, appuyez sur le bouton Enregistrer.

Votre nouveau fichier de modèle est enregistré et prêt à être utilisé à tout moment.

Étape 4 : Gérer vos modèles

Les mises en page que vous créez avec Beaver Builder peuvent être utilisées sur un nombre illimité de sites Web. Les modèles créés par ses utilisateurs sont stockés dans un type de publication personnalisé appelé modèles.

Par défaut, cette option est masquée. Vous pouvez la rendre visible en allant dans l'onglet Paramètres » Page Builder » Modèles.

Cliquez maintenant sur l'option Activer l'administration des modèles et appuyez sur le bouton Enregistrer les paramètres des modèles. Après cela, vous remarquerez un nouvel élément de menu nommé Modèles apparaissant dans votre barre d'administration WordPress. Toutes les mises en page que vous enregistrez en tant que modèle apparaîtront sur cette page.

Exportation de vos mises en page WordPress

Étant donné que les mises en page que vous créez sont enregistrées en tant que type de publication personnalisé, vous pouvez facilement exporter vos modèles Beaver Builder. Pour cela, vous disposez de la fonctionnalité d'exportation intégrée à WordPress. Pour utiliser cette fonctionnalité, allez dans Outils » Page d'exportation.

Sélectionnez maintenant Modèles. Cliquez sur la flèche déroulante et sélectionnez le modèle que vous souhaitez exporter. Ensuite, appuyez sur le bouton Télécharger le fichier d'exportation et WordPress vous enverra un fichier XML à télécharger.

Importation de mises en page Beaver Builder

Pour importer une mise en page, allez dans le tableau de bord du site Web où vous souhaitez importer cette mise en page. Allez maintenant dans Paramètres » Importer » WordPress. Cliquez sur l'option Installer maintenant sous l'onglet WordPress. Cela téléchargera et installera le plugin d'importation WordPress.

Une fois le plugin téléchargé, vous pouvez télécharger le fichier XML que vous venez de télécharger. Votre mise en page est maintenant prête à être utilisée sur votre autre site également.

Et voilà. Vous pouvez maintenant créer des mises en page de publication personnalisées en un rien de temps sans jamais toucher aux fichiers PHP, HTML et autres codes. Nous espérons que notre tutoriel vous a plu.

Si c'est le cas, vous pourriez également vouloir connaître certaines des autres alternatives à Beaver Builder que vous pouvez essayer.