Ajouter une image.

Ajoutez une photo ou une illustration qui remplit sa colonne et s’adapte à l’écran.

Ajouter une image

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. Votre première page présente les bases.

1. Survolez la colonne et cliquez sur + dans sa barre de contrôle, ou cliquez sur Ajouter des éléments sur une page vide. Ouvrez l’onglet Contenu et cliquez sur Image. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Sous Image, cliquez sur Select Image. Dans le Media browser, filtrez par nom si vous le souhaitez, cochez une photo et cliquez sur Insert selected.
3. Cliquez sur le titre SEO pour le déplier. Remplacez tout texte dans Alt attribute par une courte description de la photo.
4. Cliquez sur Enregistrer dans la boîte de dialogue, puis sur Enregistrer dans la barre d’outils en haut de la zone de contenu pour stocker la page.

Ce que vous voyez

La Image width par défaut est de 100 %. Les lecteurs d’écran annoncent votre texte alternatif. Pour vérifier l’adaptation, réglez le View mode sur Preview et rétrécissez la fenêtre du navigateur. Les visiteurs voient vos changements après enregistrement et publication.

Configurer votre image

Survolez l’élément et ouvrez Plus > Paramètres dans sa barre de contrôle. Options :

• Image : choisissez une image dans le navigateur de médias ou de fichiers de votre site, téléversez un fichier ou collez une URL externe.
• Image width : une largeur CSS comme 100% ou 300px. La valeur par défaut est 100 %.
• Image height : une hauteur fixe comme 400px. Laissez vide pour garder les proportions de la photo.
• Image link : rend l’image cliquable. Saisissez une URL ou choisissez une page.
• Image link target : Same window ou New window. N’apparaît qu’une fois le lien ajouté.
• Alt attribute : dans la section SEO, une description pour les lecteurs d’écran et les moteurs de recherche.
• Title attribute : dans la section SEO, une information complémentaire affichée en infobulle au survol.

Chargement des images et vitesse des pages

DXPR Builder gère automatiquement le chargement des nouvelles images pour garder des pages rapides et éviter les sauts de contenu. Les images en début de page et celles dans les onglets, carrousels et défilements restent prêtes à s’afficher. Les images plus bas peuvent se charger au défilement des visiteurs.

Les images peuvent venir de votre médiathèque, de fichiers téléversés ou d’URL externes. Laissez les images finir de charger dans l’éditeur avant d’enregistrer, pour que DXPR Builder réserve le bon espace. Remplacer une image met à jour ses dimensions sans changer la taille d’affichage choisie.

Les images déjà sur votre site ne sont pas mises à niveau automatiquement. La vitesse des pages dépend aussi du poids des fichiers image et des autres contenus. Vérifiez votre page publiée sur écrans étroits et larges.

Si rien ne s’affiche

• L’image ne figure pas dans l’onglet Contenu. Votre profil d’utilisateur la masque. Demandez à un administrateur de l’activer dans Profils d’utilisateurs.
• Elle a disparu après rechargement. La page n’a pas été enregistrée. Ajoutez-la de nouveau et cliquez sur Enregistrer dans la barre d’outils en haut de la zone de contenu.
• L’élément image est vide. Aucune image n’est définie dans le champ Image. Survolez l’élément et ouvrez Plus > Paramètres, puis cliquez sur Select Image.
• Une icône d’image cassée apparaît. Le fichier a été supprimé ou déplacé dans la médiathèque. Survolez l’élément et ouvrez Plus > Paramètres, retirez la sélection et choisissez une nouvelle image.
• L’image est étirée ou écrasée. Image width et Image height contiennent toutes deux des valeurs fixes qui ne correspondent pas à la photo. Videz la Image height pour restaurer ses proportions.

Et ensuite ?

Onglet Style pour modifier l’espacement et l’arrière-plan de votre image.