Le thème Divi d’Elegant Themes pour réaliser son site sur mesure !

Le thème Divi d’Elegant Themes pour réaliser son site sur mesure !
Construire n’importe quoi visuellement
Divi est propulsé par Divi Builder, un éditeur frontal extrêmement rapide et incroyablement intuitif, unique en son genre. Cela va changer votre façon de construire des sites Web pour toujours.

Conception en temps réel
Lorsque vous modifiez votre page, tout est mis à jour instantanément sous vos yeux. Concevez instantanément!

Personnaliser tout
Chaque élément est entièrement personnalisable. Ajustez les polices, les couleurs, la taille et l’espacement et appliquez même du CSS personnalisé.

Organiser avec facilité
Ajoutez une nouvelle ligne, choisissez entre différents types de colonnes et tout s’agrège parfaitement de manière automatique.

46 éléments de contenu
Divi est livré avec 46 éléments de contenu différents. Mélangez, faites correspondre et créez à peu près tout ce que vous pouvez imaginer.

Peu à pas de chargement
Le constructeur Divi est incroyablement rapide. Il ne nécessite aucune actualisation des pages et presque aucun chargement d’aucune sorte.

Il suffit de cliquer et taper
Pas besoin d’ouvrir un panneau de paramètres pour ajouter du contenu textuel. Cliquez simplement sur votre page et commencez à taper!

Édition réactive
Profitez des aperçus réactifs en direct et appliquez des modifications personnalisées à des points d’arrêt mobiles spécifiques.

Éléments globaux
Synchronisez les éléments globaux sur plusieurs pages. Mettez-les à jour une fois et ils seront mis à jour partout. Idéal pour les bas de page!

Import & Export
Enregistrez les mises en page dans votre bibliothèque pour une utilisation ultérieure. Importez, exportez, partagez et téléchargez des mises en page à partir du Web.

Premade Layouts
Lancez votre processus de conception en utilisant l’une des 20 configurations prédéfinies livrées avec le constructeur.

Que comprend la licence Divi de ElegantThemes ?

Avec le thème Divi, vous pourrez utiliser:

  • le thème Divi: le thème principal d’ElegantThemes, celui utilisé le plus souvent par les agences web. –
  • le thème Extra: un thème « magazine ». Que vous ayez un blog personnel ou un très gros site de médias en ligne, Extra peut être adapté à vos besoins.
  •  les 86 autres thèmes WordPress de ElegantThemes: vous pouvez utiliser n’importe quel autre thème sur cette plateforme. Attention, ces 86 autres thèmes ont pris quelques rides après la sortie du thème Divi , ne vous attendez pas à des thèmes incroyables. Mais vous pouvez toujours les tester et les utiliser si vous le souhaitez. 
  • le plugin Bloom: Un super plugin d’OptIn qui vous permettra de collecter les adresses électroniques d’internautes. Mettez votre site Web au travail et transformez vos visiteurs en suiveurs fidèles avec Bloom.
  • le plugin Monarch: Le meilleur plugin de partage de médias sociaux pour WordPress. Les médias sociaux sont l’élément vital de la survie d’Internet et le partage social vous permet d’exploiter cette activité et de l’utiliser comme une force positive pour votre entreprise.
  • le plugin Divi Builder: Divi Builder est un générateur visuel de page glisser-déposer pour WordPress qui fonctionne avec tous les thèmes WordPress. Le plug-in Divi Builder prend la technologie de création de pages visuelles qui a fait du thème Divi un grand succès, et le conditionne comme un plug-in autonome que vous pouvez utiliser avec n’importe quel thème. Construisez n’importe quoi, personnalisez tout et faites tout à l’aide d’une interface de conception visuelle intuitive. 
  • Plus de 100 packs de mises en page: Divi Builder vous offre des configurations de page tout-en-un que vous pouvez installer en 1 clic ! 
  • Au total, ce sont plus de 600 mises en page (layouts) répartis en 80 packs!
Obtenez le thème Divi maintenant!
Combien coûte le thème Divi?

Quel est le prix de Divi ? 

En souscrivant pour une licence divi, vous aurez non seulement le thème divi mais tout ce que nous avons énoncé ci-dessus..

