Seleccione una página
Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi

Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

Saber cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi será útil al crear sitios web de Divi. Y hay algunas buenas razones para hacerlo. Por un lado, no todos los sitios tienen logo. El título de un sitio es un buen reemplazo de logotipo. Otra razón es impulsar su marca al incluir información vital en su sitio donde todos la vean.

En este tutorial, le mostraremos cómo agregar un título de sitio dinámico y un eslogan a un encabezado global Divi. Esta solución extraerá dinámicamente el título del sitio y el eslogan del backend de WordPress. Además, tendrás todas las poderosas opciones de diseño de Divi para personalizar el título y el eslogan como quieras.

Resultado posible

Aquí hay una vista previa del diseño que crearemos en este tutorial.

Plantilla de encabezado global de título de sitio dinámico 6

Tenga en cuenta el título del sitio y el eslogan en la parte superior central del encabezado que se muestra dinámicamente.

Ejemplo de modificación de título Divi

Descarga gratuita

Únase a Divi Newlsetter y le enviaremos por correo electrónico una copia del Ultimate Divi Landing Page Layout Pack, junto con muchos otros recursos, consejos y trucos gratuitos y sorprendentes de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.DESCARGAR

Para importar la plantilla, vaya a Divi> Generador de temas.

Haga clic en el icono de portabilidad en la parte superior derecha de la página.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Elija una plantilla divi

Una vez completada, la plantilla de encabezado general estará disponible en Divi Theme Builder.

Modificar el encabezado divi global

En lo que sigue, pasaremos al diseño.

El título del sitio y el eslogan en WordPress

Cada sitio de WordPress tiene un título y un eslogan. El título del sitio es básicamente el nombre del sitio y el lema es una frase corta que generalmente explica de qué se trata.

No es raro agregar el título del sitio al instalar WordPress y olvidarlo.

Personalizar el título divi

Y, algunas personas ni siquiera se dan cuenta de que existe el lema, y ​​mucho menos se toman el tiempo para actualizarlo. Además, cuando usa el tema Divi, el título del sitio y el lema no serán visibles en su sitio de forma predeterminada, por lo que es fácil ignorarlos. Sin embargo, el título y el lema del sitio son partes esenciales del sitio web y serán reconocidos por los motores de búsqueda.

Puede ubicar y actualizar el título del sitio y el lema en WordPress en cualquier momento yendo al panel de WordPress y navegando a Configuración> General.

O bien, puede tomar otra ruta utilizando el personalizador de temas para actualizar el título del sitio en la configuración general.

Personalizar la identidad de wordpress

Ahora que sabemos dónde están el título y el eslogan del sitio en el backend de WordPress, ¡exploremos cómo podemos agregarlos a un encabezado Divi!

Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global en Divi

Importación de la plantilla de encabezado global prediseñada

Para este tutorial, nos centraremos en cómo agregar el título y el eslogan dinámico del sitio a un encabezado existente en lugar de crear un encabezado completo desde cero. Le ahorrará tiempo y mejorará la claridad. Entonces, para comenzar este diseño de encabezado, vamos a importar una plantilla de encabezado global predefinida de nuestro cuarto paquete generador de temas .

Una vez que tienes descargado el paquete de creación tema , descomprima el archivo y ubique el archivo JSON de plantilla de sitio web predeterminado.

Luego vaya a Divi> Theme Builder.

Haga clic en el icono de portabilidad en la parte superior derecha. En la ventana emergente de portabilidad, elija el archivo JSON de plantilla de sitio web predeterminado y haga clic en el botón Importar.

Importación del modelo Divi

Una vez que la plantilla se agrega al generador de temas, elimine la plantilla de pie de página y haga clic para editar el encabezado general.

Quitar plantilla del pie de página

Agregar un título de sitio dinámico y un eslogan al encabezado

Dentro del editor de diseño de plantilla, verá el encabezado prefabricado ya diseñado. Podemos comenzar a realizar nuestras personalizaciones de inmediato.

Mover logo

Para comenzar, arrastre el módulo de imagen que muestra el logotipo (dinámicamente) desde la columna central de la fila superior a la columna izquierda de la fila superior.

Agregue un módulo de llamado a la acción para mostrar el título y el lema del sitio

Luego, agregue un nuevo módulo de Llamado a la acción en la columna central de la fila superior (donde estaba el logotipo).

Personaliza el llamado a la acción

Usaremos el módulo Llamado a la acción para mostrar el título y el lema del sitio.

Pero antes de comenzar a agregar contenido, primero seleccione NO para usar el color de fondo.

Configurar acciones de llamado a la acción

Agregar un título de sitio dinámico

En la configuración de contenido, coloque el cursor sobre el cuadro de entrada del título y haga clic en el icono "Usar contenido dinámico". Luego seleccione "Título del sitio" de la lista.

Agregar un eslogan dinámico del sitio

Luego, pase el mouse sobre el área del cuerpo y seleccione el ícono "Usar contenido dinámico". Luego, seleccione "Lema del sitio" de la lista.

Agregar un eslogan de sitio divi

Agregar un enlace de página de inicio dinámico

Es común que el título del sitio redirija a la página de inicio al hacer clic, especialmente si está reemplazando el logotipo. Para redirigir todo el curso a la página de inicio, agregue el enlace de la página de inicio como contenido dinámico a la URL del enlace del curso.

Agregar un enlace a la página de inicio

Diseño del título del sitio y el texto del eslogan

Ahora el título del sitio y el eslogan se muestran dinámicamente en el encabezado. Todo lo que tenemos que hacer ahora es agregar un poco de estilo. Recuerde, necesitamos personalizar el texto del título para diseñar el título del sitio y el texto del cuerpo para diseñar el eslogan.

Vaya a la pestaña de diseño y actualice lo siguiente:

  • Fuente del título: Heebo
  • Peso de la fuente del título: negrita
  • Estilo de fuente del título: TT
  • Tamaño del texto del título: 32 px (escritorio), 24 px (tableta y teléfono)
  • Espacio entre letras de título: 0.3em
  • Fuente del cuerpo: Roboto
  • Estilo de fuente del cuerpo: cursiva
  • Color del texto del cuerpo:
  • Tamaño del texto del cuerpo: 13px
  • Espaciado entre letras del cuerpo: 0.1em
  • Altura de la línea del cuerpo: 1em
Personalizar la fuente del título divi

Para ayudar con el centrado, retire el relleno predeterminado debajo del texto del cuerpo agregando el siguiente CSS personalizado a la Descripción de la promoción:

relleno inferior: 0px
Agregar código divi css personalizado

Ajustes de diseño adicionales

Para esta última parte del tutorial, vamos a hacer algunos ajustes de diseño adicionales en el encabezado para asegurarnos de que los elementos permanezcan centrados verticalmente en cada columna y para darle al botón un diseño único. También agregaremos una línea ondulada antes y después al eslogan (solo por patadas).

Centrado vertical de las columnas / contenido

En este momento, la fila superior es la activa "Igualar alturas de columna" que utiliza la propiedad flex. Podemos capitalizar esto agregando un pequeño fragmento de CSS para asegurarnos de que todas las columnas permanezcan centradas verticalmente dentro de la fila. Para hacer esto, abra la configuración de la fila superior y agregue el siguiente CSS al elemento principal:

alinear elementos: centro;

Actualización de la columna con el botón

A continuación, abra la configuración de la columna 3 en la fila superior y saque el color de fondo y el relleno.

Personaliza el botón de contacto divi

Actualización del fondo del botón

Luego abra la configuración del módulo de botones y actualice el fondo con un nuevo degradado de fondo de la siguiente manera:

  • Fondo degradado Color izquierdo: #ffffff
  • Color de fondo derecho del degradado: # 1dbf73
  • Dirección de degradado: 135deg
  • Posición de inicio: 10%
  • Posición final: 0%
Personaliza el fondo del botón divi

Agregar caracteres antes y después al eslogan

