Elementor vs Divi: examen, avantages / inconvénients et guide ultime (2021)

elementor vs divi

Bienvenue dans mon examen impartial Elementor vs Divi pour 2021.

Je dois le succès de mon agence à ces deux constructeurs de pages (et au café infusé à froid), mais ils sont pour deux types de clients COMPLÈTEMENT DIFFÉRENTS. Si vous choisissez le mauvais, prenez des raccourcis ou obtenez le mauvais plan, vous pouvez:

  • Gâcher des centaines de dollars (et plus important encore, de nombreuses heures)
  • Rendez vos sites ouverts aux hacks
  • Limitez sérieusement votre capacité à faire évoluer votre entreprise

Mais ne vous inquiétez pas, il est en fait très facile de choisir le créateur de page parfait IF vous savez quoi chercher. J'ai des années d'expérience pratique avec les deux, alors laissez-moi vous guider pas à pas à travers tout en anglais simple avec des captures d'écran, des gifs et tout le reste!

Prenez un café (ou votre boisson chaude préférée), car vous êtes sur le point de vous plonger dans:

  • Divi ou Elementor? Comment évaluer rapidement votre situation actuelle et décider laquelle est la meilleure.
  • Comment décider en fonction du budget, des compétences et de l'expérience nourrie avec Elementor et Divi
  • La seule différence de prix clé qui pourrait vous faire économiser des milliers de dollars tout au long de la vie de votre entreprise
  • L'erreur stupide qui m'a presque coûté 100 $ ET la sécurité de tous mes sites
  • Une terrible expérience que nous avons eue avec l'un de ces produits que vous devez connaître

Nous avons créé une table des matières simple afin que vous puissiez accéder rapidement à la section la plus pertinente pour vous. Cliquez pour ouvrir le contenu ci-dessous:

Contenu[Afficher]

  

Elementor vs Divi: "Je veux savoir ce qui est le mieux pour moi maintenant!"

Vous êtes pressé et vous avez besoin de savoir ce qui est le mieux pour votre entreprise avant d'investir quoi que ce soit?

Permettez-moi de vous le donner directement sur la base de mes près de 5 ans d'expérience avec ces deux outils (depuis qu'Elementor a été publié pour la première fois en 2016). 

Un groupe d'entreprises a ABSOLUMENT besoin d'Elementor et un autre à 100% a besoin de Divi.

Si vous ne faites pas le bon choix, vous paierez. Sinon maintenant, dans un an, lorsque vous êtes trop frustré pour travailler comme vous le souhaitez. Et toute cette productivité et cette efficacité dont rêve tout entrepreneur est impossible.

Beaucoup plus à ce sujet plus tard, mais voici la version courte pour vous:

Obtenez Divi IF…

  • Vous êtes une agence: La tarification de Divi en fait une évidence pour les agences ambitieuses. L'accès à vie sans restrictions coûte SEULEMENT 249 $. C'est 249 $ pour chaque fonctionnalité sur des sites Web infinis. Si vous avez des centaines de pages, c'est comme dépenser 1 $ ou LESS par page pour le constructeur de pages le plus fiable au monde. 
  • Vous avez besoin du meilleur soutien de l'entreprise.
  • Vous avez de l'expérience en conception: Divi convient aussi aux débutants, mais c'est encore mieux aux constructeurs expérimentés. La courbe d'apprentissage est plus raide que celle d'Elementor, mais lorsque vous savez ce que vous faites, la puissance est tellement plus grande.
  • Vous avez besoin d'un thème premium pour travailler avec: Divi est un thème WordPress premium ainsi qu'un constructeur de pages, donc lorsque vous en achetez un, vous obtenez les deux.

Obtenir Elementor IF…

  • Vous avez besoin du générateur de page le plus simple: Elementor permet à quiconque de créer une belle page de destination sans aucune connaissance en codage à partir de 0 $!
  • Vous êtes solopreneur avec 1 site web
  • Vous avez un budget limité et avez besoin d'un plan GRATUIT
  • Vous êtes un designer qui a besoin d'éléments complexes
  • Vous ressentez le besoin de VITESSE. Elementor est si rapide que j'ai l'impression que la page se charge AVANT que je clique sur Entrée
  • Vous avez déjà un thème avec lequel travailler: Elementor est un constructeur de page (pas un thème) et doit être complété par un thème WordPress. 

 

Divi vs Elementor se résume vraiment à 1 chose: le prix. Cliquez ici pour passer au tableau des prix 

Elementor vs Divi

Elementor reçues par les enchanteurs et permettent aussi Divi les deux ont des fonctionnalités avancées de création de pages. Elementor est gratuit et a une version PRO au prix de 49 $. Divi coûte 89 $ par an et peut être utilisé sur un nombre illimité de sites. Le Divi Builder est convivial mais Elementor est plus rapide à utiliser.

Résumé

  logo elementor plug-in divi builder
Gagnant ?????  
Général  4.9/5  4.5/5
Facilité d’utilisation  5/5  4.5/5
Assistance  4.5/5  4.5/5
Stabilité et Fiabilité  5/5  4/5
Extensibilité  5/5  4.5/5
Valeur  4.5/5  5/5
Prix Commence à partir de $ 49 Commence à partir de $ 89
Version gratuite Oui Non - mais avec une garantie de remboursement de 30 jours
Editeur en temps réel Oui Oui
Édition en ligne Oui Oui
Frontend / Backend Les deux Les deux
Drag and Drop Oui Oui
Éléments tiers pris en charge Oui Oui
Frontend / Backend Les deux Les deux
Import / Export Oui Oui
Public cible Développeur / Designer / Utilisateur / Agence Designer / Utilisateur / Agence
Éléments pris en charge + de 90  46
Prise en charge des widgets WordPress Oui Compliqué
Code propre Oui Non
Modèles / mises en page prédéfinis + de 300 + de 150
Fonctionnalité cool Contenu dynamique Le test A / B
Performance  4.5/5  4/5
 Ce que nous avons aimé  Une solution très puissante pour créer tout type de design  Interface utilisateur propre
   Options de gestion de la mise en page supérieures  Le contenu reste intact même après la désactivation du plugin
   Prix ​​attractif avec accès  Mode éditeur unique pour les clients
   Générateur de pages le plus populaire pour une raison  Vous permet d'utiliser des widgets WordPress dans les mises en page
 Ce que nous n'avons pas aimé  Elementor vous oblige à acquérir un thème WordPress  Il reste du code après la suppression du plugin
Site Entreprise Visitez le site 
Visitez le site (10% OFF)

 

Maintenant que vous avez un aperçu rapide de chaque plugin, examinons-les en profondeur. Nous avons étudié de nombreux aspects, alors n'hésitez pas à faire défiler et à accéder aux sections qui vous intéressent.

Commençons par cette ultime confrontation des constructeurs de pages: Elementor vs Divi!

(VEUILLEZ LIRE CECI): Pourquoi choisir le mauvais constructeur de page pourrait vous coûter tout!

Je dois partager cette histoire…

Non pas parce que je veux me plaindre (enfin, peut-être juste un peu…) mais parce que chaque développeur, designer, entreprise et agence a besoin de savoir à quel point cette décision est importante.

Il était une fois, à une époque révolue du développement Web (il y a environ 8 ans?), Tout le monde en avait fini avec les thèmes WordPress premium de l'époque. 

De belles pages étaient possibles à coup sûr, mais elles nécessitaient un fouillis cauchemardesque de codes courts. Vous ne pouvez pas comprendre l'horreur unless vous avez survécu à ces moments. Je n'exagère qu'un peu...

De toute façon...

Il n'y avait aucun moyen de créer quelque chose sans connaître WordPress à fond.

Les concepteurs Web étaient une race spécifique de développeurs qui pouvaient combiner le code avec une conception appropriée.

Mec, la vie était… différente. 

Puis un jour, un important fournisseur WordPress (WPMUDEV) a commencé à pousser ce nouveau générateur de page par glisser-déposer étonnant: Upfront.

"C'est incroyable. Cela va sauver WordPress de SquareSpace et de Wix! », Ont-ils dit. 

À cette époque, la plupart d'entre nous résistaient encore aux constructeurs de pages. Moi y compris.

Mais celui-ci semblait ... mieux.

Pour être honnête, c'était plutôt génial. Le constructeur par glisser-déposer était comme du beurre. Et il avait des caractéristiques alléchantes:

  • Des éléments incroyables prêts à travailler
  • "Régions" faciles à modifier
  • Édition de texte en un clic
  • Modèles pour réutiliser et réduire le travail répétitif
  • La création de pages était simple et rapide! Nulle part ce que nous devions traverser auparavant ...

Upfront allait tout changer.

Alors un par un, tout le monde a commencé à sauter dans le train. Agence par agence, nous nous sommes alignés.

Les gens étaient tellement enthousiastes qu'ils ont construit toute leur feuille de route sur Upfront. Ils ont même embauché et formé du personnel pour l'utiliser. Certaines agences multisites avaient des centaines de pages utilisant Upfront.

