Cuando eres nuevo en WordPress puede ser complicado... ¡Y cuando eres nuevo en un tema se añade otra capa! ¿Cómo funciona Divi y el Divi Builder en WordPress? ¿Dónde acaba WordPress y empieza Divi y su constructor? Esto es lo que me piden los alumnos en cada nueva sesión de formación...
Este artículo pretende democratizar los fundamentos de la creación de un sitio web de WordPress con el tema Divi (también puedes usarlo si utilizas otro tema).
¿Cuándo debemos configurar WordPress, cuándo debemos configurar el tema Divi y cuándo entra en juego el Divi Builder?
Estas son muchas de las preguntas que se hacen las personas que son nuevas en WordPress y tienen la ambición de crear su sitio con el tema Divi.
- La anatomía de un sitio de WordPress
- ¿Dónde "termina" WordPress y "empieza" Divi?
- Análisis del diseño de Divi Tips
- En conclusión
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - La anatomía de un sitio WordPress
En las dos imágenes de arriba se puede ver -de forma simplificada- de qué está hecho un sitio de WordPress.
En la parte superior de la pantalla suele aparecer la CABECERA, seguida del CONTENIDO PRINCIPAL. En la parte inferior de la pantalla se encuentra el FOOTER.
Este diseño, por regla general, puede tener un comportamiento diferente según el tipo de publicación.
Por ejemplo, un post tendrá una SIDEBAR (imagen 2) mientras que una página no (imagen 1). Aunque muchos temas permiten añadir una barra lateral a las páginas también.
Pero todo esto no es más que una hipótesis porque con los CONSTRUCTORES DE PÁGINAS como el Constructor Divi, todo puede ser cuestionado. Podría añadir una SIDEBAR dentro de una página, por ejemplo, y no activar la SIDEBAR en los artículos. Todo es cuestión de configurar las opciones...
Nota: dependiendo de las elecciones que hagas en las opciones de configuración del tema, puedes obtener un diseño diferente. En esta imagen (imagen 3), puede ver que la CABEZA se ha desplazado a la izquierda de la pantalla.
2 - ¿Dónde "termina" WordPress y "empieza" Divi?
Volvamos a esta pregunta recurrente: ¿Cómo sabemos si debemos hacer nuestra configuración en WordPress o en Divi?
Cuando se conoce bien WordPress, todo está claro, pero entiendo que no es el caso de los principiantes... ¡Yo lo era!
Si tuviera que darle dos consejos, le diría..: WordPress se encarga de la creación, el contenido, la estructura y la funcionalidad de su sitio. El tema (Divi u otro) se encarga del diseño general del sitio. El Divi Builder (u otro constructor de páginas) se encarga SOLO del contenido (en lugar del sistema nativo de WordPress).
Pero seguro que si has llegado a este artículo es porque necesitas más explicaciones... ¡Así que vamos a verlo!
2.1 - ¿Qué hace WordPress?
A menudo, los que son nuevos en WordPress quieren precipitarse en el proceso. No ven la hora de empezar con el diseño del sitio, buscan un tema, definen los colores y las fuentes, etc. ¡Pero esto es un error!
Antes del diseño, debe centrarse en el ajustes básicos de WordPressla creación de contenidos y la estructura del sitio. Sin ningún contenido, le será difícil configurar su tema.
Por ejemplo, no podrá configurar su CABECERA si su menú de navegación aún no está creado. Del mismo modo, no obtendrá un menú si aún no ha creado y publicado páginas. Lo mismo ocurre con la parte del blog, no podrás configurar el diseño del blog si aún no has publicado ningún artículo... ¿Me sigues?
Esto es lo que puedes hacer con WordPress :
- Crear páginas => pestaña PÁGINAS
- Crear artículos => pestaña ARTÍCULOS
- Crear y gestionar categorías => Pestaña ITEM > CATEGORÍAS
- Crear y gestionar etiquetas => Pestaña ITEM > ETIQUETAS
- Crear menús de navegación y definir su ubicación => Ficha Apariencia > MENÚS
- Subir y gestionar imágenes => pestaña MEDIA
- Gestionar el contenido de la barra lateral => Pestaña APARENCIA > MARCAS
- Añadir, eliminar, activar o desactivar plugins => pestaña EXTENSIONES
- Definir la configuración global de su sitio => pestaña AJUSTES
- Añadir, modificar o eliminar usuarios => pestaña USUARIOS
- Moderar comentarios => pestaña COMENTARIOS
- Descargue un tema gratuito o de pago => pestaña Apariencia > TEMAS (ver cómo instalar el tema Divi)
Como puedes ver, WordPress gestiona la configuración del contenido y la funcionalidad, pero no gestiona el diseño (el tema lo hace). Si faltan funciones, puedes añadirlas con plugins.
2.2 - ¿De qué trata el tema Divi?
El tema Divi se encargará del diseño general de su sitio, incluyendo el HEADER y el FOOTER.
Los ajustes principales (opciones del tema) se encuentran en la pestaña DIVI y en la pestaña APARENCIA > PERSONALIZADA.
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA
Esto es lo que puedes hacer con el tema Divi desde la pestaña DIVI:
- Pestaña DIVI > OPCIONES DEL TEMA > GENERALEn esta pestaña puede añadir su logotipo, establecer su esquema de colores por defecto, introducir sus perfiles sociales, etc.
- Pestaña DIVI > OPCIONES DEL TEMA > NAVEGACIÓN En esta pestaña encontrará algunas opciones, como por ejemplo, desactivar el elemento del menú superior cuando muestre subelementos.
- Pestaña DIVI > OPCIONES DEL TEMA > INTEGRACIÓN Esta pestaña le permitirá añadir código a su cabecera, por ejemplo. Es muy interesante si necesitas añadir scripts como Google Analytics.
- Pestaña DIVI > OPCIONES DEL TEMA > ACTUALIZAR: Esta pestaña le permite añadir su clave API que obtiene cuando se suscribe a una licencia de ElegantThemes. Esto no sólo le permitirá actualizar su tema Divi, sino también descargar diseños ya hechos.
- Pestaña DIVI > PERSONALIZADOR DE MÓDULOS: aquí encontrará algunas opciones básicas para cada uno de los 46 Módulos de Divi Builder. Sinceramente, no hay mucho que hacer aquí.
- Pestaña DIVI > ROLES EDITOR: esta pestaña puede ser interesante si son varias las personas que gestionan el sitio. De esta manera, puedes definir quién tiene acceso a ciertas configuraciones según los roles de tus usuarios.
- Pestaña DIVI > BIBLIOTECA DIVI: Aquí es donde irán los guardados de tus módulos, secciones o diseños cuando los guardes como plantilla. Aquí también se puede importar algunos diseños externos.
- Pestaña DIVI > CENTRO DE APOYO: puede utilizar esta pestaña para depurar si tiene problemas o conflictos en su sitio.
Como puedes ver en esta lista, la pestaña DIVI sólo ofrece opciones para el diseño general o la funcionalidad del tema. Para configurar más opciones de diseño relevantes, vaya a la pestaña APARENCIA > PERSONALIZACIÓN.
Esto es lo que puedes hacer con el tema Divi desde la pestaña LOOK > CUSTOM:
- La pestaña de Configuración General: Esta es la pestaña más importante. Aquí puede definir su tipografía, el color de fondo o elimagen de fondo así como los parámetros de diseño (como el Disposición en caja).
- La cabeceray la pestaña de navegación: La cabecera es un elemento esencial en el diseño de un sitio. Aquí es donde encontrará todas las opciones para la apariencia de sus diversos menús. Lea este artículo para obtener una explicación detallada.
- La pestaña de pie de página: aquí puede cambiar los créditos en el pie de página del sitio, definir la disposición de los widgets en el pie de página, cambiar los colores, etc.
- La pestaña Botones: Aquí puede definir la apariencia por defecto de todos los botones de su sitio. Así, al insertar un módulo de botones al construir su diseño, sus botones serán uniformes.
- Pestañas Blog, Estilos móviles y Paletas de colores Las pestañas ofrecen algunas opciones pero nada muy interesante.
Consejo para eliminar la barra lateral en las páginas que no utilizan el Constructor Divi
Habrás notado que cuando no habilitas el Divi Builder para usar el editor nativo de WordPress, el tema Divi tiene por defecto una barra lateral (incluso dentro de tus páginas).
Esto se puede desactivar fácilmente desde el cuadro "Configuración de la página Divi" en la parte superior derecha de la página en cuestión.
2.3 ¿Qué hace el Constructor Divi?
El Constructor Divi se encarga del diseño de su contenido. Es decir, el diseño de sus páginas (y posiblemente de sus artículos).
Nota: habilitar un constructor de páginas es opcional, ya que WordPress permite de forma nativa crear contenido dentro de sus páginas y entradas.
Por lo tanto, el constructor Divi sólo interviene dentro de sus "posts" (páginas, artículos o tipos de post personalizados). Y en ningún otro lugar: ni en el HEADER ni en el FOOTER (porque el tema se encarga de ello).
Esto es lo que puedes hacer con el Constructor Divi:
- Gestione el texto, las imágenes, las fuentes y los colores
- Gestión de fondos
- Añadir animaciones al cargar la página o al pasar el ratón
- Añadir iconos
- Gestión de columnas
- Dominio de la renderización responsiva
- Definir la visibilidad de los módulos o secciones según las pantallas
- Añade separadores para dar un buen efecto a tus secciones
- Añadir código personalizado
- Insertar elementos externos como vídeos de YouTube, Google Maps, Tweets, etc.
- Y la lista sigue y sigue. Descubra aquí hay una lista de todos los módulos de Divi Builder.
Más información sobre el Constructor Divi.
3 - Análisis del diseño de Divi Tips
Para entender mejor cómo funcionan Divi y el Divi Builder en WordPress, veamos el diseño de la página de inicio de Divi Tips.
En la imagen de arriba, el diseño de la izquierda es el que la gente ve cuando visita este blog.
En el diseño del medio, puedes entender mejor cómo funcionan Divi y el Divi Builder en WordPress y la noción de construir diseños.
Podemos ver que un diseño es una sucesión de secciones (en azul). Cada sección puede estar compuesta por una o varias líneas (en verde). En estas filas, los módulos se colocan según las necesidades (en gris).
Si esto aún no está claro, eche un vistazo a la disposición de la derecha (todavía en esta imagen): ¡aquí todo está claro! Un diseño es una sucesión de cajas dentro de cajas. Y esto es posible gracias a constructores de páginas como el Divi Builder. Esta posibilidad no la ofrece el tema, sólo su constructor.
Última aclaración y recordatorio: si te fijas bien en el diseño del medio, puedes ver que el encabezado y el pie de página (enmarcados en rosa en la imagen) no son compatibles con el Divi Builder. Es el tema Divi el que necesita ser configurado.
4 - En conclusión
Espero que mis explicaciones hayan sido lo suficientemente claras y que ayuden a muchos principiantes a entender mejor cómo funcionan Divi y el Divi Builder en WordPress. Lo más importante es hacer una clara distinción entre lo que gestiona el tema, el constructor de páginas y WordPress.
Resumen breve:
- WordPress gestiona el contenido, la estructura y la funcionalidad del sitio
- El tema Divi maneja el diseño general del sitio, así como las pocas características del tema en sí
- El Constructor Divi gestiona la construcción de su contenido (páginas, artículos CPT) y su diseño.
¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.
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