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

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

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

Ir a la página y editar visualmente con Elementor

  1. 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.
Cómo utilizar Elementor para el diseño adaptable y la optimización de sitios web de WordPress
  1. 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.
Cómo utilizar Elementor para el diseño adaptable y la optimización de sitios web de WordPress
  1. Alternar entre los modos de navegación de tableta y móvil
Cómo utilizar Elementor para el diseño adaptable y la optimización de sitios web de WordPress

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.

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

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

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

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

3. Modificación del espaciado interno y externo en 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.

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

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.

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

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

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

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.

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

6. Guardar las modificaciones

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

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

7. Volver rápidamente a la recepción y a la oficina

Haga clic en los siguientes iconos para volver rápidamente

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

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

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.


Póngase en contacto con nosotros
¿No puede leer el artículo? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Teléfono: 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
Publicado por photon fluctuations, retweeted with attribution:https://www.361sale.com/es/10376/

Como (1)
Anterior Viernes, 25 de mayo de 2024 a las 10:56 a.m.
Siguiente 25 de mayo de 2024 11:31

Recomendado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Póngase en contacto con nosotros

020-2206-9892

QQ咨询:1025174874

Correo electrónico: info@361sale.com

Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres

Servicio de atención al cliente WeChat
Para facilitar el registro y el inicio de sesión de los usuarios en todo el mundo, hemos anulado la función de inicio de sesión por teléfono. Si tiene problemas para iniciar sesión, póngase en contacto con nuestro servicio de atención al cliente para que le ayuden a vincular su dirección de correo electrónico.