Cada elemento de contenido dinámico se puede cambiar haciendo clic en el ícono de ajustes. Para agregar caracteres antes y después del eslogan, abra la configuración del módulo de llamada a la acción que contiene el eslogan y haga clic en el icono de edición en el contenido dinámico del eslogan del sitio. Luego agregue los caracteres a las entradas de antes y después.

Mostrar el lema divi

Resultado final

Para ver el resultado, abra cualquier página de su sitio. ¡Debería ver el título del sitio dinámico y el eslogan mostrados maravillosamente!

Resultado final divi

Consideraciones finales

Es realmente bueno que pueda personalizar un encabezado general con un título y un eslogan dinámico del sitio. Esto parece algo que será útil para muchos sitios. También me gusta la idea de incluir el título del sitio y el lema además del logotipo para una representación aún más sólida de la marca.

Fuente: Tema elegante

Cómo crear una transición perfecta con efectos de desplazamiento en Divi

Cómo crear una transición perfecta con efectos de desplazamiento en Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

Al diseñar su página de servicios, desea asegurarse de que sus visitantes noten todos los diferentes servicios que brinda. En muchos casos, este será solo un servicio específico que están buscando, pero si proporciona una forma simplificada en su estructura de servicio, es más probable que sus visitantes los traten a todos. 

En este tutorial, le mostraremos cómo ser creativo con los efectos de desplazamiento de Divi y crear una transición de servicio perfecta. ¡También puede descargar el archivo JSON gratis!

Vamos.

Resultado posible

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

Transición entre sección divi

1, recrear la estructura de los elementos

Agregar sección # 1

espaciamiento

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie los valores de relleno en diferentes tamaños de pantalla.

  • Acolchado superior: 80 px (escritorio y tableta), 0 px (teléfono)
  • Relleno inferior: 80px
Sección de parámetros Divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

apresto

Sin agregar más módulos, abra los parámetros de línea y aplique los siguientes cambios a los parámetros de dimensionamiento:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ancho: 90%
  • Ancho máximo: 1580 px
Configuración de espaciado divi

espaciamiento

Luego agregue un margen superior e inferior personalizado.

  • Margen superior: 200px
  • Margen inferior: 200px
Configuración de espaciado de línea Divi

Agregue un módulo de texto a la columna 1

Añadir contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Ingrese el contenido H2 que desee.

Nuestros servicios ofrecidos por los expertos del momento

Configuraciones de texto H2

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:

  • Título 2 Policía: trimestral
  • Encabezado 2 Tamaño del texto: 80 px (escritorio), 50 px (tableta), 40 px (teléfono)
  • Altura de la línea 2 de la cabeza: 1.2em
Jefe de policía divi

espaciamiento

Luego agregue un margen inferior en la tableta y el teléfono.

  • Margen inferior: 50 píxeles (solo tableta y teléfono)
Configuración de espaciado de texto Divi

Agregue un módulo de texto a la columna 2

Agregar contenido

Pasemos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto con algún contenido descriptivo.

Cuadro de texto contenido divi

Configuraciones de texto

Cambie a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: cabina
  • Estilo de fuente del texto: mayúscula
  • Color del texto: # 000000
  • Tamaño del texto: 18 px (escritorio), 15 px (tableta), 13 px (teléfono)
  • Espacio entre letras de texto: 3px (escritorio), 1px (tableta y teléfono)
  • Altura de la línea de texto: 3em
Parámetro de texto Divi

Agregar un módulo de separación a la columna 2

visibilidad

El siguiente y último módulo que necesitamos en esta columna es un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

  • Mostrar separador: sí
Divisor visible

línea

Luego cambie el color de línea del módulo.

  • Color de línea: # 000000
Fondo de color divisor

apresto

Luego haga algunos cambios en los parámetros de tamaño.

  • Peso del divisor: 3px
  • Ancho: 28%
Dimensionamiento del separador Divi

espaciamiento

También agregamos un margen superior.

  • Margen superior: 10px
Espaciado del módulo separador Divi

Agregar sección # 2

espaciamiento

Pasemos a la siguiente sección regular. Elimina el acolchado superior predeterminado de la sección.

  • Relleno superior: 0px
Sección 2 espaciado divi

desbordamientos

También oculta los desbordamientos.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
Ocultar desbordamientos del módulo divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una primera fila utilizando la siguiente estructura de columnas:

Elija un diseño divi

apresto

Sin agregar más módulos, abra los parámetros de línea, acceda a los parámetros de dimensionamiento y realice las siguientes modificaciones:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ecualizar alturas de columna: Sí
  • Ancho: 90%
  • Ancho máximo: 1580 px
Sección divi de configuración de canalón

espaciamiento

Luego, elimine todo el relleno predeterminado superior e inferior.

  • Relleno superior: 0px
  • Relleno inferior: 0px
Configuración de espaciado del módulo de línea Divi 1

Configuración de columna 1

Color de fondo

Luego abra la configuración de la columna 1 y cambie el color de fondo.

  • Color de fondo: # f7f7f7
Configuración de fondo del módulo divi line

espaciamiento

Complete la configuración de la columna agregando valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Acolchado inferior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Relleno izquierdo: 8%
  • Relleno derecho: 8%
Configuración de la columna del módulo de fila

Configuración de columna 2

espaciamiento

Continúe abriendo la configuración en la columna 2. Vaya a la pestaña avanzada y agregue valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 100 px (escritorio), 50 px (tableta y teléfono)
  • Relleno inferior: 200px
  • Relleno izquierdo: 150 px (escritorio), 0 px (tableta y teléfono)
Configuración de espaciado del módulo Divi

Agregar un módulo de separación a la columna 1

visibilidad

En la primera columna, el primer módulo que necesitamos es un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

  • Mostrar separador: sí
Mostrar separador divi 1

línea

Luego cambie el color de línea del módulo.

  • Color de línea: # 000000
Configuración del separador Divi

apresto

También realice cambios en los parámetros de tamaño.

  • Peso del divisor: 3px
  • Ancho: 50%
Dimensionamiento del separador Divi

Agregue un módulo de texto a la columna 1

Añadir contenido H3

El siguiente módulo que necesitamos en la columna 1 es un módulo de texto con contenido H3.

Configuración de la sección de contenido Divi

Configuraciones de texto H3

Cambie a la pestaña de diseño del módulo y cambie la configuración del texto H3:

  • Título 3 Policía: trimestral
  • Color del texto del elemento 3: # 000000
  • Elemento 3 Tamaño del texto: 50 px (escritorio), 40 px (tableta), 35 px (teléfono)
  • Altura de la línea 3 de la cabeza: 1.1em

Agregue un módulo de texto a la columna 2

Agregar contenido

En la segunda columna, el primer módulo que necesitamos es un módulo de texto con algún contenido descriptivo.

Configuración del módulo de texto Divi

Configuraciones de texto

Cambie la configuración de texto del módulo de la siguiente manera:

  • Fuente de texto: cabina
  • Estilo de fuente del texto: mayúscula
  • Tamaño del texto: 18 px (escritorio), 15 px (tableta), 13 px (teléfono)
  • Espacio entre letras de texto: 3px (escritorio), 1px (tableta y teléfono)
  • Altura de la línea de texto: 3em
Ajuste de fuente de molde de texto Divi

Agregue un módulo de botones a la columna 2

Añadir una copia

El siguiente y último módulo que necesitamos es un módulo de botones. Ingrese una copia de su elección.

Configuración de contenido del módulo de texto

Configuraciones de botones

Luego peina el botón.

  • Use estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 píxeles
  • Color de texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 0px
Configuración de estilo del botón Divi
  • Fuente del botón: trimestral
  • Peso de la fuente del botón: negrita
Configuración de color del botón Divi

espaciamiento

También agregue relleno personalizado.

  • Relleno superior: 50px
  • Relleno inferior: 50px
  • Relleno izquierdo: 100px
  • Relleno derecho: 100px
Configuración de espaciado de botones del módulo Divi

Posición

