Personnaliser les Hero Blocks avec Blocksy Pro Content Blocks : Tutoriel complet

existent WordPress L'image d'en-tête de l'article par défaut et la zone d'affichage des informations (section Hero) ont tendance à manquer de personnalité au cours du processus de construction du site.Blocksy Pro La fonctionnalité des blocs de contenu est fournie pour vous permettre de créer du contenu par l'intermédiaire de l'application Gutenberg L'éditeur personnalise et remplace ces modules par défaut pour permettre le chargement dynamique de mises en page personnalisées.

Cet article vous montrera comment construire un bloc Hero entièrement personnalisé et l'appliquer à tous vos modèles d'articles, rendant ainsi le contenu de votre site Web à la fois beau et modulaire.

I. Création de blocs de contenu (Content Block)

Tout d'abord, connectez-vous au back-office et passez commande :
Blocksy > Content Blocks > Add New > HookSi vous souhaitez créer un nouveau bloc de contenu, nommez-le "Custom Hero Section" ou autre.

entrer dans Gutenberg Après l'éditeur, commencez à construire la structure de la page.

Construire une structure de héros personnalisée

1) Ajouter un bloc de groupe et définir l'arrière-plan

• Insérer un Blocs de groupes

• Définir la largeur de la Largeur totale

• Sélectionnez une couleur d'arrière-plan (par exemple, gris foncé).

• Classe personnalisée (par exemple :section-héroïne personnalisée)

2. créer une présentation en deux colonnes

• bâton Colonnes(structure à deux colonnes)

colonne de gauche: :

• bâton Post Featured Image Block : ce module charge dynamiquement l'image d'en-tête de l'article en cours au premier plan.

colonne de droite: :

• Insérez les modules dynamiques suivants pour former la zone d'information :
  • Auteur de la publication
  • Date d'envoi
  • Titre du poste
  • L'entretoise permet d'ajuster la vision
  • Contenu du paragraphe facultatif ou texte explicatif

Vous pouvez également enregistrer cette section en tant que module réutilisablepour une réutilisation ultérieure.

Troisièmement, ajouter la navigation par fil d'Ariane (Breadcrumb)

La navigation en fil d'Ariane peut être ajoutée pour améliorer l'expérience de navigation de l'utilisateur :

• bâton Bloc de codes courts

• Collez le code suivant :

[bloxy_breadcrumbs]

Blocksy La navigation vers l'emplacement actuel est automatiquement générée sur la base du chemin d'accès à l'article.

Quatrièmement, prévisualisation en temps réel du contenu dynamique

Pour prévisualiser les données dynamiques (par exemple, les titres, les images, etc.) dans l'éditeur, ouvrez :
Blocksy Settings > Dynamic Content Preview (Aperçu du contenu dynamique)Sélectionnez n'importe quel article comme source de prévisualisation pour voir comment le contenu se charge en temps réel.

V. Réglage de la position du crochet et des conditions d'affichage

Après avoir terminé le dessin, à droite Blocksy Panneau de configuration :

• Emplacement (emplacement du crochet): Sélection Avant le contenu
• Conditions d'affichageSélectionnez "Tous les messages uniques".

Enregistrez et publiez le bloc de contenu.

VI. vérification de l'efficacité

Visitez n'importe quel article et vous verrez que le bloc Hero personnalisé a été appliqué avec succès et qu'il charge automatiquement les informations sur le contenu de l'article en cours. Pas besoin d'écrire du code, c'est propre, beau et réactif.

résumés

effet de levier Blocksy Pro La fonction de bloc de contenu que vous pouvez utiliser :

• Liberté de créer des modules de modèles d'articles réutilisables
• Permettre une présentation structurée du contenu dynamique
• faire passer (un projet de loi, une inspection, etc.) Gutenberg L'éditeur fait tout, sans dépendre d'un constructeur de pages externe !

Les sections de héros personnalisées ne sont qu'un des scénarios d'application des blocs de contenu. Vous pouvez également les utiliser pour créer des en-têtes, des pieds de page, des sections 404 Pageetc., ce qui confère à l'ensemble du site une plus grande unité de marque et une plus grande souplesse.

Mises à jour récentes

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 : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.