La semana pasada presentamos Divi 2.4 , la mayor actualización en la historia de Divi y un gran paso adelante para nuestro tema de WordPress más popular. Hay tantas funciones excelentes para explorar en esta actualización que fue difícil describirlas todas en la publicación de lanzamiento, por lo que hemos decidido hacer una serie de publicaciones de blog informativas de 2 semanas que tendrán como objetivo enseñarle cómo tomar aprovecha al máximo Divi 2.4 y sus nuevas opciones. En la novena parte de esta serie, exploramos una forma emocionante de usar los nuevos Módulos Globales de Divi.
Aprenda todo sobre Divi 2.4 aquí
Hoy te mostraré cómo crear una apariencia única para tu blog y cómo unificar esa apariencia usando módulos globales. ¿Por qué es tan importante esta combinación? ¡Porque una vez que haya creado su nueva apariencia de blog utilizando el Módulo de título de publicación global, el estilo se puede cambiar en todo su blog sin tener que editar cada publicación! Hay 3 piezas importantes en este rompecabezas:
- El nuevo módulo de título de la publicación que le permite extraer automáticamente la metainformación de la publicación, como el título de la publicación, el autor, la fecha y la imagen destacada, y mostrar esos elementos de una manera única.
- Las nuevas funciones de nivel de publicación de Divi que le permiten usar Divi Builder en las publicaciones, así como eliminar la barra lateral de la publicación y el título predeterminado de la publicación.
- La biblioteca Divi y los nuevos elementos de la biblioteca global de Divi que le permiten sincronizar un solo módulo, fila o sección en varias publicaciones o páginas de su sitio.
Paso uno: creación de su nuevo diseño de publicación de blog
Para comenzar, personalizaremos el diseño de nuestra publicación de blog para que sea completamente diferente al blog estándar de Divi. De forma predeterminada, las publicaciones de blog en Divi adquieren un estilo clásico. Hay una barra lateral a la derecha, el contenido de la publicación del blog a la izquierda y un título de la publicación / destacado en la parte superior. Es un formato que todos conocemos y amamos, pero también es un formato que se parece a cualquier otro blog en Internet. Entonces, ¿por qué no intentar mezclar un poco las cosas? Divi lo hace posible.
Lo primero es lo primero, cambiemos un poco nuestra estructura general eliminando la barra lateral a favor de un diseño de ancho completo. Esto ahora se puede lograr usando la configuración de Diseño de página dentro del cuadro Configuración de publicación de Divi. Encontrará este cuadro a la izquierda o debajo del editor de publicaciones al escribir su publicación.
Una vez que seleccionemos el diseño «Ancho completo» y guardemos, verá que la barra lateral se ha eliminado por completo de la publicación. Esto nos da más espacio para trabajar. Dado que usaremos Divi Builder para construir nuestra publicación, este diseño de ancho completo nos dará la opción de aprovechar las secciones de ancho completo y los módulos de ancho completo para crear publicaciones atractivas en un estilo similar al de Medium.com.
En particular, utilizaremos el nuevo módulo Título de publicación de ancho completo de Divi para darle a nuestra publicación de blog un encabezado más único y atractivo. Sin embargo, antes de que podamos hacer eso, primero debemos eliminar la visualización de título predeterminada que se agrega automáticamente en la parte superior de cada publicación de blog. Esto también se puede lograr desde el cuadro Configuración de publicación de Divi mencionado anteriormente.
Después de seleccionar «Ocultar» para la opción Título de la publicación dentro del cuadro de configuración, notará que el título, los metadatos y la imagen destacada que normalmente se agregan en la parte superior de la publicación se han eliminado.
Ahora que se eliminó el título predeterminado de la publicación, podemos agregar nuestra propia versión personalizada utilizando el módulo de título de publicación de ancho completo. Para comenzar, asegúrese de estar utilizando Divi Builder para crear su publicación haciendo clic en el botón morado «Usar Divi Builder» que se encuentra arriba del editor de publicaciones. Esto habilitará el constructor y le permitirá construir su publicación de arriba a abajo utilizando elementos del constructor.
Para agregar nuestro nuevo título personalizado, agregue una nueva sección de ancho completo en la parte superior de su publicación y luego agregue un módulo de título de publicación de ancho completo dentro de la sección.
Esto abrirá el cuadro de configuración para el módulo del título de la publicación, donde puede ajustar la visualización del título de su publicación personalizada. Hay muchas opciones aquí, incluyendo:
Mostrar título : dentro de cada módulo de título de publicación, puede elegir qué información desea mostrar. Si desea deshabilitar el título por completo y solo mostrar su imagen destacada y metadatos, esta opción se puede deshabilitar.
Mostrar meta : también puede optar por ocultar toda la metainformación que normalmente se agrega debajo del título de la publicación, como el autor, la fecha y las categorías de la publicación. Deshabilitar esta opción ocultará toda la información a la vez. También puede deshabilitar piezas individuales de metainformación usando la configuración a continuación.
Mostrar autor : esto deshabilitará o habilitará el nombre del autor dentro del cuadro meta de la publicación.
Mostrar fecha : esto deshabilitará o habilitará la fecha de publicación dentro del cuadro meta de publicación.
Formato de fecha : aquí puede ajustar el formato utilizado para la visualización de la fecha. Por ejemplo, podría cambiar del 23/01/2015 al 23 de enero de 2015 y así sucesivamente.
Mostrar categorías : esto deshabilitará o habilitará categorías dentro del cuadro meta de la publicación.
Mostrar recuento de comentarios : esto deshabilitará o habilitará el recuento de comentarios dentro del cuadro de metadatos de la publicación.
Mostrar imagen destacada : mostrar la imagen destacada es opcional. Si desea ocultar la imagen destacada de la publicación, puede desactivarla aquí.
Ubicación de la imagen destacada : si la imagen destacada está habilitada, puede elegir entre varios métodos de visualización. Puede colocar la imagen encima del título, debajo del título o incluso usarla como imagen de fondo detrás del título de la publicación.
Efecto de paralaje : si la imagen destacada se utiliza como imagen de fondo, puede habilitar el modo de paralaje.
Orientación del texto : además de controlar qué elementos de texto aparecen en el título de su publicación, también puede ajustar su orientación, eligiendo entre: texto a la izquierda, a la derecha o centrado.
Color de fondo del texto : al aplicar un color de fondo a su texto, se colocará un cuadro de color alrededor de su título.
Color del texto : puede elegir entre texto claro y oscuro para el título de su publicación. Si ha aplicado un color de fondo de texto oscuro, considere hacer que el texto del título de su publicación sea claro para asegurarse de que sea legible.
Utilizando estas diversas configuraciones, puede crear varios estilos para su blog. Como ejemplo para este tutorial, usaré la configuración que se muestra en la captura de pantalla a continuación. En particular, he elegido colocar la imagen destacada «encima» del título de la publicación. También agregué un «color de fondo de texto» y ajusté la fuente, el estilo y el tamaño del título de la publicación dentro de la Configuración avanzada de diseño.
¡El resultado final es una publicación de aspecto completamente diferente en comparación con el diseño de publicación predeterminado de Divi! ¡Ahora hemos creado un estilo único para nuestro blog que es diferente de todos los demás blogs de Divi y de WordPress en la red! Experimentar con las diversas configuraciones dentro del módulo Título de la publicación puede producir una multitud de resultados.
Este nuevo estilo de encabezado se ve particularmente bien cuando se combina con módulos de imagen de ancho completo. Dado que estamos utilizando Divi Builder para construir nuestra publicación, hay muchas opciones de diseño nuevas para aprovechar.
Paso dos: sincroniza tu nuevo diseño usando módulos globales
Ahora que hemos creado una apariencia única para nuestra publicación de blog, el siguiente paso es unificar todo nuestro blog bajo el mismo estilo y hacer que ese estilo sea fácil de administrar. Entonces, ¿cuál es el principal problema que estamos resolviendo aquí? Crear un nuevo módulo de título de publicación con exactamente la misma configuración cada vez que escribe una nueva publicación de blog lleva tiempo. Además, si ha creado 1,000 publicaciones de blog y ha utilizado su nuevo módulo de título de publicación en la parte superior de cada una, ¿qué sucedería si algún día quisiera ajustar el diseño? ¡Se vería obligado a revisar las 1,000 publicaciones de blog para ajustar el módulo de título de la publicación dentro de cada una! Eso no suena muy divertido en absoluto. Afortunadamente, podemos evitar la molestia guardando nuestro módulo de título de publicación personalizado en la Biblioteca Divi como un módulo global. No repasaré todo lo relacionado con el Módulo global, ya que esto ya se ha tratado ennuestra publicación anterior . Asegúrate de comprobarlo si quieres profundizar un poco más.
Para guardar el título de esta publicación en la biblioteca Divi, haga clic en el botón «Guardar y agregar a la biblioteca» al editar el módulo o la sección principal del módulo. En este caso, guardé toda la Sección de ancho completo en la Biblioteca Divi. Durante el proceso de guardado, verá una opción para «hacer de esto un elemento global».
Una vez que el elemento se haya guardado como global, notará que se vuelve verde dentro del generador. Los elementos globales se pueden identificar fácilmente dentro del constructor por su color verde.
¡El siguiente paso es agregar esta misma sección global en la parte superior de cada nueva publicación que cree! Dado que el título de la publicación toma automáticamente la información de la publicación actual, no es necesario editar el módulo al agregarlo a una página nueva. El título de su publicación, los metadatos y la imagen destacada son capturados por el módulo sin instrucciones adicionales. El módulo solo controla la organización de esos elementos, que serán compartidos por cada instancia del módulo global.
Cada vez que escriba una nueva publicación de blog, haga clic en el enlace «Agregar de la biblioteca» al agregar una nueva sección y ubique el título de su publicación global recién guardada.
Una vez que se haya agregado el título de esta publicación a cada una de las publicaciones de su blog, ¡todas compartirán exactamente el mismo formato de encabezado! No hay necesidad de hacer nada excepto agregar el módulo global a la publicación, ya que el módulo toma automáticamente la información de la publicación para la publicación en particular a la que se ha agregado.
¡Ahora hemos unificado toda la apariencia de todo nuestro blog usando Divi Builder! Lo que es aún más importante es que si alguna vez queremos cambiar la apariencia de todas nuestras publicaciones de blog, ¡solo tenemos que editar el módulo de título de publicación global una vez! Dado que este mismo modo se ha agregado a cada página, una vez que haya editado el módulo en una ubicación, el cambio se enviará a todas las instancias del módulo global.
Con unos pocos clics, podemos ajustar el diseño de nuestro blog. Por ejemplo, aquí cambié el color de fondo del título de la publicación a rojo y ajusté la ubicación de la imagen destacada para que se use como imagen de fondo (en lugar de colocarla debajo del título de la publicación).
¡En solo unos segundos, todo el estilo de nuestro blog ha sido alterado!
Un nuevo blog que es fácil de administrar
Mi objetivo aquí era no solo mostrarte cómo crear un blog de apariencia única usando Divi Builder, sino también cómo hacerlo de manera que sea fácil de administrar. Este es un ejemplo perfecto de cuán poderosos pueden ser los nuevos elementos de la biblioteca global de Divi (especialmente cuando se usan para módulos que toman su contenido dinámicamente). Espero que estés disfrutando usando Divi Builder en las publicaciones de tu blog, ¡y espero ver todas las hermosas publicaciones que crees!