Cuando empezamos con WordPress puede ser complicado... ¡Y cuando descubres un tema añade una nueva capa! ¿Cuál es el funcionamiento de Divi y Divi Builder en WordPress? ¿Dónde para WordPress y dónde empieza Divi y su constructor? Eso es lo que me preguntan los estudiantes en cada nuevo entrenamiento...
El propósito de este artículo es democratizar los fundamentos de crear un sitio de WordPress con el tema Divi (También puedes utilizarlo si usas otro tema).
¿Cuándo tenemos que configurar WordPress, cuándo fijamos el tema Divi y cuándo entra el Divi Builder en la escena?
Estas son muchas preguntas que son planteadas por aquellos que descubren WordPress y tienen la ambición de crear su sitio con el tema Divi.
- Anatomía de un sitio de WordPress
- ¿Dónde se detiene WordPress y dónde empieza Divi?
- Consejos Divi Análisis de diseño
- En conclusión
1 – Anatomía de un sitio de WordPress
En las dos imágenes anteriores, se puede ver – simplificado – de lo que se compone un sitio WordPress.
En la parte superior de la pantalla, a menudo encontramos HEADER, seguido de MAIN CONTENT (Main Contents). En la parte inferior de la pantalla está el FOOTER (pieza).
Este diseño, Generalpuede comportarse diferente dependiendo de la tipo de publicación.
Por ejemplo, un artículo tendrá un SIDEBAR (imagen 2), mientras que una página no (imagen 1). Aunque muchos temas permiten añadir una barra lateral en las páginas también.
Pero todo esto es sólo una hipótesis porque con PAGE BUILDERS como Divi Builder, todo puede ser cuestionado. Uno podría agregar un SIDEBAR dentro de una página por ejemplo, y no activar el SIDEBAR en los artículos. Todo es sólo una cuestión de establecer opciones...
Nota: dependiendo de las opciones que haga en las opciones de configuración del tema, puede obtener un diseño diferente. En esta imagen (imagen 3), puede notar que el HEADER ha sido trasladado a la izquierda de la pantalla.
2 - ¿Dónde para WordPress y dónde empieza Divi?
Volvamos a esta pregunta recurrente: ¿Cómo sabemos si está en WordPress o en Divi que tenemos que hacer nuestra configuración?
Cuando conoces bien WordPress, todo está claro pero entiendo que este no es el caso para principiantes... ¡Lo era!
Si tuviera que darte dos palabras, diría: WordPress se ocupa de la creación, contenido, estructura y funcionalidad de su sitio. Mientras que el tema (Divi u otro) se ocupa del diseño general del sitio. El Divi Builder (o otro constructor de páginas) se ocupa de contenido SOLO (en lugar del sistema nativo de WordPress).
Pero estoy seguro de que si llegas a este artículo, necesitas más explicación... ¡Vamos a ver esto en detalle!
2.1 – ¿Qué hace WordPress?
A menudo, aquellos que descubren WordPress quieren quemar los pasos. Ellos esperan abordar el diseño del sitio, buscando un tema, definiendo colores y fuentes, etc. ¡Pero es un error!
Antes del diseño, usted necesita centrarse en on Palabra básica Ajustes de presión, creación de contenido y estructura del sitio. Sin ningún contenido, usted encontrará difícil establecer su tema!
Por ejemplo, usted no será capaz de configurar su HEADER si su menú de navegación aún no está creado. Así como usted no recibirá un menú si todavía no ha creado y publicado páginas. Lo mismo para el lado del blog, usted no será capaz de definir el diseño del blog si todavía no ha publicado artículos ... ¿Me estás siguiendo?
Esto es lo que puedes hacer con WordPress:
- Crear páginas = PAGES pestaña
- Crear artículos = Ficha de artículos
- Crear y gestionar Categorías = ARTÍCULOS tab CATEGORÍAS
- Crear y gestionar etiquetas = ARTÍCULOS tab LABELS
- Crear menús de navegación y establecer su ubicación = APPARENCE tab MENUS
- Descargar y gestionar imágenes = confianza Ficha médica
- Administrar el contenido de la barra lateral = APPARENCE tab WIDGETS
- Añadir, eliminar, habilitar o desactivar plugins = pestaña EJECUENCIAS
- Establecer la configuración global de su sitio = confianza BRANCH pestaña
- Agregar, editar o eliminar usuarios = fichas USERS
- Comentarios de moderador = pestaña de contacto COMENTARIOS
- Descargar un tema gratis o pagado = APPARENCE tab Temasver cómo instalar el tema Divi)
Usted ha entendido, WordPress gestiona el contenido, así como la configuración de funcionalidad, pero no gestiona el diseño (este es el tema que se ocupa de él). Si las características faltan, puede agregarlas con plugins.
2.2 - ¿Cuál es el tema de Divi?
El tema Divi se encargará del diseño global de su sitio y en particular HEADER y FOOTER.
La configuración principal (las opciones temáticas) estará bajo La pestaña DIVI y menores APPEAL Ø PERSONALIZE.
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
Esto es lo que puedes hacer con el tema Divi desde La pestaña DIVI :
- DIVI pestañas THEME OPTIONS GENERAL : En esta pestaña puede agregar su logotipo, establecer su paleta de colores predeterminada, introducir sus perfiles sociales, etc.
- DIVI pestañas THEME OPTIONS : En esta pestaña encontrarás algunas opciones como desactivar el elemento superior del menú cuando se muestra subelementos.
- DIVI pestañas THEME OPTIONS : Esta pestaña le permitirá agregar código a su encabezado por ejemplo. Es muy interesante si necesitas añadir scripts como de Google Analytics.
- DIVI pestañas THEME OPTIONS UPDATE: Esta pestaña le permite agregar su clave de API que obtiene cuando se suscribe a una licencia de ElegantThemes. Esto le permitirá no sólo actualizar su Divi tema pero también para ser capaz de descargar diseños todo listo.
- DIVI pestañas PERSONALISTA DE MODULO: Aquí encontrará algunas opciones básicas para cada uno de los 46 Módulos Divi Builder. Sinceramente, no hay mucho que hacer aquí.
- DIVI pestañas ROLE EDITOR: esta pestaña puede ser interesante si usted es varios para gestionar el sitio. Por lo tanto, puede definir quién tiene acceso a ciertos ajustes según los roles de sus usuarios.
- DIVI pestañas DIVI LIBRARY: Aquí es donde se almacenarán tus respaldos de módulos, secciones o diseños cuando los guardes como modelo. También está aquí que usted puede importar ciertos diseños externos.
- DIVI pestañas APOYO DE CENTER: Puede utilizar esta pestaña para propósitos de depuración si tiene problemas o conflictos en su sitio.
Como puede haber visto en esta lista, La pestaña DIVI Sólo ofrece opciones de diseño global o funcionalidad temática. Para configurar opciones de diseño más relevantes, vaya a APPEAL Ø PERSONALIZE.
Esto es lo que puedes hacer con el tema Divi desde APPEAL Ø PERSONALIZE:
- Ficha de configuración general: Esta es la ficha más importante. Aquí puede definir su tipografía, la color de fondo oimagen de fondo así como configuraciones de diseño (como Recuadros).
- Cabecera y ficha de navegación: el encabezado es un elemento clave en el diseño de un sitio. Aquí encontrará todas las opciones para la aparición de sus diversos menús. Lea este artículo para explicaciones detalladas.
- Page Footer tab: Aquí puede cambiar los créditos en el pie del sitio, establecer la disposición para widgets a pie, cambiar colores etc.
- Botones: Aquí puede configurar la apariencia predeterminada de todos los botones en su sitio. Así, insertando un Módulo Button cuando construya su diseño, sus botones serán uniformes.
- Tabs Blog, Estilos en móvil y Palets de color ofrecer algunas opciones pero nada muy interesante.
Consejo para eliminar Sidebar en páginas que no utilizan el Divi Builder
Usted puede haber notado que cuando no activa el Divi Builder para utilizar el editor nativo de WordPress, el tema Divi muestra por defecto un Sidebar (incluso dentro de sus páginas).
Esto se puede desactivar fácilmente desde la caja « Ajustes de la página Divi » situado en la parte superior derecha, dentro de la página en cuestión.
2.3 ¿Qué hace el Divi Builder?
El Divi Builder es responsable del diseño de su contenido. Es decir, el diseño de sus páginas (y posiblemente sus artículos).
Nota: la activación de una página de constructor es opcional porque WordPress le permite crear contenido en sus páginas y artículos.
Por lo tanto, el Divi Builder sólo interviene dentro de sus "posts" (páginas, artículos o personalizados post-tipo). Y nada más: ni en el HEADER ni en el FOOTER (porque este es el tema que está a cargo).
Esto es lo que puedes hacer con el Divi Builder:
- Gestionar texto, imágenes, fuentes, colores
- Managing Backgrounds
- Añadir animaciones a la página cargando o sobrevuelo
- Añadir iconos
- Gestionar columnas
- Master Rendición responsable
- Definir la visibilidad de módulos o secciones según pantallas
- Añadir "dividentes" para dar un buen efecto a sus secciones
- Add Custom Code
- Embarque elementos externos como videos de YouTube, Google Maps, Tweets etc...
- ¡Y la lista sigue siendo muy larga! Descubre aquí la lista de todos los módulos del Divi Builder.
Más información sobre el Divi Builder.
3 – Divi Tip Análisis de diseño
Para entender mejor el funcionamiento de Divi y Divi Builder en WordPress, vamos a analizar juntos el diseño de la página de inicio de Divi Tips.
Sobre la imagen anterior, la diseño izquierdo corresponde al que los usuarios ven, el que ves cuando visitas este blog.
En el Diseño medio, podemos entender mejor operación de Divi y Divi Builder en WordPress y este concepto construcción de página.
¿Ves? que un diseño es una sucesión de secciones (en azul). Cada sección puede consistir en una o más líneas (verde). En estas líneas, se colocan módulos según sea necesario (en gris).
Si esto todavía está un poco borroso, mira el diseño derecho (siempre en esta foto): ¡Aquí todo está claro! Un diseño es una sucesión de cajas en cajas. Y esto es posible gracias a los constructores de páginas como el Divi Builder. Esta posibilidad no es ofrecida por el tema, sólo por su constructor.
Última precisión y recordatorio: si usted mira hacia atrás cuidadosamente en el diseño medio, se puede ver que el Header y Footer (pink boxs en la imagen) no son compatibles por el Divi Builder. Este es el tema Divi que tendrá que establecerse.
4 - En conclusión
Espero que mis explicaciones hayan sido bastante claras y ayudarán a muchos principiantes a comprender mejor el funcionamiento de Divi y Divi Builder en WordPress. Lo más importante es disociar lo que es manejado por el tema, por la página del constructor y por WordPress.
Resumen:
- WordPress gestiona el contenido, la estructura del sitio y sus características
- El tema Divi gestiona el diseño general del sitio, así como las pocas características del tema mismo
- El Divi Builder gestiona la construcción de su contenido (páginas, artículos CPT) y su diseño.
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!
Bonjour,
Comme d’habitude, c’est un super travail bien expliqué, détaillé et illustré.
Lorsque l’on sait le temps que ça prend pour rédiger un tel Post (en plus d’une vie très active), je dis BRAVO Lycia et merci pour ce généreux partage.
Merci Jérôme, ça me va droit au cœur ! Peu s’en rende compte malheureusement… Mais toi tu es là 😉 pour me motiver à continuer !!!
À bientôt
Bonjour Lycia, je partage l’avis de Jérome. Je débute avec DIVI et la création de site et m’arrache pas mal les cheveux.
Tes explications sont très pédagogues et je vais bien fouiller partout dans tes pages d’explication. Je me rends bien compte du temps que cela peut demander même si tu maîtrise !! Merci et bravo à toi !!
Sylvie
Merci Sylvie ! Ton commentaire m’encourage ! J’ai des tas d’idées d’articles mais c’est le temps qui me manque… J’espère que tu trouveras ton bonheur ici 😉
À bientôt !
Lycia
Bonjour Lycia,
Merci de prendre le temps pour nous aider. Ton article est super bien écrit et très clair. Pour moi qui débute complètement, c’est vraiment une chance. Je vais aussi fouiner partout et j’ai un peu plus l’espoir d’y arriver maintenant.
Encore merci et continue, on compte sur toi pour nous éclairer.
Je te suis!
Super Frédérique ! Merci 🙂
Bonjour Lycia,
Je viens de me lancer dans l’aventure wordpress et DIVI et je sens que ton site va être ma bible pour les prochains mois ((-:
Tes articles sont clairs, complets, bien structurés et pédagogues !
Bravo et un grand merci !
Merci Saskya 😉
Bonjour,
Je viens juste de commencer à utiliser Divi – un grand merci, votre blog m’aide beaucoup car contrairement à ce qu’annonce certains tutos, ce n’est pas facile pour un débutant !
Une petite question, je veux créer une e-boutique, j’ai lu qu’il était intéressant d’acheter en plus de Divi, Divi bodycommerce, je m’y perds un peu….
Bonjour Bertrand !
Merci à vous 😉
Si vous voulez créer une boutique en ligne, vous avez seulement besoin de WooCommerce, un plugin qui permet de transformer un site vitrine en site e-commerce. Le reste est superflu.
J’espère avoir répondu à votre question.
Bonne journée
Lycia
Bonjour Lycia ,
vos explications nous sont d’une grande aide
merci pour votre super travail
Merci beaucoup Abdallah 😉
Bonjour,
Merci pour ces explications. Avec la dernière version de l’OS « Catalina », c’est la cata ! IWEB n’est plus pris en charge et je suis contraint de passer à autre chose pour gérer mon site. C’était trop simple et convivial… J’ai opté pour « WordPress » et « DIVI » et en tant que béotien, je m’arrache les cheveux car je ne parviens à rien. Je vais approfondir vos articles et j’espère y trouver des solutions.
Merci.
Merci Decoster !
Je suis surprise que Catalina soit déjà là ! Il faut que je mette mon ordi à jour…
Concernant iWeb, je n’ai jamais testé mais je suppose que cette solution n’était plus trop utilisée, ils ont dû certainement arrêter de la maintenir.
Dommage pour vous…
Je suppose que WordPress est bien plus complexe et je comprends votre « arrachage de cheveux ».
Courage pour vous mettre dans le bain : une fois qu’on a compris son fonctionnement, ça roule !
Je ne sais pas si cela peut vous aider mais je propose un ebook PDF qui explique la création d’un site avec WordPress (mais cet ebook n’aborde pas le thème Divi, c’est alors encore un autre apprentissage).
À bientôt 😉
Lycia
Bonjour,
Grand débutant mais déterminé à progresser, je me permets de vous remercier et féliciter pour votre site !
C’est clair, complet et rassurant…
Je sens que je vais progresser plus rapidement que prévu et ça me redonne du courage…
David
C’est fait pour ! David ! Bienvenue sur Astuces Divi 😉
Bonjour Lydia,
Je débute sur wp et divi.
Je ne trouve pas la possibilité d’automatiser la mise à jour des url modifiées.
Vous pouvez m’aider svp ?
Merci
Salut Jean Luc,
Je ne vois pas ce que tu veux dire ? Tu parles de redirection automatique ?
Si c’est cela que tu cherches, il va falloir trouver un plugin je pense mais je ne sais pas si ça existe. Disons que je ne me suis jamais penchée sur la question…
Bonjour Lycia,
Tout d’abord, un grand merci pour vos articles qui sont hyper clairs et très bien rédigés.
Tout devient plus simple avec vous!
J’avais une question concernant la compatibilité des plans WordPress et Divi. Ce dernier peut être utilisé peu importe l’abonnement WordPress sélectionné? En conseillez-vous un en particulier (Premium ou Business)?
Merci de votre aide.
Bien à vous
Salut Alex,
Je ne connais pas trop WordPress .com : si vous parlez d’abonnement, je suppose que vous faites référence à la solution d’Automattic ?
Du coup, je ne pourrais pas répondre à votre question.
Quant à WordPress .org, il n’y a pas de problème…
bonsoir Lycia
je pensais avoir bien compris mais
du coup depuis la page 162 de ebook pour word press je vois des trucs que je n’ai pas
moi sur la gauche j’ai tous les parametres de Divi
j’ai jamais Document blocs etc….
est ce normal ? et en ai je besoin ?
et quand je vais aux articles page 184 etc.. mais comment vais je mettre les étiquettes et les catégories ?
merci
Tu parles de la barre de gauche ou de droite ? On parle bien de WordPress et non de Divi…
Les onglets de gauche disparaissent lorsque tu édites une page ou un article avec Gutenberg. C’est nouveau : c’est pour avoir plus de place dans l’éditeur. Mais ça ne change rien, tu retournes au back-office en cliquant sur le W de WordPress, en haut à gauche.
Pour la barre de droite, elle doit sûrement être cachée, il suffit de la faire apparaitre en cliquant sur l’icône des réglages (la roue dentée) à haut à droite de Gutenberg.
Bonjour Lycia, moi aussi je m’y mets !! une de plus sur WP et Divi 🙂
Tu m’as convaincue d’embarquer Divi… J’espère que je vais m’en sortir car je suis assommée par la quantité de choses à voir/comprendre :-/
J’ai pris la version Divi à vie (!) et j’ai activé Divi comme thème dans WP mais j’ai repéré un Layout Pack qui m’irai bien (donné dans ElegantTheme). Juste je ne comprends plus trop si ce Layout aura les mêmes caractéristiques qu’un thème enfant ? Je début totalement et j’ai peur de mal commencer … (si j’utilise ce thème et que ça risque de tout sauter si je fais une mise à jour ce sera ballot).
Merci infiniment pour toutes les ressources que tu mets à disposition (je suis allée voir ton profil Webeuse, ça me redonne espoir car je débarque dans le web après avoir fait plein d’autres choses bien différentes).
Salut Anne ! Super ! Bienvenue ! T’inquiète pas, tu peux télécharger tous les layouts que tu veux, rien ne sautera … un thème enfant te permet de faire des modifications de fonctionnalités. Tu n’en a presque plus besoin depuis que le thème Builder existe. Rien ne t’empêche d’installer un thème enfant même si tu ne l’utilises pas. Le principal est de ne jamais modifier les fichiers du thème parent (le thème Divi lui-même). Bon courage !
Salut et merci pour votre article.J’ai un problème que je n’arrive pas à résoudre sur mon essai de site.
lorsque j’active mon visual builder sur DIVI mes mise en forme (boutons, couleur de fond, etc..) apparaissent exactement comme je les ai travaillé, ensuite quand je quitte visual builder pour voir ma page, mes boutons et mes couleurs de fond apparaissent par défaut sans aucune modification, malgré mes sauvegarde mais rien n’y change.
Avez-vous une solution ?
Salut Caré… Je pense que cet article va répondre à ta question : https://astucesdivi.com/probleme-enregistrement-modifications-divi/
Bonjour,
Je viens de créer mon site avec WordPress et le thème DIVI, qui semble attirer beaucoup de suffrages.
Si la création est énormément facilitée par ces outils, je me suis « cassé les dents » sur les encadrés arrondis des articles (bordure) et sur les marges intérieures de ces articles (espacement), qui, d’une page à l’autre, ont des aspects différents.
Il me semble avoir tout essayé sur l’article avec ses 3 niveaux d’encapsulation et dur la page qui contient l’article.
Rien n’y fait… Pas plus de succès sur la page qui contient cet article.
Quelqu’un sait-il comment résoudre ce problème, si problème il y a ?
Avec mes remerciements anticipés.
TGN_59
Salut TGN, as-tu utilisé le Thème Builder pour créer tes articles et uniformiser tes marges ?
Bonjour,
je suis entrain de créer un site avec l’aide de Divi.
Tout se passer bien jusqu’à ce matin. Je vous explique :
– J’ai d’abord créé dans le « thème builder » de Divi mon « squelette de page » comprenant un header, une section Body toute simple et un footer.
– J’ai ensuite créé 2 pages, dans lesquelles j’ai importé mon « squelette de page » et où j’ai mis en place tout mes contenus dans la section Body de mon squelette.
Après avoir passé plusieurs période dessus tout se passer bien jusqu’à ce fameux message « Module de contenu post manquant ».
Et depuis je ne peux plus afficher ou modifier mes pages (qui sont toujours présentes).
Qu’est-ce qui se passe ????
Est-ce que quelqu’un a la solution ???
En vous remerciant par avance.
Sylvain
Salut Sylvain, c’est bizarre, le problème est toujours là ?
Pour précision : dans le thème builder, tu crées un MODELE, ton body devras avoir le module PUBLIER UN CONTENU. Ensuite, dans tes pages, tu ne dois pas importer ta mise en page créée avec le thème builder. Tu dois simplement créer ta mise en page avec le Divi Builder (et non le thème builder). Et là, il ne doit pas y avoir de conflit.
Bonjour
Actuellement en création de mon site internet avec Divi, j’avance mais ne comprends pas certaines subtilités :
J’ai créé par mal de pages pour les menus avec le Divi Visual Builderet mais quand je retourne dans mon interface WordPress dans l’onglet Divi-Theme builder, je n’ai pourtant rien ( à part le Global header que j’ai créé)
Alors à quoi sert ce Divi Theme Builder vs Visual Builder et pourquoi ne sont ils pas reliés ?!
Merci pour votre aide
Vladimir
Vladimir le Visual Builder sert à créer le contenu des pages tandis que le Thème Builder sert à créer les modèles de thème que tu appliques ensuite à des pages…. Tes pages tu les trouves dans Pages > Toutes les pages
Bonjour Lycia
je suis débutant sur wordpress et divi et j’ai ma petite question que voilà : le contenu de la page « Comment fonctionnent Divi, le Divi Builder et WordPress : fondamentaux pour les débutants » date de 2019. Est-il toujours à jour ?
Merci de votre retour. Merci pour les efforts de partage de connaissances.
Alain
Bonjour, oui, c’est toujours d’actualité.