Tous ces thèmes et plugins seront utilisables sur un nombre illimité de sites, quelle que soit la licence choisie!

Ce qui différencie le prix c’est la durée de votre licence:

La licence annuelle à 89 $

La licence annuelle de ElegantThemes vous donne à tous les thèmes WordPress, aux plugins ainsi qu’aux 600 mises en pages à télécharger en 1 clic … pour 89 $ par an.
Avec un nombre illimité d’installations.

La licence LIFETIME à 249 $

C’est exactement identique à la licence annuelle, sauf que vous ne payerez qu’une seule fois votre licence et qu’elle sera utilisable à vie sans renouvellement et coût supplémentaire.

DIVI WOOCOMMERCE

Divi Plugin Woocommerce: Générateur de produit WooCommerce

La popularité de WooCommerce pour WordPress ne fait aucun doute. Même avec sa popularité, la conception de la page produit WooCommerce est limitée. Même avec des thèmes tels que Divi et Extra, rien ne peut être fait pour changer la mise en page. Heureusement, il existe plusieurs plugins tiers conçus pour Divi qui font exactement cela.

WC Product Builder de DiviKingdom est l’un de ces plugins. Il fournit chaque élément de produit WooCommerce sous forme de module Divi (20 modules Divi au total), ajoute 14 codes abrégés pour vous permettre de placer des éléments WooCommerce dans des modules Divi sur la page du produit, et ajoute le Divi Builder aux pages de produit afin de créer pratiquement tout type de produit. de la description du produit que vous pouvez imaginer. 

Installation du générateur de produit WC                             

Téléchargez et activez le plugin comme d’habitude. Si WooCommerce n’est pas déjà activé, il vous avertira de l’activer.

Dans le menu du tableau de bord, accédez à Paramètres , Générateur de produits WC .

Paramètres généraux et codes courts du générateur de produit WC

Dans l’onglet Paramètres généraux, vous pouvez choisir la page de disposition du produit par défaut dans une liste déroulante. Ce sont des mises en page dans votre bibliothèque Divi. Cela vous permet de créer une mise en page prédéfinie avec Divi Builder à définir comme configuration par défaut. Si vous le souhaitez, vous pouvez remplacer la présentation par défaut pour des produits spécifiques en choisissant une nouvelle présentation sur la page du produit.

Assurez-vous de sélectionner Activer pour Divi Builder pour Description du produit. Cela vous permet d’utiliser Divi Builder pour créer des mises en page dans la zone de description du produit de l’éditeur de produits WooCommerce.

L’onglet Codes abrégés fournit une liste de 14 codes abrégés pour vous permettre de copier et coller des éléments Woocommerce tels que des descriptions et des images dans la zone de contenu des modules Divi tels que du texte, des curseurs, des onglets, des bascules, etc. page pour obtenir le shortcode.

Utilisation de WC Product Builder sur les publications de produit WooCommerce

Quelques nouvelles fonctionnalités sont ajoutées à la page du produit:

– Choisissez la disposition du produit
– Image de couverture du produit

Si vous l’avez activé, Divi Builder est automatiquement ajouté à l’éditeur de produits WooCommerce, ce qui vous permet d’utiliser Divi Builder pour créer une mise en page pour la zone de description du produit. Les présentations des produits sont construites dans la bibliothèque Divi. Vous pouvez utiliser la valeur par défaut ou choisir une nouvelle mise en page dans la liste déroulante.

Construire un constructeur de produit WC Description du produit

La zone de description de produit standard utilise l’éditeur TinyMCE. L’image ci-dessus montre la description standard.

Ceci est la zone de description dans la page du produit. D’autres contenus, tels que des images, peuvent être ajoutés. Bien entendu, beaucoup plus peut être fait avec Divi Builder.

Nous avons créé une mise en page avec Divi Builder et ajouté un curseur.

La zone de description affiche maintenant la mise en page. Nous avons également ajouté un arrière-plan et modifié le texte en clair.

Modules constructeur de produit WC

