skip to Main Content

Comment créer une mise en page personnalisée avec Elementor

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 554.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Souhaitez-vous créer vos propres mises en page personnalisées sur WordPress ? Voulez-vous créer facilement votre site web avec un design professionnel ? Alors vous devez Télécharger Elementor ici.

 Elementor est un générateur de page WordPress par « Drag and Drop » qui vous permet de créer facilement des mises en page personnalisées sur WordPress sans aucune connaissance en codage. Dans ce tutoriel, nous vous montrerons comment créer facilement des mises en page WordPress personnalisées avec Elementor avec quelques clics.

Pourquoi et quand avez-vous besoin de mises en page personnalisées sur WordPress ?

Beaucoup de thèmes WordPress gratuits et premium proposent plusieurs choix de mise en page pour différents types de pages. Cependant, parfois, aucune de ces dispositions ne répond à vos besoins.

Si vous savez comment coder en PHP, HTML et CSS, vous pouvez créer vos propres modèles de page ou même créer un thème enfant pour votre site. Cependant, la majorité des utilisateurs de WordPress ne sont pas des développeurs, donc cette option ne fonctionne pas pour eux.

Ne serait-il pas génial de créer des mises en page en utilisant une interface simple (Drag and Drop) ?

C’est exactement ce que fait Elementor. Il s’agit d’un plugin de création de page WordPress de glisser-déposer qui vous permet de créer facilement vos propres mises en page WordPress personnalisées sans aucune compétence de codage.

Il dispose d’une interface utilisateur intuitive qui vous permet de créer des mises en page personnalisées avec un aperçu en direct. Il est livré avec de nombreux modules prêts à l’emploi pour tous les types d’éléments de conception Web.

Il existe plusieurs modèles conçus professionnellement que vous pouvez charger et utiliser instantanément comme point de départ. Cela fonctionne avec tous les thèmes WordPress compatibles standards et est compatible avec tous les plugins populaires sur WordPress .

Cela dit, examinons comment créer des mises en page personnalisées sur WordPress avec Elementor.

Mise en route d’Elementor

D’abord, vous devrez acheter le plugin « Elementor Pro ». C’est la version payante du plugin « Elementor » gratuit et vous donne accès à des fonctionnalités supplémentaires et à 1 an d’assistance.

Ensuite, vous devrez installer et activer le plugin Elementor. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter la page « Elementor > Paramètres » pour configurer les paramètres du plugin.

Ici, vous pouvez activer « Elementor » pour différents types de publication. Par défaut, il est activé pour vos articles et pages WordPress. Si vous avez des formats de publication personnalisés sur votre site, ceux-ci apparaîtront également ici, et vous pouvez également les activer.

Créez Facilement votre blog avec SiteGround

SiteGround vous permet de créer votre blog WordPress en quelques clics seulements. Nom de domaine gratuit, hébergement sécurisé, SSL, transfert et bien plus encore... [ Recommandé ]

Vous pouvez exclure ou inclure des rôles d’utilisateurs qui peuvent utiliser Elementor lors de l’écriture des articles ou de pages. Par défaut, il est activé uniquement pour les administrateurs.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour mémoriser vos paramètres.

Création de la mise en page personnalisée avec Elementor

D’abord, vous devez créer une nouvelle page (ou une publication) sur votre site WordPress. Sur l’écran d’édition de publication, vous remarquerez le nouveau bouton « Modifier avec Elementor » (Edit With Elementor).

En cliquant dessus, vous lancerez l’interface utilisateur d’Elementor où vous pourrez éditer votre page en utilisant le générateur de page par dotée du drag and drop de Elementor.

Vous pouvez maintenant ajouter des sections et créer votre page à partir de rien, ou vous pouvez ajouter un modèle.

Les modèles sont un moyen plus rapide de démarrer rapidement. Elementor est livré avec plusieurs modèles conçus professionnellement que vous pouvez personnaliser autant que vous le souhaitez.

Commençons par un modèle en cliquant sur le bouton « Ajouter un modèle ».

Cela affichera une fenêtre contextuelle où vous pourrez voir différents modèles disponibles. Vous devriez rechercher un modèle qui ressemble à ce que vous avez ajouté sur votre mise en page.

Maintenant, cliquez pour sélectionner le modèle que vous souhaitez, puis cliquez sur le bouton « Insérer » pour l’ajouter à votre page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Elementor va maintenant charger le modèle pour vous.

Vous pouvez désormais commencer à modifier le modèle en fonction de vos besoins. Il suffit de pointer et de cliquer sur n’importe quel élément pour le sélectionner, et Elementor vous montrera ses paramètres dans la colonne de gauche.

Parlons maintenant de la façon dont les mises en page d’Elementor fonctionnent.

Les configurations d’Elementor sont construites en utilisant des sections, des colonnes et des widgets. Les sections sont comme des lignes ou des blocs que vous placez sur votre page.

Chaque section peut avoir plusieurs colonnes et chaque section et colonne peuvent avoir ses propres styles, couleurs, contenu, etc.

