Astuces pour des mises en page qui déchirent

Petit préambule : plusieurs astuces permettent de jouer très fortement sur les apparences de vos pages.
Ceci dit, si vous n'avez aucune capacité graphique, il y a de forte chance pour que votre page soit à l'image de vos compétences...


D'abord, pensez à illustrer


Les actions qu'il vous faut

  • Background image permet de créer des aplats de couleur ou des images en fond de texte.
  • Avec nav vous aurez un menu de type navigation supplémentaire au sein de votre page
  • Comme son nom l'indique button transforme vos liens en boutons multicolores auxquels vous pourrez rajouter des icônesd
  • Accordion permettra d'activer des parties de texte sous un accordéon
  • Grid et col et le colonage de votre page n'aura plus de mystère
  • Tocjs ajoutera automatiquement un sommaire qui reprendra vos titres ; ce sommaire suivra la page lors du scroll

Bootstrap quand tu nous tiens


Bootstrap est une bibliothèque qui permet de préfigurer des mises en forme, des styles

sur le site de bootstrap, il est possible de récupérer des éléments de style qui donneront des looks à toute une série de composants. Il suffit de copier le code des éléments proposés, d'ajouter deux guillemets devant et derrière et le tour est joué. Ainsi :

<div class="alert alert-danger" role="alert">joli texte entouré de rouge</div>
donne

Et là, il suffit de cliquer sur la petite croix pour supprimer ce cadre...


Et avec une pincée d'html

Un code en html entouré de deux guillemets sera interprété
<span style="color:red;">texte coloré</span>
et donnera texte coloré
Sur internet vous trouverez une foule d'exemples à copier pour améliorer vos pages

Et autres librairies

L'action {{animation}} placée en haut de votre page ou de votre site permettra de solliciter des animations que vous trouverez documentés ici (en anglais) mais aussi de jouer sur la durée, le délais, la répétition de vos animations !!! Attention le kitch n'est pas loin, à utiliser avec parcimonie et légèreté
Ces class peuvent s'appliquer aux éléments suivants :
  • L'action {{backgroundimage}} qui permet de mettre des images de fond ou des aplats de couleur
  • L'action {{attach}} notamment quand elle sert à insérer une image dans votre page
  • L'action {{ section }} grâce à laquelle, tout élément de votre page pourra clignoter, rebondir, s'envoler...
et autres endroits où on peut mettre des class...

ainsi,
class="wow slideInRight" data="wow-delay=3s, wow-iteration=3"
donnera le comportement de cette ligne...

documentation