Grâce à l'élément Section, vous pouvez donner une nouvelle dimension à vos pages. Cette fonction vous permet d'ajouter des zones colorées à votre site web, que vous pouvez remplir avec le contenu de votre choix. De plus, vous pouvez même ajouter une image de fond à ces zones. Lisez vite ce qui suit pour découvrir comment vous pouvez ajouter cette fonction à votre site web.


Étape 1 :

Rendez-vous sur l'Éditeur.


Étape 2 : 

Faites glisser l'élément Section sur votre page.


Étape 3 :

Vous pouvez choisir un modèle ou vous pouvez ajouter vous-même les éléments que vous souhaitez (ajouter une section vide). 

Les modèles peuvent vous aider à remplir facilement une section avec un contenu approprié, qu'il vous suffit d'éditer. 

Vous obtenez immédiatement un aperçu des fonctionnalités que vous pouvez ajouter à votre page. Après les avoir ajoutées, vous pouvez modifier le contenu vous-même.



Étape 4 :

Si vous choisissez d'ajouter un design, différentes options vous seront proposées pour différents objectifs. 

Par exemple, il existe des sections prédéfinies pour une introduction, pour mettre en valeur des services ou des produits, pour présenter une équipe, pour une section de contact, etc. Vous avez l'embarras du choix.


Cliquez sur la section souhaitée pour l'ajouter à votre site.



Étape 5 :

Tous les éléments de la section que vous avez choisie sont automatiquement ajoutés à votre site. 


Ensuite, il ne vous reste plus qu'à personnaliser le contenu en modifiant les éléments.



Étape 6 :

Dans les sections, vous pouvez également modifier certains paramètres :

  • Vous pouvez modifier la couleur d'arrière-plan en cliquant sur l'une des pastilles colorées. Ces couleurs sont toutes basées sur les paramètres de design de votre site et s'adapteront donc toujours à l'aspect de votre site.
  • Il est également possible de définir une image comme arrière-plan.
  • En utilisant l'icône de la roue dentée, vous pouvez régler la largeur de la section sur S, M ou L.


Option : image en arrière-plan

Lorsqu'une image est utilisée comme arrière-plan, des paramètres supplémentaires sont disponibles. En cliquant sur l'icône de l'image dans la barre d'outils grise, vous pouvez accéder à ces paramètres. Vous pouvez y définir la couleur du contenu (sombre ou clair). Si vous activez l'option Arrière-plan, vous améliorez la lisibilité du texte figurant sur l'image.


Bien entendu, vous pouvez également remplacer l'image si vous n'êtes pas satisfait et que vous souhaitez utiliser une autre image comme arrière-plan. 



Par exemple, la section sur les prestations de service (également utilisée comme exemple ci-dessus) pourrait ressembler à ceci avec une image en arrière-plan :



Étape 7 :

Si vous souhaitez ajouter d'autres sections à votre page, vous pouvez le faire en cliquant sur l'icône "plus" au bas de la section actuelle. Pour chaque nouvelle section, vous pouvez suivre à nouveau les étapes décrites ci-dessus. Il est possible d'ajouter autant de sections que vous le souhaitez à une page.



Voici comment réaliser une mise en page en zig-zag :

Vous pouvez également choisir de créer une mise en page dite en zigzag, dans laquelle deux images différentes sont associées à deux blocs de texte de couleur différente. 


Pour cela, vous placez deux sections l'une en dessous de l'autre, la section supérieure contenant l'image de gauche et la section inférieure l'image de droite, ou vice versa. Vous pouvez ainsi donner aux deux blocs leur propre couleur. Sur la version mobile, ces blocs apparaissent harmonieusement l'un sous l'autre.



✔ Conseil : si vous ajoutez différentes sections à une page, vous pouvez créer des zones colorées en alternance sur votre site web. Pour ce faire, vous donnez alternativement aux sections la couleur de l'arrière-plan de votre page par défaut et une autre couleur. Vous obtiendrez ainsi ce type d'effet sur votre page, par exemple :