Téléchargez 10 images de fond de section fluide GRATUITES pour Divi
Publié: 2018-10-07Si vous cherchez à rafraîchir l'apparence de vos sections, cela pourrait être le poste idéal pour vous. Nous avons créé 10 images d'arrière-plan de section fluide différentes que vous pouvez télécharger gratuitement et utiliser sur n'importe quel site Web que vous créez. En plus de cela, nous vous montrerons également comment combiner ces images d'arrière-plan de section fluide avec les options intégrées de Divi. Vous pourrez attribuer n'importe quel arrière-plan dégradé à votre image d'arrière-plan fluide et le combiner avec un arrière-plan dégradé de lignes pour vous assurer que votre contenu reste également lisible.
Allons-y !
Aperçu
Commençons par jeter un coup d'œil aux 10 images d'arrière-plan de la section fluide différentes que vous pourrez télécharger plus loin dans l'article. Nous avons combiné les images avec des arrière-plans dégradés pour créer des résultats uniques. Nous partagerons également chacune des combinaisons de dégradés dans cet article, mais n'hésitez pas à expérimenter avec différentes couleurs pour obtenir le résultat final souhaité.
Téléchargez GRATUITEMENT les images de fond de la section fluide
Pour mettre la main sur les images d'arrière-plan gratuites de la section fluides, vous devrez d'abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Recréer la section
Ajouter une nouvelle section régulière
Espacement
Une fois que vous avez téléchargé tous les fichiers image, accédez à votre site Web WordPress et ouvrez une page nouvelle ou existante. Ensuite, à l'aide de Visual Builder de Divi, ajoutez une nouvelle section régulière. Ouvrez ses paramètres et modifiez les valeurs d'espacement.
- Rembourrage supérieur : 0px
- Rembourrage inférieur : 0px
Ajouter une nouvelle ligne
Structure des colonnes
Continuez en ajoutant une nouvelle ligne à votre section en utilisant la structure de colonnes suivante :
Dimensionnement
Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.
- Faire cette ligne en pleine largeur : Oui
- Utiliser une largeur de gouttière personnalisée : Oui
- Largeur de gouttière : 1
Espacement
Ajoutez également des valeurs de remplissage aux paramètres d'espacement.
- Rembourrage supérieur : 312px
- Rembourrage inférieur : 312px
- Remplissage de la colonne à gauche : 50 px
- Remplissage de la colonne à droite : 50px
Ajouter un module de texte
Ajouter du contenu
Il est temps de commencer à ajouter les modules ! Le premier module dont nous avons besoin est un module de texte. Allez-y et ajoutez du contenu à la zone de contenu, de préférence un titre H2 et un paragraphe.
Paramètres de texte H2
Accédez ensuite aux paramètres de texte H2 et appliquez les modifications suivantes :
- Police de la rubrique 2 : Montserrat
- Titre 2 Poids de la police : Ultra gras
- Titre 2 Couleur du texte : #FFFFFF
- Titre 2 Taille du texte : 82 px (ordinateur de bureau), 60 px (tablette), 40 px (téléphone)
- En-tête 2 Hauteur de ligne : 1.4em
Paramètres de texte
Modifiez également les paramètres généraux du texte.
- Couleur du texte : #FFFFFF
- Taille du texte : 16px
- Hauteur de la ligne de texte : 1,9 em
- Orientation du texte : Centre
Dimensionnement
Continuez en diminuant la largeur de ce module sur le bureau.
- Largeur : 58 % (ordinateur de bureau), 100 % (tablette et téléphone)
- Alignement du module : Centre
Ajouter un module de boutons
Ajouter une copie
Le deuxième et dernier module dont nous avons besoin est un module de bouton. Après avoir ajouté le module sous le module de texte, ajoutez une copie.
Alignement des boutons
Modifiez ensuite l'alignement des boutons.
- Alignement des boutons : Centre
Paramètres des boutons
Ensuite, allez dans les paramètres des boutons et apportez quelques modifications.
- Utiliser des styles personnalisés pour le bouton : Oui
- Taille du texte du bouton : 18px
- Couleur du texte du bouton : #000000
- Couleur d'arrière-plan du bouton : #FFFFFF
- Largeur de la bordure du bouton : 0px
- Rayon de la bordure du bouton : 0px
- Espacement des lettres des boutons : -1px
- Police des boutons : Montserrat
- Poids de la police : Ultra gras
- Style de police : majuscule
Espacement
Enfin, ajoutez un peu d'espace entre le module précédent et celui-ci en ajoutant une marge supérieure.
- Marge supérieure : 25px
Contexte de la section fluide #1
Fond dégradé de section
Utilisez l'arrière-plan dégradé suivant pour votre section :
- Couleur 1 : #000000
- Couleur 2: #2d5b9b
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-1.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Pour couronner le tout, ajoutez un dégradé de lignes au-dessus de l'arrière-plan de votre section. Cela rendra le texte plus lisible. Cela vous aidera également à ajouter de la profondeur à votre page.
- Couleur 1 : rgba(0,0,0,0.67)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Arrière-plan de la section fluide #2 & #3
Fond dégradé de section
Les deuxième et troisième images d'arrière-plan de la section fluide utilisent l'arrière-plan dégradé de la section suivante :
- Couleur 1 : #4f009e
- Couleur 2 : #fa00ff
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-2.png ' ou ' fluid-style-3.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Ajoutez également un arrière-plan dégradé de lignes subtiles :
- Couleur 1 : rgba (255,48,75,0.13)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Contexte de la section fluide #4
Fond dégradé de section
Utilisez l'arrière-plan dégradé suivant pour votre section :
- Couleur 1 : #00245e
- Couleur 2: #ffee00
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-4.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Pour terminer, ajoutez un fond dégradé de lignes en utilisant les paramètres suivants :
- Couleur 1 : rgba(0,0,0,0.37)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Contexte de la section fluide #5
Fond dégradé de section
Ajoutez l'arrière-plan dégradé suivant à votre section :
- Couleur 1 : #04000f
- Couleur 2: #00436d
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Ensuite, téléchargez le fichier ' fluid-style-5.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Complétez votre conception en utilisant l'arrière-plan dégradé suivant :
- Couleur 1 : rgba(0,0,0,0.58)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Contexte de la section fluide #6
Fond dégradé de section
Utilisez la superbe combinaison de fond dégradé de section suivante :
- Couleur 1: #4800ff
- Couleur 2: #c854ff
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-6.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Enfin, ajoutez une superposition d'arrière-plan en dégradé de lignes.
- Couleur 1 : rgba(0,0,0,0.51)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Contexte de la section fluide #7
Fond dégradé de section
Appliquez les paramètres d'arrière-plan dégradé suivants à votre section :
- Couleur 1 : #ff8300
- Couleur 2: #52006b
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-7.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en haut à droite
Fond de dégradé de ligne
Enfin, ajoutez un fond dégradé de ligne au-dessus de votre section.
- Couleur 1: rgba(106,0,198,0,34)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Contexte de la section fluide #8
Fond dégradé de section
Appliquez le fond dégradé bleu suivant à votre section :
- Couleur 1 : #0b43dd
- Couleur 2: #09f9ed
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-8.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en haut à gauche
Fond de dégradé de ligne
Complétez votre conception en appliquant un fond dégradé de lignes.
- Couleur 1 : rgba (0,7,119,0,57)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Linéaire
- Direction radiale : Centre
Contexte de la section fluide # 9
Fond dégradé de section
Ajoutez l'arrière-plan dégradé suivant à votre section :
- Couleur 1 : #051f89
- Couleur 2: #6d0272
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-9.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : couverture
- Position de l'image d'arrière-plan : Centre
Fond de dégradé de ligne
Enfin, augmentez la lisibilité de votre contenu à l'aide d'un fond dégradé de lignes.
- Couleur 1 : rgba(0,0,0,0.59)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Fond de la section fluide #10
Fond dégradé de section
Le dernier exemple nécessite l'arrière-plan dégradé de la section suivante :
- Couleur 1 : #051f89
- Couleur 2: #6d0272
- Type de dégradé : Linéaire
- Direction du gradient : 137 degrés
- Position de départ : 48 %
Image d'arrière-plan de la section
Téléchargez le fichier ' fluid-style-10a.png ' que vous pouvez trouver dans le dossier de téléchargement et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en haut à gauche
Fond de dégradé de ligne
Ajoutez ensuite un arrière-plan dégradé de ligne.
- Couleur 1 : rgba(0,0,0,0.59)
- Couleur 2: rgba(255,255,255,0)
- Type de dégradé : Radial
- Direction radiale : Centre
Image d'arrière-plan de la ligne
Ajoutez également une image d'arrière-plan à votre ligne. Recherchez « fluide-style-10b.png » dans le dossier de téléchargement, téléchargez-le et combinez-le avec les paramètres d'arrière-plan suivants :
- Taille de l'image d'arrière-plan : taille réelle
- Position de l'image d'arrière-plan : en bas à droite
Aperçu
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final.
Dernières pensées
Dans cet article, nous avons partagé 10 images d'arrière-plan de section fluide différentes et uniques que vous pouvez utiliser sur vos propres sites Web sans aucune restriction. En plus de cela, nous vous avons également fourni de superbes arrière-plans dégradés que vous pouvez combiner avec les images d'arrière-plan fluides en utilisant uniquement les options intégrées de Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous et dites-nous laquelle des images d'arrière-plan de la section fluide vous préférez!