Basculer la zone d'affichage du slider graphique en utilisant Astra et Gutenberg

en utilisant Thème AstraSi vous souhaitez créer une galerie rotative, vous n'avez pas besoin d'utiliser un constructeur de pages comme Elementor pour le faire. La combinaison de l'éditeur Gutenberg par défaut de WordPress avec le plugin Spectra recommandé par Astra facilite la mise en œuvre d'une galerie rotative.

Ce tutoriel présente un processus complet, étape par étape, qui peut être appliqué dans des scénarios tels que les introductions de produits, les présentations d'équipes et les images principales des pages d'accueil.

I. Outils nécessaires

Toutes les ressources sont gratuites :

• Thème Astra : léger et adapté aux conceptions personnalisées
• Éditeur GutenbergWordPress est doté d'un éditeur de blocs !
• Plugin Spectra : développé par Astra pour ajouter des blocs plus avancés à l'éditeur.

Méthode d'installation :

• Allez sur la page des plugins dans le backend et recherchez Spectra pour l'installer et l'activer.

• Après le démarrage, activez le bloc suivant dans les paramètres de Spectra : Slider,ConteneurImage, Titre

II. création d'un module graphique

Étape 1 : Créer ou modifier une nouvelle page

entrer dansfig. débutou d'autres pages, ouvrez-les à l'aide de l'éditeur Gutenberg.

Étape 2 : Ajouter la mise en page du conteneur extérieur

Ajouter un bloc Conteneur :

• Régler la largeur sur la pleine largeur

• Ajoutez des marges intérieures en haut et en bas, par exemple 60px.

• Paramètres recommandéscouleur de fondou conserver un arrière-plan transparent

Étape 3 : Ajout d'un bloc coulissant

Insérer le bloc Slider fourni par Spectra dans le conteneur :

• La valeur par défaut contient deuxdiapositive (photographie, logiciel de présentation)Augmentation du nombre de

• Réglage de l'effet de diapositive ou de fondu entrant/sortant

• Les flèches de navigation, la navigation par points, la rotation automatique peuvent être activées.

Étape 4 : Conception du contenu de chaque diapositive

Créez une disposition en deux colonnes dans chaque diapositive :

• Colonne de droite pour l'affichage d'images : utilisez le bloc Image pour insérer une image de produit ou de marque.
• La colonne de gauche est le bloc de texte : elle contient le titre (rubrique avancée), la description du corps,boutons(CTA)

Suggestions de mise en page :

• La largeur recommandée de la section image est de 40% et celle de la section texte de 60%.
• Aligner les colonnes de gauche et de droite au centre pour améliorer l'équilibre visuel.
• Un bon espacement rend le contenu plus clair et plus facile à lire.

Troisièmement, l'optimisation de la mise en page mobile

Les paramètres suivants sont nécessaires pour que l'affichage soit clair sur les téléphones portables et les tablettes :

• Configurer le conteneur pour qu'il passe à l'orientation portrait sur les appareils mobiles

• Les images sont affichées en haut, le texte en bas
• utiliserréactifUnités de police (par exemple, clamp, vw) pour ajuster la taille du texte
• Les boutons sont dimensionnés et espacés de manière à pouvoir être actionnés avec le doigt

La plupart des blocs fournis par Spectra permettent l'adaptation des appareils et ne nécessitent pratiquement aucun traitement complexe.

IV. suggestions de réglage du style

Pour que les choses restent simples et belles, reportez-vous aux paramètres suivants :

• Utiliser le gris clair ou les couleurs de la marque pour les couleurs d'arrière-plan

• Les images ont un rapport uniforme, par exemple 4:3 ou carré, afin d'éviter l'encombrement de la page.
• Il est recommandé de régler le titre sur 32~36pxLe texte est 18~20px

• boutonsAjouter un style de survol de la souris pour améliorer l'attrait du clic

V. Scénarios d'utilisation courante

Type d'application	Description du contenu
Rotation des produits	Chacune affiche une image du produit + une brève description + un bouton "sauter".
Membres de l'équipe	Inclut un portrait, une description du poste, un texte personnalisé et des boutons de contact.
Vitrine de la vision de la marque	Trois à cinq diapositives présentant la mission et la philosophie de base de la marque
Bloc d'en-tête de l'accueil	Présenter des informations sur les événements ou des profils de services de base pour améliorer le guide visuel sur la page d'accueil.

VI. méthodes de libération et de réutilisation

Une fois l'édition terminée, ce curseur peut être placé :

• Placez-la en haut ou au centre de la page pour la mettre en évidence.
• Enregistrement sous forme de bloc réutilisable pour une insertion ultérieure rapide dans d'autres pages
• Si l'on utilise Astra ProLe module Modèles personnalisés peut également être utilisé pour compléter la structure d'une page donnée.

VII. résumé

utiliser Astra La combinaison de + Gutenberg + Spectra peut compléter un module de rotation graphique, avec un chargement rapide, un design flexible, une adaptation mobile et d'autres caractéristiques. Il convient au site officiel d'une entreprise légère, à la page d'atterrissage de la marque, à la page d'accueil du blog et à d'autres structures de page.

Si vous êtes à la recherche d'une solution d'affichage de curseur légère et impeccable, cette approche vaut la peine d'être essayée.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.