Explorando Divi 2.4: un paquete de biblioteca GRATUITO creado a partir de todo lo que hemos aprendido en la serie de blogs Divi 2.4

Eche un vistazo rápido a la página de demostración que vamos a construir

Elegí cubrir esta página debido a su amplia variedad de características de Divi 2.4, como la nueva configuración de temas, filas de ancho completo, encabezados de pantalla completa, elementos globales, colores de fondo transparentes, css personalizado, configuraciones avanzadas de módulos y mucho más.

Ver la demostración en vivo

Mirando la estructura de la página de alto nivel

Antes de entrar en los detalles finos, aquí hay un resumen de la estructura de la página. Revisaré cada una de estas secciones con más detalle, pero tómese un momento para comprender cómo se divide la página.

Lo primero es lo primero. Definición de la tipografía

Una de las primeras cosas que siempre hago es definir mi tipografía. Esto ayuda a informar el color, el contenido y la textura general de la página. Aquí hay un vistazo a mi configuración de tipografía para esta demostración. Todas mis otras configuraciones generales usan los valores predeterminados de Divi.
Más información sobre el nuevo personalizador de temas

Construyendo el encabezado de pantalla completa

La primera sección de la página de inicio de Interior es una sección de ancho completo con un módulo de encabezado de ancho completo. En este módulo, he agregado una imagen de fondo de paralaje, un logotipo, un título, un subtítulo y una flecha de desplazamiento.
Una mirada en profundidad a los módulos de encabezado de pantalla completa

Aquí hay un vistazo a mi configuración general y avanzada del módulo. Puede hacer clic en las capturas de pantalla para ampliarlas. Algunas personalizaciones a tener en cuenta aquí son mi elección de flecha de desplazamiento (configuración general) y estilo de fuente de subtítulo (configuración avanzada)

Ancho completo, igual altura, fila de 3 columnas

La siguiente sección en nuestra página es una fila de tres columnas que se ha configurado en ancho completo y se le ha dado un medianil personalizado que elimina el espacio entre las columnas. Dentro de cada columna hay un módulo de publicidad para establecer el ícono y el texto, y luego otro módulo de publicidad para agregar un ícono que vincula a secciones más abajo en la página.

Configuración de sección y fila: antes de ver el contenido aquí, veamos cómo se construyen la sección y la fila. Primero, definí un relleno superior e inferior personalizado de cero para la sección y la fila y activé «Mantener relleno personalizado en dispositivos móviles» porque también quiero mantener esa apariencia sin canaleta en los dispositivos móviles. Capturas de pantalla a continuación.

Configuración de fila general: activé «Hacer ancho completo» y usé un ancho de medianil personalizado de ‘1’ en la Configuración de fila para que, independientemente del ancho del navegador del usuario, las 3 columnas abarquen el ancho completo. Tenga en cuenta que un valor de ancho de medianil de ‘1’ elimina todo el espacio entre columnas.

Configuración avanzada de filas: le di a cada columna su propio color de fondo, relleno personalizado (5%) y activé «Ecualizar alturas de columna» para que las alturas de las columnas sean siempre las mismas sin importar su contenido. Usé porcentajes para el relleno de mi columna para que crezca y se reduzca proporcionalmente con el ancho del navegador para una experiencia más fluida.
Más información sobre la configuración de la nueva fila de Divi

Crear el contenido dentro de cada columna

Como se mencionó anteriormente, hay dos módulos dentro de cada columna. La primera parte del contenido se compone de un módulo de Blurb con una imagen, un título y un contenido personalizados. El título y el contenido se diseñaron a través de la Configuración de diseño avanzada en la imagen de abajo a la derecha. Debido a que cada columna tiene un color de fondo diferente, los tres anuncios publicitarios tienen diferentes valores de color avanzados.

Iconos de desplazamiento: el icono de desplazamiento se agregó a través de otro módulo publicitario con «Usar icono» habilitado. Seleccioné el ícono deseado y el color del ícono, y luego configuré un tamaño de ícono personalizado en la configuración avanzada. Tenga en cuenta que utilicé un negro transparente para el color del icono para poder clonar el mismo módulo en los colores de fondo de las tres columnas.