Y vuelva a colocar el botón en consecuencia:

  • Posición: absoluta
  • Ubicación: abajo a la izquierda
Ajuste de la posición del módulo del botón Divi

Clone la línea tantas veces como sea necesario

Una vez que haya completado la línea completa y todos sus módulos, puede clonar la línea completa tres veces.

Módulo de clonación divi

Cambiar todo el contenido

Asegúrese de editar todo el contenido en líneas duplicadas.

Editar el contenido de la sección divi

2. Aplicar efectos de desplazamiento

Efectos de desplazamiento de la primera fila

Movimiento horizontal

Una vez que haya completado todas las líneas en su sección, es hora de agregar los efectos de desplazamiento. Abra la primera fila de la sección y agregue movimiento horizontal.

  • Activar movimiento horizontal: sí
  • Inicio de desplazamiento: -5
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de movimiento de disparo: medio del elemento
Aplicar efectos de desplazamiento divi

Fundido de entrada y salida

Utilice también un efecto de desvanecimiento entrante y saliente.

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 100%
  • Opacidad promedio: 100% (al 50%)
  • Opacidad final: 0% (a 53%)
  • Efecto de movimiento de disparo: medio del elemento
Configurar la sección de animación de fundido divi

Efectos de desplazamiento de la fila central

Movimiento vertical

A continuación, agregaremos efectos de desplazamiento a todas las líneas entre la primera y la última línea de la sección. Primero use un movimiento vertical:

  • Activar movimiento vertical: sí
  • Inicio de desplazamiento: -4
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de disparo de movimiento: medio del elemento
Configuración de aniación de desplazamiento Divi

Fundido de entrada y salida

También active un efecto de desvanecimiento de entrada y salida.

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 0%
  • Opacidad promedio: 100% (del 27% al 50%)
  • Compensación final: 0 (al 53%)
  • Efecto de movimiento de disparo: medio del elemento
Animación de desvanecimiento de línea divi

Efectos de desplazamiento de última línea

Movimiento vertical

Luego abra la última línea de la sección y agregue el siguiente movimiento vertical:

  • Activar movimiento vertical: sí
  • Inicio de desplazamiento: -4
  • Compensación media: 0 (al 26%)
  • Desplazamiento final: 0
  • Efecto de movimiento de disparo: medio del elemento
Animación de desplazamiento del módulo de línea divi

Fundido de entrada y salida

¡Con un efecto de desvanecimiento entrante y saliente y listo!

  • Activar fundido de entrada y salida: Sí
  • Opacidad inicial: 0%
  • Opacidad promedio: 100% (del 27% al 50%)
  • Opacidad final: 100% (a 53%)
  • Efecto de movimiento de disparo: medio del elemento
Configuración de animación de apariencia del módulo de línea divi

Resultado final

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Demo final

Consideraciones finales

En este artículo, le mostramos cómo crear una hermosa transición de servicio con los efectos de desplazamiento de Divi. Incluso antes de que un servicio desaparezca, el otro comienza a aparecer, dando una agradable transición agradable a la vista. Este enfoque lo ayudará a resaltar cada servicio a nivel individual. ¡También puede descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Cómo crear un carrusel de desplazamiento de miembros del equipo con Divi

Cómo crear un carrusel de desplazamiento de miembros del equipo con Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

Al crear su página Acerca de, probablemente también desee presentar a los miembros de su equipo. Al hacerlo, permite que los visitantes interactúen con las personas detrás de su negocio. Si está buscando una forma de animar la sección de miembros de su equipo en el pergamino, este tutorial puede ser para usted. Crearemos un carrusel de miembros del equipo de desplazamiento automático que se mueve a medida que sus visitantes se desplazan por la página. 

Demostración

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

Scroll miembro del equipo divi

Comienzo de la concepción.

Añadir una nueva sección

espaciamiento

Comience agregando una nueva sección regular a la página en la que está trabajando. Abra la configuración de la sección y agregue relleno personalizado en diferentes tamaños de pantalla.

  • Acolchado superior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Acolchado inferior: 200 px (escritorio), 100 px (tableta y teléfono)
Configuración de parámetros

desbordamientos

Para asegurarnos de que no aparezca ninguna barra de desplazamiento horizontal en nuestro diseño, ocultaremos los desbordamientos de sección en la pestaña avanzada.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto
Configuración de desbordamiento

Agregar línea # 1

Estructura de la columna

Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:

Elija el diseño divi

apresto

Sin agregar ningún módulo todavía, abra la configuración de filas, cambie a la pestaña de diseño y cambie el ancho y el ancho máximo en la configuración de tamaño.

  • Ancho: 90%
  • Ancho máximo: 1580 px
Parámetro de línea divi

espaciamiento

También agregamos relleno superior e inferior personalizados.

  • Relleno superior: 100px
  • Relleno inferior: 100px
Configuración divi de espaciado de línea

Agregar un módulo de texto a la columna

Añadir contenido H2

Es hora de agregar módulos, comenzando con un primer módulo de texto. Ingrese el contenido H2 de su elección.

Conocer al equipo

Configuraciones de texto H2

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:

  • Título de fuente 2: Quicksand
  • Título de fuente 2: semi-negrita
  • Color del texto del elemento 2: # 000000
  • Encabezado 2 Tamaño del texto: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
Espaciado de texto Divi

Agregar un módulo de separación a la columna

visibilidad

Luego agregue un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

  • Mostrar separador: sí
Mostrar separador divi

línea

Luego realice algunos cambios en la configuración de la línea.

  • Color de línea: # edf000
  • Estilo de línea: sólido
  • Posición de línea: superior
Estilo de espaciado Divi

apresto

Y complete los parámetros del módulo modificando los parámetros de dimensionamiento en consecuencia:

  • Peso del divisor: 20px
  • Ancho: 11%
  • Alineación del módulo: izquierda.
  • Altura: 20px
Dimensionamiento del módulo divi line

Agregar una línea # 2

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Configuración de la columna Divi

apresto

Sin agregar más módulos, abra los parámetros de línea y modifique los parámetros de tamaño de la siguiente manera:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 2
  • Ancho: 100%
  • Ancho máximo: 100%
Configuración de ancho de canal

espaciamiento

Luego agregue relleno izquierdo y derecho solo en las pantallas más pequeñas.

  • Relleno izquierdo: 5% (solo tableta y teléfono)
  • Relleno derecho: 5% (solo tableta y teléfono)
Configuración de estilo de espaciado de línea

Parámetros de columna (5x)

Ahora, en los siguientes tres pasos de este tutorial, realizaremos algunos cambios en las columnas. Aplique los tres pasos a cada una de las columnas de su fila.

Configuración de la línea de parámetros Divi

Fondo degradado

Primero, agregue un fondo degradado a cada columna.

  • Color 1: rgba (255,255,255,0)
  • Color 2: rgba (0,0,0,0,84)
  • Tipo de gradiente: lineal
  • Posición de inicio: 25%
  • Posición final: 86%
  • Colocar degradado encima de la imagen de fondo: Sí
Configuración de la columna trasera Divi

Imagen de fondo

Luego cargue una imagen de fondo de su elección. Esta imagen de fondo representa a cada miembro del equipo, así que use una imagen diferente para cada columna.

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro
Agregar imagen de fondo de la columna divi

Elemento principal

Complete la configuración de la columna agregando CSS personalizado al elemento principal de la tableta de cada columna. Estas líneas de código CSS nos ayudarán a colocar las columnas una debajo de la otra en la tableta, en lugar de tener dos una al lado de la otra.

ancho: 100%! importante; margen: 50px 0px 50px 0px! importante;
Código css divi columna

Agregar un módulo de persona a la columna

Agregar contenido

Para compartir información sobre los miembros del equipo, usaremos un módulo de Persona. Agregue el primer módulo Persona a la columna 1 y use el contenido que desee.

Nombre de la persona divi

Eliminar Imagen

Luego borra la imagen. En su lugar, usamos la imagen de fondo de la columna.

