Les astuces de mise en page

Preset : palette de couleurs

Pour le site vitrine

Thème par défaut
squelette : 1col
Preset HPF_Roboto_Handlee - menu violet et police manuscrite pour les titres

Pour l'intranet

squelette : 1col-intranet / permet d'avoir la barre de menu PageMenuHaut
preset HPF2024 - menu gris et une seule police

Entete de page

image Capture_dcran_entete_page.png (1.4MB)

Le code wiki

{{section class="cover full-width  white text-center two-third-height section-header   " file="header-decouvrir.webp" }}
======Découvrir====== 
{{end elem="section"}}

La classe css section_header permet de remonter l'image sous le menu et d'y intégrer le fil d'ariane

Texte en exergue

Le code wiki

{{section bgcolor="#fce5cd" class="cover full-width  text-center two-third-height bandeau-sstitre" file="capture_carte_hpf.jpg" }}

=====Découvrir les habitats participatifs en France=====
{{attach file="Refonte_Accueil/ILLUSTRATION_HABITER.png" desc="dessin illustration section habiter" size="original" class="center" nofullimagelink="1"}}
Habitat Participatif France et la Coopérative Oasis proposent une cartographie collaborative qui recense  plus de 1 000 projets d’habitats participatifs en France, en cours ou installés…Pour vous inspirer et rejoindre le mouvement !

{{button class="btn-primary" link="HPFCartographie" text="Je consulte la carte" }}

{{end elem="section"}}

Les textes en exergue sont placés dans une section avec une image de fond en pleine largeur
Voici les paramètres à copier dans le code de la section class="cover full-width text-center two-third-height bandeau-sstitre"

Citation / Bloc violet avec texte police manuscrite

image Capture_dcran_20241003_091702.png (0.5MB)

""<div class="citation">Les Rencontres Nationales de l'Habitat Participatif : quatre jours de débats, ateliers et échanges pour habiter autrement !<br></div>""

Le bloc de couleur chevauchera l'image qui est au dessus.
Utilisation recommandée : Placer un bloc citation juste après une section avec image de fond

Bloc Image avec un texte dessus

{{col size="3" class="text-center"}}
{{attach caption="Les étapes d’un projet d’habitat participatif" class="c4-izmir mauve text-over" desc="dessin" file="vignette_structures.jpg" nofullimagelink="1" size="original" }}
{{end elem="col"}}
{{col size="3" class="text-center"}}
{{attach class="c4-izmir orange text-over" desc="dessin" file="vignette_rahp.jpg" caption="Se faire accompagner dans votre démarche"  size="original" nofullimagelink="1"}}
{{end elem="col"}}

Utiliser la fonction attach (Fichier dans la barre d'édition)
puis copier la class css suivante class="c4-izmir mauve text-over"
paramètre caption='xxx' préciser le texte affiché au survol

Aligner le contenu des colonnes

Le code wiki

{{col size="3" class="text-center d-flex justify-content-between flex-column"}}
{{attach caption="Les étapes d’un projet d’habitat participatif" class="c4-izmir mauve text-over" desc="dessin" file="vignette_structures.jpg" nofullimagelink="1" size="original" }}
On vous résume les différentes étapes d’un projet d’habitat participatif et quelques pistes pour bien amorcer votre réflexion !
{{button class="btn-primary" link="EtapesProjet" text="Les étapes" }}
{{end elem="col"}}

La classe css d-flex justify-content-between flex-column permet de répartir le contenu de la colonne sur toute sa hauteur - les espaces au milieu varient et le haut et le bas de la colonnes restent alignés

Image de fond

Le code wiki

{{section bgcolor="#616161" class="cover white   text-center img-colored" file="jpo.webp" height="400" }}
====Les Journées portes ouvertes de l’habitat participatif ====

Tous les ans, en septembre, les groupes d’habitant.es ouvrent leurs portes pour faire découvrir leurs manières d’habiter autrement

{{end elem="section"}}

La classe css img-colored permet d'accentuer le contraste sur l'image en réhaussant une couleur au choix, ici c'est nu gris bgcolor="#616161" qui permet de faire ressortir le texte en blanc