Donner à une section un arrière-plan couleur, photo ou dégradé.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Vous pouvez remplir toute section d’une couleur, d’une photo ou d’un dégradé. Couleur et photo viennent du panneau Style, que sections, lignes, colonnes et éléments ont tous. Les sections ajoutent un panneau Background effects pour les dégradés, les photos fixes et parallaxe et les vidéos YouTube. L’exemple construit une section bleu marine avec une photo de ville, du texte blanc et un dégradé par-dessus.

La vidéo ajoute une photo derrière une section, puis la couvre d’un dégradé.

Ajouter une couleur et une photo

  1. Cliquez sur Add Elements dans la zone de contenu vide et choisissez Section dans l’onglet Layout.
  2. Survolez la section et ouvrez More > Settings.
  3. Ouvrez le panneau Style.
  4. Choisissez un échantillon bleu marine sombre pour Background.
  5. Choisissez le blanc pour Font color.
  6. Sous Background image, cliquez sur Select Image. Cherchez dans la médiathèque, cochez une photo et cliquez sur Insert selected.
  7. Réglez Background style sur Cover.
  8. Réglez Background position sur Center center et cliquez sur Save.
  9. Cliquez sur + sur la section et choisissez Text dans l’onglet Content.
  10. Saisissez un titre, comme Evening lectures, et une ligne en dessous. Mettez le titre en Heading 2 et centrez les deux lignes dans la barre d’outils de l’éditeur.
  11. Ouvrez le panneau Style, réglez Font color sur le blanc et cliquez sur Save.

Ajouter un dégradé

  1. Survolez la section et ouvrez de nouveau More > Settings.
  2. Ouvrez le panneau Background effects et réglez Background effect sur Gradient.
  3. Choisissez une Start color et une End color, puis cliquez sur Save.
  4. Cliquez sur Save sur la barre d’outils, ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez Preview.

Ce que vous voyez

Après les premières étapes, la photo remplit toute la section derrière le titre blanc. Cover recadre ce qui ne tient pas, et Center center garde le milieu de la photo à l’écran. La couleur bleu marine ne se voit que pendant le chargement de la photo ou là où la photo ne va pas.

Le dégradé fond de la couleur de départ en haut vers la couleur de fin en bas. Il se trouve au-dessus de la photo. Les couleurs opaques couvrent complètement la photo ; les couleurs avec de la transparence la laissent transparaître.

Paramètres

Panneau Style (chaque section, ligne, colonne et élément)

Paramètre Rôle Valeur par défaut
Background Une couleur de remplissage depuis le sélecteur de couleur ou un échantillon du thème Aucune
Background image Une image depuis la médiathèque, choisie avec Select Image Aucune
Background style Cover remplit l’élément et recadre ; Contain montre toute l’image et peut laisser des vides ; No repeat la montre une fois à sa taille ; Repeat la répète en mosaïque Défauts du thème
Background position Quelle partie de l’image reste à l’écran quand elle est recadrée, comme Center center ou Left top Défauts du thème

Quand la génération d’images IA est configurée, Background image accepte aussi un prompt. Voir Génération d’images IA.

Panneau Background effects (sections uniquement)

Effet d’arrière-plan Rôle Réglages supplémentaires
Simple image (défaut) La photo défile avec la page Aucun
Fixed image La photo reste en place pendant que la page défile dessus Aucun
Parallax image La photo bouge moins vite que la page. Voir Section héro pour un exemple. Parallax speed, Parallax mode (Fixed ou Local), Disable on mobile
Gradient Deux couleurs fondent sur la section, au-dessus de la photo s’il y en a une Start color, End color, Gradient direction (180 degrés de haut en bas), Start position, End position
YouTube video Une vidéo YouTube muette remplit la section ; cochez Loop pour la répéter YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Les effets fixe et parallaxe bougent la photo définie dans le panneau Style. Une vidéo YouTube n’a besoin d’aucune photo.

Si vous ne voyez pas l’arrière-plan

  • Il n’y a pas de panneau Background effects. Seules les sections l’ont. Survolez la section, pas une ligne, une colonne ni un élément, et ouvrez More > Settings.
  • La photo est coupée. Cover recadre ce qui ne tient pas dans la section. Changez Background position pour garder le sujet à l’écran, ou choisissez Contain.
  • Le dégradé cache la photo. Le dégradé se trouve au-dessus, et les couleurs opaques couvrent la photo. Baissez l’opacité de Start color et End color dans le sélecteur de couleur.
  • La section ne montre aucun dégradé. Un dégradé a besoin des deux couleurs. Choisissez une Start color et une End color.
  • La vidéo YouTube ne joue pas. YouTube video URL est vide ou n’est pas un lien vers une seule vidéo. Collez l’adresse complète de la vidéo, comme https://www.youtube.com/watch?v= suivi de son identifiant.

Et ensuite ?