Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. black-green yellow_blue Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. 247 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

Utilisation d'images dans le Website Builder

Aucun site Web n'est complet sans images ou illustrations. Les images ajoutent de la vie à votre site Web. Elles peuvent être utilisées pour attirer l'attention sur du contenu spécifique ou expliquer le fonctionnement de quelque chose.

Dans le Website Builder, il existe un grand nombre de possibilités pour les images. Dans ce guide, nous allons vous présenter les options qui sont à votre disposition.

Amusez-vous avec le composant image
Modifiez les images directement dans le Website Builder
Affichez les images dans un diaporama
Alignez les images dans un tableau
Définissez une image comme arrière-plan fixe
Achetez des images professionnelles
Créez une image d'en-tête réactive

Ajustez facilement la taille et le positionnement de chaque élément

Vous pouvez faire glisser les poignées de dimensionnement d'un élément pour l'agrandir ou le rétrécir. Si vous voulez définir une taille exacte, entrez simplement la hauteur et la largeur dans la zone verte visible quand l'élément est sélectionné.

Pour modifier le placement d'un élément, sélectionnez-le et faites-le glisser jusqu'à la position voulue. Utilisez les touches fléchées de votre clavier pour le déplacer pixel par pixel. Une ligne bleu apparaît quand l'élément est centré ou aligné avec d'autres éléments de votre page.



Amusez-vous avec le composant image

Vous pouvez faire plus que vous ne pensez avec le composant image. Voici quelques astuces que notre équipe de design utilise lors de la création de nos modèles.

Play around with the image component

Affichez uniquement une partie d'une image - Définissez le redimensionnement de l'image sur Rogner. Utilisez le curseur Échelle pour zoomer sur votre image. Double-cliquez sur le composant et déplacez l'image à l'intérieur du composant jusqu'à ce que la partie que vous voulez montrer soit visible.

Arrondissez une image - Ajustez la taille d'un composant image sur un carré, de sorte que la largeur et la longueur soient identiques. Sous propriétés, trouvez les coins et ajoutez une valeur qui fait exactement la moitié de la largeur et de la longueur de votre image.

Ajoutez un calque de couleur à une image - Placez un composant arrière-plan sur l'image. Choisissez une couleur et définissez la transparence du composant arrière-plan, pour atténuer l'image et lui donner une teinte colorée. Ajoutez un composant texte au-dessus pour qu'il reste visible sur les petits écrans.

Comment insérer une image ?

Edit your images directly in Website Builder

Modifiez les images directement dans le Website Builder

Vous avez besoin d'autres options d'édition ? Utilisez l'éditeur photo pour modifier facilement vos images directement à l'intérieur du Website Builder. Il n'est pas nécessaire d'utiliser un programme local de votre ordinateur.

Améliorez l'aspect des images en changeant la couleur, la luminosité ou la taille. Vous pouvez aussi utiliser l'outil Améliorer pour embellir votre image en un clic.

Supprimez les imperfections comme les yeux rouges et les tâches, ou réfléchissez une image pour qu'elle corresponde mieux à votre site. Vous pouvez également modifier vos images à l'aide d'outils de style, comme des autocollants, des cadres et des calques.

Comment modifier une image dans le Website Builder ?


Display your images in a slideshow

Affichez les images dans un diaporama

Affichez vos images favorites dans un diaporama. Vous pouvez par exemple utiliser un curseur pour montrer le sujet de votre site. Ajoutez un court texte au dessus du curseur pour un résultat complet.

Vous pouvez également créer un diaporama pour attirer l'attention sur des produits dans votre boutique en ligne. Établissez un lien direct entre chaque diapositive et la page produit correspondante pour augmenter les ventes.

Quand vous insérez un diaporama, veillez à ne pas insérer plus de trois à cinq images. Un trop grand nombre d'images augmenterait le temps de chargement de votre site web et pourrait distraire les visiteurs.

Comment insérer un diaporama ?


Place your images in a grid with the gallery component

Alignez les images dans un tableau

Si vous voulez afficher plusieurs images sur une page, il peut être fastidieux d'aligner tous les composants les uns avec les autres. C'est pour cela que nous avons créé le composant Galerie.

Celui-ci vous permet d'inclure jusqu'à 100 images dans un composant et de les aligner parfaitement dans un tableau. Vous pouvez ajuster la taille des images et même ajouter des légendes.

Comment insérer plusieurs images dans une grille ?







Add a fixed background to your website

Définissez une image comme arrière-plan fixe

Vous pouvez définir une image d'arrière-plan fixe, de sorte quelle ne bouge pas quand vous faites défiler la page. Cela peut s'avérer pratique si vous voulez avoir un paysage ou un décor en arrière-plan.

Par exemple, ajoutez une plage ou un coucher de soleil si vous créez un site Web de voyages. L'image restera où elle est, même si vos visiteurs font défiler la page. Cela donne à votre site un design professionnel et unifié, et vous évitez les vilaines répétitions et bordures.

Comment puis-je ajouter un arrière-plan fixe ?





Give your site that extra touch with professional images

Achetez des images professionnelles

Pour donner une touche supplémentaire à votre site web, vous pouvez acheter des images professionnelles de Bigstock. Pensez à choisir un bel arrière-plan pour démarrer la création de votre site.

Les clients de One.com peuvent acheter des images Bigstock simples en bénéficiant d'une remise, directement dans le Website Builder.

Comment acheter une photo Bigstock ?








Add a responsive header to your website

Créez une image d'en-tête réactive

La moitié des recherches sur Internet est effectuée sur des appareils mobiles. Il est donc important que votre site s'affiche correctement quelle que soit la taille de l'écran.

Pour y arriver, l'une des manière consiste à ajouter une image d'en-tête réactive. Celle-ci s'ajuste automatiquement à la taille de l'écran. Utilisez le composant arrière-plan pour insérer une image et l'étirer à la largeur de votre écran.

Remarque : Un composant arrière-plan est invisible sur les petits écrans, à moins d'ajouter un autre composant dessus.

Comment ajouter un en-tête réactif ?



Articles associés :

Comment ajouter un composant à une page ?
Comment créer une page avec un modèle différent ?