Cómo utilizar Elementor para el diseño responsivo y la optimización de sitios web WordPress

El constructor Elementor permite la depuración responsive por separado para tabletas y teléfonos móviles para satisfacer mejor la experiencia de los usuarios en diferentes dispositivos.

Ir a la página y utilizar Elementor para la edición visual

Acceso a la edición visual del frontend de ElementorHaga clic en el botón "Editar con Elementor" de la barra de navegación negra de la parte superior para acceder rápidamente al modo de edición visual de la página actual.

Ir al modo sensible: Puede cambiar al modo de respuesta haciendo clic en el icono de la parte inferior izquierda, como se muestra a continuación.

Alternar entre los modos de navegación de tableta y móvil

Después de pasar a la navegación móvil, haga clic en el módulo correspondiente para modificar el tamaño del formato del texto en el módulo, el tamaño de los márgenes, etc.

1. Modificar el tamaño del texto en los teléfonos móviles

Modificar el tamaño del texto se encuentran en el módulo bajo la columna Estilo Tipografía (fuente), modificar el valor Tamaño puede modificar el tamaño del texto.

2. Modificar la anchura de las columnas de los teléfonos móviles

Haga clic en el icono de la esquina superior izquierda (que se muestra a continuación), modifique el Espacio entre columnas en la columna Diseño para modificar la anchura y el tamaño de la columna, la proporción, etc.

3. Modificar el espaciado interno y externo de los teléfonos móviles

En la columna Avanzado puede modificar los márgenes, como se muestra en la figura inferior, Margen es el margen exterior, Relleno es el margen interior, normalmente los teléfonos móviles necesitan modificar el valor de Relleno, para que la lectura sea más compacta.

4. Modificación de la metodología de la columna de productos

Aquí está la modificación del módulo de llamada de producto (módulo woo-Products), haga clic en el módulo para editarlo.Contenidobajo elColumnaEs el número de columnas en la visualización del producto, y es más apropiado cambiarlo a 2 para móviles.

Modificar el tamaño del título del producto en la página móvil:golpe (en el teclado)Estilo Columna bajo Contenido, encontrar Título bajo Tipografía puede modificar el tamaño del título

5. Ocultar la visualización de la página móvil

En Editar módulo, en la sección Avanzado, Responsive, haga clic en Ocultar en móvil para ocultar el módulo para que no se muestre en móvil.

6. Guardar las modificaciones

Como se muestra a continuación, haga clic en la esquina inferior izquierda de la pantallaPubliquePuedes guardar los cambios

7. Regresar rápidamente a la oficina de atención al público y a la secretaría

Haga clic en los siguientes iconos para volver rápidamente

Resumen:

Accediendo al modo de edición visual del frontend de Elementor, se puede cambiar al modo responsive y ajustar el tamaño del texto, el ancho de columna, el espaciado interior y exterior, y el número de columnas de producto para tablet y móvil respectivamente. Además, se pueden ocultar módulos específicos según sea necesario para garantizar la mejor experiencia para los usuarios en diferentes dispositivos. El artículo proporciona pasos específicos y procedimientos para ayudarle a lograr la optimización en la página con facilidad.

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