WC Product Builder ajoute 20 nouveaux modules à Divi Builder pour vous aider à créer des pages de produit personnalisées. Chaque élément WooCommerce est un module distinct, vous permettant de concevoir une mise en page en utilisant uniquement les éléments souhaités et en les plaçant où vous le souhaitez. Les modules ont des icônes uniques, ce qui les rend faciles à trouver en un coup d’œil.

Construire une structure de générateur de produit WC dans la bibliothèque Divi

Nous avons construit une structure dans la bibliothèque Divi à l’aide des modules WooCommerce et Divi. Sur la page Produit WooCommerce, nous sélectionnerons la mise en page dans la liste déroulante.

La mise en page que vous avez créée apparaîtra à la place de celle par défaut. Il s’agit en fait d’une modification de la démo n ° 1; nous n’avons donc pas eu à créer le style ou une grande partie de la mise en page. Comme toute bonne mise en page, les démos permettent de gagner du temps.

Démos de constructeur de produit WC

Utilisation de codes de produit WC Builder avec des modules Divi

Les codes courts vous permettent d’utiliser des modules WooCommerce au sein de modules Divi classiques sur les pages de produits et les présentations. Cela ouvre certaines possibilités de conception, vous permettant de placer des produits dans des onglets, des curseurs, des bascules, des accordéons, etc.

Les codes abrégés s’appliquent uniquement au produit pour cette page de produit. Vous ne pouvez donc pas les utiliser sur des pages, des publications ou des widgets classiques.

Licence, documentation et où acheter

La documentation est fournie sur le site Web du développeur sous la forme d’une série de billets de blog permettant de répondre aux questions et de vous aider à démarrer.

Le plugin peut être acheté sur le site Web du développeur ou sur BeOnGo-store

Thèmes WordPress Premium et plugins WordPress pour un prix dérisoire ….

Que diriez-vous d’obtenir des Thèmes WordPress Premium et des plugins WordPress gratuitement ou pour un prix dérisoire ….

Découvrez les plateformes GPL

Si vous ne le saviez pas, WordPress est un logiciel sous licence GPL open-source. Cette licence régit ce que vous pouvez et ne pouvez pas faire avec WordPress. Bien que la licence GPL vous permette de réutiliser, modifier et redistribuer WordPress à des fins personnelles et commerciales, elle vous oblige à publier votre travail dérivé sous la même licence. Tous les plugins et thèmes WordPress sont également régit sous la même licence. Cela signifie que vous êtes libre de modifier, de réutiliser et même de redistribuer tous les plugins WordPress gratuits et premium que vous achetez. La seule limitation est que vous devrez publier votre œuvre dérivée sous la même licence. Bien que la modification et la redistribution d’un plugin ou d’un thème développé par quelqu’un d’autre ne soit pas illégale, elle peut être considérée comme contraire à l’éthique par certaines personnes (en particulier les développeurs) dans la communauté WordPress. Ces marketplaces sont également connus sous le nom GPL dans la communauté WordPress. La raison pour laquelle ces plateformes existent est que tout le monde ne peux pas toujours se permettre d’acheter des thèmes WordPress Premium ou des plugins très onéreux. Surtout que l’on est pas toujours sur que le thème ou le plugin correspondra exactement à ce dont on a besoin. Ces marketplaces ne développent ni ne mettent à jour aucun plugin qu’ils vendent eux-mêmes, ce qui leur permet de vendre les produits à un coût beaucoup moins élevé que si vous les achetiez chez le développeur original. Bien qu’il soit tout à fait légal d’obtenir une copie des plugins et des thèmes de ces magasins, c’est à vous de décider si c’est éthique ou non : Quelque chose à garder à l’esprit cependant : Lorsque vous publiez un produit avec une licence GPL, vous dites spécifiquement qu’il est acceptable de vendre ou de donner votre produit gratuitement. C’est ce que signifie la licence, donc ce n’est pas contraire à l’éthique parce que le titulaire de la licence vous a expressément dit qu’il avait le droit de le faire. Dans cet article, vous découvrirez certaines Marketplace GPL les plus réputés où vous pouvez accéder à des thèmes et plugins populaires à des prix très réduits.
GPL Chimp propose plus de 300 plugins WordPress, thèmes et extensions WooCommerce pour un abonnement mensuel récurrent de 15 $. Vous pouvez également acheter des plugins individuellement à partir de 10 $ par an. Leur site Web annonce qu’ils ont plus de 2000 membres payants. Leur collection de plugins WordPress consiste principalement en extensions WooCommerce. La collection de GPL Chimp comprend des plugins populaires tels que les abonnements WooCommerce, Google Analytics Pro, Gravity Forms et Backup Buddy.
BEonGO-Store est un site Français en ligne depuis janvier 2018. Ils proposent plus de 400 thèmes et plugins WordPress GPL Premium. Leur adhésion commence à seulement 10 € et vous pouvez, comme indiqué sur leur site internet, annuler à tout moment. Ils offrent également un plan mensuel pour un paiement ponctuel de 49 €. Ils mettent à jour les fichiers de plugins et de thèmes sur leur site dès qu’une nouvelle mise à jour est publiée par l’auteur d’origine, en raison de leur politique d’utilisation équitable. Ils offrent tous les jours des thèmes et des plugins WordPress très populaires.
Theme Canal vend des plugins et des thèmes premium individuellement à partir de 8 $. Leur abonnement premium commence à 15 $ par mois avec des frais d’inscription uniques non récurrents de 5 $. Leurs offres incluent des plugins WordPress populaires tels que Gravity Forms, Affiliate WP, Beaver Builder, Coming Soon Pro et Advanced Custom Fields Pro. L’offre de Theme Canal comprend également des extensions premium WooCommerce telles que WooChimp, le plug-in 2Checkout Integration et les images WooCommerce 360.
96Down propose plus de 1600 thèmes et plugins WordPress premium pour seulement 18 USD par mois que vous pouvez utiliser sur un nombre illimité de sites Web WordPress. Leur site Web annonce qu’ils ont plus de 3700 membres. Ce fournisseur est en ligne depuis 2012 et est l’un des plus anciens. Leurs offres incluent des plugins premium populaires tels que Elementor Pro, Yoast SEO Premium et Gravity Forms. Ils téléchargent les mises à jour nouvellement publiées des thèmes et des plugins sur leur site .