Vous pouvez ajouter quelque chose dans vos colonnes et sections à l’aide des widgets que propose Elementor.

Ces widgets sont différents types de blocs de contenu que vous pouvez placer dans vos sections Elementor.

Il suffit de sélectionner un widget et de le déposer dans votre section ou votre colonne. Il existe un vaste ensemble de widgets disponibles qui couvrent tous les éléments de conception web populaires que vous pouvez imaginer.

Vous pouvez ajouter des images, des textes, des rubriques, des galeries d’images , des vidéos, des cartes, des icônes, des témoignages, des curseurs, des carrousels et bien plus encore.

Vous pouvez également ajouter des widgets WordPress par défaut et même les widgets créés par d’autres plugins WordPress sur votre site.

Une fois que vous avez terminé l’édition, vous pouvez cliquer sur le bouton « Enregistrer » pour enregistrer vos modifications.

Remarque: L’enregistrement d’une mise en page ne publiera pas la page sur votre site WordPress. Elle sauvegardera simplement votre mise en page.

Vous pouvez maintenant prévisualiser votre page ou accéder au tableau de bord WordPress.

Cela vous ramènera à l’éditeur de publication WordPress. Vous pouvez maintenant enregistrer votre page WordPress ou la publier sur votre site.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de faire des mises en page avec le plugin Elementor.

Quelques ressources utiles :

 

Cet article comporte 16 commentaires
  1. Bonjour,
    J’ai un problème Depuis quelques mois, je n’ai pas mis à jour mon site Web sur lequel j’utilise cet élément; aujourd’hui, j’ai essayé de le faire mais j’ai un problème, la plupart des sections me montrent une case barrée avec le mot OFF SECTION et je ne peux rien faire. Je ne peux éditer qu’une section de la page, celle où j’ai le texte lui-même.
    Savez-vous ce que ça peut marcher?

  2. salut, comment et où éditez-vous un modèle d’archive dans elementor pro? Je ne peux pas insérer de contenu dans la colonne latérale du blog

  3. Bonjour,
    J’apprends à construire un site web avec WordPress, Elementor est un super plugin, ça permet beaucoup, je découvre quelque chose de nouveau.
    Aussi des problèmes;) Je traite habituellement des solutions. Pas maintenant.

    J’ai un problème avec l’édition de texte. Le paragraphe et les en-têtes sont tous deux rigides et je ne peux pas changer la police, la couleur, l’épaisseur, etc. Malgré les changements dans les réglages, rien ne change. Ce n’est pas un problème de motif, car sa police de caractères et son schéma de couleurs sont différents de ceux que me donne Elementor.
    Je ne sais pas comment changer ce paramètre de modèle est arrivé à moi de même avec l’en-tête 1, mais je l’ai changé en entrant le code html dans l’en-tête et aidé, maintenant cela ne fonctionne pas.

    Comment cela va changer? – aidez s’il vous plaît.

    1. Bonjour,

      Essayez de désactiver tous les plugins WordPress puis recommencez. Si votre problème est résolu quand ils sont tous désactivés, commencez par les activer un par un puis vérifiez à chaque fois.

      Si c’est un problème de compatibilité avec un autre plugin, vous saurez lequel.

  4. Bonsoir.
    J’ai ajouté une photo sur le site (Landing Page) et j’essayais de changer pour un autre je ne pouvais pas … supprimer plusieurs fois et j’ai mis la nouvelle photo mais ça ne charge pas … la vieille photo reste …
    Seriez-vous capable de m’aider?

  5. Bonjour et merci pour cet article qui me conforte dans le choix d’Elementor comme page builder. ^^

    Par contre, que pensez-vous de la création d’un site enfant avant modifications. Est-ce nécessaire avec Elementor ?

    Ma crainte, c’est que toutes les modifications opérées soient écrasées lors de la mise à jour du thème ? N’y a-t-il pas un risque ?

    En vous remerciant pour votre réponse,
    Bien à vous,
    Nicolas

  6. Bonjour et merci pour cet article très intéressant.
    J’ai commencé à utiliser Elementor et me demandais s’il n’était pas nécessaire avant de poursuivre de créer un thème enfant de celui que j’utilise. Sans quoi n’y a-t-il pas un risque que les MaJ du thème ou des plugins viennent tout écraser la mise en page construite avec Elementor ?
    En vous remerciant pour votre retour,

  7. Bonjour,

    J’aimerai savoir comment avoir le code PHP de l’extension ELEMENTOR pour l’intégrer à ma page d’accueil ?

    Je vous remercie de l’attention que vous porterez sur ma demande.

  8. Bonjour,

    article très intéressant.
    J’ai une question pour le pro elementor que vous êtes.
    Est-il possible d’ajouter dans les formulaires générés, un method= »POST » ?

    Jeanson

  9. très bon article, gan voulez demander, quand j’ai commencé à aller à l’élémentor, ou pourquoi il semble qu’il y a un en-tête et footernya, comment regarder vide

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
25 Partages
Partagez18
Tweetez2
Enregistrer5
WhatsApp