Eliminar imagen divi

Imagen de fondo

Luego agregaremos una superposición de imágenes como imagen de fondo del módulo. Puede encontrar el que estamos usando descargando la carpeta al comienzo de este tutorial.

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro
Configuración de fondo del módulo de persona

Configuración del texto del título

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto del título de la siguiente manera:

  • Nivel de título: H3
  • Fuente del título: Quicksand
  • Peso de la fuente del título: negrita
  • Color del texto del título: #ffffff
  • Tamaño del texto del título: 230%
Personalización del título del módulo Divi

Configuración del texto del cuerpo

También cambie la configuración del texto del cuerpo.

  • Fuente del cuerpo: abierto sin
  • Color del texto del cuerpo: #ffffff
  • Altura de la línea del cuerpo: 2,2 em
Personalización del cuerpo Divi

Configuración de texto de posición

Luego realice algunos cambios en la configuración del texto de posición.

  • Posición de fuente: Open Sans
  • Color del texto de posición: # edf000
Posición Divi

espaciamiento

Y complete la configuración del módulo agregando valores de relleno personalizados a la configuración de espaciado.

  • Acolchado superior: 70%
  • Acolchado inferior: 10%
  • Relleno izquierdo: 10%
  • Relleno derecho: 10%
Espaciado de módulo divi person

Duplicar el módulo Persona 4 veces

Una vez que haya completado el módulo Persona, puede clonar todo el módulo cuatro veces.

Coloque duplicados en las columnas restantes.

Coloque módulos duplicados en las cuatro columnas restantes de la fila. Asegúrate de editar también el contenido.

Convierta la fila en un carrusel de desplazamiento automático

Cambiar el tamaño de la línea # 2

Ahora, para convertir esta fila en un carrusel de miembros del equipo de desplazamiento automático, necesitamos volver a abrir la configuración de la fila y cambiar el ancho y el ancho máximo en la configuración de tamaño.

  • Ancho: 180%
  • Ancho máximo: 220% (escritorio), 100% (tableta y teléfono)
Espaciado de modificación de divi de línea

Agregar movimiento horizontal de la línea # 2

Complete la configuración de línea agregando movimiento horizontal a la configuración del efecto de desplazamiento en la pestaña avanzada y listo.

  • Activar movimiento horizontal: sí
  • Iniciar desplazamiento:
    • Despacho: 2,5
    • Tableta y teléfono: 0
  • Compensación media: 0 (al 40%)
  • Desplazamiento final:
    • Oficina: -25 (al 62%)
    • Tableta y teléfono: 0
  • Efecto de movimiento de disparo: medio del elemento
Configuración de animación de desplazamiento Divi

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

oficina

Scroll miembro del equipo divi

Consideraciones finales

En este tutorial, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi. Específicamente, hemos recreado un hermoso carrusel de miembros del equipo con desplazamiento automático. A medida que los visitantes se desplazan hacia abajo en la página, aparece otra parte del carrusel.

Cómo agregar más íconos de redes sociales a Divi

Cómo agregar más íconos de redes sociales a Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

Divi le permite controlar y diseñar cada detalle de su sitio web, desde el encabezado hasta el pie de página. Uno de los elementos en los que más se hace clic de cualquier sitio web son los íconos de redes sociales. Una audiencia comprometida quiere encontrarte en otro lugar y conocerte. Obviamente, querrá que esto sea lo más fácil posible. 

Entonces, le mostraremos cómo activar íconos de redes sociales adicionales en las opciones de tema de Divi, cómo usar Divi Builder para insertar íconos de redes sociales en cualquier lugar de una página o publicación, y cómo aprovechar el poder. del tema Divi Builder para agregar íconos de redes sociales a cada rincón de su sitio.

Cómo activar fácilmente iconos de redes sociales adicionales en el pie de página Divi

La forma más fácil de agregar más íconos de redes sociales a su sitio Divi es ir al panel Opciones de tema , activando opciones para Facebook, Twitter, Instagram y RSS. Luego, todo lo que tiene que hacer es ingresar las URL de su perfil en los campos. Cuando haga esto, verá que aparecen como enlaces de íconos en el pie de página de su sitio:

Iconos sociales divi

En el menú del panel de WordPress, vaya a Divi - Opciones de tema y haga clic en la pestaña general . Desplácese hacia abajo para ver el conmutador de red. Además, justo debajo de esos conmutadores, asegúrese de ingresar las URL de cada ícono social de Divi que active. De lo contrario, aparecerá el icono, pero al hacer clic en él, el usuario no estará en ninguna parte. Usando un # en lugar de una URL, mantendrá al usuario en la página en lugar de redirigirlo potencialmente a una la página de 404 .

Opciones de tema Divi

Desplácese hasta el final de las opciones de su tema y haga clic en Guardar cambios . ¡Ahora puede ir al pie de página de su sitio y hacer clic en los íconos sociales para probarlos!

Si no ve los íconos en su pie de página, asegúrese de revisar su personalizador de temas en Apariencia - Personalizar y asegúrese de que Mostrar íconos sociales está marcado en las opciones de pie de página.

palabra wordpress

Sin embargo, si desea aún más opciones para los íconos de pie de página de redes sociales, continúe desplazándose hacia abajo hasta nuestra sección en Divi Theme Builder, donde discutimos tanto las plantillas personalizadas como los valores predeterminados generales.

Cómo usar Divi Builder para agregar rastreadores de redes sociales a una página o publicar contenido

A veces, poner íconos de redes sociales adicionales entre bloques de texto, imágenes u otro contenido en el cuerpo de las páginas o publicaciones puede tener mucho sentido. Su página de destino o la página Acerca de, por ejemplo, sería un buen lugar para agregar íconos sociales adicionales para que los visitantes sepan cómo conectarse con usted. Definitivamente se destacarán más que solo vincularse a sus perfiles sociales usando texto normal. Además, la gente busca iconos reconocibles.

Puede usar Divi Builder para insertar íconos de redes sociales directamente en sus páginas o publicaciones usando el seguimiento de redes sociales .

Cada vez que cree o abra una página o artículo existente en su panel de WordPress, verá un gran botón púrpura que le preguntará si desea usar Divi Builder o no.

Creación de artículos Divi

Y por supuesto que sí. Simplemente haga click Utilice Divi Builder para comenzar a construir su página o publicar desde cero (o desde uno de nuestros diseños predefinidos ). Además, puede incluir los íconos de las redes sociales Divi si está utilizando el editor de WordPress predeterminado. Todo lo que necesita hacer es insertar un bloque de Diseño Divi y siga los mismos pasos que seguimos a continuación.

Diseño divi gutenberg

Puede utilizar la herramienta para diseñar su página o publicarla como desee utilizando los módulos de creación de páginas disponibles. Si esta es la primera vez que usa Divi Builder, es posible que desee consultar primero esta descripción general para comprender claramente cómo funciona.

Cuando esté listo para agregar íconos de redes sociales a su página, haga clic en el círculo negro + en la sección en la que desea colocar sus íconos de redes sociales y desplácese hasta el cuadro de seguimiento de redes sociales aparece.

Inserción del seguimiento del módulo en las redes sociales

Se le pedirá que elija las redes sociales que desee antes de poder comenzar a personalizarlas. Haga clic en Agregar una nueva red social .

Agregar módulo social de red social divi

Luego seleccione uno de la lista desplegable.

Agregar una nueva red social

Con eso elegido, agregue la URL de su perfil. Opcionalmente, puede seleccionar un color, degradado, fondo, etc. específico para su icono.

Personalizar botón de red social

Una vez que haya agregado su primera red social, puede continuar agregando otras redes siguiendo estos mismos pasos. Todos aparecerán en la pestaña Contenido de los configuración de seguimiento de redes sociales . Puede editarlos, copiarlos o reorganizarlos arrastrándolos y soltándolos en su lugar.

Personalizar iconos sociales