En conclusion


Si vous débutez en tant que blogueur et que vous ne voulez pas dépenser plusieurs centaines d’euros simplement pour tester un thème ou un plugin, acheter des thèmes ou plugins auprès de l’une de ces Marketplaces peut vous aider à économiser beaucoup d’argent.  La plupart de ces Marketplaces n’offrent aucun type de support pour les mises à jour automatiques. Cela signifie que vous devrez installer manuellement les mises à jour de plugin que vous aurez téléchargé depuis leur site puis en les installant vous-même. Si vous avez déjà acheté un plugin auprès d’un de ces fournisseurs ou envisagez de le faire, nous vous recommandons aussi d’acheter des plugins et des thèmes auprès de l’auteur original après l’avoir essayé pour aider les développeurs et pour avoir accès au support client, si vous en avez besoin. Qu’il soit ou non contraire à l’éthique de vendre des plugins développés par une tierce partie, c’est à vous de décider. Mais selon la loi, ce n’est pas le cas – le développeur de plugins et de thèmes choisit d’offrir ses produits sous licence GPL qui donne spécifiquement aux gens la permission de revendre ou de donner leurs produits s’ils le souhaitent.

Comment créer une grille d’images responsive avec Divi Builder et le module Call to Action

Le constructeur de page Divi a quelques modules intégrés fantastiques qui utilisent des affichages de grille, y compris la grille de portfolio, la grille de blog et la grille de la galerie. Mais parfois, vous pouvez souhaiter afficher des liens vers des pages sélectionnées de votre site plutôt que du contenu généré automatiquement. Vous pouvez facilement utiliser le module d’image Divi, mais c’est mieux de pouvoir inclure un lien de bouton, afin que les visiteurs comprennent que l’image qu’ils peuvent voir est aussi un appel à l’action cliquable. Vous pouvez utiliser un plugin, comme Essential Grid , pour réaliser une grille d’image avec des boutons, mais il est préfèrable ne pas avoir à ajouter un plugin à 26 € quand on n’en a pas besoin. Au lieu de cela, nous allons créer la grille ci-dessous en utilisant le module Divi Call To Action.
D’abord, ajoutez une section spéciale à votre page. Pour recréer la grille, choisissez la disposition tiers / deux tiers.
Commencez par sélectionner l’onglet Avancé de la section spécialisée et cochez la case Égaliser les colonnes et définissez la largeur de gouttière personnalisée sur 0. Assurez-vous également de le faire pour chacune des sous-sections jaunes ainsi que tous les paramètres de colonne de la section et sous-sections.
Maintenant, ajoutez une deuxième rangée avec deux colonnes à la zone de droite. Ajoutez votre premier module Appel à l’action. Nous allons d’abord personnaliser ce module, puis le dupliquer pour l’utiliser dans les autres zones du module.
Dans l’onglet Paramètres généraux de votre nouveau module Appel à l’action, ajoutez un lien et le texte de votre bouton puis centrez votre texte si vous le souhaitez, ce qui centrera également le bouton.
Dans l’onglet Conception avancée, ajoutez l’image choisie à la zone de l’image d’arrière-plan. Si vous souhaitez avoir un espace entre vos images de grille, vous pouvez utiliser l’outil de bordure. Enfin, définissez toutes les marges à 0px et le remplissage personnalisé à la hauteur désirée dans les cases supérieure et inférieure. Vous devrez peut-être jouer avec les paramètres de hauteur jusqu’à ce que vous soyez heureux.
Pour éviter le remplissage en arrière-plan et pour centrer verticalement les boutons, ajoutez le CSS suivant à l’onglet CSS personnalisé dans les zones affichées. background-size: inherit; padding-bottom: 0px;
A ce stade, vous devriez avoir une seule image, stylisée et prête à être dupliquée. Copiez-la dans les zones de la colonne de droite, de sorte que vous ayez un module d’appel à l’action dans chacune d’elles. Pour obtenir une grille uniforme, je place le padding haut et bas pour la section à 150px et pour les deux carrés inférieurs, à 132px. Cela ressemble à un nombre aléatoire, non? Vous pourrez avoir besoin de jouer avec les paramètres de padding pour obtenir une grille parfaitement uniforme selon vos images et vos désirs. Une belle touche finale est de changer les paramètres de padding pour tablette et mobile pour donner une hauteur uniforme aux modules une fois que le point d’arrêt de la tablette est entré. J’ai trouvé que 220px pour tablette et 150px pour mobile produisaient même des carrés pour les versions mobiles. Vous avez maintenant une grille finie!
Vous voulez un raccourci? Téléchargez ma mise en page de grille résponsive pour vous donner une longueur d’avance. Pour importer ce fichier .json, accédez à l’adminsitration de WordPress, à Divi> Divi Library et cliquez sur le bouton Importer / Exporter en haut de l’écran.