Agregar enlaces de desplazamiento suave: también puede ver que le di al icono de desplazamiento hacia abajo una URL de #recent-interiors. También le he dado a la sección Interiores Recientes de mi página una ID CSS de «interiores recientes». Puede vincular a cualquier elemento con una ID de CSS única simplemente agregando un ‘#’ delante de la ID. Normalmente, esto saltaría rápidamente a su lugar, pero Divi se desplazará sin problemas a cualquier enlace interno que agregue a su página. Le he dado a las tres flechas de desplazamiento diferentes enlaces de páginas internas para que todos se desplacen sin problemas a la sección adecuada.

Una imagen perfecta de ancho completo

A continuación, agregué una imagen de ancho completo que funciona perfectamente con las tres columnas que agregué en el paso anterior. Seamos honestos, esta relación fluida requirió bastante manipulación de fotos y un poco de suerte. En resumen, edité una imagen de archivo para que tuviera divisiones perfectas de 3 columnas y desvanecí la parte superior de cada columna en los valores de color exactos de las columnas de arriba.

Si bien esto mejora en gran medida este diseño específico, no es necesario para que sea una página sólida. Puede ver cómo se habría visto esta página sin la transición perfecta.

Adición de imágenes que tocan el borde de la sección

Estas dos secciones son filas de 2 columnas que se han hecho de ancho completo. A diferencia de la fila de 3 columnas de ancho completo anterior, no estoy usando un ancho de medianera personalizado para que el contenido todavía tenga algo de espacio para respirar (resaltado en rojo). Sin embargo, quité el acolchado inferior de la primera sección y fila para que la silla toque el borde inferior de la sección (línea azul). De manera similar, quité el acolchado superior de la sección de la lámpara y la fila para que la lámpara toque el borde superior de la sección. Otra personalización a tener en cuenta aquí es el relleno superior personalizado que agregué al módulo de texto en la parte inferior derecha de la imagen a continuación.

Imágenes uniformes y colores de fondo de sección

Puede parecer que el contenido de texto de estas secciones está encima de una imagen de fondo más grande, pero de hecho, las imágenes están en sus 1/2 columnas pero se desvanecen perfectamente en el color de fondo de la sección.

Este es otro ejemplo más de cómo las imágenes correctas que se usan con los colores de fondo correctos pueden mejorar en gran medida el diseño de la página, pero en mi opinión honesta, no es lo que define el diseño de la página. Por ejemplo, este diseño aún se ve muy bien con imágenes sin modificar.

Adición y estilo de los bloques de texto

Los bloques de texto son módulos de texto simples creados en el editor de texto, a diferencia del editor de texto visual. Así es como se ve mi entrada y dejo que la configuración de tipografía de mi tema maneje todos los estilos de texto, tamaños y colores fuera de un poco de estilo en línea para mi enlace personalizado.

Pero, ¿qué pasa con esas tres pequeñas imágenes?

Si bien podría haber agregado una cuadrícula de imágenes con el módulo de la galería, agregué tres módulos de imagen separados con un poco de CSS personalizado para mostrar la nueva función CSS personalizada de Divi. Entonces, esto es lo que realmente se ve en el constructor.

En el CSS personalizado de cada imagen le dije al módulo que tuviera un 30% de ancho con un margen derecho de 5% (la última imagen tiene un margen derecho de 0).
Una publicación completa sobre la pestaña CSS personalizada

Aquí está el resultado final, con los anchos y márgenes de la imagen sumando hasta el 100% del ancho.

Agregar una galería a una fila de ancho completo

El módulo de la galería se ve realmente increíble con las nuevas filas sin canalón de ancho completo. La siguiente sección de nuestra página muestra este ejemplo en una fila de columna 2/3 :: 1/3. Nuevamente, he definido 0 relleno superior e inferior para esta fila y la sección. El contenido de la fila 2/3 es prácticamente el mismo que el de los otros bloques de texto del ejemplo anterior, por lo que hablaré principalmente de la galería de la columna 1/3 en esta sección. Sin embargo, señalaré que el módulo de texto de la izquierda aquí tiene un relleno personalizado del 15% en todos los lados para darle mucho espacio para respirar.

Cosas a tener en cuenta al usar este diseño

