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, la tableta o el teléfono (sin saber CSS). Parte de la edición receptiva integrada 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 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 convenientes en el diseño receptivo 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.
Divi tiene tres puntos de interrupción de respuesta generales (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 receptivos principales.
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 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 .
Comprender los cuadros de entrada de 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 integrada (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 se corresponderá (o apuntará) 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 puede tener solo 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 a las que se puede apuntar dentro de ese elemento del módulo.
Aquí hay una ilustración de los diferentes cuadros de entrada de CSS personalizados disponibles para el módulo Llamado a la acción.
Cada cuadro de entrada de CSS personalizado apunta 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 icono del signo de interrogación. Allí verá la clase CSS a la que se dirige.
Por lo tanto, no necesita agregar una clase de 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 de CSS directamente al cuadro que desea aplicar a la clase que ya está dirigida.
Cómo agregar CSS personalizado a los puntos de interrupción del diseño receptivo
Para acceder a los tres principales puntos de interrupción del diseño receptivo para cualquiera de los cuadros de entrada de css, simplemente desplace 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 de 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. Seleccionaría la pestaña de la tableta en el cuadro de entrada Botón de promoción y agregaría «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 la tableta (un ancho de 768 px) para tener una mejor idea de cómo se verá su diseño en tiempo real.
Dispositivo más pequeño hereda el CSS de dispositivos más grandes de forma predeterminada
De manera predeterminada, el código que se aplica a la pestaña de la tableta también lo heredará 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á 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 px de ancho. Entonces, 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 (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 extendemos 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 no tenga que hacerlo:
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;} |
¿Cómo se almacena el CSS en Divi?
Como parte de las optimizaciones de velocidad integradas de Divi , todos los estilos dentro de Divi Builder (incluido el CSS personalizado) se combinarán, minimizará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 de CSS personalizados integrados de Divi para realizar cambios convenientes en el diseño receptivo de su sitio web.
Para la mayoría de las personas, no habrá necesidad de aventurarse en 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 usar 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 tu experiencia con las entradas CSS personalizadas de Divi?