Divi se basa en una cuadrícula receptiva que apila (u ordena) sus columnas de cierta manera cuando pasa de una computadora de escritorio a una pantalla móvil. Las columnas se apilan en orden de izquierda a derecha. Entonces, si tiene tres columnas en el escritorio, la columna izquierda (primera) se apilará primero en el dispositivo móvil, seguida de las columnas 2 y 3 debajo. Esto tiene sentido y suele ser lo que se necesita para la mayoría de los sitios web. Pero a veces, ciertos diseños que se ven muy bien en el escritorio crean un orden inconsistente del contenido en el móvil. En este caso, deberá cambiar el orden de las columnas para crear una experiencia de usuario más coherente en dispositivos móviles.
Hoy les mostraré dos formas de cambiar el orden de apilamiento de las columnas de Divi en los dispositivos móviles. El primero consiste en crear una versión alternativa del contenido específicamente para dispositivos móviles utilizando la función «Desactivar activado» dentro de Divi. La segunda forma es usar CSS personalizado para agregar clases a sus columnas que designan su orden en Mobile.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
En una nueva página, haga clic para usar Divi Builder e inicie Visual Builder.
Desde el generador visual, elija un diseño de 2 columnas (½ – ½).
Agregue un módulo de imagen a la primera columna dentro de su fila.
En Configuración de imagen, cargue e inserte una imagen. (Estoy usando una imagen de 770 x 433 de unsplash.com)
A continuación, inserte un módulo de texto en la segunda columna de su fila.
En Configuración general de texto, agregue su texto al cuadro de texto Contenido.
Ahorrar
Ahora debería tener una fila con 2 columnas con la primera fila que contiene una imagen y la segunda fila que contiene texto. He etiquetado las columnas para usted en la siguiente imagen.
Desde el generador visual, duplique la fila con las mismas 2 columnas haciendo clic en el icono de fila duplicada.
En su segunda fila (la fila duplicada que acaba de crear), arrastre el módulo de imagen a la segunda columna y arrastre el módulo de texto a la primera columna.
Alternar las posiciones de la imagen y el texto en cada fila de esta manera puede ser una forma creativa y efectiva de mostrar su contenido en su página web. Pero también crea un problema cuando las columnas se apilan en dispositivos móviles. Al reducir el ancho de su navegador a menos de 980 px de ancho (el punto de interrupción para dispositivos móviles), el contenido de cada fila se apila de izquierda a derecha. Esto significa que la primera columna de su fila se apilará encima de la segunda columna. Esto puede causar un problema si desea mantener constante el flujo de contenido en los dispositivos móviles. Con el diseño actual, el flujo de contenido en dispositivos móviles se apilará en el siguiente orden:
Columna 1 (Imagen)
Columna 2 (Texto)
Columna 1 (Texto)
Columna 2 (Imagen)
Un mejor diseño para dispositivos móviles será cambiar el orden de apilamiento de las columnas en una de sus filas para que obtenga un diseño de contenido más consistente.
Dos formas de cambiar el orden de apilamiento de columnas en dispositivos móviles
1: Cambiar el orden de apilamiento de columnas en dispositivos móviles usando la función «Desactivar activado» de Divi
La función «Deshabilitar activado» de Divi le permite crear diferentes versiones de su contenido en pantallas de teléfonos, tabletas y computadoras de escritorio. Con unos pocos clics puedes ocultar o mostrar secciones de contenido en cualquier dispositivo.
Para este ejemplo, debemos mantener la segunda fila visible en el escritorio pero ocultarla en los dispositivos móviles. Luego, debemos crear una versión diferente de la segunda fila para que sea visible solo en dispositivos móviles.
Usando Visual Builder, duplique la segunda fila.
Antes de editar la nueva fila duplicada, abra Configuración de fila en la segunda fila.
En Configuración general de la fila, marque para deshabilitar la fila en el teléfono y la tableta.
Ahorrar
Ahora la segunda fila estará oculta en los dispositivos móviles. A continuación, debemos cambiar el diseño de nuestra nueva tercera fila a cómo queremos que esté el orden de las columnas en el dispositivo móvil.
Arrastre el contenido del módulo de texto a la segunda columna y arrastre el módulo de imagen a la primera columna.
Ahora vaya a Configuración general de fila para la tercera fila y marque la casilla para deshabilitar la fila en el escritorio.
Ahorrar
Ahora mira tus resultados. Notará que la tercera columna está deshabilitada en el escritorio y luego habilitada en los dispositivos móviles. Esto crea un diseño más consistente en dispositivos móviles.
¡Eso es todo!
Con esta capacidad de deshabilitar y habilitar ciertas secciones de contenido, puede cambiar/reordenar cualquier tipo de diseño fácilmente.
Además, al ver su página desde Visual Builder, Divi desvanece convenientemente el contenido que está oculto en la página para que pueda identificar qué contenido está deshabilitado.
Usar la función «Desactivado activado» para ocultar columnas y filas es una apuesta segura. Sin embargo, si hace esto demasiado y/o tiene mucho contenido, la edición de la página puede volverse confusa. Y, al realizar actualizaciones de contenido, debe actualizar el contenido en todas las versiones, no solo en una.
Si deshabilitar y habilitar el contenido no es la solución adecuada para usted, hay otra forma de ordenar su contenido en dispositivos móviles usando clases de CSS.
2. Cambiar el orden de apilamiento de columnas en dispositivos móviles usando clases CSS
Para hacer esto, vamos a usar CSS personalizado para que podamos agregar una clase a nuestras columnas que las ordenará como quieras en la pantalla móvil.
Luego, desde su panel de wordpress, vaya a Divi → Personalizador de temas → CSS adicional y agregue el siguiente CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
@media all and (max-width: 980px) {/*** wrap row in a flex box ***/.custom_row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-wrap: wrap; /* Safari 6.1+ */flex-wrap: wrap;}/*** custom classes that will designate the order of columns in the flex box row ***/.first-on-mobile {-webkit-order: 1;order: 1;}.second-on-mobile {-webkit-order: 2;order: 2;}.third-on-mobile {-webkit-order: 3;order: 3;}.fourth-on-mobile {-webkit-order: 4;order: 4;}/*** add margin to last column ***/.custom_row:last-child .et_pb_column:last-child {margin-bottom: 30px;}} |
Guardar y publicar
Mirando el CSS que acaba de agregar, observe que todo el CSS está contenido en una consulta de medios que solo usará el CSS para dispositivos móviles (en pantallas de menos de 980 px de ancho).
También notará la primera clase llamada «fila personalizada». Esta clase se agregará a la fila en la que desea cambiar el orden de apilamiento de columnas en el dispositivo móvil.
Las siguientes 4 clases («primero en móvil», «segundo en móvil», «tercero en móvil» y «cuarto en móvil») tienen una propiedad de pedido y un valor numérico asignado. Estas clases se agregarán a las columnas dentro de su fila «personalizada» para designar el orden en que desea que se muestren en el dispositivo móvil.
Ahora que tenemos nuestro CSS en su lugar, apliquemos estas clases a nuestra página.
Asegúrese de tener sus dos filas creadas siguiendo las instrucciones. Además, asegúrese de no tener ninguna de las filas deshabilitadas en dispositivos móviles o de escritorio.
Para este ejemplo, vamos a cambiar el orden de las columnas en la segunda fila en el móvil. Aquí hay una ilustración de lo que queremos lograr.
Usando Visual Builder, abra la configuración de fila para la segunda fila.
En Configuración de fila, en la pestaña CSS, agregue lo siguiente:
Agregue «custom_row» al cuadro de texto Clase CSS. (envuelve su fila en una caja flexible)
Agregue «segundo en el móvil» al cuadro de texto Clase CSS de la columna 1 (esto cambia el orden de la columna 1 para mostrar el segundo en el móvil. El nombre de la clase debería hacer que esto sea fácil de recordar).
Agregue «primero en el móvil» al cuadro de texto Clase CSS de la columna 2 (esto cambia el orden de la columna 2 para que se muestre primero en el móvil).
Nota: Es importante agregar una clase de ordenación a cada columna.
Ahora veamos los resultados. Observe en el dispositivo móvil cómo se han cambiado las columnas de la segunda fila para mostrar lo mismo que la primera fila. Esto crea un flujo constante de imagen → texto → imagen → texto.
Cambiar el orden de apilamiento de columnas de cualquier diseño usando clases CSS
Puede cambiar el orden de cualquier diseño de columna utilizando este mismo método. Recuerde que el CSS personalizado le permite agregar valores de ubicación primero, segundo, tercero y cuarto. Por ejemplo, si desea cambiar el orden de un diseño de un cuarto, medio, un cuarto como este:
Solo sigue los mismos pasos que hiciste antes. En la configuración de su fila, en la pestaña CSS, agregue la clase «fila_personalizada» a la fila y agregue su clase de pedido («primero en el móvil», «segundo en el móvil», «tercero en el móvil») a cada una de sus columnas. Recuerde asegurarse de agregar una clase a cada una de sus columnas para que todas tengan un valor de orden designado.
¡Eso es todo!
Metodo preferido
Si necesita crear diseños distintos para cada dispositivo y / o planea cambiar el contenido además del orden de las columnas en el dispositivo móvil, entonces deberá usar la función «Deshabilitado activado» de Divi para personalizar sus diseños.
Si solo necesita reordenar las columnas en el dispositivo móvil sin cambiar el contenido y no desea molestarse en hacer malabarismos con varias versiones de contenido deshabilitadas/habilitadas, entonces puede beneficiarse del método CSS.
Consideraciones de SEO
Ha habido mucho debate a lo largo de los años sobre cómo los motores de búsqueda manejan el contenido que está deshabilitado u oculto en una página. Aunque puede ocultar contenido para ciertos dispositivos, Google aún puede rastrear el contenido. Esto podría considerarse contenido duplicado y podría sugerir que el uso de la función «Desactivar activado» afectaría negativamente la clasificación de su página. Sin embargo, los motores de búsqueda como Google son bastante buenos para identificar si el contenido está oculto por razones de diseño receptivo. En definitiva, Google sabe si estás duplicando contenido para diferentes dispositivos y no te penalizará por ello. Mientras no oculte contenido por motivos maliciosos , es seguro de usar.
Pensamientos finales
Poder cambiar el orden de apilamiento de las columnas es extremadamente útil y, a veces, necesario. Todos necesitamos la capacidad de crear un diseño de diseño único para la pantalla de escritorio sin comprometer la consistencia del flujo de contenido en dispositivos móviles. Con la función «Desactivar activado» de Divi, puede crear diseños completamente diferentes para cada dispositivo. Además, con unas pocas líneas de CSS personalizado, puede agregar fácilmente clases a sus filas y columnas para ordenarlas como desee para dispositivos móviles.
Espero que esta publicación lo ayude a obtener más control sobre las pantallas de su dispositivo móvil.
Espero escuchar de usted en los comentarios.
¡Salud!