Una vez que haya agregado sus redes sociales, cambie a las pestañas Contenido et diseño para jugar con otras opciones de personalización. Puede cambiar todo, desde la sombra del cuadro, el radio del borde, el espaciado, los filtros e incluso la animación de introducción para el módulo de iconos. También tienes la opción de incluir un botón Seguir para que todos tus iconos llamen más la atención sobre ellos. Cuando haya terminado, haga clic en la marca verde .

Síguenos botón divi

A continuación, puede mover los iconos por su página, trabajando en su espaciado y diseño como mejor le parezca. (Los Opciones de transformación divi son increíbles para eso, por cierto.) Cuando esté satisfecho con todas sus decisiones, presione el botón verde Guardar (o Publicar) en la esquina inferior derecha para registrar su nuevo módulo de iconos de redes sociales. Si no ve un botón Publicar / Guardar, toque el puntos suspensivos morados (tres puntos) en la parte inferior central de la pantalla para expandir el menú.

Botón Divi síguenos

Después de eso, sus íconos de redes sociales estarán en vivo en su sitio.

Usando Divi Theme Builder para agregar íconos de redes sociales

Como mencionamos anteriormente, Divi Theme Builder es una herramienta poderosa que le brinda un control completo sobre casi todos los aspectos de su sitio. Entonces, si está buscando agregar íconos de redes sociales en cualquier lugar, el generador de temas lo tiene cubierto.

Para comenzar con el generador de temas, vaya a Divi - Generador de temas en su panel de WordPress.

Divi Builder

Se trata en gran medida de agregar íconos de redes sociales a un diseño de generador de temas Divi existente. ¡O a uno nuevo! No importa si lo agrega al encabezado, pie de página o cuerpo general de su sitio, o incluso ciertas categorías u otros tipos de páginas especializadas. Seguirás el mismo proceso.

Primero encontraremos la sección que queremos agregar. Nuevamente, puede ser global o personalizado. Si nunca antes ha usado el generador de temas, es fácil. Agregaremos íconos de redes sociales a publicaciones individuales. Por tanto, puede empezar haciendo clic en Agregar un nuevo modelo y seleccionando todos los mensajes ou Mensajes en categorías específicas . Luego, marque las categorías que desea incluir. Luego haga clic en Crea una plantilla .

Agregar un modelo divi

Si ya ha configurado plantillas, simplemente haga clic en Editar lápiz o haga doble clic en la sección que desea modificar.

Diseño Divi

El proceso de agregar íconos de redes sociales aquí es el mismo que se describe anteriormente en el generador. Sin embargo, dado que está utilizando el generador de temas en lugar de simplemente editar una sola página, los íconos no aparecerán en el lugar que elija. Se pueden agregar plantillas a encabezados, pies de página y plantillas globales. Y puedes elegir cómo y cuándo aparecerán sin tener que configurarlos una vez. No página por página, como lo haría anteriormente.

Por ejemplo, si queremos incluir los iconos de redes sociales debajo del título de la publicación, pero encima del contenido de la publicación en cada publicación de blog que publiquemos, simplemente agregaremos un módulo a seguir redes sociales. Haga clic en el círculo Negro + y selecciónelo en el diálogo Insertar un módulo .

Elige el módulo social

Luego, simplemente arrastre el módulo al lugar donde desea que aparezcan los íconos de redes sociales. (Estamos usando el modo de estructura alámbrica para esta ubicación). Entonces solo necesita agregar las redes sociales que desea mostrar. Luego, personaliza el tamaño y el color como lo hizo anteriormente.

Módulo de medios de comunicación social icono divi

Y así, agregaste algunos íconos de redes sociales al generador de temas Divi. Aparecerán en cualquier publicación de blog que cree (en este ejemplo).

Apariencia en divi con botón compartir

Y si no le gusta cómo se ven, el generador de temas es fácil de personalizar. Simplemente arrástrelos a una ubicación diferente, como la parte superior de la barra lateral.

Movimiento del módulo de intercambio social de Divi

Asegúrate de hacer clic en el botón verde Siguiente  en el rincón. Ahora, cada publicación de blog con esta plantilla en el sitio se cargará con sus íconos de redes sociales en la parte superior de la barra lateral.

iconos de la barra lateral

Agregar íconos de redes sociales al encabezado y pie de página con Divi Theme Builder

Quizás los íconos de redes sociales predeterminados en la configuración de Divi no funcionaban para usted o no ofrecían suficiente personalización. En ese caso, siempre puede usar el generador de temas para personalizarlo de manera más completa. 

En cualquier plantilla, puede agregar un pie de página personalizado. Esto reemplazará al Divi. Cualquier plantilla sin una plantilla personalizada mostrará el elemento de tema predeterminado. Los íconos de redes sociales pueden diferir de un archivo de publicación a página, según las necesidades de sus usuarios.

Diseño divi del tema de personalización

También puede agregar un pie de página global que reemplazará todos los otros pies de página que creó. (Esto también se aplica a los cuerpos y encabezados globales). 

Si ha diseñado 4 pies de página personalizados para publicaciones, páginas, proyectos y categorías, pero luego crea un pie de página global, solo se mostrará el pie de página global. 

Las plantillas globales son excelentes para los íconos de redes sociales en todo el sitio para, tal vez, un periódico o una marca. Si bien las plantillas personalizadas con íconos sociales pueden ser las mejores para creadores individuales que forman parte de una red.

Agregar un pie de página divi global

Al usar Divi Builder para encabezados, pies de página y plantillas de cuerpo personalizados, puede agregar íconos de redes sociales a casi cualquier parte de Divi que desee. No está limitado a los diseños predeterminados ni tiene que profundizar en el sistema de archivos de WordPress. Además, con el generador de temas, puede usar cualquiera de las opciones de diseño de Divi para arreglar los íconos de las redes sociales y hacer que se destaquen de la manera correcta para cada audiencia en particular.

Conclusión

Cuando tiene las opciones predeterminadas de pie de página de Divi, la herramienta Divi Builder para publicaciones y páginas, el poder del Divi Theme Builder, no hay ninguna razón por la que deba instalar un complemento para agregar íconos de redes sociales a su sitio web. Divi te da control total sobre cómo se ven tus íconos sociales y dónde están. 

Ya sea que necesite promover una marca, un autor invitado, un grupo de creadores de contenido o simplemente los lugares donde se le puede encontrar en línea, Divi tiene una manera de hacerlo. Somos unilaterales, pero creemos que es la forma más fácil, fácil y elegante de agregar íconos de redes sociales a su sitio web.

Creación de una cuadrícula de beneficios dinámicos para productos WooCommerce

Creación de una cuadrícula de beneficios dinámicos para productos WooCommerce

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

La forma en que diseña la página de su producto tiene un impacto inmediato en el comportamiento de sus visitantes. Un diseño de página de producto bien elaborado y personalizado puede facilitar que los visitantes decidan si quieren comprar su producto. Si está buscando una manera de hacer que la página de su producto sea más atractiva, probablemente le gustará este tutorial. 

Le mostraremos cómo incluir una cuadrícula dinámica de beneficios del producto en su diseño utilizando Divi y el complemento Advanced Custom Fields. Comenzaremos creando un grupo de campos para beneficios. Luego, completaremos los campos personalizados en nuestra página de producto e incluiremos el contenido dinámico en nuestra plantilla de página de producto. 

Resultado posible

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Posible resultado divi

1. Instale el complemento ACF y el complemento de grupo de campo de beneficio del producto

Instale el complemento Campos personalizados avanzados

Para mostrar los diversos beneficios del producto en el backend de nuestros productos, usaremos el complemento gratuito Advanced Custom Fields. Accede a tu Backend de WordPress> Complementos> Agregar nuevo> Buscar complemento ACF> Instalar> Activar .

Instalar un complemento de campo personalizado avanzado

Vaya a campos personalizados y agregue un nuevo grupo de campos.

Una vez que haya instalado y activado el complemento ACF, podrá acceder a sus campos personalizados y agregar un nuevo grupo de campos.

Crear campos acf

