Creación de un escaparate deslizante rotador gráfico con Astra y Gutenberg

en el uso de Tema AstraSi quieres crear una galería giratoria, no tienes que usar un constructor de páginas como Elementor para hacerlo. Combinando el editor Gutenberg por defecto de WordPress con el plugin Spectra recomendado por Astra, es fácil implementar una galería giratoria.

Este tutorial aporta un proceso completo paso a paso que es adecuado para su aplicación en escenarios como introducciones de productos, presentaciones de equipos e imágenes principales de páginas de inicio.

I. Herramientas necesarias

Todos los recursos son gratuitos:

Tema Astra: ligero y apto para diseños personalizados
Editor GutenbergWordPress incluye un editor de bloques.
Plugin Spectra: desarrollado por Astra para añadir bloques más avanzados al editor.

Método de instalación:

Vaya a la página de plugins en el backend y busque Spectra para instalarlo y activarlo.

Tras la puesta en marcha, active el siguiente bloque en la configuración de Spectra: Deslizador,ContenedorImagen, Encabezamiento

II. Creación de un módulo deslizante gráfico

Paso 1: Crear o editar una nueva página

entrar enfig. iniciou otras páginas, ábralas con el editor Gutenberg.

Paso 2: Añadir el diseño del contenedor exterior

Añade un bloque contenedor:

Ajuste la anchura a la anchura completa

Añada márgenes interiores superior e inferior, por ejemplo 60px.

Ajustes recomendadoscolor de fondoo mantener un fondo transparente

Paso 3: Añadir bloque deslizante

Introduzca en el contenedor el bloque deslizante suministrado por Spectra:

Por defecto contiene dosdiapositivas (fotografía, software de presentación)Número de

Efecto deslizante o fundido de entrada/salida

Se pueden activar las flechas de navegación, la navegación por puntos y la rotación automática.

Paso 4: Diseñar el contenido de cada diapositiva

Cree un diseño de dos columnas en cada diapositiva:

Columna derecha para visualización de imágenes: utilice el bloque Imagen para insertar una imagen de producto o marca.
La columna de la izquierda es el bloque de texto: contiene el título (encabezamiento avanzado), la descripción del cuerpo,botones(CTA)

Sugerencias de disposición:

La anchura recomendada de la sección de imagen es 40% y la de la sección de texto es 60%
Alinee las columnas izquierda y derecha para aumentar el equilibrio visual.
Un espaciado adecuado hace que el contenido sea más claro y fácil de leer

Tercero, optimización del diseño para móviles

Los siguientes ajustes son necesarios para una visualización clara en teléfonos móviles y tabletas:

Cómo configurar el contenedor para que cambie a orientación vertical en dispositivos móviles

Las imágenes se muestran en la parte superior, el texto en la inferior
hacer uso dereceptivoUnidades de fuente (por ejemplo, clamp, vw) para ajustar el tamaño del texto
Los botones están dimensionados y espaciados para ser pulsados con los dedos

La mayoría de los bloques proporcionados por Spectra admiten la adaptación de dispositivos y no requieren prácticamente ningún procesamiento complejo.

IV. Sugerencias para fijar el estilo

Para mantener las cosas simples y hermosas, consulte los siguientes ajustes:

Utilice gris claro o colores de marca para los colores de fondo

Las imágenes tienen una proporción uniforme, por ejemplo 4:3 o cuadrada, para evitar el desorden de la página.
Se recomienda poner el título en 32~36pxEl texto es 18~20px

botonesAñade un estilo hover al ratón para aumentar el atractivo de los clics

V. Escenarios comunes de uso

Tipo de aplicación	Descripción del contenido
Rotación de productos	Cada una muestra una imagen del producto + breve descripción + botón de salto
Miembros del equipo	Incluye foto, descripción del puesto, texto personalizado y botones de contacto.
Escaparate de la visión de marca	De tres a cinco diapositivas sobre la misión y la filosofía de la marca
Bloque de cabecera	Muestre información sobre eventos o perfiles de servicios básicos para mejorar la guía visual de la página de inicio

VI. Métodos de liberación y reutilización

Una vez finalizada la edición, se puede colocar este control deslizante:

Colóquelo en la parte superior o central de la página como elemento destacado
Guardar como bloque reutilizable para su rápida inserción posterior en otras páginas.
Si utiliza Astra ProEl módulo de diseños personalizados también se puede utilizar para añadir a la estructura de una página determinada.

VII. Resumen

hacer uso de Astra La combinación de + Gutenberg + Spectra puede completar un módulo de rotación gráfica, con carga rápida, diseño flexible, adaptación móvil y otras características. Es adecuado para el sitio web oficial de la empresa ligera, la página de destino de la marca, la página de inicio del blog y otra estructura de página.

Si lo que busca es una solución de visualización deslizante prístina y ligera, merece la pena probar este enfoque.

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