Le bloc Image vous permet d'ajouter des images à n'importe quelle page SeedProd. Ce bloc prend en charge le téléchargement d'images depuis votre bibliothèque multimédia, la saisie d'une URL directe ou l'utilisation d'images générées par IA, vous offrant ainsi des options flexibles pour trouver des visuels pour vos pages.
Au-delà du simple affichage d'une image, le bloc comprend des options de lien, des commandes de redimensionnement d'image, des styles de bordure, des effets d'ombre et de rotation, ce qui en fait un élément d'image complet pour n'importe quelle mise en page.
Ajouter le bloc Image à vos pages
Suivez ces étapes pour ajouter un bloc Image à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs, glissez-déposez le bloc Image dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Image pour ouvrir ses paramètres. Dans l'onglet Contenu, configurez la source, la taille, l'alignement et le lien de l'image.
Image :
- Image : téléchargez ou sélectionnez une image depuis votre bibliothèque multimédia WordPress. Le bloc comprend également une option de génération d'images par IA permettant de créer des images à l'aide d'OpenAI directement depuis l'éditeur.
- Source de l'image : saisissez manuellement l'URL directe de l'image ou utilisez le contrôle Balises dynamiques pour extraire une source multimédia dynamique, telle qu'une valeur de champ personnalisé.
- Texte alternatif : Entrez un texte alternatif descriptif pour l'image afin d'améliorer l'accessibilité et le référencement naturel (SEO).
- Taille de l'image : définissez la largeur et la hauteur de l'image en pixels (px) ou en pourcentage (%). Laissez l'un des champs vide pour conserver le rapport hauteur/largeur naturel de l'image.
- Alignement : définissez l'alignement horizontal de l'image dans sa section : à gauche, au centre ou à droite. Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Type de lien : choisissez le comportement de l'image lorsque vous cliquez dessus. Le lien personnalisé ouvre l'URL que vous avez spécifiée, tandis que le lien média – Lightbox ouvre l'image en taille réelle dans une fenêtre contextuelle.
- Lien : entrez l'URL de destination pour le lien de l'image (visible lorsque « Lien personnalisé » est sélectionné). Cliquez sur l'icône des paramètres pour afficher des options de lien supplémentaires.
- Ouvrir dans une nouvelle fenêtre : cochez cette option pour ouvrir l'URL liée dans un nouvel onglet du navigateur.
- No Follow : Cochez cette option pour ajouter un
rel="nofollow"attribut au lien, indiquant aux moteurs de recherche de ne pas transmettre l'équité du lien à la destination.
Étape 3 : Choisissez un modèle (facultatif)
L'onglet Modèles propose une sélection de préréglages de styles d'image prédéfinis. Cliquez sur la vignette d'un modèle pour appliquer instantanément une combinaison de paramètres de bordure, d'ombre et de style à votre image. C'est un moyen rapide de donner à vos images un aspect soigné et cohérent sans avoir à configurer manuellement chaque option de style.
Étape 4 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle et l'espacement de votre bloc Image.
Styles :
- Ajustement de l'objet : choisissez comment l'image remplit son conteneur lorsqu'une hauteur est spécifiée : Remplir, Aucun, Couvrir ou Contenir. Cette option n'apparaît que lorsqu'une valeur de hauteur est définie.
- Ombre : ajoutez une ombre portée derrière l'image. Choisissez parmi Aucune, Fine, Petite, Moyenne, Grande, Très grande ou Très très grande.
- Rotation de l'image : faites pivoter l'image de 0 à 360 degrés à l'aide du curseur.
- Bordure de l'image : ajoutez une bordure autour de l'image. Définissez le style de bordure (pleine, pointillée ou en pointillés), la couleur de la bordure, la largeur de la bordure (haut, droite, bas, gauche indépendamment) et le rayon de la bordure pour arrondir les coins, avec un choix d'unités en px ou en %.
Espacement :
- Marge : contrôlez l'espacement extérieur autour de votre bloc Image (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- Remplissage : ajustez l'espacement intérieur de votre bloc Image (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
Attributs :
- CSS ID : Affiche l'identifiant unique généré automatiquement pour votre bloc Image, créé automatiquement par SeedProd pour un style personnalisé ou un ciblage JavaScript.
- Classe personnalisée : ajoutez des classes CSS personnalisées pour appliquer des styles spécifiques à partir de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : ajoutez n'importe quel attribut HTML à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-de-l'attribut|valeur.
Visibilité des appareils :
- Masquer sur le bureau : masque le bloc Image sur les écrans de bureau.
- Masquer sur tablette : masque le bloc Image sur les tablettes.
- Masquer sur mobile : masque le bloc Image sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : choisissez un effet d'animation qui s'affiche lorsque le bloc Image apparaît à l'écran, tel que Rebondir, Fondu entrant, Zoom avant, Rotation vers l'intérieur, et bien d'autres encore.
Étape 5 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Image et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Image à votre page ! Les images sont l'un des éléments les plus percutants d'une page d'accueil : elles donnent le ton, instaurent la confiance et attirent l'attention. Utilisez l'onglet Modèles pour accéder à des préréglages de style rapides, ou affinez les bordures, les ombres et la rotation dans l'onglet Avancé pour créer exactement le look dont vous avez besoin.