Configuraciones de grupo de campo

Asigne un título a su nuevo grupo de campos y permita que aparezca solo en las páginas de productos.

  • "Tipo de mensaje" es igual a "Producto"
Agregar reglas

Agregar un primer campo

Continúe agregando un nuevo campo para el título de su primer beneficio de producto.

  • Etiqueta de campo: Título del beneficio 1
  • Tipo de campo: texto
Agregar campo ac
Personalización del campo Divi

Repita el paso para los campos restantes

Haga lo mismo con los demás beneficios del producto y sus descripciones. Todos estos campos requieren el tipo de campo "Texto" asignado.

  • Título del servicio 1
  • Descripción de beneficios 1
  • Título del servicio 2
  • Descripción de beneficios 2
  • Título del servicio 3
  • Descripción de beneficios 3
  • Título del servicio 4
  • Descripción de beneficios 4
Configurar campos acf

2. Agregar beneficios a los productos

Abrir o agregar un nuevo producto

Una vez que haya creado su grupo de campos y sus campos, puede agregar beneficios de producto a sus productos a nivel individual. Abra un producto de su elección o cree uno nuevo.

Creación de productos Divi

Complete los campos de Beneficios del producto

Y cumplir con los beneficios del producto.

Rellena los campos de ventajas divi

3. Cree una plantilla de página de producto en Divi Theme Builder

Vaya a Divi Theme Builder y agregue una nueva plantilla

¡Es hora de empezar con Divi! Para crear una nueva plantilla, vaya a Divi Theme Builder y haga clic en "Agregar una nueva plantilla".

Constructor de temas Divi

Use una plantilla en todos los productos

Usamos esta plantilla en todos los productos, pero siéntase libre de seleccionar productos con una categoría o etiqueta específica.

Agregar todos los productos de woocommerce

Ingrese al editor de plantillas de cuerpo del modelo

Luego ingrese el cuerpo del modelo haciendo clic en "Agregar un cuerpo personalizado" y seleccionando "Crear un cuerpo personalizado".

Edificio divi body

Editar sección # 1

Color de fondo

Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y cambie el color de fondo a negro.

  • Color de fondo: # 000000
Configuración de fondo de la sección Divi

espaciamiento

Pase a la pestaña de diseño de la sección y agregue algunos rellenos superiores e inferiores personalizados.

  • Relleno superior: 10px
  • Relleno inferior: 10px
Configuración del espaciado de la sección Divi

Agregar una nueva línea

Estructura de la columna

Continuemos agregando una nueva línea a la sección que tenga la siguiente estructura:

Configuración del diseño del módulo de línea

espaciamiento

Sin agregar ningún mod, vamos a abrir la configuración de la fila y hacer algunos ajustes de espaciado.

  • Utilizar canalones personalizados: sí
  • Ancho de canal: 1
  • Ancho: 90%
  • Ancho máximo: 100%
Configuración de espaciado de módulo de línea

espaciamiento

Elimine todo el espaciado interno superior e inferior.

  • Alto margen interno: 0px
  • Margen interno bajo: 0px
Configuración de espaciado del módulo de línea Divi

Agregue el módulo Aviso de carrito de Woo a la columna

Contenido dinámico

El único módulo que necesitamos en esta línea y sección es el módulo Woo Cart Notice. Asegúrese de que "Este producto" esté seleccionado en la sección dinámica.

  • Producto: Este producto
Configuración módulo de aviso de carro woo divi

Fondo de color

Luego abra la configuración del módulo y use un fondo transparente.

  • Color de fondo: rgba (0,0,0,0)
Configuración de divi del módulo de carro woo

Configuraciones de texto

Cambie a la pestaña "Diseño" y cambie la fuente del texto.

  • Fuente de texto: Karla
Configuración de fuente del módulo Divi

Ajuste del botón

Termine la configuración del complemento definiendo la configuración de estilo:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 px
  • Color del texto del botón: # 000000
  • Fondo del botón: # ffd623
  • Ancho del borde del botón: 0px
  • Borde redondeado Botón: 0px
Configuración de color del módulo de aviso de carro de Woo
  • Fuente del botón: Oswald
  • Estilo de fuente del botón: Shift
Ajuste del diseño del color del módulo de aviso del carro de Woo
  • Alto margen interno: 20px
  • Margen interno bajo: 20px
  • Margen interno izquierdo: 50 px
  • Margen derecho interno: 50 px
Módulo de diseño de configuración aviso de carro de corte

Agregar sección # 2

Fondo degradado

Agregue otra sección regular debajo de la anterior. Luego abra la configuración y use un fondo degradado de la siguiente manera:

  • Color 1: # 000000
  • Color 2: #ffffff
  • Posición de salida:
    • Escritorio: 30%
    • Tableta: 57%
    • Teléfono: 54%
  • Posición final:
    • Escritorio: 30%
    • Tableta: 57%
    • Teléfono: 54%
Regulación trasera del módulo divi line

espaciamiento

Vayamos a la pestaña Diseño y agreguemos un margen interno alto.

  • Relleno superior: 150px
Configuración de espaciado del módulo de línea Divi

Añadir una nueva linea

Estructura de la columna

Continúe agregando una nueva línea con la misma estructura que se muestra a continuación:

Configuración de estilo de línea Divi

apresto

Sin agregar ningún mod todavía, abriremos la configuración y cambiaremos el espaciado de la siguiente manera:

  • Use canales personalizados: sí
  • Canalón: 1
  • Ancho: 95%
  • Ancho máximo: 2560 px
  • Alineación de línea: centro
Módulo divi de configuración de canalones

Distanciamiento

También eliminaremos el margen interno superior.

  • Relleno superior: 0px
Configuración de espaciado del módulo Divi

Elemento principal

Y para centrar el contenido de la columna en Desktop, usaremos dos líneas de código CSS en el elemento principal del módulo de filas.

Desktop:

pantalla: flex; alinear elementos: centro;

Tableta y teléfono:

bloqueo de pantalla;
Configuración de estilo del módulo de línea divi

Agregue el módulo Woo Image a la columna 1

Contenido dinámico

Es hora de agregar módulos, comenzaremos con el módulo Woo Images en la columna 1. Asegúrese de que esté seleccionado "Este producto".

  • Producto: Este producto
Configuración del módulo de imagen de producto de Woocommerce

Efecto de animación de desplazamiento vertical

Agregamos un movimiento sutil a la imagen usando el efecto de desplazamiento de movimiento horizontal en la pestaña avanzada.

  • Activar movimiento vertical: sí
  • Iniciar desplazamiento:
    • Oficina: -4
    • Tableta y teléfono: 0
  • Desplazamiento promedio: 0
  • Desplazamiento final: 0
  • Efecto de movimiento de disparo: medio del elemento
Ajuste del módulo de imagen Divi

Agregue el módulo de título Woo a la columna 2

Contenido dinámico

En la columna 2, el primer mod que necesitamos es un mod de título de Woo. Asegúrese de que "Este producto" esté seleccionado en el área de contenido dinámico.

  • Producto: Este producto
red de beneficios del producto

Configuración del texto del título

Luego vaya a la pestaña de diseño y diseñe el texto del título de la siguiente manera:

  • Fuente del título: Oswald
  • Estilo de fuente del título: mayúscula
  • Color del texto del título: # ffd623
  • Tamaño del texto del título: 80 px
Ajuste del diseño del módulo de título Divi

espaciamiento

Complete el módulo de título de Woo agregando márgenes izquierdo y derecho.

  • Margen izquierdo: 5%
  • Margen derecho: 5%
Configuración del módulo de título Divi

Agregue el módulo de descripción de Woo a la columna 2

Contenido dinámico

Pasemos al siguiente módulo, que es un módulo de descripción de Woo. Usamos el siguiente contenido dinámico para esto:

  • Producto: Este producto
  • Tipo de descripción: breve descripción
Configuración del módulo de descripción del producto

Configuraciones de texto

