Tema AvadaNo sólo elAdmite dise?o adaptable.También viene con un conjunto completo deSistema de control flexibleAvada es una aplicación web que le ayuda a adaptarse fácilmente a una gran variedad de pantallas de dispositivos. En este artículo se detalla cómo funcionan las funciones adaptables de Avada y cómo configurarlas para ayudarle a crear sitios web que funcionen bien en ordenadores de sobremesa, tabletas y móviles.

I. Características de Avada Responsive Design

Avada, sí.Tema totalmente adaptableTodos los dise?os, módulos y elementos están disponibles en diferentes dispositivos.autoadaptación. Además, es compatible con las siguientes funciones:

• Configuración global de la capacidad de respuesta(puntos de interrupción de control, zoom, escalado de fuentes, etc.)
• Ajustes sensibles a nivel de elemento(se puede personalizar para distintos dispositivos)
• Vista previa en tiempo real(Puedes ver el efecto sin cambiar de dispositivo)
• Mecanismo de carga de imágenes con capacidad de respuesta(Cargue la imagen del tama?o más adecuado para la pantalla)

II. Opciones de Avada Responsive

Ruta: Avada > Opciones > Responsive

1. Dise?o adaptable

Esta opción está activada por defecto. Cuando está desactivada, la página será de ancho fijo y perderá la función de adaptación. Por lo general, debe mantenerse activada.

2. Control de cuatro puntos de interrupción principales (Breakpoints)

Estos puntos de interrupción controlan el momento en que la página empieza a cambiar de dise?o según el ancho de la pantalla:

Tipo de punto de interrupción	Descripción funcional
Grid Responsive Breakpoint	Controla cuándo el contenido de tipo cuadrícula (por ejemplo, blogs, portafolios) se divide en un dise?o de una sola columna.
Punto de ruptura de la cabecera	El control de cuándo una cabecera tradicional cambia a un menú móvil sólo se aplica a las cabeceras basadas en opciones. Las cabeceras creadas con Avada Layouts no se ven afectadas.
Punto de interrupción del contenido del sitio	Controla cuándo el área de contenido principal comienza a cambiar de un dise?o de varias columnas a un apilamiento de una sola columna para el área del cuerpo.
Sidebar Responsive Breakpoint	Controla cuando la barra lateral se mueve a la parte inferior de la pantalla en pantallas peque?as. Este es un ajuste antiguo y recomendamos utilizar Sticky Columns en su lugar.

3. Zoom para dispositivos móviles

contencióndispositivo móvil (smartphone, tableta, etc.)Permitir o no el zoom del contenido de la página con dos dedos. Generalmente se recomienda activarlo para mejorar la experiencia del usuario.

4. Personalizar el valor del punto de interrupción para pantallas peque?as y medianas

Puede ajustar el valor de píxel inicial para "Pantalla mediana" y "Pantalla peque?a".

Ejemplo:

• Punto de inicio de la pantalla central: 1100px
• Punto de partida en pantalla peque?a: 800px

Estos valores afectarán directamente a la vista previa responsiva y a la lógica de visualización del elemento.

5. Tama?o de letra adaptable

• Sensibilidad tipográfica: Controlfuente del titularLa velocidad a la que se reduce el tama?o en pantallas peque?as; cuanto mayor sea el valor, más rápido se reducirá la fuente en móviles.0 desactiva el escalado adaptativo de fuentes.
• Factor de tama?o mínimo de fuente
  • Controla un múltiplo del tama?o mínimo de fuente:
    • 0: sin límite mínimo de fuente
    • 1: fuente más peque?a = fuente actual
    • Ajustado a 2: fuente mínima = el doble de la fuente actual

Con estos dos parámetros, puedes mantener tus fuentes agradables y legibles en móvil sin perder la jerarquía.

III. Comportamiento adaptativo de la estructura de columnas

Ruta: Avada Builder > Contenedor > Configuración de columna

En Avada Builder, cada módulo de columnas puede configurarse con unpantalla (TV, ordenador o película)La anchura del siguiente. Por defecto:

• La pantalla mediana hereda el ancho de columna de la pantalla grande
• Pantalla peque?a ajustada automáticamente a ancho completo (100%)

También puede hacerlo al editar una columna concreta:

1. Haga clic en la opción "Columna".
2. Cambiar a vista responsive (icono superior izquierdo)
3. Establezca diferentes anchos de columna para pantallas grandes, medianas y peque?as, por ejemplo 1/4, 1/2 y 1/1.

IV. Avada Builder Responsive Previews

Cuando utiliza Avada Builder para el dise?o de páginas, hay un "icono de vista adaptable" en la barra de herramientas en el que puede hacer clic para cambiar entre diferentes emuladores de dispositivos:

• Grande (sobremesa)
• Medio (plano)
• Peque?os (teléfonos móviles)

Al editar el contenido en una pantalla diferente, Avada habilitará el "Conjunto de ajustes adaptables" para ese tama?o, es decir:

• Es posible configurar elementos para cada dispositivo individualmente con la funciónmargenyestilo caligráficoyalineaciónyamplitudet al. (y otros autores)
• Los ajustes no afectan a otros tama?os deapertura (jerga ajedrecística)Independientes entre sí.

Recomendaciones comunes de optimización

• La disposición en varias columnas no es recomendable para pantallas peque?as.Sugiero cambiar a un dise?o apilado de una columna
• Los contenidos para móviles no deben ser demasiado largos.Mantener el mensaje principal en la primera pantalla o en dos pantallas
• Fuentes y botones adaptablesDebe comprobar lo fácil que es para los usuarios chasquear los dedos
• Utilice la vista previa interactiva para probar de forma iterativa cada página, cada bloque de contenido de laRendimiento a diferentes tama?os

resúmenes

La funcionalidad responsive de Avada no sólo está activada por defecto, sino que también proporciona opciones de configuración completas, previsualizaciones de simulación de dispositivos y ajustes responsive a nivel de módulo. Tanto si se trata de una simple autoadaptación como de un complejo control de contenidos diferenciados por dispositivo, Avada facilita la tarea sin necesidad de escribir código. Para saber más sobreTutorial del tema Avadae información, sigaRed de fluctuación de fotonesSe actualiza a diario con multitud de tutoriales e información sobre WordPress.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres