Elementor viene con potentes funciones de edición responsive que te permiten hacer que tu sitio web tenga un aspecto bonito y fácil de usar en ordenadores, tabletas y teléfonos móviles con tan solo unos sencillos ajustes. y fácil de usar.
¿Qué es el diseño adaptable?
En pocas palabras.El diseño responsivo significa que una misma página web ajusta automáticamente su diseño al tamaño de la pantalla del dispositivo.：
- En un ordenador (pantalla grande), los contenidos pueden mostrarse uno al lado del otro (por ejemplo, tres columnas de imágenes);
- En una pantalla plana (mediana), se convierte automáticamente en dos columnas;
- En los teléfonos móviles (pantallas pequeñas), se apila automáticamente en una sola columna para evitar que el texto sea demasiado pequeño o que el contenido rebose.
Elementor se adapta automáticamente a la mayoría de los escenarios, pero sigue habiendo detalles que deben optimizarse manualmente para garantizar la mejor experiencia en cada dispositivo.
Paso 1: Conocer el modelo de edición responsive de Elementor
Una vez en la interfaz de edición de Elementor, hay tres iconos a la derecha de la barra de herramientas superior, que corresponden a las tres vistas de dispositivo:
- 🖥️ vista de escritorio(visualización por defecto)
- 📱 vista plana(768px ancho izquierda/derecha)
- 📱 Vista móvil(375px ancho izquierda/derecha)
método operativoHaga clic en el icono correspondiente para pasar al modo de vista previa de ese dispositivo. Todas las modificaciones de estilo (por ejemplo, tamaño de letra, espaciado, diseño) pueden ajustarse individualmente para un mismo dispositivo sin que se vean afectadas entre sí.
Paso 2: Configuración básica del diseño adaptable (3 obligatorios)
1. Tamaño del texto: evitar textos demasiado pequeños o demasiado grandes en los teléfonos móviles.
El texto que se ve bien en un ordenador puede no ser legible en un móvil (demasiado pequeño) o los saltos de línea pueden estar desordenados (demasiado grandes) y hay que ajustarlos individualmente:
- Seleccione el módulo de texto (títulos, párrafos, etc.) y vaya al panel "Estilos" de la derecha.
- Busque el ajuste "Tamaño de fuente" y haga clic en el "Icono de respuesta" (un pequeño icono de ordenador que muestra tres cuadros de entrada al hacer clic, correspondientes a escritorio/tableta/móvil) situado junto al valor.
- Cambie a "Vista móvil" e introduzca directamente el tamaño adecuado (por ejemplo, los títulos se ajustan a 24-32px en los teléfonos móviles, los párrafos a 14-16px).
Pista: El tamaño del texto sigue el principio de "cuanto más pequeña sea la pantalla, más grande pero más claro debe ser el texto" para garantizar que pueda leerse sin necesidad de hacer zoom en un teléfono móvil.
2. Anchura de las imágenes y módulos: evite sobrepasar la pantalla
Las imágenes configuradas con "ancho 80%" en los ordenadores pueden seguir apareciendo demasiado anchas en los teléfonos móviles, o tener demasiado espacio en blanco a ambos lados:
- Selecciona la imagen/módulo y ve al panel derecho "Estilos" (las imágenes están en "Estilos" → "Anchura", otros módulos pueden estar en "Avanzado" → "Anchura").
- Haga clic en el icono Adaptable situado junto al valor Anchura para cambiar a Vista móvil.
- Ajusta el ancho a "100%" (para que la imagen/módulo llene el ancho de la pantalla del teléfono y evite espacios en blanco a los lados), o ajústalo según necesites (por ejemplo, 90% para dejar un poco de margen).
tenga en cuenta: Si el tamaño de la imagen en sí es demasiado pequeño, al ajustarlo a 100% se difuminará, por lo que se recomienda preparar previamente imágenes de alta resolución (al menos 1000px de ancho).
3. Espaciado y márgenes: evitar que los contenidos se amontonen
El espacio de la pantalla del móvil es limitado, el espacio entre módulos es demasiado grande para desperdiciar espacio, demasiado pequeño parecerá abarrotado:
- Seleccione cualquier módulo (por ejemplo, botón, párrafo) y vaya al panel "Avanzado" de la derecha.
- Localice el "Margen exterior" (la distancia entre el módulo y otros elementos) o el "Margen interior" (la distancia entre el contenido dentro del módulo y el borde) y haga clic en el "Icono de respuesta" junto al valor.
- Cambie a "Vista móvil" y reduzca los valores (por ejemplo, cambie el margen exterior superior de 50px a 20px para que el módulo sea más compacto).
finuraPulse y mantenga pulsado Ctrl para seleccionar varios módulos al mismo tiempo y ajustar el espaciado por lotes para una mayor eficacia.
Paso 3: Ajuste del diseño (optimización del diseño de las columnas para teléfonos móviles)
Si su página de inicio utiliza un "diseño multicolumna" (por ejemplo, 3 columnas de descripciones de servicios, 2 columnas de combinaciones gráficas), es posible que se apelmace en los teléfonos móviles y sea necesario cambiarla a una sola columna:
- Localice la Sección que contiene varias columnas (haga clic en el recuadro azul punteado fuera del módulo para seleccionar toda la sección).
- Vaya al panel "Diseño" de la derecha y busque el ajuste "Columnas" (por ejemplo, actualmente "3 columnas").
- Haga clic en el icono Responsive situado junto al valor Columnas para cambiar a Vista móvil.
- Cambie el número de columnas a "1 columna", en este momento, se apilará automáticamente en una sola columna en el teléfono móvil, y el contenido es más claro.
ejemplo típicoA continuación, un ejemplo: 3 columnas de productos en ordenadores, 2 columnas en tabletas y 1 columna en teléfonos móviles, lo que aprovecha el gran espacio de la pantalla y garantiza la legibilidad de la pantalla pequeña.
Paso 4: Ocultar elementos innecesarios (para pantallas pequeñas)
Algunos elementos que enriquecen la página en un ordenador pero resultarían redundantes en un móvil (por ejemplo, iconos decorativos complejos o textos explicativos de gran tamaño) pueden ocultarse en un teléfono móvil:
- Seleccione el módulo que desea ocultar y vaya al panel "Avanzado" de la derecha.
- Desplácese hacia abajo hasta los ajustes de "Respuesta" y busque la opción "Ocultar en dispositivos móviles" (o marque "Ocultar en escritorio" y "Ocultar en tableta" respectivamente).
- Al marcar "Ocultar en dispositivos móviles", el módulo desaparecerá automáticamente en la vista móvil y no afectará a la visualización en ordenadores y tabletas.
Escenarios aplicables: Iconos laterales decorativos, formulario de contacto específico para ordenador (que puede sustituirse por un formulario más limpio en móvil).
Paso 5: Previsualizar y probar (paso clave)
Una vez completada la configuración, asegúrate de probarlo en un dispositivo real (o compruébalo críticamente con la función de vista previa de Elementor):
- Vista previa dentro de ElementorHaga clic sucesivamente en el icono "Escritorio→Tableta→Móvil" y desplácese por las páginas para comprobar cada módulo:
- ¿Se muestra el texto en su totalidad (sin truncarlo ni solaparlo)?
- ¿Las imágenes son nítidas y llenan la pantalla (sin estiramientos ni distorsiones)?
- ¿Son los botones lo suficientemente grandes (al menos 44×44px en móviles para facilitar el clic)?
- Pruebas con equipos realesEscanee el "código QR" de la parte superior de Elementor con su teléfono móvil, abra la página en su propio teléfono móvil y maneje realmente los botones y cuadros de entrada para sentir la suavidad del deslizamiento.
- Solución de problemas comunes：
- Si los saltos de línea del texto resultan confusos: reduzca el tamaño de la fuente en el móvil o aumente la anchura del módulo.
- Si la imagen está distorsionada: Ajuste "Adaptación de objetos" en "Anular" en el teléfono móvil (Imagen→Estilo→Adaptación de objetos).
- Si el botón es demasiado pequeño: Aumente el "margen interior" del botón en los teléfonos móviles (al menos 15px para arriba y abajo, 20px para izquierda y derecha).
Principios del diseño adaptable para principiantes
- móvil primero: Diseñado teniendo en cuenta la vista del teléfono móvil antes de ampliarlo al ordenador (para evitar modificaciones drásticas a posteriori).
- Menos es másEl espacio de la pantalla del móvil es limitado, por lo que sólo se conserva el contenido esencial y se eliminan los elementos redundantes.
- coherenciaLos colores y estilos de letra son coherentes en todos los dispositivos para evitar confusiones a los visitantes.
- inspección periódica: Cambie a la vista móvil después de cada nueva adición de módulo para confirmar que la visualización es correcta.
Con estos pasos, tu sitio web se mostrará de forma profesional en ordenadores, tabletas y teléfonos móviles. El diseño responsive puede parecer complicado, pero después de unas cuantas operaciones con Elementor, te darás cuenta de que sólo necesitas ajustar unos pocos parámetros clave para diferentes dispositivos para resolver el problema de visualización 90%. Practica más, prueba más y pronto lo dominarás.
Español