Je n'ai pas construit toute mon entreprise autour d'Upfront (je n'ai jamais mis tous mes œufs dans le même panier), mais disons simplement que j'avais aussi un peu de peau dans le jeu ...

Et puis un jour, tout s'est effondré.

dire au revoir à l'avance

Un jour, WPMUDEV a simplement décidé de tout interrompre.

Pas d'avertissement.

Pas un seul mot.

Upfront a été abandonné et chaque page créée dessus est devenue obsolète.

Tout ce travail, tout ce temps et cet argent, tout le personnel formé pour l'utiliser, toutes les feuilles de route construites avec : USELESS.

Lisez cet avis d'un propriétaire d'agence ayant travaillé avec Upfront:

J'ai passé la majeure partie de l'année dernière à reconstruire toute mon agence de site Web (notre site marketing et les sites clients) avec et autour d'Upfront. Voir simplement qu'il est maintenant hors des plans de développement, sans avertissement, après avoir mis sa confiance en lui, embaucher et éduquer le personnel à l'utiliser n'est tout simplement pas cool.

De nombreuses entreprises ont été durement touchées ... ce n'était pas agréable. 

Morale de l'histoire?

Choisir le bon constructeur de page est essentiel pour votre entreprise. Cela signifie qu'il est essentiel que vous en choisissiez un avec une expérience éprouvée et une marque digne de confiance.

Sinon, vous pourriez être le prochain entrepreneur à laisser un commentaire décrivant comment l'utilisation d'Upfront leur a presque coûté tout.

Mais, je m'éloigne du sujet. Retour à la critique…

Que sont les constructeurs de pages?

Vous n'êtes pas intéressé par cette intro ou êtes pressé? Cliquez ici pour passer à la partie suivante de l'article

Nous allons commencer notre Elementor vs Divi Builder article avec une petite introduction de ce que fait un constructeur de page.

Les constructeurs de pages sont des outils qui vous permettent de concevoir et de créer des pages Web de qualité professionnelle à partir de zéro, même avec 0 expérience de codage. 

kB4U67tiQLA

Au lieu de passer des mois à apprendre à coder une page sur mesure, tout le travail acharné a déjà été fait pour vous et regroupé en petits «éléments». Vous venez de les «glisser-déposer» sur la page où vous voulez et VOILA, vous avez une page magnifiquement conçue ... et personne ne connaît votre secret. 

Par exemple, si vous souhaitez ajouter une zone de texte ou image, il vous suffit de saisir cet «élément» dans la barre latérale, de le faire glisser sur la page et de le placer là où vous le souhaitez. Sonne beaucoup mieux que d'aller dans le backend et codage tout vous-même, non?

La plupart ont même des modèles prédéfinis qui ont fait leurs preuves pour augmenter les conversions des visiteurs, vous n'avez donc même pas à faire de «gros travaux».

Il vous suffit de cliquer sur «l'élément» que vous souhaitez ajouter à votre page (par exemple, une image, une zone de texte ou une nouvelle section), faites-le glisser où vous le souhaitez et déposez-le en place 

C'est comme créer un site Web en utilisant des pièces Lego.

création de pages avec des constructeurs de pages

Qu'est-ce que Divi?

Générateur de thèmes et de pages WordPress Divi  

Divi est le thème WordPress le plus populaire avec plus de 700,000 XNUMX ventes, et le constructeur de pages WordPress ultime. S'il s'agissait de sports, ce seraient les Man U, les Yankees de New York et les Patriots de la Nouvelle-Angleterre: plus qu'une équipe, une institution.

utilisateurs de divi

En fait, c'est encore plus qu'un constructeur de pages - c'est une méga usine de création de sites Web WordPress qui permet aux pigistes, aux agences et aux propriétaires de sites de créer de beaux sites, de les optimiser pour les conversions (test fractionné) et de se développer en utilisant les médias sociaux.

L'énorme popularité de Divi est principalement due à:

  • Utilisation illimitée: Divi est l'un des seuls thèmes qui vous offre une utilisation illimitée de toutes les fonctionnalités sur tous les sites. Pas de gadgets de tarification. Pas de niveaux déroutants. Non rien. Juste une utilisation illimitée sans poser de questions.
  • Tarification simple: 249 $ pour un accès à vie SUR TOUS VOS SITES.
  • Support et communauté inégalés: Divi est un mode de vie pour certaines personnes. Il dispose d'une communauté Facebook florissante et du meilleur support de l'industrie, vous serez donc toujours en train d'innover, d'obtenir des commentaires utiles et d'améliorer votre jeu Divi.

Nous travaillons avec ce produit depuis longtemps, en fait, nous avons déjà rédigé une revue complète du thème Divi 3.0 ici. Leur Divi builder est un plugin intégré et fourni avec le thème, bien qu'il puisse être acheté et utilisé séparément avec d'autres thèmes, si vous le souhaitez.

Cliquez ici pour visiter le site Divi et en savoir plus maintenant 

Qu'est ce que Elementor?

générateur de page elementor  

Elementor est un perturbateur du marché dont la popularité monte en flèche. C'est l'un des constructeurs les plus populaires pour les solopreneurs et les entreprises avec un seul site.

C'est le petit nouveau du quartier, prêt à défier le roi et à le forcer à abdiquer.

Il est ultra-rapide, offre un design inégalé et est si facile qu'un homme des cavernes pourrait le faire. Et cela vous permet de commencer à 100% GRATUITEMENT. 

Il vous donne à peu près tout ce que Divi fait, c'est juste plus rapide et plus facile à utiliser. Et c'est beaucoup plus abordable pour un seul site.

Ces deux produits sont préférés par la plupart des utilisateurs et experts de WordPress car ils présentent un certain nombre d'avantages:

  • ils sont faciles à utiliser,
  • ils ont les meilleures performances et stabilité, et
  • ils sont soutenus par une équipe de développeurs WordPress experts ou par une entreprise bien connue.

Un incroyable 5,000,000 - c'est MILLION - les gens utilisent Elementor pendant que vous lisez ceci 

Nous avons creusé profondément spécifiquement dans Elementor Pro - vous trouverez notre critique ici

Cliquez ici pour visiter le site Web d'Elementor et commencer gratuitement

Attendez, vous dites que Divi et Elementor sont géniaux. Alors, comment puis-je choisir?

Bonne question.

Ils sont tous les deux très similaires, mais comme je l'ai déjà dit - les prix et les légères différences de fonctionnalités les rendent parfaits pour différents segments du marché.

Comparons-les côte à côte pour avoir une meilleure idée. 

Nous allons prendre ces deux principaux constructeurs de pages sur le marché aujourd'hui, Elementor vs Divi Builder, et approfondissez toutes leurs capacités et comparez-les en tête-à-tête.

Nous allons examiner en profondeur leur interface utilisateur, leur ensemble de fonctionnalités, leurs prix et bien plus encore.

À la fin de cet article Elementor vs Divi, vous aurez toutes les connaissances dont vous avez besoin pour porter un jugement éclairé sur celui qui convient vos propres besoins. 

Vous saurez comment ils fonctionnent, à quoi ils ressemblent, ce qui est fourni avec l'ensemble, lequel de ces deux constructeurs de pages populaires a plus de sens pour vous, et tout ce que vous devez savoir.

Cela vous aidera à prendre une décision éclairée sur lequel choisir, ou si vous devriez envisager d'autres constructeurs de pages à la place.

Dans la section suivante, nous allons comparer l'interface utilisateur de Divi et Elementor - c'est-à-dire à quel point il est facile de créer des sites Web en utilisant ces deux constructeurs de pages.

Elementor vs Divi: facilité d'utilisation

L'interface utilisateur et sa facilité d'utilisation sont l'une des parties les plus importantes d'un plugin de création de page. C'est là que vous passerez la majorité de votre temps à travailler. 

Dans notre première partie de notre Elementor vs Divi builder comparaison, nous allons parcourir leurs interfaces utilisateur et les paramètres disponibles que nous pouvons configurer.

Ces deux créateurs de pages ont déployé beaucoup d'efforts pour s'assurer qu'ils sont extrêmement faciles à utiliser.

Commençons par le Divi Builder.

En savoir plus sur l' Divi Builder by Elegant Themes

Divi Builder Interface utilisateur

Avant de commencer, voyons ce que le fournisseur a à dire sur l'utilisation du plugin dans cette courte vidéo, en particulier avec l'interface récemment réorganisée:

0qRYEseXnD4

Avec la Divi builder plugin installé, lorsque vous créez une nouvelle page, vous serez accueilli avec une interface utilisateur qui vous demandera si vous souhaitez « Utiliser Divi Builder" ou "Utiliser l'éditeur par défaut".

nouvelle page

En cliquant sur l'utilisation Divi Builder L'option ouvrira un écran qui vous demandera de choisir entre "construire à partir de zéro", "choisir une mise en page prédéfinie" ou "cloner une page existante".

choisir la mise en page

 

  • Construire à partir de zéro - vous commencerez avec une page vierge.
  • Choisissez une mise en page prédéfinie - vous permettra de choisir parmi une sélection de modèles prédéfinis. Nous en parlerons plus en détail plus tard.
  • Cloner une page existante - assez explicite, copie essentiellement une page existante sur la page sur laquelle vous travaillez actuellement.

Nous allons choisir l'option « construire à partir de zéro » car les deux autres choix sont à peu près les mêmes, uniquement avec du contenu déjà ajouté. Cela nous permettra de nous concentrer davantage sur la façon dont les Divi builder l'interface fonctionne et à quoi elle ressemble lorsqu'elle est utilisée pour concevoir des pages et des sites.

Ajout d'éléments dans Divi Builder

Cliquer sur l'option « construire à partir de zéro » déclenchera le Divi builder et la première chose qui apparaîtra est une boîte de dialogue vous demandant d'insérer une nouvelle ligne.

Les boîtes de dialogue avec des options que vous pouvez configurer s'ouvrent, en fonction du module et du contenu que vous ajoutez. Nous aborderons plus en détail les modules (que nous appellerons principalement des éléments) plus loin dans l'article.

nouvelle rangée

Le menu

Le Divi builder l'interface utilisateur est minimaliste.

Le minimalisme a toujours été l'une des caractéristiques de conception de Elegant Themes et le constructeur de pages maintient ce concept de conception.

Comme vous pouvez le voir sur le gif ci-dessus, il n'y a pas du tout de barre latérale ou de barre de menus. Au lieu de cela, tout ce que vous avez est un cercle flottant avec trois points blancs à l'intérieur.

Le cercle flottant avec trois points blancs est ce qui fait office de menu. En cliquant sur ces points dans la page de construction initiale de Divi, vous aurez accès à diverses options et outils utiles.

menu flottant

Vous pouvez déplacer ce menu en cliquant dessus et en le faisant glisser. Vous pouvez le déposer dans l'une des huit positions prédéfinies dans le coin de l'écran.

Examinons de plus près le contenu de ce menu flottant. Lors de l'utilisation de Divi, en partant du côté gauche, nous avons

  • Divi builder paramètres,
  • vue filaire,
  • outil de zoom,
  • vue du bureau,
  • vue tablette,
  • charger à partir des options de la bibliothèque,
  • option enregistrer dans la bibliothèque,
  • mise en page claire,
  • paramètres de page,
  • édition de l'historique,
  • portabilité,
  • le bouton de recherche et d'aide,
  • et les boutons Enregistrer le brouillon et Publier.

menu flottant 2

Que diriez-vous d'un examen plus profond de chacun d'eux?

Paramètres du constructeur - cela fera apparaître une boîte de dialogue avec différentes options qui vous permettent de personnaliser les icônes qui apparaissent sur le Divi builder barre d'outils, modifiez le mode d'affichage par défaut (mobile, ordinateur de bureau ou tablette), activez ou désactivez les animations de l'interface utilisateur, etc.

Vue filaire - cliquer sur cet élément active ou désactive la vue filaire. Vous pouvez utiliser la vue filaire pour avoir une vue structurelle de votre page.

vue filaire

Outil Zoom - vous permet d'agrandir et de réduire la page.

Affichage des ordinateurs de bureau, des tablettes et des appareils mobiles - vous permet de prévisualiser l'apparence de votre page sur différents appareils et la résolution de l'écran.

vue réactive

Charger depuis la bibliothèque - vous permet d'insérer ou d'utiliser un modèle prédéfini de la bibliothèque de modèles vers la page.

Enregistrer dans la bibliothèque - vous permet d'enregistrer la page actuelle dans la bibliothèque de modèles.

Disposition claire - supprime tout sur la page.

Paramètres de la page - vous permet d'accéder aux paramètres de la page comme le titre, l'extrait, l'image en vedette, etc.

Modification de l'historique - vous pouvez voir à partir d'ici quelles modifications ont été apportées dans la session d'édition en cours. Cliquer sur un élément vous permet de remonter dans le temps, d'annuler toutes les modifications que vous avez effectuées et de rétablir l'état de la page. 

édition de l'historique

Portabilité - importez ou exportez votre mise en page actuelle.

Boutons de recherche et d'aide - ces boutons vous permettent d'accéder Divi builderla documentation de ; le bouton de recherche vous permet de rechercher une action, un élément de menu ou un élément spécifique.

Boutons Enregistrer le brouillon et Publier - assez explicite.

Menu spécifique à l'élément

Lors de l'utilisation Divi builder, si vous survolez un élément, un autre ensemble de menus s'affiche. Ces menus vous permettent de configurer les paramètres d'un élément spécifique, tels que son contenu, sa mise en page ou l'ajout d'un CSS personnalisé.

menu spécifique à l'élément

Divi Builder en action

Vous trouverez ci-dessous un gif d'édition d'une page avec le Divi builder. Vous pouvez utiliser le générateur de page pour faire glisser des éléments pour les repositionner, ou vous pouvez double-cliquer sur un texte pour effectuer une édition en ligne, etc.

démo de divi ui

Et c'est à peu près tout pour les bases de Divi builder interface utilisateur.

Le Divi BuilderL'interface utilisateur de est minimaliste - propre et simple mais a tout ce dont vous avez besoin pour faire avancer les choses.

Cela ne vous submerge pas du tout, vous permet de rester concentré sur vos créations. Il présente une expérience en plein écran. Cependant, cela signifie que l'ajout de nouveaux éléments peut parfois nécessiter beaucoup de clics.

Ce qui est unique dans son interface utilisateur, c'est la possibilité de passer en vue filaire et en vue frontalelessly.

C'est utile, surtout pour les grandes pages car vous pourrez déplacer des éléments plus facilement. De plus, dans la vue frontale du Divi builder, déplacer des éléments, surtout si la page est déjà pleine de contenu, a tendance à être un peu lent.

Le passage à la vue filaire élimine le décalage.

Enfin, en utilisant la vue filaire, il est beaucoup plus facile d'accéder aux menus spécifiques aux éléments car ils sont toujours visibles.

Comme vous pouvez le voir, en termes de facilité d'utilisation, Elegant Themes ont travaillé pour faire Divi builder simple mais puissant à la fois.

Maintenant que nous avons terminé avec le Divi Builder, jetons un coup d'œil à l'interface utilisateur d'Elementor. Notre prochaine section de l'Elementor vs Divi builder la comparaison se concentrera sur l'interface utilisateur Elementor,

Interface utilisateur d'Elementor

L'interface utilisateur d'Elementor est très différente de la plupart des autres constructeurs de pages. Si la Divi builder se concentre sur le minimalisme, Elementor se concentre sur l'accessibilité, mais l'expérience utilisateur est également excellente avec ce constructeur de pages.

Nous utiliserons cette section de notre Elementor vs Divi builder comparaison pour se concentrer sur les différences entre les deux.

Elementor utilise le concept de blocs de construction, qui sont utilisés pour construire chaque page en plusieurs «sections». Jetez un œil à la vidéo d'une minute suivante qui explique exactement comment cela fonctionne:

VRoPdyk97mg

La création d'une nouvelle page avec Elementor actif vous amènera à l'éditeur par défaut de WordPress. Pour commencer à éditer la page, vous devez cliquer sur le bouton "Editer avec Elementor" situé dans la partie supérieure de l'écran, pour faire apparaître le générateur Elementor.

Téléchargez une copie du plugin

créer une nouvelle page

Cliquer sur le bouton ouvrira l'interface utilisateur d'Elementor qui se compose de deux parties: le sidebar et l’équipe de aperçu de la page.

interface utilisateur élémentor

Vous pouvez masquer la barre latérale en appuyant sur la petite icône affichée dans le gif ci-dessous:

masquer la barre latérale

Masquer la barre latérale vous permet d'avoir un aperçu plein écran de votre page. N'oubliez pas que vous ne pouvez rien modifier tant que la barre latérale est masquée.

Ajout d'éléments dans Elementor

Pour ajouter un élément à la page, faites simplement glisser et déposez-en un de la barre latérale vers la page.

drag and drop

Dans Elementor, lors du glisser-déposer d'un élément, la barre latérale se transforme pour afficher les options spécifiques à l'élément qui vient d'être ajouté.

Le bouton plus rouge et l'icône de dossier dans l'aperçu de la page vous permettent d'ajouter une nouvelle section ou de charger un modèle à partir de votre bibliothèque.

Après avoir fait glisser et déposer un élément sur la page ou après avoir sélectionné un élément sur la page, vous remarquerez que le côté affiche maintenant des options pour l'élément sélectionné à la place.

Pour revenir au panneau de sélection d'éléments, vous pouvez cliquer sur l'icône de tuiles carrées dans le coin supérieur droit du menu de la barre latérale.

navigation dans la barre latérale

Cliquez sur cette icône et vous pourrez revenir au panneau de sélection des éléments. Vous pouvez maintenant faire glisser et déposer un autre élément d'ici vers la page.

Sidebar

La barre latérale est divisée en trois parties.

  1. Le menu supérieur,
  2. le corps, et
  3. le menu inférieur.

Le menu supérieur contient les paramètres généraux, le corps affiche des informations sur l'élément actuellement sélectionné et le menu inférieur affiche des paramètres supplémentaires que vous pouvez configurer. 

Menu supérieur

Le menu de la barre latérale supérieure du générateur de page Elementor se trouve dans le coin supérieur gauche de la barre latérale. Ici, vous pouvez configurer les styles et les paramètres de police par défaut, le sélecteur de couleurs, etc.

menu de la barre latérale supérieure

Il existe d'autres éléments accessibles dans ce menu en plus des options de style.

Il existe une fonction de recherche, un lien vers la page des paramètres d'Elementor et plus encore. Vous pouvez également trouver le bleu quitter le tableau de bord bouton, qui vous ramène au tableau de bord WordPress.

Menu en bas

Au bas de la barre latérale, vous pouvez voir des éléments de menu supplémentaires.

menu de la barre latérale inférieure

De gauche à droite, nous avons les paramètres, le navigateur, l'historique, le mode réactif, l'aperçu des modifications et le bouton de publication.

Le bouton de publication a son sous-menu auquel vous pouvez accéder en cliquant sur la petite flèche vers le haut à côté de lui. En cliquant dessus, vous obtenez deux options d'enregistrement supplémentaires: les options d'enregistrement du brouillon et d'enregistrement en tant que modèle.

menu supplémentaire

Passons en revue chacun d'entre eux rapidement.

Paramètres - l'icône d'engrenage située à l'extrême gauche du menu du bas. Il contient les paramètres de la page sur laquelle vous travaillez actuellement.

Ici, vous pouvez modifier le titre de votre page, ajouter une image en vedette, changer son statut de publication (brouillon, programmé, publié), changer sa mise en page par défaut, etc. Vous pouvez également remarquer la présence de deux onglets supplémentaires: le style reçues par les enchanteurs et permettent aussi Avancée onglets.

panneau des paramètres de la barre latérale

Dans l'onglet Style, vous pouvez configurer les paramètres de style du corps de la page. Vous pouvez définir une couleur ou une image d'arrière-plan et vous pouvez également modifier le remplissage.

Et dans l'onglet avancé, vous pouvez ajouter votre CSS personnalisé.

Navigateur - nous permet de voir une vue hiérarchique des éléments sur la page. Ceci est comparable au Divi builderle mode filaire de . Le navigateur, cependant, n'est qu'un menu flottant représentant la hiérarchie des éléments de votre page. Vous pouvez également réorganiser les éléments à l'aide du navigateur, bien que sa fonctionnalité ne soit pas aussi bonne que le mode filaire que nous avons vu ci-dessus dans le Divi builder.

Le but principal du navigateur est, comme son nom l'indique, de vous aider à naviguer beaucoup plus facilement sur votre page. C'est très pratique, surtout si vous avez une page complexe avec des tonnes d'éléments.

navigateur

Histoire - où vous pouvez voir votre historique d'édition. Il vous permet de revenir à une version précédente de vos modifications. Gardez à l'esprit, cependant, que seules les modifications de la session en cours sont enregistrées.

Il y a une chose qui sépare la fonction d'historique d'Elementor de la Divi builder, et c'est un gros problème, ce qui rend la fonction d'historique plusieurs fois meilleure.

Comme vous pouvez le voir sur l'image ci-dessus, il existe un autre onglet intitulé «révisions» dans le panneau de l'historique. Ces révisions sont conservées même après quitter l'interface utilisateur du générateur de page ou même après avoir fermé votre navigateur.

Chaque fois que vous cliquez sur le bouton «mettre à jour», une nouvelle révision est enregistrée.

révisions

En outre, le plugin effectue également des sauvegardes automatiques vous empêchant de perdre votre travail en raison de problèmes tels que les pannes du navigateur.

Cela vous permet de revenir facilement à une révision précédente même si vous fermez l'éditeur, vous déconnectez de WordPress ou éteignez votre ordinateur. Cette caractéristique à elle seule fait d'Elementor un gagnant clair contre le Divi builder en termes d'historique de révision.

Mode réactif - vous permet de prévisualiser à quoi ressemblera votre page dans différents appareils et résolutions d'écran.

aperçu réactif

Aperçu des modifications - ouvrira un nouvel onglet vous permettant d'avoir un aperçu en direct de votre page.

Menu spécifique à l'élément

Cliquez sur un élément dans la page d'aperçu pour afficher un menu spécifique à l'élément avec ses options uniques que vous pouvez configurer.

menu spécifique à l'élément 2

Elementor en action

Comme nous l'avons fait avec ElegantThemes', dans la prochaine partie de notre comparaison Divi vs Elementor, nous montrerons Elementor en action afin que vous puissiez comprendre la différence entre ces deux constructeurs de pages.

En utilisant des gifs animés, vous pouvez voir le produit en action dans le cadre de notre examen Elementor vs Divi.

Ci-dessous, vous pouvez voir comment nous pouvons faire glisser et déposer des éléments pour les repositionner, comment vous pouvez modifier la couture du textelessment, comment ajouter de nouveaux éléments, etc.

démo elementor ui

Comme nous pouvons le voir, le constructeur Elementor se concentre sur l'accessibilité et la convivialité.

Contrairement à Divi, qui peut prendre un certain temps pour s'y habituer, Elementor permet à ses utilisateurs de se sentir comme chez eux. L'ajout de nouveaux éléments est extrêmement simple puisqu'il vous suffit de faire glisser et déposer l'élément dont vous avez besoin de la barre latérale vers la zone d'aperçu.

En comparant Divi vs Elementor, nous voyons qu'ils ont un objectif différent. Le premier met l'accent sur la simplicité et la propreté, le second sur la disponibilité et l'accessibilité.

Alors, qui gagne quand il s'agit d'Elementor vs Divi - quel constructeur visuel est le plus facile à utiliser?

Nous ne pensons pas qu'il y ait un gagnant en termes de facilité d'utilisation. Les créateurs de pages Elementor et Divi ont une interface qui vous aide à faire le travail.

C'est juste une question de style et de préférence. 

Gagnant de l'interface utilisateur Elementor vs Divi: Cravate

En savoir plus sur le site Web du plugin

Maintenant que nous avons fini d'explorer les interfaces utilisateur des deux plugins, il est temps de jeter un coup d'œil aux éléments ou widgets et modules disponibles des constructeurs de pages selon leur jargon.

Les "éléments" ou "modules" réels sont mis en évidence dans la partie suivante de notre comparaison Elementor vs Divi.

Éléments

Les éléments sont ce que vous utiliserez pour créer votre page. En termes de Divi vs Elementor, l'utilisation de la terminologie est légèrement différente, mais en général, les concepts sont assez similaires.

Le Divi builder appelle ses éléments le section, le lignes et colonnes, et l’équipe de modules. Comme Divi, Elementor fonctionne avec trois blocs de construction fondamentaux, mais d'un autre côté, il appelle ses éléments les , le colonne, et le widgets.

Les éléments sont utilisés pour définir la structure d'une page. Bien que les noms puissent être différents dans Elementor vs Divi builder, les concepts sont les mêmes.

Regardons de plus près en commençant par le Divi builder.

Divi BuilderÉléments de : section, lignes et modules

Divi builderLes éléments de sont divisés en trois catégories principales : les , qui agit comme un conteneur, le lignes, qui agit comme un diviseur, et le modules, qui sont le contenu réel.

L'image ci-dessous vous montre une page vide. Cette page comporte trois sections. 

La deuxième section a une ligne à l'intérieur, qui est surlignée en vert. La ligne est divisée en trois colonnes. Les colonnes sont vides.

Enfin, la section du bas comporte également une ligne à l'intérieur, bien qu'elle ne soit pas mise en évidence. La ligne est également divisée en trois colonnes, similaires à celle de la deuxième section. La colonne du milieu de la rangée du bas contient un module, qui, dans ce cas, est un module de boutons.

 

les éléments

Pour ajouter des sections, des lignes ou des modules, vous cliquez sur les boutons plus.

Le bleu violet or orange le bouton plus ajoutera une section (la couleur de surbrillance de la section change en fonction du type de section: bleu pour régulier, violet pour pleine largeur et orange pour spécialité), le vert le bouton plus ajoutera une ligne et le noir le bouton plus ajoutera un module.

sections

Dans le Divi builder, la section agit comme un conteneur pour les lignes et les modules.

Vous pouvez utiliser des sections pour diviser votre page en différentes parties. Par exemple, vous pouvez avoir trois sections sur une page; la première est une section à propos, la seconde est une section de contact et la troisième est une section de localisation commerciale.

Les sections sont «indépendantes» les unes des autres. Si vous appliquez une couleur d'arrière-plan bleue dans la première section, les deux autres sections ne seront pas affectées.

Ajout de sections - En cliquant sur le bouton plus bleu (ou orange ou violet) de la page, vous pourrez ajouter une nouvelle section. En cliquant sur le bouton spécifié, vous obtiendrez une boîte de dialogue vous demandant de choisir parmi trois types de sections différentes: régulière, spécialisée et pleine largeur.

nouvelle section

Les sections régulières vous permettent d'ajouter des lignes avec des colonnes disposées côte à côte. Les sections spécialisées vous permettront d'ajouter une disposition plus complexe des lignes et des colonnes. Les sections pleine largeur vous permettent d'ajouter des éléments spéciaux pleine largeur tels que le portfolio, le curseur de publication, le titre de l'article, etc.

Il existe également la possibilité d'ajouter une section de votre bibliothèque. Si vous avez précédemment enregistré une section, vous pouvez maintenant la trouver ici et pouvoir l'ajouter à la page.

Voyons maintenant le Divi builder paramètres des sections.

Placer votre souris sur un élément le mettra en surbrillance et affichera une barre d'action dans le coin supérieur droit de la zone en surbrillance. Découvrez l'animation suivante de l'utilisation des paramètres de section du Divi builder. 

paramètres de section

Ces paramètres vous permettent de configurer l'élément spécifique. Pour les éléments de section, vous disposez des éléments suivants:

  • Déplacer la section
  • Paramètres de section
  • Section en double
  • Enregistrer la section dans la bibliothèque
  • Supprimer la section
  • Paramètres de section supplémentaires
    • Enregistrer dans la bibliothèque
    • Test fractionné
    • Désactiver
    • Bloquer
    • Copier la section
    • Copier le style de section
    • Réinitialiser le style de section
    • Afficher le style modifié
    • Prolonger le style de coupe

La plupart de ces options sont explicites, mais ce qui est intéressant ici, c'est la test fractionné option.

C'est un UN B fonction de test qui vous permet d'effectuer des tests fractionnés sur tout type de Divi builder éléments, à partir de lignes, de sections, de colonnes et de modules.

En ce qui concerne Divi vs Elementor en termes de tests A / B, Divi arrive en tête. La seule façon de faire des tests fractionnés avec Elementor est d'utiliser un plugin ou un service tiers tel que Google Optimize.

Cliquez sur l'icône d'engrenage (paramètres de la section) pour afficher une boîte de dialogue avec des options de configuration supplémentaires pour la section en surbrillance.

boîte de dialogue des paramètres de coupe

La boîte de dialogue des paramètres de section contient trois onglets: Contenu, Conception et Avancé. L'onglet Contenu contient des éléments liés au contenu de l'élément sélectionné, tandis que l'onglet Conception et l'onglet Avancé contiennent des options de style.

rangées

Comme avec la plupart des autres générateurs de pages, les lignes sont des éléments qui résident dans une section. Lors de l'ajout d'une ligne, vous devez sélectionner une variante de ligne. Les variations de ligne diffèrent par le nombre de colonnes par défaut et par la taille de chaque colonne.

Les lignes utilisent le responsive Grille à 12 colonnes

sélection de lignes

Si vous voulez une structure de colonne plus complexe, vous voudrez utiliser un section de spécialité.

sections spéciales

Les variations de ligne de la section spécialisée ont une structure de disposition de colonne plus complexe, comme vous pouvez le voir sur l'image ci-dessus.

Paramètres de ligne - Tout comme les sections, une ligne a une barre d'action lorsque vous la survolez avec la souris, ce qui vous permet d'accéder à certains éléments de menu. Il a à peu près les mêmes choses que celles trouvées dans les sections, à part le modifier la structure de la colonne option qui est exclusive aux éléments de ligne.

 

modifier la structure de la colonne

Modules

Les modules dans le Divi builder sont ce que vous utiliserez pour ajouter du contenu visible à votre page. Les modules sont des éléments de site Web tels que du texte, des images, des paragraphes, des vidéos, des formulaires de contact, des cartes, etc.

Cliquez sur le bouton noir plus pour ouvrir une boîte de dialogue de sélection de module. Lors du choix d'un module, une autre boîte de dialogue affichera les paramètres qui sont adaptés au module spécifique que vous avez sélectionné.

Par exemple, si vous sélectionnez le module de texte, un texte d'espace réservé apparaîtra dans la zone que vous avez sélectionnée.

En utilisant la boîte de dialogue, vous pouvez modifier le texte lui-même et ajouter des styles, ajouter du CSS personnalisé, etc.

module de texte

Chaque module a la même boîte de dialogue qui vous permet d'accéder aux paramètres et aux options de personnalisation, tout comme celle ci-dessus.

Pour ouvrir les paramètres d'un module, passez votre souris sur le module jusqu'à ce que la barre d'action apparaisse, puis cliquez sur l'icône d'engrenage / paramètres.

paramètres du module

La boîte de dialogue des paramètres comporte trois onglets: Contenu, Conception et Avancé.

  • L'onglet Contenu contient les paramètres de configuration du module. Cela varie selon le module.
  • L'onglet Conception contient des options de conception vous permettant de modifier l'alignement du contenu, l'espacement, la typographie, etc.
  • L'onglet avancé vous permet d'accéder à des options telles que la configuration CSS avancée, les transitions, etc.

 

Verdict:

Comme nous l'avons vu ci-dessus, accéder aux éléments, en particulier aux éléments de module, est un peu bizarre car vous devez cliquer plusieurs fois pour les obtenir.

D'un autre côté, peut-être l'une des meilleures choses à propos de la Divi builderLes éléments de sont les lignes spéciales. Ceux-ci vous permettent de créer une mise en page et un positionnement complexes avec une relative facilité.

Maintenant que nous avons vu le Divi Builderéléments de , examinons ensuite les éléments d'Elementor dans notre Elementor vs Divi builder épreuve de force.

Éléments d'Elementor: section, colonnes et widgets

Comme Divi, Elementor a trois catégories d'éléments différentes: le , qui agit comme un conteneur, le colonnes qui divisent la section, et le widgets qui sont le contenu réel.

Dans l'image ci-dessous, vous pouvez voir une page vide divisée en trois sections.

La section supérieure est vide. La deuxième section contient trois colonnes et la section inférieure, contenant également trois colonnes avec la colonne du milieu contenant un widget bouton.

les éléments 2

L'ajout d'éléments sur la page est aussi simple que de glisser-déposer un widget de la barre latérale vers une zone vide.

Contrairement au Divi builder ce qui vous oblige à créer d'abord une section et une colonne avant de pouvoir ajouter un élément, dans Elementor, vous pouvez simplement faire glisser, par exemple, un widget de bouton de la barre latérale vers une zone vide de votre page et vous avez terminé .

Il créera automatiquement une section avec une seule colonne contenant votre widget sélectionné.

ajout d'éléments

Si vous éditez un élément, la barre latérale modifiera son contenu pour afficher les paramètres appropriés pour ledit élément.

Comme avec la Divi builder, vous pouvez faire glisser et déposer des éléments pour les repositionner sur la page. Vous pouvez cliquer sur n'importe quel texte de la page pour le modifier directement. Vous pouvez également redimensionner les colonnes librement.

Un clic droit sur n'importe quel élément de la page fait apparaître un menu contextuel, qui varie légèrement en fonction du type d'élément actuellement sélectionné.

Section

La section agit comme un conteneur pour les colonnes et les widgets.

Il existe deux types de sections dans Elementor, la Ordinaire section, et le intérieur .

La section intérieure ne peut exister que dans une section normale. Une section interne est quelque peu similaire aux colonnes, mais vous pouvez avoir plusieurs sections internes et plusieurs colonnes à l'intérieur, ce qui vous permet de créer des mises en page complexes.

ajout de nouvelles sections

Paramètres de la section - Passer la souris sur n'importe quel élément de la page mettra en évidence la section à laquelle il appartient. La section en surbrillance a un petit menu en haut.

Ce petit menu comporte trois éléments: la section Ajouter une nouvelle (bouton plus), la section d'édition (zone en pointillés) et la section Supprimer (bouton x).

menu de section

La nouvelle section d'ajout ajoutera une nouvelle section vide au-dessus de celles en surbrillance.

La section d'édition fera apparaître les paramètres de section sur la barre latérale. Vous pouvez également y accéder via un clic droit sur une partie vide de la section.

Dans les paramètres de la section, il y a trois onglets: mise en page, style et avancé. Vous pouvez configurer les options de mise en page et de structure dans l'onglet Mise en page.

Dans l'onglet style, vous pouvez configurer les options de style et dans l'onglet avancé, vous pouvez configurer des options de style et d'attribut avancées supplémentaires.

onglet avancé de style de coupe

Colonnes

Les colonnes divisent les sections verticalement. Les colonnes agissent comme un conteneur pour les widgets, y compris les widgets de la section interne.

Lors de l'ajout d'une nouvelle section, vous pouvez choisir le nombre de colonnes qu'elle contiendra.

nouvelles colonnes

Paramètres de colonne - L'accès aux paramètres de colonne se fait en survolant une colonne et en cliquant avec le bouton droit de la souris sur l'icône de colonne désormais visible. Différentes options apparaîtront, vous permettant d'éditer la colonne, de dupliquer la colonne, d'ajouter une nouvelle colonne, etc.

paramètres de colonne

La sélection de la colonne d'édition changera la barre latérale pour afficher les paramètres liés à la colonne. Tout comme dans les paramètres de section, il comporte également trois onglets: mise en page, style et avancé.

panneau des paramètres de colonne

L'onglet de mise en page contient des options de configuration de mise en page telles que la largeur des colonnes, l'alignement, etc. tandis que le style et les onglets avancés sont à peu près les mêmes que ce que vous pouvez voir dans les paramètres de la section.

Widgets

Le dernier élément des différences Elementor vs Divi en ce qui concerne les éléments réels sont les widgets.

Les widgets sont le contenu ou éléments (Par conséquent Elementor) que vous pouvez utiliser sur vos pages.

Ce sont des choses courantes comme du texte, des images, des vidéos, des galeries, des boutons, etc. L'ajout d'un widget est aussi simple que de faire glisser un widget de la barre latérale vers la page ou en cliquant sur le bouton plus pour faire apparaître le panneau de sélection du widget, puis en le faisant glisser et en le déposant .

Paramètres du widget - La sélection d'un widget changera la barre latérale pour afficher les options configurables pour cet élément particulier. Dans le gif ci-dessous, vous pouvez voir comment chaque élément affiche différentes options.

paramètres du widget

Vous pouvez également accéder à ce panneau en cliquant avec le bouton droit sur un élément et en sélectionnant le modifier [nom de l'élément] élément dans le menu contextuel.

Enfin, chaque widget a également le style et les onglets avancés auxquels vous pouvez accéder à partir du panneau de la barre latérale.

L'onglet de style change en fonction du widget sélectionné. Par exemple, les widgets d'image n'ont pas d'options de style de typographie, tandis que les widgets de texte n'ont pas de paramètres de dimension.

L'onglet avancé est le même que dans les autres éléments.

Découvrez tous les éléments disponibles

Widgets globaux

Il existe un type spécial de widget dans Elementor: widgets globaux. Vous pouvez enregistrer un widget en tant que widget global et l'utiliser n'importe où sur la page ou sur le site. Vous pouvez également les modifier tous à la fois dans un seul endroit.

Verdict:

Elementor a un plus grand choix d'éléments par rapport au Divi builder. Cependant, étant donné que les deux prennent en charge les plugins de widgets tiers, cela s'équilibre en quelque sorte.

Elementor fournit un moyen plus rapide d'ajouter des éléments à une page puisque vous pouvez simplement les faire glisser et les déposer de la barre latérale vers l'aperçu. Le Divi builder, d'autre part, vous oblige à cliquer plusieurs fois avant d'accéder à l'élément que vous souhaitez ajouter.

Tout comme notre section précédente de la comparaison Elementor vs Divi, c'est très proche, bien qu'Elementor puisse avoir un léger avantage dans celui-ci.

Maintenant, nous avons vu l'interface utilisateur et les éléments des deux plugins WordPress. Il est temps de voir et de comparer les options de style des constructeurs de pages Elementor et Divi.

Styling dans Elementor vs Divi

Divi et Elementor sont livrés avec des options de style approfondies et avancées qui conviennent à la fois aux programmeurs ou aux experts dans le domaine de la conception Web et même à ceux qui ne le sont pas.

Cependant, la façon dont Divi vs Elementor abordent le style est légèrement différente. Certains éléments disponibles dans l'un ne sont pas disponibles dans l'autre.

Dans cette section, nous allons examiner de plus près chacune de leurs options de style respectives. Notre élémentor vs Divi builder ne serait pas complet sans un examen approfondi de ces fonctions dans les deux constructeurs de pages.

Divi Builder Options de style

Double-cliquer sur un élément dans le générateur de page Divi, qu'il s'agisse d'une section, d'une ligne ou d'un module, fera apparaître le panneau des paramètres. Vous pouvez également accéder à ce panneau en survolant un certain élément jusqu'à ce qu'une barre d'action apparaisse, puis en cliquant sur l'icône d'engrenage.

Il existe trois onglets dans le panneau des paramètres, le contenu, la conception et les onglets avancés.

Le Divi builderLes options de style de peuvent être configurées via les onglets Conception et Avancé. L'onglet Conception vous permet de configurer la typographie, les ombres de boîte, les marges, l'animation, les filtres, etc. Ce sont des éléments qui peuvent être configurés via des curseurs et des nombres d'entrée.

Ils sont très faciles à utiliser même pour ceux qui ne sont pas des codeurs.

options de style pour divi

Pour les utilisateurs avancés ou pour ceux qui souhaitent plus de contrôle sur le style, il est possible d'utiliser l'onglet avancé. Ici, on peut ajouter leurs ID et classes CSS personnalisés, leur code CSS personnalisé, configurer la visibilité, etc.

Style réactif

Dans le Divi Builder, vous pouvez définir différents paramètres de style pour différents appareils.

Par exemple, vous pouvez définir la police d'un élément de texte comme Verdana et lui donner une taille de 20px sur les appareils de bureau et vous pouvez définir un autre paramètre pour mobile qui lui donne une police Times New Roman et une taille de 10px.

styles réactifs

Le Divi builderLes options de conception de permettent à tous les types d'utilisateurs de personnaliser leurs pages en fonction de leurs besoins.

Options de style Elementor

La sélection d'un élément dans le générateur de page Elementor modifie ce qui est affiché dans le panneau de la barre latérale pour refléter les options disponibles pour cet élément particulier.

Comme le Divi builder, tous les éléments d'Elementor ont trois onglets dans leur panneau de paramètres. Le premier onglet contient soit Contenu ou Mise en page, puis Style et Avancé sur les deuxième et troisième onglets respectivement.

Vous pouvez configurer le style d'un élément via les onglets Style et Avancé.

L'onglet Style vous permet de configurer différentes options de style telles que les couleurs d'arrière-plan, les bordures, la typographie, etc.

potions de coiffage elementor

L'onglet Avancé contient des options de style avancées telles que les marges, le code CSS personnalisé, les effets de mouvement, les paramètres réactifs, etc.

options de style avancées

Style réactif

Vous pouvez avoir des options de style distinctes pour différents appareils dans le générateur Elementor, tout comme Divi.

élément d'option de style réactif

Contrôle des options de style par défaut d'Elementor

Par défaut, après l'installation d'Elementor, le plugin de création de page appliquera automatiquement ses options de style pour remplacer celles de votre thème.

Vous pouvez désactiver cela en vous dirigeant vers Elementor > Paramètres à partir du tableau de bord WordPress et en vérifiant la désactivation des couleurs par défaut et la désactivation des polices par défaut.

Elementor utilisera désormais la police et les couleurs par défaut de votre thème au lieu des siennes.

paramètres elementor

Il existe également un onglet de style dans lequel vous pouvez configurer divers paramètres par défaut de base tels que les polices génériques par défaut, la largeur du contenu par défaut, etc.

Verdict:

Les deux plugins offrent un excellent ensemble d'outils et d'options de style qui s'adressent à tout le monde. Les occasionnels et les non-codeurs peuvent facilement définir leurs styles en utilisant les curseurs et autres outils de style que les deux plugins ont.

Les utilisateurs avancés et les concepteurs Web qui souhaitent plus de contrôle peuvent également profiter de l'un de ces deux plugins, car ils leur permettent tous deux d'ajouter leurs codes CSS personnalisés pour une capacité de conception supplémentaire.

Maintenant, nous avons fini de voir l'interface utilisateur, les éléments et les options de style. Il est temps de vérifier les modèles et comment les options d'Elementor vs Divi se comparent!

Modèles

Les modèles vous aident à faire vos pages beaucoup plus rapidement que d'avoir à tout concevoir à partir de zéro.

L'un des éléments clés des créateurs de pages et des thèmes de nos jours est la quantité et la qualité des modèles disponibles dans le cadre du produit. 

Jetons donc un coup d'œil à la richesse des modèles Divi vs Elemetor proposés par ces deux constructeurs de pages.

Elementor et Divi builder vous propose des centaines de modèles parmi lesquels choisir. 

Voyons comment fonctionnent les deux constructeurs de pages, Elementor vs Divi builder comparer quand il s'agit de modèles prêts à l'emploi disponibles.

Divi BuilderMises en page de

Le constructeur de pages Divi propose 122 packs de mise en page modèles de sites complets prédéfinis. Dans le jargon de Divi, on les appelle des mises en page.

Ils sont divisés en deux types: un pack de mise en page composé de plusieurs mises en page (plusieurs pages) avec le même thème et une seule mise en page (c'est-à-dire une seule page).

modèles

Les packs de mise en page contiennent plusieurs pages regroupées pour former un site de niche complet.

Par exemple, un pack contient des modèles pour la page d'accueil, la page à propos, la page de contact, etc., le tout suivant un ensemble unifié de conceptions ou de thèmes. Une mise en page unique n'est qu'un modèle pour une seule page.

Vous pouvez également créer et enregistrer vos propres modèles afin de pouvoir les réutiliser ultérieurement. Vous pouvez même les exporter pour pouvoir les utiliser sur un autre site.

Par exemple, vous pouvez créer une page de destination de service produit que vous pouvez ensuite charger à partir des mises en page et l'utiliser pour différentes promotions que vous pourriez exécuter.

Modèles Elementor

Les modèles d'Elementor sont divisés en deux types: les blocs et les pages.

La version gratuite permet aux utilisateurs d'accéder à plus de 40 blocs et plus de 30 pages, tandis que la version premium déverrouille plus de 50 widgets Pro supplémentaires et plus de 300 modèles Pro.

Voir la liste complète des modèles / thèmes Elementor disponibles

Nous avons également examiné un certain nombre de Thèmes et modèles Elementor ici.

Les blocs sont des modèles de section unique que vous pouvez insérer dans une page. Il y a des blocs pour

  • formulaires de contact,
  • boutons d'appel à l'action,
  • FAQ,
  • tableaux de prix,
  • portefeuilles,
  • entête,
  • prestations, etc

 

modèles elementor

Les modèles de page sont ce à quoi ils ressemblent: un modèle de page entier. Même si nous avons dit qu'il existe plus de 300 modèles de page disponibles pour les utilisateurs premium d'Elementor, vous voudrez peut-être vérifier ce qui est disponible aujourd'hui.

En effet, l'équipe Elemetor crée et ajoute constamment plus de modèles à la bibliothèque et nous ne pouvons pas suivre le flux constant de modèles Elementor publiés :-)

Pour les utilisateurs gratuits, les options sont réduites mais la sélection est toujours assez bonne.

modèles de page

Au fur et à mesure que la bibliothèque de modèles de création de page Elementor s'agrandit, vous pouvez vérifier les derniers ajouts en cliquant sur «nouveau» dans le coin supérieur gauche de l'interface de sélection de modèle de page.

Vous pouvez toujours enregistrer votre page dans votre bibliothèque de modèles afin de pouvoir les réutiliser plus tard. Elementor vous donne également la possibilité d'exporter vos modèles afin que vous puissiez les utiliser sur un autre site. 

Alors que l'Elementor et Divi builder Les plugins offrent une vaste sélection de modèles, à ce stade, nous pensons que le Divi builder offre beaucoup plus en termes de nombre.

De plus, Divi facilite la construction d'un site entier, grâce à ses packs de modèles.

Élémentor contre Divi Builder Gagnant des modèles : Divi Builder

Construction de thème

METTRE À JOUR: Dans la version précédente de cet article, seul Elementor avait une fonctionnalité de création de thème.

Avec la sortie de Divi 4.0, cette fonctionnalité n'est plus limitée à Elementor.

Le Divi Builder La mise à jour majeure 4.0, publiée en octobre 2019, visait à équiper le Divi builder avec de puissants outils de création de thèmes, permettant à ses utilisateurs d'utiliser des éléments, des modules et des fonctionnalités pour créer non seulement des pages statiques, mais également des mises en page dynamiques d'en-tête, de pied de page et de corps. En d'autres termes, la capacité de créer des thèmes complets.

Nous avons mis à jour cette section pour refléter les nouveaux changements et nous avons opposé les fonctionnalités de création de thèmes d'Elementor et de Divi les unes aux autres pour voir si ces dernières peuvent résister aux premières.

Générateur de thèmes de Divi

Une fonctionnalité relativement nouvelle de la Divi builder, le générateur de pages vous permet désormais de créer des modèles que vous pouvez utiliser pour remplacer la conception, la mise en page et même le comportement de l'en-tête, du pied de page et du corps de votre site Web.

Les fonctionnalités sont assez similaires à celles d'Elementor à bien des égards, il s'agit d'une fonctionnalité où le Divi builder rattrape Elementor.

Vous pouvez accéder au générateur de thèmes de Divi en allant sur Divi> Générateur de thèmes.

générateur de thème divi

À partir de là, vous pouvez créer un nouveau modèle, exporter un modèle ou importer un modèle à partir de sources externes.

L'un des inconvénients de cela, au moment de la rédaction de cet article, est qu'il n'y a aucun moyen d'importer des modèles de générateur de thème prédéfinis à partir du cloud. Vous devez télécharger un fichier JSON à partir d'une source externe et le télécharger pour importer un modèle prédéfini.

En parlant de modèles de création de thèmes prédéfinis, de nombreux packs sont disponibles gratuitement sur le site Divi builder développeurs eux-mêmes, que vous pouvez obtenir ici. Recherchez simplement des "packs de création de thèmes" dans leur barre de recherche et vous pourrez facilement les trouver.

De côté: Si vous souhaitez obtenir plus de ces packs, nous vous recommandons de visiter le Elegant Themes sur cette page-ci et abonnez-vous à leur newsletter. Ils envoient constamment (littéralement tous les jours) de nouvelles choses qui peuvent être utilisées avec le Divi builder, l'une des newsletters les plus précieuses auxquelles nous sommes abonnés.

Avec le générateur de thèmes, vous pouvez définir un modèle global qui remplacera l'aspect général de l'ensemble de votre site Web et vous pouvez également créer des modèles ciblés qui peuvent être appliqués à des articles, des pages et des parties spécifiques de votre site Web.

création d'un nouveau modèle

Lors de la création d'un nouveau modèle, le Divi builder vous demandera d'abord où vous voulez que le modèle soit appliqué. Vous pouvez choisir d'appliquer ou d'exclure l'application de vos modèles à des articles ou des pages spécifiques ou même à des balises et des catégories spécifiques et plus encore.

Une fois que vous avez décidé de l'endroit où vous souhaitez appliquer votre modèle, vous pouvez commencer à créer et à concevoir votre modèle. Si vous avez défini un modèle d'en-tête et de pied de page global, ils seront automatiquement ajoutés à votre nouveau modèle.

Vous n'aurez qu'à vous soucier de la création d'un nouveau modèle de corps. Bien sûr, vous pouvez éventuellement remplacer le modèle de corps par un modèle personnalisé si vous en avez besoin.

En cliquant sur l'un ou l'autre ajouter un corps personnalisé, ajouter un en-tête personnalisé or ajouter un pied de page personnalisé Les boutons ouvriront un petit menu contextuel vous permettant de choisir parmi diverses options telles que la sélection d'un modèle prédéfini ou la copie d'un modèle existant. En ce qui concerne les modèles prédéfinis, Divi a un vaste choix parmi lesquels choisir.

A partir de là, vous auriez l'habituel Divi builder outils et modules à votre disposition pour commencer à construire votre aménagement envisagé.

Générateur de thèmes d'Elementor

Vous pouvez accéder au générateur de thèmes Elementor via le tableau de bord WordPress et aller à Modèles > Thème Builder.

À partir de là, vous pouvez choisir la partie de votre thème que vous souhaitez créer. 

Actuellement, vous pouvez créer des modèles Elementor pour les pages, les sections, les fenêtres contextuelles, l'en-tête, le pied de page, les articles uniques, les pages WooCommerce et les archives.

créateur de thème

Vous utiliserez la même interface utilisateur que lors de la création de pages, mais cette fois, les éléments disponibles dans la barre latérale sont adaptés au modèle spécifique que vous essayez de créer.

Par exemple, vous trouverez ci-dessous le contenu de la barre latérale lors de la modification d'un modèle d'en-tête.

barre latérale du générateur de thème

Une fois que vous avez terminé de modifier un modèle de thème, vous pouvez choisir comment et quand le modèle sera affiché.

Pour cette partie, le Divi builder est un peu plus facile à utiliser que Elementor en raison de l'utilisation de cases à cocher pour choisir où vous souhaitez inclure ou exclure un certain modèle par rapport au fait de devoir cliquer sur le Add État et en cliquant sur le menu déroulant chaque fois que vous souhaitez ajouter une nouvelle règle.

Jamais leless, Elementor est toujours livré avec un contrôle fin qui est égal à la Divi Builder'S.

Vous pouvez choisir d'inclure et d'exclure vos modèles Elementor à l'aide de règles conditionnelles complexes. Par exemple, disons que nous avons un modèle appelé «A». Vous pouvez choisir d'afficher ce modèle si la page est dans la catégorie appelée «offres» et si l'auteur est «John Doe» comme ci-dessous.

Utilisé correctement et de manière créative, ce moteur de règles Elementor peut être un outil incroyablement puissant et utile. Il vous offre une flexibilité et des personnalisations à un niveau très granulaire. C'est suffisant pour voler la couronne dans la section de construction à thème.

Peu de constructeurs de pages ont une telle fonction et c'est un excellent différenciateur.

création de thème

Et là, vous avez le générateur de thème Elementor.

Gagnant de Elementor vs Divi Theme Builder: Elementor

La section suivante de notre article Elementor vs Divi explique comment leurs prix se comparent.

Prix

 

La décision entre Elementor et Divi Builder Honnêtement, tout se résume au prix.

L'un est tout à fait logique pour un groupe et a littéralement 0 de sens pour un autre. Comme «vous allumez des milliers de dollars en feu».

Sautons juste dedans:

 

Tarifs Elementor

 

prix élémentaire 

Le prix d'Elementor commence à 49 $ / an pour un site et va jusqu'à 999 $ / an pour 1,000 sites. Toutes les fonctionnalités et tous les extras sont inclus dans chaque plan.

Mais la raison pour laquelle il est si populaire est qu'il est livré avec un PLAN GRATUIT.

Et contrairement à presque tous les "faux outils freemium" qui vous donnent simplement une utilisation fonctionnelleless version gratuite donc vous êtes obligé de mettre à niveau, le plan gratuit d'Elementor est en fait suffisant pour créer de belles pages.

Sérieusement, vous pouvez créer de belles pages d'aspect professionnel à 100% gratuitement. Si vous voulez les bonnes choses, alors, bien sûr, vous devez mettre à niveau. Mais le plan gratuit comprend plus de 40 widgets et plus de 30 modèles.

C'est beaucoup.

Astuce Pro: Si vous avez plus d'un site, optez pour la licence Expert dès le départ. Si vous créez des sites Web pour vos clients et que vous souhaitez avoir un constructeur de pages, nous suggérons généralement d'opter pour la licence Expert, puis de facturer à chaque client le prix d'une licence avancée.

Cela vous permet d'atteindre le seuil de rentabilité après seulement 2 sites. À partir de là, vous obtenez un bonus de 99 $ de chaque client.

Cliquez ici pour le prix le plus bas sur Elementor

Divi Builder Prix

Prix ​​Divi

Contrairement à Elementor, Divi Builder n'a pas de version gratuite disponible, mais ils avoir une démo à laquelle vous pouvez accéder. Vous pouvez l'essayer vous-même avant de l'acheter. 

La tarification de Divi en fait une évidence pour les agences.

Nous avons travaillé avec Elegant Themes et avez eu accès à un rabais limité de 10 % sur le Divi Builder pour CollectiveRay visiteurs comme on peut le voir ci-dessous. Vu le prix, et notre remise qui n'est valable que jusqu'au Septembre 2021, nous vous recommandons vivement d'opter pour l'accès à vie - c'est une évidence.

Seulement 249 $ (224 $ avec ma réduction) vous donne accès à vie aux fonctionnalités, au support et à la communauté de Divi sur tous vos sites à perpétuité.

Cela signifie que vous obtenez:

  • Chaque thème qu'ils ont
  • Utilisation illimitée pour des sites Web illimités
  • 800+ packs de sites Web
  • Le constructeur de pages
  • Outils promotionnels
  • Outils de test

 

Et des dizaines d'autres fonctionnalités étonnantes pour seulement 224 $ à vie. Pas besoin de renouveler. Pas besoin de s'inquiéter des mises à jour (Plus à ce sujet ensuite). Pas de stress. Cliquez, payez et utilisez pour toujours. N'hésitez pas à choisir un autre constructeur de pages, mais ne vous plaignez pas lorsque vous dépensez des centaines de plus que nécessaire pour LESS Fonctionnalité.

Est-ce cher si vous avez 1 ou 2 sites? Oui. Est-ce incroyablement bon marché si vous avez des centaines de sites pour tous vos clients?

NON.

REMARQUE: Divi ne coûte que 80 $ / an avec ma réduction, mais si vous êtes une entreprise, vous économiserez de l'argent en achetant l'accès à vie maintenant. Si vous êtes en affaires depuis 10 ans, c'est 800 $. Si vous achetez un accès à vie maintenant, c'est 224 $. C'est une évidence.

Obtenez 10% de rabais sur Divi Builder jusqu'à Septembre 2021


Élémentor contre Divi Builder Prix Verdict:

Elementor est parfait pour les débutants à petit budget et les entreprises avec un seul site Web. Mais le modèle de tarification annuel vous coûtera des centaines, voire des milliers de dollars de plus au cours de la durée de vie de votre entreprise.

Le plan d'accès unique à vie de Divi est parfait pour les agences et les grandes opérations. Je dirai ceci cependant. Vous pourriez être une petite entreprise maintenant, mais qui sait dans 1, 3 ou 5 ans. Si vous ne disposez pas d'un accès à vie à des sites illimités, vous pourriez avoir du mal à évoluer.

Un mot d'avertissement: ne laissez pas votre site ouvert au piratage et ne risquez pas votre entreprise

Désolé, mais j'ai une autre petite histoire sur la façon dont j'ai essayé de prendre un raccourci et cela m'a presque coûté cher.

Cela s'est produit lorsque nous avons essayé d'éviter de payer un abonnement pour Elementor.

Nous avons pensé que ce serait une bonne idée pour nous d'opter pour un abonnement d'un an au niveau Plus, puis de ne pas le renouveler. Après tout, une fois le site mis en place, nous n'aurions plus besoin de mises à niveau et d'assistance, n'est-ce pas ??

MAL. Les mises à jour sont absolument essentielles!

Récemment, une vulnérabilité a été découverte dans Elementor Pro. 

Cette vulnérabilité a rendu les sites vulnérables aux hacks. 

Elementor l'a réparé immédiatement. Il y avait juste un problême...

Il s'avère que sans abonnement actif, nous n'étions éligibles à aucune mise à jour.

Nos sites sont donc devenus des canards assis. N'oubliez pas qu'à travers cette vulnérabilité, des sites non corrigés ont été attaqués et piratés.

Donc, pour économiser 100 $ en frais de renouvellement, nous avons presque perdu nos sites et un certain nombre de clients avec eux.

Par conséquent, un petit conseil. Ne laissez jamais votre abonnement expirer, que ce soit pour Elementor ou pour Divi (c'est pourquoi nous recommandons toujours un ABONNEMENT À VIE). 

C'est pourquoi si vous avez plus d'un site, optez toujours pour l'abonnement à vie! Cela vous fait gagner beaucoup de temps, d'argent et de stress.

 

Témoignages - Ce que disent les autres utilisateurs

Avec leur popularité, les deux Divi Builder et Elementor ont des milliers, voire des dizaines de milliers d'utilisateurs. La grande chose qu'il n'y a pas beaucoup de différence dans les notes d'Elementor vs Divi builder, ils sont tous deux très bien notés.

Par exemple, consultez les évaluations du constructeur de pages Elementor sur le répertoire WordPress:

évaluations gratuites du constructeur de pages elementor

Différentes personnes, des développeurs aux utilisateurs occasionnels ont eu de l'expérience avec l'un ou les deux et de nombreuses grandes personnalités WordPress ont leur propre opinion et leurs propres pensées en ce qui concerne ces plugins.

Nous pouvons trouver de nombreux avis et témoignages d'utilisateurs pour Elementor à partir du référentiel officiel de plugins WordPress. Le Divi builder, d'autre part, a de nombreux avis et témoignages dans Trustpilot.

Ce que les gens disent Divi Builder

Avec la Divi builder, les gens font toujours l'éloge de leur équipe de support, la plupart des critiques 4 et 5 étoiles mentionnent toujours à quel point leur support est excellent. Par conséquent, même si le Divi builder peut être un peu plus difficile à utiliser qu'Elementor, leur équipe de support est là pour vous soutenir.

examen 1

"Elegant Themes Divi Builder et le thème est génial. J'ai cherché haut et bas un thème avec un éditeur/constructeur de pages frontal solide, gaspillant de l'argent sur de nombreux thèmes de mauvaise qualité. Quand j'ai finalement trouvé Divi, je savais que c'était le thème pour moi et je l'utilise maintenant dans mon agence de marketing pour créer les sites Web de clients parce que cela fonctionne si bien. Ils ont également un support formidable, compétent et prêt à vous aider avec toute personnalisation de site Web à laquelle vous pouvez penser.

examen 2

« J'ai été membre de Elegant themes depuis quelques années maintenant et je l'aime vraiment. J'ai créé des sites Web impressionnants pour les clients en utilisant leurs thèmes et plugins brillants et je ne me vois jamais utiliser autre chose. Le service client est sans égal, ils répondent rapidement et les conseils sont totalement fiables. Excellente entreprise.

Ce que les gens disent d'Elementor

Les utilisateurs d'Elementor louent le fait qu'il s'agit de l'un des meilleurs plugins de création de pages gratuits sur le marché et la facilité d'utilisation que même les novices n'ont aucun problème à l'utiliser.

examen 3

"Je suis un nouvel utilisateur du plugin, mais je ne saurais trop insister sur la facilité de configuration du plugin et les fonctionnalités qui permettent de gagner du temps!"

examen 4

"Nouveau sur WP mais Elementor est un super constructeur de pages. Il rend vraiment le développement Web plus rapide et beaucoup less frustrant. De plus, il fait du beau travail. L'une des fonctionnalités que j'aime vraiment vraiment est la possibilité de revenir aux versions précédentes lorsque moi ou l'ordinateur gâche quelque chose. Vous pouvez revenir à la modification précédente, à toute modification de cette session ou à toute modification enregistrée. J'adore le concept de bloc ! Pourrait utiliser plus de modèles de blocs. La création de modèles Elementor est si facile à faire et à utiliser. J'aimerais qu'il y ait un widget PHP. Le défi consiste à suivre toutes les nouvelles améliorations au fur et à mesure qu'elles les déploient fréquemment. Toujours essayer d'améliorer ce bon produit. Continuez votre bon travail les gars!"

Conclusion: Elementor ou Divi?

Nous arrivons à la fin de notre Elementor vs Divi builder examen, mais il y a peu de choses que nous aimerions revoir. Lequel devrions-nous choisir ou devrions-nous opter pour quelque chose de complètement différent, comme Beaver Builder?

Divi Builder et Elementor offrent tous deux une grande variété de fonctionnalités qui peuvent vous aider à créer facilement de belles pages. Les deux constructeurs de pages se sont concentrés sur la facilité d'utilisation.

Bien qu'ils présentent de nombreuses similitudes, leurs interfaces utilisateur sont assez différentes. Elementor offre l'accessibilité en ayant une barre latérale contenant des outils et des options tandis que Divi opte pour la simplicité en affichant le moins d'éléments d'interface utilisateur possible.

Quant au nombre de modèles par défaut, le Divi builder offre plus d'options par rapport à Elementor, mais les deux plugins ont une option d'importation et d'exportation, vous permettant d'ajouter des dizaines de modèles tiers provenant d'autres sources.

En termes de prix, Elementor est plus cher que le Divi builder puisque ce dernier a une licence à vie et une utilisation illimitée du site.

Elementor, en revanche, a un prix maximum de 199 $ par an, vous permettant de l'utiliser pour mille sites. Cependant, Elementor propose une version gratuite qui offre toujours une puissante suite d'outils et même des modèles qui vous permettent de créer de belles pages.

Propreté du code

En ce qui concerne la propreté du code, Elementor laissera un code HTML propre et valide si vous le désactivez. Le Divi builder, d'un autre côté, laissera sur les pages des codes abrégés qui posent un problème à résoudre, ce qui vous bloque un peu.

Cependant, étant donné qu'ils ont une option de licence à vie, c'est un peu justifié. Nous pourrions en déduire qu'ils souhaitent que vous liez vos sites à l'écosystème Divi en achetant leur option de licence à vie.

Performance

Jusqu'à récemment, il n'y avait pas grand-chose à choisir entre Elementor et Divi en termes de performances. Tout a changé avec le dernière mise à jour de Divi.

Une nouvelle mise à jour du thème WordPress signifie qu'il est désormais plus léger et plus rapide que jamais.

L'équipe a beaucoup changé sous le capot. Le CSS a été réduit de 94%, Divi utilise désormais du CSS dynamique et des styles intelligents pour charger uniquement le CSS de la page en cours de visualisation et les duplications ont été réduites à tous les niveaux.

Les autres améliorations de performances dans Divi incluent l'introduction de PHP dynamique pour rationaliser le traitement, les optimisations JavaScript, le report de la feuille de style Gutenberg, la mise en cache du report jQuery pour les polices Google et les feuilles de style en ligne.

Divi marque désormais 100 sur Google PageSpeed ​​Desktop et 99 sur Google PageSpeed ​​Mobile !

Sécurité

En ce qui concerne la sécurité, Elementor a eu plusieurs graves les questions de sécurité dans le passé, mais ils ont été atténués et résolus facilement. Divi builder a également connu un grave problème de sécurité en janvier 2020.

Le Divi builder et le thème a connu une vulnérabilité d'injection qui a nécessité une mise à jour.

Cela nous amène à une conclusion simple, quelle que soit la taille du fournisseur, les vulnérabilités sont toujours possibles. Le point crucial est de savoir comment le vendeur reacts à une telle vulnérabilité. Ces deux fournisseurs ont réagi avec beaucoup de maturité à la vulnérabilité.

Capacité de construction de thème

Lorsque cet article a été écrit pour la première fois, le Divi builder n'avait toujours pas de fonctionnalité de création de thème. nous recommandions donc auparavant Elementor si vous aviez besoin de capacités de création de thème.

Mais quelle est la situation ces jours-ci en ce qui concerne la construction de thèmes de Divi vs Elementor?

Bien qu'il y ait eu des plugins tiers pour le Divi builder auparavant, Elementor avait toujours l'avantage dans ce domaine. En effet, une fonctionnalité native est presque toujours meilleure pour l'intégration et la compatibilité. Les extensions tierces peuvent rarement rivaliser avec une fonctionnalité native.

Mais tout a changé lors de la sortie de Divi 4.0. La mise à jour a donné le Divi builder la fonctionnalité de création de thème si nécessaire.

À ce stade, les deux Divi builder et Elementor sont livrés avec le même ensemble de fonctionnalités.

En termes de personnalisation et de contrôle, Divi et Elementor il y a très peu de différence entre les deux.

Les deux offrent de puissantes fonctionnalités de création de thèmes avec des commandes précises vous permettant de créer et de concevoir votre site Web comme vous le souhaitez. Des pages statiques personnalisées aux en-têtes, aux pieds de page et à la disposition du corps personnalisés, vous pouvez tous les créer!

Alors, qui gagne cet Elementor vs Divi builder Comparaison?

Il y a une chose qui fait Divi builder le meilleur produit dans l'ensemble et prend l'avantage : le thème Divi. Divi se présente sous deux formes : un thème et un plugin. Vous utiliseriez le plugin si vous souhaitez utiliser le Divi builder avec des thèmes tiers. Sinon, vous choisiriez d'utiliser le thème.

Pourquoi est-ce important? Intégration et compatibilité.

Si vous optez pour le thème, vous n'aurez aucun problème de compatibilité.

Elementor a son propre thème, mais quand vous le comparez au thème Divi, il n'y a absolument aucune comparaison.

Le thème «Hello Elementor» est simple et est destiné aux utilisateurs avancés et aux développeurs afin qu'ils puissent développer davantage dessus. Si vous voulez un thème Elementor riche en fonctionnalités, vous devez installer un produit tiers.

Vous pourriez envisager d'utiliser Astra dans ce cas - un thème Elementor.

Et bien qu'il existe de nombreux thèmes développés avec Elementor à l'esprit, de nouvelles mises à jour et fonctionnalités dans Elementor ou dans le thème pourraient potentiellement briser la compatibilité et l'intégration.

Vous devrez attendre que les développeurs corrigent les bogues et incompatibilités qui pourraient survenir. Et comme pour toutes les incompatibilités, il y a une légère chance de perdre tout ou partie de votre travail existant.

Ne vous méprenez pas, les deux sont une solution solide pour la création de thèmes, mais nous ne pouvons pas ignorer le fait que Divi est un thème riche en fonctionnalités reçues par les enchanteurs et permettent aussi un constructeur de pages, donc pour cela, Divi gagne par une petite marge dans la catégorie construction à thème.

Différences majeures dans la création de thèmes

L'une des principales différences entre l'utilisation d'Elementor et la fonctionnalité de création de thème de Divi est l'éditeur. Il y a toute une différence dans l'expérience utilisateur, finalement, celle que vous préférez se résume à l'expérience et à vos préférences personnelles.

Lors de la modification d'un en-tête, d'un pied de page ou d'un modèle de corps personnalisé dans le Divi builder, l'éditeur se concentrera uniquement sur cette zone particulière de votre site Web. Par exemple, lorsque vous modifiez un en-tête personnalisé, la seule chose qui sera visible sur votre écran n'est rien d'autre que la zone d'en-tête.

éditeur d'en-tête personnalisé divi

En utilisant Elementor, vous aurez une vue de l'ensemble du site Web, que vous modifiez un en-tête, un pied de page ou une mise en page du corps.

Vous pouvez voir ci-dessous qu'en dehors de la zone d'en-tête, la zone de contenu est également affichée. Si vous faites défiler plus bas, vous verrez également la zone de pied de page (ils sont cependant en mode lecture seule).

éditeur d'en-tête personnalisé elementor

À cet égard, nous pouvons dire que la Divi builder se concentre sur l'édition sans distraction lors de l'utilisation d'Elementor, vous voyez l'ensemble de l'image à tout moment.

Nous ne connaissons pas de moyen de basculer entre les modes d'édition d'aperçu sans distraction et pleine page sur l'un ou l'autre constructeur de page, donc si vous avez une préférence, cela pourrait affecter votre choix final.

Il s'agit d'une amélioration que les constructeurs de pages Elementor et Divi peuvent éventuellement ajouter: laisser aux utilisateurs le choix entre des options d'édition de prévisualisation sans distraction et pleine page.

Lire la suite: WP Bakery vs Divi - une comparaison complète.

Foire aux questions

1. Qu'est-ce que Divi?

Divi est à la fois un constructeur de pages et une combinaison de thèmes WordPress. Il s'agit d'un produit polyvalent complet qui peut être utilisé pour créer tout type de site Web à partir de zéro, qu'il s'agisse d'un site Web de commerce électronique, de niche ou spécifique à un secteur ou d'un portefeuille. Il est produit par Elegant Themes et est l'un des produits WordPress les plus populaires et a été vendu plus de 700,000 XNUMX fois.

2. Qu'est-ce que Elementor?

Elementor est l'un des constructeurs de pages WordPress les plus populaires. Bien qu'il ne s'agisse pas d'un thème, il possède également de puissantes capacités de création de thèmes. En règle générale, Elementor est utilisé avec un thème pour créer des publications et des pages personnalisées à l'aide de fonctionnalités de glisser-déposer. Elementor a une version gratuite et payante. Grâce à la version gratuite, et au cours des dernières années, il a des millions d'installations actives.

3. Quelle est la différence entre Divi et Divi builder? 

Divi est le thème WordPress, Divi builder est l'éditeur de glisser-déposer ou le constructeur de pages qui fait partie intégrante du thème Divi. En réalité, vous n'avez pas besoin de faire de distinction entre eux, car ils fonctionnent en couturelessment ensemble.

4. Puis-je utiliser Divi sur plusieurs sites?

Oui, une fois que vous achetez Divi au prix de 89 $, vous pouvez l'utiliser sur des sites illimités, mais vous bénéficierez d'un support et de mises à jour pendant 1 an seulement. Il existe une version à 249 $ qui propose des sites illimités à vie, un support et des mises à jour illimités.

5. Elementor est-il le meilleur constructeur de pages?

Elementor est le meilleur constructeur de pages actuellement disponible. Bien que cela soit subjectif et que cela puisse ne pas convenir à tout le monde, nous croyons fermement qu'aucun constructeur de page ne peut à lui seul correspondre à ses fonctionnalités. Bien sûr, cela ne signifie pas qu'il convient à tout le monde. Divi avec son ensemble de générateur de thème + page est également une excellente option pour de nombreuses personnes.

6. Divi est-il meilleur que Elementor?

Ça dépend. Pour certaines personnes, qui ne veulent pas acheter un thème et un constructeur de page séparés, Divi peut donner plus de valeur. Si vous prévoyez de créer un seul site Web, nous pensons que Divi est un excellent choix. Si vous envisagez de créer plusieurs sites, ou si vous êtes développeur ou concepteur, Elementor pourrait être meilleur car il est compatible avec plus de thèmes.

7. Divi et Elementor fonctionneront-ils avec Gutenberg?

Oui, Divi et Elementor fonctionnent bien avec Gutenberg. 

Élémentor contre Divi Builder: Dernières pensées

Alors, quel est le verdict final en ce qui concerne le constructeur de pages Divi vs Elementor? 

En fin de compte, Divi et Elementor sont d'excellents constructeurs de pages. Cela dépend de votre entreprise et de vos objectifs.

Si vous avez besoin du constructeur le plus simple pour un site unique ou si vous avez besoin d'un plan GRATUIT, choisissez Elementor.

Si vous êtes une agence avec des tonnes de sites et que vous avez besoin de créer des centaines de pages, choisissez Divi. Il y a une raison pour laquelle toutes les agences et entreprises sérieuses utilisent l'accès à vie de Divi: c'est la meilleure valeur de l'entreprise.

Merci d'avoir lu! Bonne construction!

 

Obtenez Divi maintenant   Obtenez Elementor maintenant

A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...