Este diseño es mucho más fuerte cuando se usan imágenes que tienen la misma altura. De esta forma, la galería y la sección no cambian constantemente de altura según la diapositiva actual. Otro problema de altura es la posibilidad de que la columna de texto sea más alta que la galería si hay demasiado contenido de texto o si las imágenes tienen una altura demasiado baja. Si su contenido de texto es demasiado largo, creará un espacio debajo de la galería, pero no es el fin del mundo.

Galería de imágenes de tres columnas

Esto puede parecer una galería en una fila de ancho completo, pero en realidad es una fila de tres columnas con un módulo de imagen en cada columna.

¿Por qué no usar un módulo de galería?

Hay ventajas y desventajas en el uso de un módulo de galería. Elegí específicamente usar este método poco intuitivo para plantear estos puntos.

Ventajas del módulo de galería: si tuviera que usar un módulo de galería, solo habría tenido que usar un módulo en lugar de tres. Esta ventaja se multiplica en el caso de querer añadir más imágenes a esta sección. Otra gran ventaja es poder hacer clic en una imagen para activar la caja de luz de la galería donde el usuario puede desplazarse por la galería de imágenes en el modo de caja de luz.

Desventajas del módulo de galería: sabía que solo quería mostrar tres imágenes en una sola fila aquí, y el módulo de galería muestra cuatro columnas en una fila de 1 columna y se divide en dos columnas en ciertos puntos de interrupción. Esto causaría un desglose desigual, razón por la cual elegí usar tres módulos de imagen separados.

Usando el mismo formulario de contacto en cada página

Queriendo agregar el mismo pie de página de contacto en cada página, utilicé la nueva función de elemento global en Divi 2.4. Si todavía te saltaste mi recomendación de leer nuestras publicaciones anteriores, aquí es donde pongo mi pie en el suelo y te sugiero encarecidamente que lo hagas Como mínimo, lee nuestra publicación detallada sobre elementos globales y la biblioteca Divi .

Ahora que he guardado esto como una sección global, cada vez que quiero contenido de mi sección, como el número de teléfono o la dirección de correo electrónico ‘Enviar a’, solo tengo que hacerlo una vez, en lugar de en cada página de mi sitio web.

Limitar el ancho de mi formulario de contacto

Es difícil ver que está sucediendo, pero estoy limitando el ancho del contenido en esta sección usando la nueva opción de fila «Usar ancho personalizado». Usando esta nueva configuración, le dije a mis filas que nunca fueran más anchas que 680 px porque siento que el módulo de la tabla de precios y la longitud de la línea de texto eran demasiado anchas cuando usaba el ancho predeterminado de 1080 px. En caso de que se lo haya perdido, aquí hay más información sobre la configuración de todas las filas nuevas .

Dar estilo al formulario de contacto

Como se menciona una y otra vez en esta serie, hay muchas maneras de dar estilo a sus módulos utilizando la configuración avanzada de diseño. Con la nueva configuración, pude usar un color de fondo transparente para mis campos de formulario. Aquí hay una publicación detallada sobre el uso de colores transparentes en Divi .

Si eres un veterano de Divi, es posible que hayas notado el botón «Enviar» centrado. Es posible que esto no se vea tan bien con un captcha, pero debido a que no estoy mostrando un captcha, utilicé la pestaña CSS personalizada del Módulo de formulario de contacto para centrar manualmente el botón con una línea simple de css.

Configuración del encabezado de navegación

Elegir un formato de encabezado

Después de crear algunas páginas más, llegó el momento de estilizar la navegación. Ya estoy mostrando el logotipo en el encabezado de pantalla completa en la parte superior de la página y quiero que el usuario explore la página de inicio del sitio antes de ir a otras páginas, así que opté por ocultar la navegación hasta que el usuario se desplace. Mi logotipo también es simétrico y solo tengo algunos enlaces, por lo que usar un logotipo en línea centrado también pareció funcionar muy bien para este sitio.
Un recorrido completo por la nueva configuración de navegación

Estilo de la navegación

