Exemples
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.29.10-A-square-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-crouched-down-building-a-tower-from-blocks-with-other-children.-Styl.webp)
Le premier block important est le block “media & text”
Il permet de lancer une page de manière professionnel avec un petit texte et une image.
On peut choisir de placer l’image à gauche ou à droite et c’est bien d’inverser d’un article à l’autre pour du dynamisme.
(Aussi possible en haut ou en bas, mais je ne le conseil pas.)
Les couleurs de base sont celle-ci :
#cad8ca pour le fond
#013220 pour le texte
Ceci est un bloc paragraphe, c’est pratique pour un petit ou grand texte.
Pour faire un petit retour à la ligne comme ceci :
il faut cliquer sur Majuscule puis Enter.
Si vous cliquez simplement sur Enter, vous allez créer un nouveau paragraphe, avec un grand retour à la ligne.
Voici un exemple de deux paragraphes l’un à la suite de l’autre :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu neque, rutrum et lacus eget, faucibus mattis libero. Morbi tincidunt augue at blandit condimentum. Cras nec mauris odio. In non sem tortor. Morbi fringilla congue sem, nec sollicitudin mi placerat ac. Donec blandit ex id enim aliquet blandit. Integer ullamcorper et libero ac ultricies. Vestibulum porta eros nec felis dignissim tincidunt. Praesent molestie et velit vehicula convallis. Nam vitae neque sed tellus ullamcorper finibus. Donec vel gravida turpis. Curabitur odio mi, sollicitudin tempor elit et, ultricies suscipit magna. Ut iaculis efficitur ipsum eget blandit.
Sed maximus mauris in efficitur posuere. Vestibulum congue eleifend eros, sed blandit justo molestie eu. Nunc sodales imperdiet magna, a consectetur leo feugiat eu. Phasellus tempus diam nec luctus viverra. In ut ante velit. Donec id elit et metus pellentesque fermentum maximus sit amet enim. Sed sed metus pellentesque, malesuada nulla in, euismod tortor. Cras euismod dignissim risus, sit amet mollis ante placerat eget. Maecenas fringilla lectus eget nisi rutrum, pellentesque lacinia mauris dictum.
Le bloc paragraphe peut aussi être utilisé comme ceci pour mettre l’accent sur quelque chose d’important.
Ici encore un autre paragraphe avec nos couleurs de base.
Voici un autre un peu plus fancy avec un dégradé
Un block important est le block Heading.
Il s’agit simplement d’un titre.
Pour vraiment mettre un texte en avant, comme une citation, on peut utiliser le block Pullquote
John Doe
Pour la suite il y a le bloc “separator” qui est aussi très utile pour séparer les différentes parties d’un texte (allez voir dans les formations pour un exemple entre les formations)
Voici le même séparateur mais en plus grand
Pour une transition encore plus claire.
Il y a le bloc html qui est assez important, il permet de créer plusieurs choses, soit un qr code pour les formations en suivant cette logique-ci :
[formation
title="Nom de la formation"
short="Mot court et simple / référence interne pour la formation"
price="50" (montant de la formation)
date="12/05/24 de 18h à 20h,13/05/24 de 17h à 20h" plusieurs dates peuvent être ajoutée séparée d'une virgule.
adresse="15 rue aoijreivj - 1000 Bruxelles" un retour à la ligne doit être écrite comme ceci " - "
resume="petit résumé pour la formation"
]
Vous pouvez voir un exemple sur la page formation.
ou pour créer un Q&A ou autres listes en suivant cette logique-ci :
[accordian]
[accordian_question title="Question 1 ?"]
[accordian_answer]
Réponse 1
[/accordian_answer]
[/accordian_question]
[accordian_question title="Question 2 ?"]
[accordian_answer]
Réponse 2
[/accordian_answer]
[/accordian_question]
[/accordian]
Ce qui donne ceci :
-
Question 1 ?
“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu neque, rutrum et lacus eget, faucibus mattis libero. Morbi tincidunt augue at blandit condimentum. Cras nec mauris odio. In non sem tortor. Morbi fringilla congue sem, nec sollicitudin mi placerat ac. Donec blandit ex id enim aliquet blandit. Integer ullamcorper et libero ac ultricies. Vestibulum porta eros nec felis dignissim tincidunt. Praesent molestie et velit vehicula convallis. Nam vitae neque sed tellus ullamcorper finibus. Donec vel gravida turpis. Curabitur odio mi, sollicitudin tempor elit et, ultricies suscipit magna. Ut iaculis efficitur ipsum eget blandit.
”
-
Question 2 ?
“ Sed maximus mauris in efficitur posuere. Vestibulum congue eleifend eros, sed blandit justo molestie eu. Nunc sodales imperdiet magna, a consectetur leo feugiat eu. Phasellus tempus diam nec luctus viverra. In ut ante velit. Donec id elit et metus pellentesque fermentum maximus sit amet enim. Sed sed metus pellentesque, malesuada nulla in, euismod tortor. Cras euismod dignissim risus, sit amet mollis ante placerat eget. Maecenas fringilla lectus eget nisi rutrum, pellentesque lacinia mauris dictum.
”
Le block Columns
Permets de diviser la page en deux, trois ou autre.
Voici les différentes dimensions possible.
33%
66%
66%
33%
50%
50%
33%
33%
33%
25%
50%
25%
Voici un Tableau | |||
---|---|---|---|
Le block details
Ici on peut afficher ou cacher du texte.
pzerojzpoporvê,re;^
Ici on peut afficher ou cacher du texte.
pzerojzpoporvê,re;^
Ici on peut afficher ou cacher du texte.
pzerojzpoporvê,re;^
Ça ressemble à l’accordian (partie html), mais n’a pas tout à fait les mêmes fonctionnalités.
Le block verse ou preformated sont les mêmes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu neque, rutrum et lacus eget, faucibus mattis libero. Morbi tincidunt augue at blandit condimentum. Cras nec mauris odio. In non sem tortor. Morbi fringilla congue sem, nec sollicitudin mi placerat ac. Donec blandit ex id enim aliquet blandit. Integer ullamcorper et libero ac ultricies. Vestibulum porta eros nec felis dignissim tincidunt. Praesent molestie et velit vehicula convallis. Nam vitae neque sed tellus ullamcorper finibus. Donec vel gravida turpis. Curabitur odio mi, sollicitudin tempor elit et, ultricies suscipit magna. Ut iaculis efficitur ipsum eget blandit.
Une galerie avec le block gallery
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.20.04-A-square-highly-detailed-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-crouched-down-and-playing-with-other-children.-Styl-1.webp)
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.25.45-A-square-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-dancing-with-other-children-in-a-living-room.-Styled-with-a-120mm-te-1.webp)
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.25.10-A-square-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-sitting-in-a-semi-circle-with-other-children-during-a-story-time-ses.webp)
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-22.30.04-A-square-highly-detailed-photo-capturing-a-young-boy-from-a-3_4-back-view-as-he-points-with-his-finger-standing-inside-among-a-group-of-people.-The-.webp)
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.20.04-A-square-highly-detailed-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-crouched-down-and-playing-with-other-children.-Styl.webp)
Le block Cover
Permet d’ajouter une image avec un texte par dessus
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.20.04-A-square-highly-detailed-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-crouched-down-and-playing-with-other-children.-Styl.webp)
Le block Cover
Avec un filtre duo tone
90% de la page complète
![](https://temp.en-vy.me/wp-content/uploads/2024/06/DALL·E-2024-06-02-23.20.04-A-square-highly-detailed-photo-capturing-a-young-boy-with-dark-chestnut-wavy-hair-from-the-back-crouched-down-and-playing-with-other-children.-Styl.webp)
Le block Cover
Même en 100% de la page complète