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 le 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)

• Utilice Elementor Pro para desbloquear funciones más avanzadas, como el módulo de presentación de diapositivas avanzado.
• Después de instalar Elementor ProCárguelo y actívelo.

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

1. Cree una nueva página o edite 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 desplegado la diapositiva por defecto.

4. Personalización del contenido de las diapositivas

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

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

• botón de enlace: También puede establecer una CTA para cada diapositiva (Llamamiento a la acción) que enlace 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 su 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, puede 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 parámetroSecciónEntorno:

• Seleccione la sección donde se encuentra la diapositiva y vaya a Estilo > Disposición de la 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 diferentes diapositivas para diferentes páginas

Si desea proporcionar elpágina diferentePuede repetir los pasos anteriores y crear un nuevo diseño de diapositiva para elCargue 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. Uso de plantillas de página

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 el pase de diapositivas para la primera página, pulse el botón Guardar y seleccione "Guardar como plantilla".

• En otras páginas, puede simplementepaloLa plantilla y personalice las imágenes y el contenido.

Paso 4: Optimizar el rendimiento de las diapositivas

Las presentaciones de diapositivas de ancho completo cargan imágenes de alta resolución y, por lo 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 comprimidas: Antes 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.
• Activar el plugin de caché: Para mejorar el rendimiento general, se recomienda instalar y configurar plugins de almacenamiento en caché comoWP Super Cachétal vezW3 Total Cache.

Paso 5: Comprobar el diseño responsivo

Asegúrese de que su pase 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 funciona 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 separadas 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 su 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.