Tutoriel Kadence : Créer des superpositions graphiques avec les blocs Kadence pro

Dans les pages d'affichage d'images, l'effet de superposition d'images renforce l'attrait visuel et rend le message plus direct.Kadence Blocks Pro dans l'application Blocs de superposition d'images Prise en charge de la définition de l'image d'arrière-plan, de l'ajout de texte, de la configuration de l'image d'arrière-plan.survolLes animations et les sauts de liens en font un module d'affichage d'images bien structuré et polyvalent.

Ce tutoriel décrit le processus complet de configuration de la superposition d'images, y compris la sélection de l'image, la configuration du texte,survolStyles, contrôles des bordures, etc.

Insérer un bloc d'images superposées

Ouvrez l'éditeur de pages, cliquez sur Ajouter un bloc et, dans la liste des blocs, recherchez le bloc Superposition d'images et inséré dans la page.

Ce bloc contient par défaut une image de remplacement avec un texte de titre, cliquez dessus pour commencer à l'éditer.

Définition de l'image d'arrière-plan

Cliquez sur la zone d'image et sélectionnez une image à utiliser comme arrière-plan. Il est recommandé de choisir une image dont la composition est claire et nette afin de faciliter son affichage avec du texte et des effets de superposition.

Configuration des liens et des animations en survol

L'incrustation d'image prend en charge le saut de bloc entier, vous pouvez y ajouter une adresse de lien et choisir de l'ouvrir dans un nouvel onglet ou non.

Dans la colonne de droite, vous pouvez sélectionnersurvolLes effets d'animation, tels que le zoom, l'estompage, le flou, le changement de luminosité, etc. Des animations différentes apportent des sensations visuelles différentes, qui peuvent être ajustées de manière flexible en fonction du style de la page.

Ajout de titres et de sous-titres

Le bloc permet d'ajouter un titre principal et un sous-titre, et un clic sur la zone de texte permet de saisir directement le contenu.

Le texte peut être personnalisé en termes de police, de taille de police, de couleur, de hauteur de ligne, de poids des mots, etc. pour répondre aux besoins des différents styles typographiques.

Réglage de l'alignement du texte

Ajustez l'alignement du texte dans l'image, y compris l'alignement à gauche, au centre ou à droite, tout en prenant en charge les paramètres d'alignement dans les directions du haut et du bas (haut, centre, bas). La souplesse de l'alignement permet de garder la page nette et ordonnée.

Styles de superposition personnalisés

Lorsque la sourissurvolLe calque d'incrustation apparaît sur l'image. Vous pouvez définir la couleur de l'incrustation, la transparence, la direction du dégradé, la méthode de transition de l'animation, etc.

Le réglage approprié de la couleur et de la transparence du calque d'incrustation permet de mettre en évidence les informations textuelles sans masquer le contenu principal de l'image d'arrière-plan.

Ajout d'un séparateur de titre

L'ajout d'une ligne de séparation entre le titre principal et le sous-titre peut rendre la hiérarchie du contenu plus claire. La ligne de séparation permet de définir l'épaisseur, la longueur, la couleur et le style (solide, pointillé, etc.).

Mise en place de styles de bordures et de coins arrondis

Vous pouvez ajouter une bordure à l'ensemble du bloc de superposition d'images, contrôler la largeur, la couleur et le style de la bordure, et définir des coins arrondis pour adoucir le contour général de l'image.

Les paramètres de bordure sont particulièrement utiles dans les mises en page multi-images pour mettre en évidence les bordures des cartes et améliorer la reconnaissance visuelle.

Définition des marges intérieures du bloc

Kadence Il existe deux façons de définir les marges :

• configuration unifiée: quatre marges de même valeur

• réglage séparéLes réglages indépendants pour les quatre directions : vers le haut, vers la droite, vers le bas, vers la gauche.

Un réglage adéquat des marges peut aider les graphiques à conserver une certaine respirabilité et à éviter les contenus surchargés.

Exemples de scénarios d'application

Les blocs de superposition d'images sont disponibles pour une large gamme d'applications.mise en pagePar exemple :

• Entrée de la section graphique de la page d'accueil

• Zone d'affichage des articles en vedette

• Couverture du module produit ou service

• Présentation des cartes des membres de l'équipe

• Bloc de couverture du projet ou du portefeuille

Utilisez-le avec d'autres blocs Kadence tels que Row Layout, Advanced Grid, Tabs, etc. pour construire des structures de pages complètes et magnifiques.

résumés

Le bloc d'incrustation d'image permet un contrôle souple de l'affichage des images. En définissant les images, le texte, les styles de superposition et les animations interactives, il est facile de construire un module d'affichage uniforme et bien structuré.

La possibilité de créer rapidement des blocs de contenu image pour un large éventail de scénarios sans écrire de code ni nécessiter de configuration complexe est un atout majeur. Kadence Blocks Pro Une partie très pratique de la