Divi tiene una edición de diseño receptiva incorporada que hace que sea extremadamente fácil ajustar el estilo de su sitio web en una pantalla de escritorio, tableta o teléfono (sin conocer CSS). Parte de la edición receptiva integrada de Divi incluye un método simplificado para realizar cambios de diseño receptivo más avanzados utilizando CSS personalizado. Esto es mucho más conveniente que tener que confiar en una hoja de estilo externa con consultas de medios. Incluso puede hacer ajustes al CSS visualmente en tiempo real para cada una de las pantallas del dispositivo, eliminando gran parte de las conjeturas del diseño receptivo.

En este tutorial, le mostraré cómo realizar cambios de diseño receptivos convenientes utilizando CSS personalizado para que pueda realizar retoques de diseño avanzados que pueden no estar disponibles en las opciones de diseño integradas de Divi.

Empecemos.

Puntos de interrupción integrados de Divi para la edición receptiva

Divi tiene tres puntos de interrupción de respuesta generales (puntos en los que el diseño cambia según el ancho del navegador) integrados en la configuración de cualquier elemento en Divi Builder. Estos tres puntos de interrupción están destinados principalmente a facilitar las configuraciones de diseño específicas para pantallas de escritorio, tabletas y teléfonos.

Los tres puntos de interrupción de respuesta principales de Divi para pantallas de escritorio, tableta y teléfono son los siguientes:

  • Escritorio: 981 px y superior
  • Tableta: entre 980 px y 768 px
  • Móvil: 767 px y menos

edición avanzada y receptiva

Estos tres puntos de interrupción son los mismos en todas las pestañas de diseño receptivo en todo el constructor Divi, no solo para CSS personalizado avanzado. Por lo tanto, cada vez que implemente las pestañas de diseño receptivo, cualquier estilo realizado debajo de esas pestañas se mostrará dentro del rango de esos tres puntos de interrupción receptivos principales.

edición avanzada y receptiva

Además, vale la pena mencionar que estos puntos de interrupción generales para pantallas de dispositivos no son los únicos puntos de interrupción integrados en la estructura del Divi Theme. Puede obtener información sobre aquellos en nuestro artículo sobre cómo identificar los puntos de respuesta sensibles de Divi .

Comprender los cuadros de entrada CSS personalizados de Divi

Cuando personaliza un elemento (sección, fila o módulo) dentro del constructor Divi, cada opción de diseño corresponde (u objetivos) a una parte específica de ese elemento. Por ejemplo, al editar un módulo de texto, puede apuntar a cualquier parte de ese módulo utilizando la configuración incorporada (es decir, Fuente del encabezado 2, Relleno izquierdo, etc.).

De manera similar, cuando personaliza un elemento Divi (sección, fila o módulo) utilizando los cuadros de entrada CSS personalizados avanzados, cada cuadro de entrada corresponderá (o se dirigirá) a la totalidad o ciertas partes de ese elemento Divi. El número de cuadros CSS personalizados disponibles diferirá según el elemento que esté diseñando. Un módulo de texto solo puede tener tres cuadros de entrada de elementos CSS personalizados (antes, principal y después), pero un módulo de llamada a la acción tendrá cuadros adicionales para título, descripción y botón. Esto se debe a que el módulo tiene más partes que pueden orientarse dentro de ese elemento del módulo.

Aquí hay una ilustración de los diferentes cuadros de entrada CSS personalizados disponibles para el módulo Llamado a la acción.

edición avanzada y receptiva

Cada cuadro de entrada CSS personalizado se dirige a una clase CSS específica dentro del elemento. Para ver la clase objetivo de un elemento en particular, simplemente desplace el cursor sobre el elemento y haga clic en el icono de signo de interrogación. Allí verá que la clase CSS está dirigida.

edición avanzada y receptiva

Por lo tanto, no necesita agregar una clase CSS a su fragmento CSS en el cuadro de entrada. Si lo hace, el código no funcionará.

edición avanzada y receptiva

En su lugar, simplemente agregue las propiedades CSS directamente al cuadro que desea aplicar a la clase que ya está siendo dirigida.

edición avanzada y receptiva

Cómo agregar CSS personalizado a puntos de interrupción de diseño receptivo

Para acceder a los tres puntos de interrupción del diseño de respuesta principal para cualquiera de los cuadros de entrada de CSS, simplemente desplace el cursor sobre el elemento y haga clic en el icono de la tableta. Luego verá las tres pestañas de diseño receptivo.

edición avanzada y receptiva

Ahora todo lo que necesita hacer es usar las pestañas para agregar CSS a cualquiera de las tres pantallas del dispositivo (escritorio, tableta y teléfono).

Por ejemplo, supongamos que desea tener el botón de promoción para una Llamada a la acción que abarque todo el ancho del módulo en la tableta y el teléfono, pero no en el escritorio. Debería seleccionar la pestaña de la tableta debajo del cuadro de entrada del botón Promo y agregar «display: block;».

Tenga en cuenta que cuando selecciona la pestaña de la tableta, el modo de vista de Divi Builder cambia al modo de vista de tableta (un ancho de 768px) para tener una mejor idea de cómo se verá su diseño en tiempo real.

edición avanzada y receptiva

Los dispositivos más pequeños heredan el CSS de dispositivos más grandes de forma predeterminada

Por defecto, el código que se aplica a la pestaña de la tableta también será heredado por la pantalla del teléfono. Para ayudarnos a recordar esto, Divi agrega un código de marcador de posición gris al cuadro de entrada con el mismo código que se agregó a la pantalla de la tableta.

edición avanzada y receptiva

La razón por la que la pantalla del teléfono hereda la pantalla de la tableta es porque el punto de interrupción real (consulta de medios) para la pantalla de la tableta en el backend está configurado en «ancho máximo: 980 px;» lo que significa que el código agregado a la tableta también se aplicará al teléfono porque la pantalla del teléfono tiene menos de 980 píxeles de ancho. Por lo tanto, si desea aplicar un estilo diferente al teléfono, deberá agregar un código adicional al cuadro de entrada de la pestaña del teléfono.

NOTA: Si también agrega CSS personalizado a la pantalla del teléfono, Divi cambiará de manera inteligente la consulta de medios para la tableta en el backend al rango más preciso entre 768 px y 980 px (o ancho máximo: 980 px y ancho mínimo: 768 px).

Qué se aplica el CSS personalizado en el backend

Supongamos que agregamos CSS personalizado a las tres pestañas sensibles (escritorio, tableta y teléfono).

En el escritorio, colocamos el botón en la parte inferior derecha del módulo.

edición avanzada y receptiva

En la tableta, anulamos el código del escritorio y simplemente ampliamos el botón al ancho completo del módulo.

edición avanzada y receptiva

En el teléfono, anulamos el CSS de la tableta y devolvemos la visualización a la normalidad.

edición avanzada y receptiva

Si inspeccionamos el CSS en el back-end, puede ver que Divi organiza el código con las siguientes consultas de medios para que no tenga que:

Escritorio:

01
02
03
04
05
06
@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tableta:

01
02
03
04
@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Teléfono

01
02
03
04
@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}
Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!