Cómo configurar diferentes diapositivas de ancho completo de Elementor para diferentes páginas

Los deslizadores de ancho completo (FWS) son un elemento de diseño muy popular. No sólo muestran imágenes grandes y bonitas, sino que también pueden ayudarle a transmitir su mensaje principal y captar la atención del usuario. UtiliceElementorPuede configurar fácilmente diferentes diapositivas de ancho completo para cada página. Este artículo explicará en detalle cómo añadir diapositivas de ancho completo para diferentes páginas.

Paso 1: Instalar y activar Elementor

Instalación de Elementor Pro(Opcional)

• Utiliza Elementor Pro para desbloquear funciones más avanzadas, como el módulo de presentación de diapositivas avanzada.
• Después de instalar Elementor ProCárgalo y actívalo.

Paso 2: Crear diapositivas de ancho completo separadas para cada página

1. Crear una nueva página o editar una página existente

En primer lugar, vaya al panel de control de WordPress y haga clic en "página web">"Añadir nueva página" para crear una nueva página o editar una existente.

2. Añadir estructuras de ancho completo

existeEditor ElementorEn la sección "Buscar", pulse el botón "+"para añadir una nueva región, seleccione el botón construcción de ancho completo(Columna única). Esto hace que la diapositiva ocupe todo el ancho de la página.

3. Añadir componentes de diapositivas

En la biblioteca de componentes de Elementor, busque y arrastre el componente "Diapositivas" (Slides) en el área de estructura de ancho completo. Verá que se ha mostrado la diapositiva por defecto.

4. Personalizar el contenido de las diapositivas

• Subir una fotoHaga clic debajo de cada diapositiva en "fotografía"cargue la imagen que desea mostrar. Asegúrese de que la resolución de la imagen es lo suficientemente alta como para caber en el diseño de ancho completo, el ancho recomendado es de 1920 píxeles.

• Establecer el título y la descripciónDiapositivas: Puede añadir títulos y descripciones personalizados a cada diapositiva para presentar el mensaje principal o captar la atención del usuario.

• botón de enlaceTambién puede establecer una CTA para cada diapositiva (Llamada a la acción) que enlaza con la página correspondiente. Basta con configurar el texto del botón y el enlace.

5. Ajuste de los estilos de diapositivas

Elementor ofrece una serie de ajustes para hacer tu presentación de diapositivas más personal:

• ajuste de altura: puede encontrarlo en "apertura (jerga ajedrecística)"Seleccione la opción "adaptación cinematográfica" o ajuste manualmente la altura de la diapositiva para asegurarse de que el tamaño de la diapositiva coincide con el diseño de la página.
• efecto de transición: en "alto nivel" En la opción Efectos de animación, puedes establecer efectos de transición para el cambio de diapositivas, como fundidos de entrada y salida, deslizamientos horizontales o verticales, etc., para aumentar el dinamismo de la página.

6. Ajustes de ancho total

Para asegurarse de que el pase de diapositivas ocupa todo el ancho de la página, debe añadir un nuevo valor para el campoSecciónEntorno:

• Seleccione la sección donde se encuentra la diapositiva y vaya a Estilo > Diseño de diapositiva.

• comandante en jefe (militar) Anchura del contenido Ajustar a "ancho total" y garantizar que "Sección de estiramientos"La opción está activa.

Paso 3: Configurar distintas diapositivas para distintas páginas

Si desea proporcionar elpágina diferenteUtilizando un diseño de diapositiva diferente, puede repetir los pasos anteriores y crear un nuevo diseño de diapositiva para la diapositivaCargue imágenes y contenidos diferentes para cada página.

1. Copie las diapositivas existentes y modifíquelas

• En el editor de Elementor, puede hacerlo haciendo clic con el botón derecho en el área de la diapositiva y seleccionando "haga una copia de" para copiar la configuración de una diapositiva en otras páginas y, a continuación, sustituir contenidos como imágenes, títulos y enlaces de botones.

2. Utilización de plantillas de páginas

Si desea configurar rápidamente presentaciones de diapositivas de ancho completo para varias páginas, también puede utilizar la función de ElementorPlantillas de páginaFunción:

• Después de diseñar la presentación de diapositivas para la primera página, haga clic en el botón Guardar y seleccione "Guardar como plantilla".

• En otras páginas, basta conpaloLa plantilla y personalizar las imágenes y el contenido.

Paso 4: Optimizar el rendimiento de las diapositivas

Los pases de diapositivas de ancho completo cargan imágenes de alta resolución y, por tanto, pueden afectar a la velocidad de carga de la página. Para garantizar el rendimiento de su sitio web, se recomienda realizar las siguientes optimizaciones:

• Imágenes comprimidasAntes de cargar las imágenes de las diapositivas, utilice una herramienta como TinyPNG o ImageOptim paraImágenes comprimidasreduciendo el tamaño del archivo de imagen.
• Habilitar el plugin de cachéPara mejorar el rendimiento general, se recomienda instalar y configurar plugins de caché comoWP Super Cachétal vezW3 Total Cache.

Paso 5: Comprobar el diseño responsivo

Asegúrate de que tu presentación de diapositivas de ancho completo también se muestra bien en dispositivos móviles y tabletas. Vaya al editor de Elementor y busque "modo de respuesta" para ver cómo se comporta el pase de diapositivas en distintos dispositivos, ajustando el tamaño del texto y la visualización de las imágenes si es necesario.

resúmenes

Con Elementor, puede crear presentaciones de diapositivas de ancho completo para diferentes páginas, mostrando imágenes de alta resolución e información convincente. Esto no sólo mejora la experiencia del usuario, sino que también añade impacto visual a tu sitio web. Recuerde adaptar las imágenes, el contenido y el diseño a las necesidades de cada página para asegurarse de que cada pase de diapositivas coincide con el tema de la página.

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