Comment créer des images avec un reflet

‍Il n’existe pas d’option « reflet » directe pour les images dans Sitely, mais en suivant ce tutoriel, vous pouvez recréer le même effet manuellement. Pour commencer, ajoutez une image à votre page en sélectionnant « image » puis « ajouter » dans l’inspecteur, ou bien copiez-collez. Ensuite, alignez l’image en bas à l’aide de l’icône située tout à droite parmi les six icônes d’alignement.

‍Dupliquez maintenant cette image : un simple copier-coller la placera automatiquement au-dessus de l’originale, ce qui est idéal pour ce tutoriel. 

‍Faites glisser la poignée supérieure de l’image en dessous de la poignée inférieure, ce qui inverse verticalement l’image dupliquée et la positionne juste sous l’originale. Pour un effet de reflet, il est préférable de réduire la hauteur de l’image à environ la moitié de l’originale.

‍À ce stade, superposez une boîte sur l’image du bas (sélectionnez « boîte » dans la barre d’outils) et donnez à cette boîte un contenu « dégradé », avec la partie supérieure transparente (affichée sous forme de grille en damier noir et blanc) et la partie inférieure blanche (car cela correspond à l’arrière-plan de notre page).

‍Enfin, ajustez la distance de l’image du bas et de la boîte par rapport à l’image du haut, et assurez-vous que la boîte est alignée sur l’image du bas. Dans cet exemple, un léger espacement sépare les images, créant un effet de « hauteur » subtil, mais elles peuvent être rapprochées. Pour plus d’informations voir la section « images ».