Index

Ajuster le bandeau

Le format conseillé pour l'image du bandeau est 1920*300px.
Vous pouvez utiliser une image plus haute si besoin. Mais notez que la partie visible de l'image dépendra du contenu textuel contenu dans la section.
Le code qui est proposé dans le bandeau permet de gérer un image de fond avec du texte dessus.

Comment ajuster un bandeau contenant seulement une image ?

paramètre height dans l'action section : attention au comportement en responsive
sauts de ligne : comportement un peu aléatoire
Css pour ajuster la hauteur en fonction de la taille de l'écran

@media only screen and (min-width: 600px) {
  #yw-header .background-image {
   min-height: 300px;
}
}

@media only screen and (max-width: 370px) {
  #yw-header .background-image {
   min-height: 56px;
}
}

Combiner une image et une couleur de fond

La propriété CSS background-blend-mode permet d'associer la couleur de fond bgcolor et l'image. Cela permet de faire ressortir un texte

{{section bgcolor="#172983" class="white full-width  text-center cover home-header img-colored" file="image-bandeau.jpg" }}
======Le titre de mon projet====== 
{{button class="btn-primary" link="Projet" text="Découvrir le projet" }}  {{button class="btn-primary" link="Contact" text="Nous contacter" }}
{{end elem="section"}}


""<style>
.img-colored{background-blend-mode: soft-light;}
</style>""

Coller la 1ere section à la barre de menu

Dans l'idéal - le bandeau du haut de votre page est défini dans PageHeader, dans ce cas, le contenu de votre section ser collé correctement au menu, vous n'avez rien à faire.

Il arrive de ne pas souhaiter utiliser PageHeader, mais d'avoir une section en pleine largeur sous le menu. Si elle est définie dans le contenu de la page alors il y aura une bande blache entre votre menu et la section.

/* Correction pour enlever l'écart entre barre de menu et contenu de la page main-container.css */
@media (min-width: 1200px){
    #yw-main {padding: 0;}
}

PDF