Cambie a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Karla
  • Color del texto: #dbdbdb
  • Tamaño del texto: 17 px (escritorio y tableta), 15 px (teléfono)
  • Altura de la línea de texto: 1,9 em
Descripción del módulo de ajuste de color divi

apresto

Luego cambie el ancho en diferentes tamaños de pantalla.

  • Ancho: 59% (escritorio), 82% (tableta y teléfono)
Ajuste del ancho del módulo de resumen Divi

espaciamiento

Complete el módulo de descripción de Woo agregando valores de margen personalizados en la configuración de espaciado.

  • Margen superior: 50px
  • Margen inferior: 100px
  • Margen izquierdo: 5%
  • Margen derecho: 5%
Módulo de descripción de producto Divi

Agregue el módulo Blurb a la columna 2

Contenido dinámico

Para mostrar los beneficios del producto que agregamos en la primera parte de este tutorial, utilizaremos los módulos de Blurb. Agregue un primer módulo de Blurb y use el contenido dinámico del primer beneficio producido para el título y el cuerpo.

  • Título: Título de beneficio 1
  • Cuerpo: Descripción del beneficio 1
Configuración de texto del módulo de resumen Divi

Cargar imagen

Cargue una imagen o use un icono de su elección a continuación. Puede encontrar los que hemos utilizado a lo largo de este tutorial en la carpeta de descarga que pudo descargar al comienzo de este tutorial.

Configuración divi resumen del módulo de imagen

Configuración de imagen / icono

Pase a la pestaña de diseño del módulo y cambie la configuración de imagen / icono de la siguiente manera:

  • Colocación de imagen / ícono: Arriba
  • Alineación de imagen / icono: izquierda
Módulo de configuración Divi

Configuración del texto del título

Estamos modificando la configuración del texto del título a continuación.

  • Fuente del título: Oswald
  • Estilo de fuente del título: mayúscula
  • Tamaño del texto del título: 25 px
Configurar la fuente del módulo de resumen divi

Configuración de texto del cuerpo

Junto con la configuración del texto del cuerpo.

  • Fuente del cuerpo: Karla
  • Tamaño del texto: 17 px (escritorio y tableta), 15 px (teléfono)
  • Altura de la línea del cuerpo: 1,9 em
Configurar el resumen del módulo de texto div i

apresto

Luego vaya a la configuración de tamaño y cambie los anchos. Es importante utilizar un ancho principal menor al 50%, esto nos permitirá mostrar dos módulos Blurb uno al lado del otro en los siguientes pasos.

  • Ancho de imagen: 25%
  • Ancho: 49%
Configurar el tamaño del módulo de resumen de divi

espaciamiento

También agregaremos espacios alrededor del módulo Blurb usando valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior: 8%
  • Acolchado inferior: 8%
  • Relleno izquierdo: 8% (escritorio y tableta), 2% (teléfono)
  • Relleno derecho: 8% (escritorio y tableta) 2% (teléfono)
Configurar el espaciado del módulo de resumen divi

Elemento principal

Ahora nos aseguraremos de que el módulo Resumen muestre el texto uno al lado del otro, en dos pasos. Primero, nos aseguraremos de que el ancho del módulo sea menor al 50% (como hicimos en el paso anterior). A continuación, usaremos la propiedad en la fila. Agregaremos esta propiedad CSS en el elemento principal en la sección avanzada.

display: inline-block;
Agregar módulo divi de código CSS

Clonar el módulo de resumen 3 veces

Una vez que hayas completado el primer mod de Blurb, puedes clonarlo tres veces. Notará automáticamente que los módulos de Blurb aparecen en una cuadrícula.

Sección divi del nombre del producto

Edite las imágenes del módulo Blurb

Edite la imagen en cada pod de Blurb duplicado. Puede encontrarlos en la carpeta de descarga que puede haber descargado al principio de este artículo.

Imagen del módulo de resumen de Divi

Modificar el contenido dinámico del módulo Blurb

Modifique también el contenido dinámico de cada módulo de Blurb duplicado.

  • Título: Título del servicio (2,3 o 4)
  • Cuerpo: descripción de las ventajas (2,3 o 4)
Reglas del módulo de resumen Divi

Agregue bordes a los módulos de Blurb individualmente

Configuración de borde del módulo 1 de Blurb

Ahora, para terminar de diseñar nuestra cuadrícula, agregaremos bordes a los módulos de Blurb a nivel individual. Abre el primer mod de Blurb y usa un borde recto.

  • Ancho del borde derecho: 1px
  • Color del borde derecho: # ffd623
Módulo resumen divi de configuración de borde redondeado

Agregue también un borde inferior al primer módulo de Blurb.

  • Ancho del borde inferior: 1px
  • Color del borde inferior: # 000000
Configurar el margen inferior divi
Configuración de borde del módulo 2 de Blurb

Luego abra el segundo módulo Blurb y use un borde inferior.

  • Ancho del borde inferior: 1px
  • Color del borde inferior: # 000000
Módulo de borde de configuración resumen divi
Configuración de borde del módulo 3 de Blurb

Complete el diseño de la cuadrícula agregando un borde recto al tercer módulo de Blurb.

  • Ancho del borde derecho: 1px
  • Color del borde derecho: # ffd623
red de beneficios del producto

Añadir Woo Añadir a la cesta Módulo en la columna 2

Contenido dinámico

El último módulo que necesitamos en nuestro diseño es un módulo Woo Add to Cart. Asegúrese de que "Este producto" esté seleccionado en el área de contenido dinámico.

  • Producto: Este producto
Agregar a la configuración del módulo divi de la tarjeta

Configuraciones de campo

Vaya a la siguiente pestaña de diseño y cambie la configuración del campo.

  • Color de fondo de los campos: #ffffff
  • Color del texto del campo: # 000000
Configurar el estilo de color agregar al carrito módulo divi
  • Campos redondeados: 0px (todas las esquinas)
  • Ancho del borde inferior de los campos: 1px
  • Color del borde inferior de los campos: # 000000
Configurar el espaciado de la sección divi

Configuraciones de botones

Luego, peina el botón en consecuencia:

  • Use estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20 píxeles
  • Color del texto del botón: # 000000
  • Color de fondo del botón: # ffd623
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
Configurar el diseño del botón divi
  • Fuente del botón: Oswald
  • Estilo de fuente del botón: mayúscula
Configurar el botón divi
  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px
Configurar el tamaño del módulo divi

espaciamiento

Y complete los parámetros del módulo agregando valores de margen personalizados.

  • Margen superior: 100px
  • Margen izquierdo: 5%
Configurar el espaciado divi

3. Guarde las modificaciones del generador de temas y obtenga una vista previa del resultado

Una vez que haya terminado de diseñar la plantilla de la página del producto, puede guardar todos los cambios de Theme Builder y mostrar los resultados en sus productos.

Guardar diseño divi
Guardar modificaciones divi

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Resultado de la demostración

Consideraciones finales

En este artículo, le mostramos cómo ser creativo con su próxima plantilla de página de producto Divi. Específicamente, le mostramos cómo incluir una cuadrícula de beneficios de producto dinámica para agregar beneficios adicionales a la página de su producto. Creamos este tutorial usando Divi en combinación con el complemento Advanced Custom Fields. ¡También puede descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Cómo implementar el modo oscuro en su sitio con Divi

Cómo implementar el modo oscuro en su sitio con Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0px ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: el tema de WordPress más fácil de usar

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] DESCARGAR [/vcex_button][/ columna_vc][/fila_vc]

El modo oscuro continúa ganando popularidad como una opción conveniente que permite a los usuarios experimentar la web con menos tensión en la vista. Seamos realistas, todos tendemos a pasar más tiempo mirando las pantallas de lo que probablemente deberíamos, por lo que cualquier conveniencia adicional para la experiencia del usuario (como el modo oscuro) puede ser de gran ayuda. 