Comment créer un bouton large

Créer un bouton action large avec Divi

Avec seulement quelques ajustements et quelques changements de couleur, vous pouvez facilement donner vie à ce style de bouton action large et le faire correspondre aux couleurs de votre site Web. Pour cet exemple, nous utilisons une orange vif qui attirera l’attention de l’utilisateur et l’encouragera à cliquer. Nous avons également augmenté la largeur du bouton, que nous avons centré et placé un joli survol sur l’effet inverse. Pour créer ce look, j’ai fait ce qui suit: Réglages généraux:
  • Texte du bouton: Faisons-le!
  • Alignement des boutons: Centre
Paramètres de conception avancés:
  • Activer « Utiliser les styles personnalisés pour le bouton: »
  • Taille du texte du bouton: 20
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # ff9b1f
  • Largeur de la bordure du bouton: 1
  • Rayon de bordure de bouton: 10
  • Bouton Police: Monterrat
  • Icône bouton modifié à la double flèche droite
Maintenant, passez la souris sur les paramètres:
  • Bouton Icône Couleur: # ff9b1f
  • Couleur du texte du bouton Hover: # ff9b1f
  • Couleur de fond de bouton Hover: #ffffff
  • Bouton Hover Border Couleur: # ff9b1f
CSS personnalisé: Elément principal
width80%;
Voici à quoi ressemblent les paramètres: