Si vous avez consulté le lookbook, vous savez qu’il est possible de faire des pages d’accueil et des pages de contenu avec un look professionnel facilement et rapidement.
Avez-vous consulté la vidéo de l’équipe de design de Microsoft SharePoint “Building a beautifully designed intranet with SharePoint – latest design and branding capabilities” (https://youtu.be/Dc07NIiDJAI?t=1316).
Très intéressant et j’ai été surpris de voir cette vague dans la page de présentation du contenu.
Seriez-vous capable d’ajouter cet effet à votre page de contenu?
Voici comment faire.
Ajouter du style... faites la vague
Débutons avec une page disponible dans les gabarits de site, j’ai choisi le gabarit Département. Voyons la page “Our Vision”.
Nous allons ajouter une vague sous la section colorée.
J’ai utilisé ce site pour générer des images de transition : https://app.haikei.app/
À partir de ce site, vous pouvez créer une “Wave”. Je vous recommande une taille Custom de 2560 x 200 px. Sélectionner le background color correspondant à la couleur de votre background à continuer. Dans mon exemple, c’est un bleu #4F6bed (hexa) et on choisi le Fill en blanc (#ffffff).
Voici à titre d’exemple le SVG de cette démonstration :
Une fois le SVG enregistré, nous allons créer une nouvelle section sous la section que nous voulons styliser. Il faut sélectionner une section “Full-width section” et ensuite insérer notre image (SVG) dans cette section.
Voici un enregistrement qui démontre l’ajout de l’image.
Remarquer que l’image va s’adapter à l’écran, le responsive reste fonctionnel.
Sans exagérer, vous pouvez aussi essayer d’autre variation, comme par exemple avec le “Stacked Waves”.
Vous pouvez simplement renverser l’image pour faire la transition sur le haut de la section. Voici d’ailleurs une collection complète haut/bas pour les 3 couleurs du thème Teal maintenant par défaut dans SharePoint Online.