Los sistemas operativos, los programas y los navegadores generalmente incluyen capacidades de modo oscuro integradas, pero algunos desarrolladores lo llevan a otro nivel al incluir una experiencia de modo oscuro personalizada para su sitio web. La idea es tener más control sobre cómo se ve su sitio web en modo oscuro sin tener que comprometer la marca y / o el diseño.

En este tutorial, le mostraremos cómo crear un conmutador de modo oscuro personalizado en Divi desde cero sin un complemento. Con esta función de alternancia de modo oscuro, tendrá control sobre el diseño del modo oscuro y tendrá una mejor experiencia de usuario adaptada a su marca.

Vamos a empezar!

vista

Aquí hay una vista previa del diseño que crearemos en este tutorial.

Aquí está el botón de modo oscuro personalizado que vamos a crear.

Alternar el modo oscuro

Y aquí está el antes y el después del modo oscuro aplicado a uno de nuestros diseños predefinidos.

Y aquí está el interruptor de modo oscuro agregado a un encabezado global. Observe cómo permanece el modo claro / oscuro cuando navega por el sitio.

Parte 1: Construyendo el cambio del modo oscuro

En esta primera parte del tutorial, vamos a construir un conmutador de modo oscuro con una página en Divi. Una vez que se haya creado la palanca con el código, podrá guardarla en la biblioteca Divi y agregarla a cualquier lugar de su sitio web.

Para comenzar, agregue una fila de una columna a la sección predeterminada cuando construya desde cero con Divi en la parte frontal.

Sección Divi

Agregar módulo de resumen

Para construir la palanca personalizada, vamos a diseñar un módulo Blurb con un poco de CSS personalizado.

Agregue un nuevo módulo de texto de presentación a la línea.

Contenido

Elimina el contenido ficticio predeterminado para el título y el cuerpo. Luego agregue el ícono cuadrado en lugar de la imagen.

Módulo resumen Divi

diseño

Vaya a la configuración de diseño y actualice lo siguiente:

  • Color del icono: # 666666
  • Alineación de imagen / icono: izquierda
  • Tamaño de fuente del icono: 22 píxeles
Configuración del icono Divi
  • Ancho: 50px
  • Alineación del módulo: centro
  • Altura: 25px
Configuración de dimensionamiento divi
  • Margen: 0px bajo
  • Esquinas redondeadas: 4px
  • Ancho del borde: 2px
  • Color del borde: # 666666
Configuración de borde Divi

CSS personalizado

Una vez que el diseño esté en su lugar, cambie a la pestaña avanzada. En CSS personalizado, agregue el siguiente CSS personalizado al elemento principal para asegurarse de que el desbordamiento no quede oculto por el estilo de las esquinas redondeadas.

desbordamiento: visible! importante;

Luego agregue el siguiente CSS personalizado al elemento After:

contenido: "luz"; posición: absoluta; izquierda: -35px; arriba: 0px;

Esto agrega una etiqueta al módulo Blurb que cambiaremos de "claro" a "oscuro" al hacer clic.

Botón de alternancia Divi

Diseño del texto del cuerpo

Dado que el texto del pseudoelemento de la publicación hereda los estilos del texto del cuerpo, podemos agregar los estilos del texto del cuerpo usando las opciones de Divi de la siguiente manera:

  • Fuente del cuerpo: Roboto
  • Color del texto del cuerpo: # 666666
  • Tamaño del texto del cuerpo: 13px
  • Espaciado de las letras del cuerpo: 1px.
Botón de alternancia de fuente

Agregar código personalizado con un módulo de código

Para agregar el código necesario (CSS / JQuery) para operar el modo oscuro, usaremos un módulo de código.

Cree un nuevo módulo de código debajo del módulo Blurb en la misma columna.

Agregar módulo de código

Luego pegue el siguiente código en el área de código:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Agregar clases CSS personalizadas

El código personalizado requiere que tenga una clase CSS personalizada agregada al módulo o conmutador de Blurb. Esto permitirá que la propaganda active la función de alternar el modo oscuro y hacer clic.

Clase de módulo de difusión

Abra la configuración del módulo Blurb y agregue una clase CSS personalizada de la siguiente manera:

  • Clase CSS: et-dark-toggle
Código divi css

Clase capaz de modo oscuro

También necesitamos agregar una clase CSS personalizada a cada elemento Divi que queremos que tenga la capacidad de modo oscuro. Una vez que el elemento tiene la clase CSS, ese elemento heredará el CSS personalizado del "modo oscuro" en el código que agregamos después de que se habilitó el modo oscuro. Este método nos da más control sobre nuestro diseño de modo oscuro, ya que algunos elementos pueden no requerir estilo en modo oscuro.

Para comenzar, podemos agregar el modo oscuro a la sección que contiene nuestro interruptor de modo oscuro.

Abra los parámetros de la sección y agregue la siguiente clase CSS:

  • Clase CSS: et-dark-mode-able
Sección divi del selector de CSS

Parte 2: Agregar características del modo oscuro a una página Divi

Ahora que tenemos el código CSS y las clases en su lugar, estamos listos para aplicar la funcionalidad y el diseño del Modo Oscuro a una página completa en Divi. Para hacer esto, usaremos nuestro diseño prediseñado de la página de inicio de la aplicación móvil.

Para agregar el diseño, abra el menú de configuración en la parte inferior del generador visual y haga clic en el icono Agregar nuevo diseño.

Luego, seleccione el diseño de la página de destino de la aplicación móvil en la pestaña Diseños predefinidos.

Asegúrese de que la opción "Reemplazar contenido existente" NO esté seleccionada. No desea borrar la sección con el interruptor de modo oscuro.

Elija el diseño divi 1

Dado que el estilo del modo oscuro solo se aplicará a los elementos con la clase CSS "capaz y modo oscuro", podemos elegir agregar a la página de diferentes maneras.

  1. Podemos agregar la clase CSS a cada elemento de la página individualmente.
  2. Podríamos extender la clase CSS a elementos en toda la página (eso sería más rápido que hacerlo manualmente). Por ejemplo, podríamos abrir la configuración de la sección para la sección superior y extender la clase CSS para esa sección a todas las secciones de la página.
  3. Podemos agregar la clase CSS a los valores predeterminados globales del elemento. Esto aplicará la clase CSS a todos los elementos de todo el sitio, agregando capacidad de modo oscuro en todo el sitio. Por ejemplo, podríamos abrir la configuración de la sección y hacer clic en el icono predeterminado global para cambiar los valores predeterminados de la sección global. Luego podemos agregar la clase CSS y registrarla como una clase CSS para todas las secciones del sitio.

Agregar la clase CSS a los elementos de la página

Para este ejemplo, actualizaremos los elementos de la página agregando la clase CSS a los valores predeterminados globales de las secciones y los módulos de texto. Y también haremos algunas adiciones a otros elementos de la página a medida que avanzamos.

Todas las secciones

Para agregar la clase CSS a todas las secciones, abra la configuración de la sección superior que contiene el modo oscuro. Luego, cambie los valores predeterminados globales de la sección y agregue la siguiente clase CSS a los valores predeterminados globales de la sección:

  • Clase CSS: et-dark-mode-able

Todas las secciones especializadas.

Agregue también la clase CSS a los valores predeterminados globales en la sección especializada.

Agregar a todas las secciones especializadas

Módulos de texto

Luego abra la configuración de uno de los módulos de texto en la página y agregue la misma clase CSS a los valores predeterminados de texto global.

Agregar a módulos de texto

Para probar el resultado, vaya a la página en vivo y haga clic en el botón de modo oscuro en la parte superior de la página.

Así es como debería verse la página en modo claro.

Modo claro

Y así es como debería verse la página en modo oscuro.

Modo oscuro

Recursos Adicionales

Aquí hay algunos otros recursos que pueden ser de su interés.

Consideraciones finales

Equipar su sitio Divi con un conmutador de modo oscuro personalizado puede ser una excelente manera de mejorar la experiencia del usuario y crear un diseño completamente nuevo que agrada y alivia la vista. Espero que esto te sea de utilidad.