Cuando comienzas con un diseño web con WordPress puede ser complicado si no cuentas con la experiencia necesaria para avanzar con seguridad.
Y cuando vas a implementar un tema para el diseño, agregamos nuevos niveles de configuración dentro de wordpress. Cuando mencionamos temas de diseño para wordpress siempre comenzamos con el más famoso de toda la web: DiviTheme.
Pero ¿Cómo funcionan DiviTheme y Divi Builder en WordPress? ¿Dónde se detienen las configuraciones necesarias en WordPress y en donde comienzan con DiviTheme y su creador?
Este artículo tiene como objetivo que conozcas los fundamentos de la creación de un sitio de WordPress con el tema DiviTheme (también te puede servir si usas otro tema).
¿Cuándo tenemos que configurar WordPress? ¿Cuándo tenemos que configurar el tema Divi y cuándo aparece Divi Builder en el escenario?
Estas son muchas de las preguntas que nos hacemos cuando descubrimos WordPress con el objetivo de crear nuestro sitio web utilizando el tema divi o el divi builder.
Anuncio: Este artículo contiene enlaces de afiliados que reconocerá fácilmente. Los enlaces clásicos están en naranja y los enlaces patrocinados están en rosa.
Atento!!
1 – La anatomía de un sitio de WordPress
En las dos imágenes anteriores, podemos ver, de manera simplificada, como está hecho un sitio con WordPress.
En la parte superior de la pantalla, a menudo encontramos el HEADER, seguido por el CONTENIDO PRINCIPAL. En la parte inferior de la pantalla, encontramos el PIE DE PIE (pie de página).
Este diseño, como regla general, puede comportarse de manera diferente según el tipo de publicación.
Por ejemplo, un artículo tendrá una BARRA LATERAL (imagen 1) mientras que una página no (imagen 2).
IMAGEN 1
IMAGEN 2
Incluso muchos temas permiten agregar una barra lateral en las páginas también.
Pero todo esto es solo una hipótesis porque con los CONSTRUCTORES DE PÁGINAS como Divi Builder, todo se puede cuestionar.
Podríamos agregar una barra lateral dentro de una página, por ejemplo, y no activar la barra lateral en los artículos. Se trata de configurar opciones según el proyecto que tengas en mente desarrollar.
3 – Apariencia diferente gracias a las opciones del tema divi
Nota: dependiendo de los cambios que hagas en las opciones de configuración del tema, puedes obtener un diseño diferente. En la imagen (imagen 3), puedes ver que el HEADER se ha movido a la izquierda de la pantalla.
2 – ¿Dónde «se detiene» WordPress e «inicia» Divi?
Primero vamos a refrescar nuestra pregunta inicial ¿Dónde realizo la configuración de mi web; en wordpress o en divi?
Cuando conoces bien WordPress, todo está claro, pero sabemos que este no es el caso para los principiantes, no te preocupes nosotros también lo fuimos.
Para que comprendas de mejor manera que debes hacer primero toma en cuenta estas ideas:
WordPress se encarga de la creación, el contenido, la estructura y la funcionalidad de tu sitio. Mientras que el tema (Divi u otro tema) está a cargo del diseño general del sitio.
En cuanto al plugin Divi Builder (u otro generador de páginas), maneja el contenido SOLAMENTE (en lugar del sistema nativo de WordPress).
De algo estamos seguros, si llegaste hasta aquí en la lectura de este artículo, es porque necesitas más explicaciones … ¡Vamos a verlo en detalle!
2.1 – ¿Qué función cumple WordPress?
Frecuentemente quienes descubren WordPress quieren saltarse los pasos para ejecutar una gestión efectiva. Están ansiosos por comenzar el diseño del sitio, buscan cual es el mejor tema, definen colores y fuentes, etc. ¡Pero esto es un error!
Antes del diseño, debemos enfocarnos en la creación del contenido para la configuración básica de WordPress y la estructura del sitio. ¡Sin ningún contenido, tendrá dificultades para configurar su tema!
Por ejemplo, no podrá configurar su HEADER si su menú de navegación aún no se ha creado. Del mismo modo, no obtendrá un menú si aún no ha creado y publicado páginas. Lo mismo para el lado del blog, no podrás definir el diseño del blog si aún no has publicado artículos … ¿Sigues la idea?
Esto es lo que puedes hacer con WordPress:
- Crear páginas => pestaña PÁGINAS
- Crear artículos => pestaña ENTRADAS
- Crear y administrar categorías => pestaña ARTÍCULOS> CATEGORÍAS
- Crear y administrar etiquetas => pestaña ARTÍCULOS> ETIQUETAS
- Cree menús de navegación y defina su ubicación => pestaña APARIENCIA> MENÚS
- Descargar y administrar imágenes => pestaña MEDIA
- Administrar contenido de la barra lateral => pestaña APARIENCIA> WIDGETS
- Agregar, eliminar, habilitar o deshabilitar complementos => pestaña EXTENSIONES
- Defina la configuración global de su sitio => pestaña CONFIGURACIÓN
- Agregar, modificar o eliminar usuarios => pestañas USUARIO
- Comentarios moderados => pestaña COMENTARIOS
- Descargue un tema gratuito o de pago => pestaña APARIENCIA> TEMAS ( vea cómo instalar el tema Divi )
Como puedes ver, WordPress administra la configuración de contenido y funcionalidad, pero no administra el diseño (El tema instalado es quien se ocupa de ello). Si faltan funciones, puede agregarlas usando plugins adicionales.
2.2 – ¿Qué función cumple el tema Divi?
El tema Divi se encargará del diseño general de su sitio y, en particular, de HEADER y FOOTER.
La configuración principal (opciones de tema) se encontrará en la pestaña DIVI dentro del menú de wordpress y en la pestaña APARIENCIA> PERSONALIZAR.
¿Sabías que puedes probar Divi gratis? Vaya a esta página y haga clic en «PRUÉBELO GRATIS»
Esto es lo que puede hacer con el tema Divi desde la pestaña DIVI:
- Pestaña DIVI> OPCIONES DE TEMA> GENERAL En esta pestaña, puede agregar su logotipo, definir su paleta de colores predeterminada, ingresar sus perfiles sociales, etc.
- Pestaña DIVI> OPCIONES DE TEMA> NAVEGACIÓN En esta pestaña, encontrará algunas opciones, como deshabilitar el elemento del menú superior cuando muestra subelementos.
- Pestaña DIVI> OPCIONES DE TEMA> INTEGRACIÓN Esta pestaña le permitirá agregar código a su encabezado, por ejemplo. Esto es muy interesante si necesita agregar scripts como el de Google Analytics.
- Pestaña DIVI> OPCIONES DE TEMA> ACTUALIZAR Esta pestaña le permite agregar su clave API que obtiene cuando se suscribe a una licencia de ElegantThemes. Esto no solo le permitirá actualizar su Divi Theme, sino que también le permitirá 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 DiviBuilder. Honestamente, no hay mucho que hacer aquí.
- Pestaña DIVI> EDITOR DE FUNCIONES: Esta pestaña puede ser interesante si son varios los que administran el sitio. De esta manera, puede definir quién tiene acceso a ciertas configuraciones en función de los roles de sus usuarios.
- Pestaña DIVI> BIBLIOTECA DIVI: Aquí es donde se guardarán sus copias de seguridad de módulos, secciones o diseños cuando los guarde como plantillas. Aquí también es donde puede importar algunos diseños externos.
- Pestaña DIVI> CENTRO DE APOYO: Puede usar esta pestaña para fines de depuración si tiene problemas o conflictos en su sitio.
Como pudimos observar en esta lista, la pestaña DIVI solo proporciona opciones para el diseño general o las funcionalidades del tema. Para configurar opciones de diseño más relevantes, vaya a la pestaña APARIENCIA> PERSONALIZAR.
Esto es lo que puede hacer con el tema Divi desde la pestaña APARIENCIA> PERSONALIZAR:
- La pestaña Configuración general: Esta es la pestaña más importante. Aquí puede definir su tipografía, el color de fondo o la imagen de fondo, así como los parámetros de diseño (como el Diseño en caja).
- La pestaña Encabezado y navegación: El encabezado 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 explicaciones detalladas.
- La pestaña Pie de página: aquí puede cambiar los créditos en el pie de página del sitio, definir el diseño de los widgets en la parte inferior de la página, cambiar los colores, etc.
- La pestaña Botones: aquí puede definir la apariencia predeterminada de todos los botones en su sitio. Por lo tanto, al insertar un módulo Button al crear su diseño, sus botones serán uniformes.
- Las pestañas Blog, Estilos en dispositivos móviles y Paletas de colores ofrecen algunas opciones, pero nada muy interesante.
Tips Adicional: Sugerencia para eliminar la barra lateral en páginas que no usan Divi Builder
Es posible que haya notado que cuando no habilita Divi Builder para usar el editor nativo de WordPress, el tema Divi muestra una barra lateral de forma predeterminada (incluso dentro de sus páginas).
Esto se puede deshabilitar 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é función cumple el Divi Builder?
Divi Builder se encarga 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 construcción es opcional porque WordPress le permite crear contenido de forma nativa dentro de sus páginas y artículos.
Por lo tanto, el creador de Divi Builder solo interviene dentro de sus «publicaciones» (páginas, artículos o tipo de publicación personalizada). Y no hay otra manera: ni en el HEADER, ni en el FOOTER (porque es el tema quien lo configura).
Esto es lo que puedes hacer con Divi Builder:
- Administra texto, imágenes, fuentes, colores.
- Administrar fondos
- Agregue animaciones a la página cargando o pase el mouse
- Agregar iconos
- Administrar columnas
- Dominar el renderizado receptivo
- Definir la visibilidad de módulos o secciones según las pantallas.
- Agregue «divisores» para dar un buen efecto a sus secciones
- Agregar código personalizado
- Incruste 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 de Divi Builder.
Obtenga más información sobre Divi Builder.
3 – Diseño de la página de inicio de Divi
Para comprender mejor cómo funcionan Divi y Divi Builder en WordPress, analicemos juntos el diseño de la página de inicio de Divi:
En la imagen de arriba, el diseño de la izquierda corresponde al que ven los usuarios en internet, es el diseño que vez cuando visitas este blog por ejemplo.
En el diseño del medio, podemos entender mejor cómo funcionan Divi y Divi Builder en WordPress y hacernos una idea de la construcción del diseño.
Vemos que el diseño es una sucesión de secciones (color azul). Cada sección puede estar compuesta por una o más filas (color verde). En estas filas, los módulos se colocan según las necesidades (color gris).
Si todavía está un poco confundido, mira el diseño a la derecha (todavía en esta imagen): ¡aquí todo está claro!
Un diseño es una sucesión de cajas en cajas.
Y esto es posible gracias a los creadores de páginas como Divi Builder. El tema no ofrece esta posibilidad, solo su creador.
Última observación y recordatorio: si miramos cuidadosamente el diseño del medio, vemos que el Encabezado y el Pie de página (enmarcados en color rosa en la imagen) no son editables con el Divi Builder.
¿Necesitas más recursos en Divi? ¡Visita el blog de Elegant Themes, lleno de ideas y tutoriales!
4 – Conclusión
Espero que nuestras explicaciones te hayan sido bastante claras y logren ayudar a muchos principiantes a comprender mejor cómo funcionan Divi y Divi Builder en WordPress.
Lo más importante es distinguir bien qué es lo que administra el tema, la página del creador y WordPress.
Un breve resumen:
- WordPress gestiona el contenido, la estructura y las funcionalidades del sitio
- El tema Divi gestiona el diseño general del sitio, así como las pocas características del tema en sí.
- Divi Builder gestiona la construcción de su contenido (páginas, artículos del blog) y su diseño.
