Cómo utilizar las entradas CSS personalizadas integradas de Divi para la edición receptiva avanzada

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 la pantalla del escritorio, tableta o teléfono (sin conocer CSS). Parte de la edición receptiva incorporada de Divi incluye un método simplificado para realizar cambios de diseño receptivos más avanzados utilizando CSS personalizado. Esto es mucho más conveniente que tener que depender de una hoja de estilo externa con consultas de medios. Incluso puede realizar ajustes en el 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 de respuesta conveniente 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 general (puntos donde el diseño cambia según el ancho del navegador) que están integrados en la configuración de cualquier elemento en Divi Builder. Estos tres puntos de interrupción están destinados principalmente a facilitar la configuración de diseño específica para pantallas de escritorio, tabletas y teléfonos.

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

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

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 en esas pestañas se mostrará dentro del rango de esos tres puntos de interrupción de respuesta principales.

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

Comprensión de 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 (o apunta) 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 título 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 apuntará) a la totalidad o ciertas partes de ese elemento Divi. El número de casillas CSS personalizadas disponibles variará 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 el título, la descripción y el botón. Esto se debe a que el módulo tiene más partes que se pueden orientar 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.

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

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

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

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

Para acceder a los tres principales puntos de interrupción del diseño receptivo para cualquiera de los cuadros de entrada css, simplemente coloque el cursor sobre el elemento y haga clic en el ícono de la tableta. Luego verá las tres pestañas de diseño receptivo.

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 que el botón de promoción para una llamada a la acción 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 de promoción y agregar "display: block;".

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

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

De forma predeterminada, 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.

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á establecido 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 px 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á inteligentemente la consulta de medios para la tableta en el backend al rango más preciso entre 768px y 980px (o ancho máximo: 980px y ancho mínimo: 768px).

Qué se aplica el CSS personalizado en el backend

Digamos que agregamos CSS personalizado a las tres pestañas receptivas (computadora de escritorio, tableta y teléfono).

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

En la tableta, anulamos el código del escritorio y simplemente extendimos el botón a todo el ancho del módulo.

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

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

Escritorio:

@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:

@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

@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;
}

¿Cómo se almacena el CSS en Divi?

Como parte de las optimizaciones de velocidad incorporadas de Divi, todos los estilos dentro de Divi Builder (incluido el CSS personalizado) se combinarán, reducirán y almacenarán como un archivo CSS estático para una carga de página más rápida. Entonces, si desea evitar la necesidad de agregar CSS personalizado a través de un tema secundario, puede aprovechar las entradas de CSS receptivas integradas sin tener que preocuparse por ralentizar su sitio.

Para obtener más información, consulte nuestra publicación sobre cómo acelerar su sitio Divi.

Pensamientos finales

Con suerte, esta publicación lo ayudará a comprender un poco mejor cómo aprovechar los cuadros de entrada CSS personalizados incorporados de Divi para realizar cambios de diseño convenientes y receptivos en su sitio web.

Para la mayoría de las personas, no habrá necesidad de ir a la pestaña avanzada para agregar CSS personalizado a su diseño. Divi tiene tantas opciones integradas que incluso los usuarios avanzados rara vez encontrarán la necesidad de utilizar CSS personalizado. Sin embargo, si llega el momento en que necesita un estilo avanzado, es útil saber lo fácil que es hacerlo en Divi.

¿Cuál ha sido su experiencia con las entradas CSS personalizadas de Divi?