Solo muestro la navegación después de que el usuario se desplaza, lo que significa que el usuario solo verá la navegación fija. Sin embargo, todavía necesito diseñar mi barra de menú principal para configurar los estilos de texto en mi navegación. También configuré una altura de logotipo que es ligeramente más pequeña que su altura en la Navegación fija para que tenga un efecto de zoom sutil cuando la navegación fija aparece en el desplazamiento.

Paquete de biblioteca de demostración de interiores GRATIS

Como se prometió, todas las piezas que hemos revisado en esta publicación están disponibles para descargar para que pueda importarlas y usarlas en su propio sitio. A continuación, haré un resumen rápido de todos los elementos que se incluyen en el paquete de la biblioteca. Como siempre, nos tomamos muy en serio las licencias en Elegant Themes, por lo que no podemos compartir las imágenes exactas utilizadas en esta demostración, pero incluiremos todo lo demás tal como aparece en la demostración. También generalizaré el texto ya que la mayoría no está creando sitios web de diseño de interiores

Encabezado de pantalla completa

Tipo de elemento de biblioteca: Módulo

Fila sin canalón de ancho completo de 3 columnas

Tipo de elemento de biblioteca: Sección

Asegúrese de asignar enlaces internos a sus flechas hacia abajo si agrega esta sección a su página. Para hacer esto, solo proporcione la sección que desea vincular a una ID de CSS única, por ejemplo, ID de CSS = contact_footer. Luego, solo escriba #contact_footer en el campo de URL en la configuración del módulo de Blurb y ¡listo!

Fila de ancho completo de 2 columnas

Tipo de elemento de biblioteca: Sección

Este elemento tiene cero relleno inferior en la sección y la fila para que su imagen toque el borde inferior de la sección.

Fila de ancho completo de 2 columnas

Tipo de elemento de la biblioteca: Sección

Este elemento tiene cero relleno superior en la sección y la fila para que su imagen toque el borde superior de la sección.

2/3_1/3 Columna Fila sin medianil de ancho completo

Tipo de elemento de biblioteca: Sección

Tenga en cuenta que si agrega esto a su página, la galería no aparecerá. Divi usa la biblioteca de medios de WordPress para crear galerías, lo que no nos permite completar previamente las galerías en los paquetes de la biblioteca Divi.

Fila sin canalón de ancho completo de 3 columnas

Tipo de elemento de biblioteca: Sección

Pie de página de contacto global

Tipo de elemento de biblioteca: Sección

Tenga cuidado, esta es una sección global, por lo que si la agrega a varias páginas, todas estarán sincronizadas. También he incluido una versión no global en el paquete de la biblioteca.

El diseño completo

Tipo de elemento de la biblioteca: diseño ¡

También se incluye en el paquete de la biblioteca el diseño completo en caso de que solo quiera usarlo todo! No incluí el pie de página de contacto global en el diseño, pero está incluido en la descarga, por lo que si desea reemplazar el pie de página de contacto no global con el global, puede hacerlo fácilmente.

Cómo usar este paquete de biblioteca

Descargar e importar este paquete a su propio sitio es factible con solo unos pocos pasos. Primero, descargue el archivo vinculado a continuación y descomprima el archivo comprimido. Este es el archivo que importará a WordPress. Para importarlos a su biblioteca, vaya a Importar»>Herramientas > Importar . Seleccione el enlace de WordPress en la parte inferior de la lista de tipos de importación y se le pedirá que cargue el archivo. Entonces tendrá acceso a estos módulos para su propio uso. Recordatorio: ¡Antes de cargar, asegúrese de descomprimir el archivo zip! Solo se pueden importar archivos XML.

Agregar elementos de la biblioteca a su página

Una vez que se ha guardado un elemento en la biblioteca, se puede agregar a cualquier página nueva desde Divi Builder haciendo clic en el botón «Agregar desde la biblioteca» al agregar un nuevo módulo, fila o sección a la página. He agregado una categoría ‘Interior’ a cada elemento de este paquete para que pueda filtrar por esta categoría si ya tiene muchos otros elementos en su Biblioteca Divi

Descarga el paquete de la biblioteca

Esperamos que esta serie lo haya dejado mucho más informado, motivado e inspirado para usar este nuevo Divi para crear sitios web increíbles. Prometimos 14 publicaciones en esta serie, así que estén atentos a una publicación más emocionante de Divi mañana