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 médiathèque, la saisie d'une URL directe ou l'utilisation d'images générées par IA — vous offrant des options flexibles pour sourcer les visuels de vos pages.
Au-delà de la simple affichage d'une image, le bloc inclut des options de lien, des contrôles de taille d'image, un style de bordure, des effets d'ombre et une rotation — en faisant 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, faites glisser et 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 de l'image, la taille, l'alignement et le lien.
Image :
- Image : Téléchargez ou sélectionnez une image depuis votre médiathèque WordPress. Le bloc inclut également une option de génération d'images par IA pour créer des images à l'aide d'OpenAI directement depuis l'éditeur.
- Source de l'image : Saisissez manuellement une URL d'image directe, ou utilisez le contrôle des 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.
- 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, Centre ou Droite. Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Type de lien : Choisissez comment l'image se comporte lorsqu'elle est cliquée — Lien personnalisé ouvre une URL que vous spécifiez, ou Média – Lightbox ouvre l'image en taille réelle dans une superposition de type lightbox.
- Lien : Saisissez 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 révéler 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 attribut
rel="nofollow"au lien, indiquant aux moteurs de recherche de ne pas transmettre l'équité du lien à la destination.
Étape 3 : Choisir un modèle (facultatif)
L'onglet Modèles offre une sélection de préréglages de style d'image préconçus. Cliquez sur n'importe quelle miniature de 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 : Personnaliser la conception
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle et l'espacement de votre bloc Image.
Styles :
- Object Fit : Choisissez comment l'image remplit son conteneur lorsqu'une hauteur est spécifiée — Remplir, Aucune, Couvrir ou Contenir. Cette option apparaît uniquement lorsqu'une valeur de hauteur est définie.
- Ombre : Ajoutez une ombre portée derrière l'image. Choisissez parmi Aucune, Cheveux fins, Petite, Moyenne, Grande, Très grande ou 2x grande.
- Rotation de l'image : Faites pivoter l'image de 0 à 360 degrés à l'aide du curseur.
- Bordure d'image : Ajoutez une bordure autour de l'image. Définissez le style de bordure (solide, pointillé ou tirets), la couleur de bordure, la largeur de bordure (haut, droite, bas, gauche indépendamment) et le rayon de bordure pour arrondir les coins — avec un choix d'unités px ou %.
Espacement :
- Marge : Contrôlez l'espacement extérieur autour de votre bloc d'image (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
- Rembourrage : Ajustez l'espacement intérieur de votre bloc d'image (haut, droite, bas, gauche). Prend en charge les valeurs par appareil pour ordinateur, tablette et mobile.
Attributs :
- ID CSS : Affiche l'identifiant unique généré automatiquement pour votre bloc d'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 de votre thème ou de votre CSS personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML à l’élément d’encapsulation du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format : nom-attribut|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Masquez le bloc d'image sur les écrans d'ordinateur.
- Masquer sur tablette : Masquez le bloc d'image sur les appareils tablettes.
- Masquer sur mobile : Masquez le bloc d'image sur les appareils mobiles.
Effets d'animation :
- Animation d'entrée : Choisissez un effet d'animation qui se joue lorsque le bloc d'image apparaît à la vue, tel que Bounce, Fade In, Zoom In, Rotate In, et bien d'autres.
Étape 5 : Enregistrer vos modifications
Une fois que vous avez terminé de configurer le bloc d'image et de personnaliser son apparence, assurez-vous de sauvegarder votre travail.
Vous avez ajouté avec succès un bloc d'image à votre page ! Les images sont l'un des éléments les plus percutants de toute page de destination — elles donnent le ton, renforcent la confiance et dirigent l'attention. Utilisez l'onglet Modèles pour 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.