Cómo funcionan Divi, el Constructor Divi y WordPress: Fundamentos para principiantes

Publicado el 01/04/2019 | 30 comentarios

Cuando eres nuevo en WordPress puede ser complicado... ¡Y cuando descubres 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? Eso es lo que me piden los alumnos en cada nueva 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 algunas de las preguntas que se hacen las personas que son nuevas en WordPress y tienen la ambición de crear su sitio web con el tema Divi.

  1. La anatomía de un sitio de WordPress
  2. ¿Dónde "termina" WordPress y "empieza" Divi?
  3. Análisis del diseño de Divi Tips
  4. En conclusión

Anuncio: 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.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

1 - La anatomía de un sitio WordPress

Anatomie Page WordPress
1 - Anatomía de una página de WordPress
Anatomie article WordPress
2 - Anatomía de una entrada en WordPress

En las dos imágenes anteriores, podemos ver -de forma simplificada- de qué está hecho un sitio de WordPress.

En la parte superior de la pantalla suele estar la CABEZA, 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 en 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íamos 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...

Apparence différente grâce aux options de Divi
3 - Apariencia diferente gracias a las opciones del tema Divi

Nota: dependiendo de las opciones que elijas en los ajustes del tema, puedes obtener un diseño diferente. En esta imagen (imagen 3), puede observar que la CABEZA se ha desplazado a la izquierda de la pantalla.

Essayer Divi

2 - ¿Dónde "acaba" WordPress y "empieza" Divi?

Volvamos a la 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 dirigirte en dos palabras, diría: WordPress se encarga de la creación, el contenido, la estructura y la funcionalidad de su sitio. Mientras que el tema (Divi u otro) se encarga del diseño general del sitio. En cuanto al 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 con detalle!

2.1 - ¿Qué hace WordPress?

A menudo, los que son nuevos en WordPress quieren precipitarse en el proceso. No ven la hora de ponerse a trabajar en 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 para la parte del blog, no podrás configurar el diseño del blog si aún no has publicado ninguna entrada... ¿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)
WordPress gère les contenus et les fonctionnalités d'un site

Como puedes ver, WordPress gestiona el contenido y la configuración de la funcionalidad, pero no gestiona el diseño (eso lo hace el tema). Si faltan funciones, puedes añadirlas con plugins.

tutoriel débutant pour apprendre à utiliser Divi

2.2 - ¿Qué hace el tema Divi?

El tema Divi se encargará del diseño general de su sitio, incluyendo el HEADER y el FOOTER.

Le thème Divi s'occupe du design global du site

Los ajustes principales (opciones del tema) se encuentran en la pestaña DIVI y en la pestaña APARENCIA > PERSONALIZACIÓN.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz 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 > GENERAL En esta pestaña, puede añadir su logotipo, establecer su esquema de colores por defecto, rellenar sus perfiles sociales, etc.
  • Pestaña DIVI > OPCIONES DEL TEMA > NAVEGACIÓN En esta pestaña, encontrará algunas opciones como la de deshabilitar el elemento del menú superior cuando muestra sub-elementos.
  • 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 el de 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 varios los 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 puede 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 diferentes menús. Lea este artículo para obtener explicaciones detalladas.
  • 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 en el móvil 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).

Le Divi Builder s'occupe du design du contenu

Nota: la activación de un constructor de páginas es opcional porque WordPress permite de forma nativa crear contenido dentro de sus páginas y entradas.

El constructor Divi sólo interviene dentro de tus "posts" (páginas, artículos o custom post type). 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:

  • Gestión de textos, imágenes, fuentes y colores
  • Gestionar los fondos
  • Añadir animaciones al cargar la página o al pasar el ratón
  • Añadir iconos
  • Gestionar 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 bonito efecto a tus secciones
  • Añadir código personalizado
  • Incrustar 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.

obtenir Divi - get Divi

3 - Análisis del diseño de Divi Tips

Para entender mejor cómo funcionan Divi y el Divi Builder en WordPress, analicemos el diseño de la página de inicio de Divi Tips.

Création d'un Layout avec Divi

En la imagen de arriba, el diseño de la izquierda es el que ven los usuarios cuando visitan este blog.

En el diseño del medio, podemos entender mejor cómo funciona Divi y el Divi Builder en WordPress y esta noción de construcción de diseño.

Vemos 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 líneas se colocan los módulos según las necesidades (en gris).

Si esto todavía está un poco borroso, 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 los 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 debe ser configurado.

plus de ressources pour Divi

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 separar lo que es gestionado por el tema, por el constructor de páginas y por WordPress.

Un resumen rápido:

  • WordPress gestiona el contenido, la estructura del sitio y su funcionalidad
  • El tema Divi gestiona el diseño general del sitio, así como las pocas características del propio tema
  • El Constructor Divi gestiona la construcción de su contenido (páginas, artículos CPT) así como su diseño.

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

Comprendre le fonctionnement de Divi et du Divi Builder
Les fondamentaux de la conception Web
How to use Divi in WordPress ?

1.958 palabras

8

A ti también te debería gustar:

Formation Divi PDF : un guide pas à pas

Formación en Divi PDF: una guía paso a paso

¿Qué podría ser mejor que un entrenamiento de Divi PDF para dominar este tema de WordPress, su Constructor Visual y su Constructor de Temas? Es como tener un entrenador en tu casa... ¡Compruébalo!

30 Commentaires

  1. Jérôme

    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.

  2. Lycia Diaz

    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

  3. Sylvie

    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

  4. Lycia Diaz

    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

  5. Frédérique

    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!

  6. Lycia Diaz

    Super Frédérique ! Merci 🙂

  7. Saskya

    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 !

  8. Lycia Diaz

    Merci Saskya 😉

  9. Bertrand

    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….

  10. Lycia Diaz

    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

  11. Abdallah

    Bonjour Lycia ,

    vos explications nous sont d’une grande aide

    merci pour votre super travail

  12. Lycia Diaz

    Merci beaucoup Abdallah 😉

  13. Decoster

    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.

  14. Lycia Diaz

    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

  15. David Deschryver

    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

  16. Lycia Diaz

    C’est fait pour ! David ! Bienvenue sur Astuces Divi 😉

  17. vandeweghe

    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

  18. Lycia Diaz

    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…

  19. Alex

    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

  20. Lycia Diaz

    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…

  21. Michele

    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

  22. Lycia Diaz

    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.

  23. Anne

    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).

  24. Lycia Diaz

    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 !

  25. Caré

    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 ?

  26. TGN_59

    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

  27. Lycia Diaz

    Salut TGN, as-tu utilisé le Thème Builder pour créer tes articles et uniformiser tes marges ?

  28. Sylvain

    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

  29. Lycia Diaz

    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.

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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

Pínchalo en Pinterest

Acciones
Comparte esto