Comment utiliser l'option Gradient Repeat de Divi pour créer des motifs d'arrière-plan personnalisés

Les options d'arrière-plan de Divi offrent de nombreuses façons de créer des motifs d'arrière-plan. Vous pouvez même créer des motifs d'arrière-plan en utilisant uniquement des dégradés. L'option Gradient Repeat rend cela simple et facile. Dans cet article, nous verrons comment utiliser l'option Gradient Repeat de Divi pour créer des motifs d'arrière-plan personnalisés.

Commençons.

Qu'est-ce que la répétition du dégradé

L'option Gradient Repeat crée un motif basé sur les Gradient Stops. Les arrêts de dégradé sont des mesures qui déterminent où les couleurs apparaissent et s'arrêtent dans le dégradé. Le Gradient Builder de Divi utilise ces arrêts pour créer le motif.

La dernière couleur indique au dégradé où se trouve le point d'arrêt dans le dégradé. Vous pouvez avoir autant de couleurs que vous le souhaitez avant ce point d'arrêt. Le Gradient Builder le répétera ensuite pour remplir l'écran qui crée le motif. L'option peut être ajoutée à n'importe quelle section, ligne, colonne ou module, et elles peuvent être utilisées ensemble.

Activer l'option de répétition du dégradé

Pour activer l'option Gradient Repeat, ouvrez les paramètres de la section en cliquant sur son icône d'engrenage. Cela fonctionne également avec les lignes, les colonnes et les modules.

Faites défiler jusqu'à Arrière -plan . Sélectionnez l'onglet Dégradé d'arrière -plan et cliquez sur Ajouter un dégradé d'arrière-plan .

Sous la barre d'arrêt du dégradé se trouve un paramètre appelé Répéter le dégradé . Ceci est désactivé par défaut. Cliquez simplement dessus pour l'activer.

Le dégradé va maintenant se répéter, créant un motif basé sur vos arrêts de dégradé et vos autres paramètres de dégradé, tels que l'unité de dégradé.

Unités de dégradé

L'unité de dégradé est l'unité de mesure. Cela spécifie ce que les nombres d'arrêt de dégradé sur la barre de dégradé indiquent, ce qui détermine la façon dont les arrêts de dégradé sont mesurés. Cela affecte le motif créé par l'option de répétition.

Le générateur de dégradés d'arrière-plan de Divi propose 15 unités. Regardons un exemple des quatre options les plus populaires. Comme nous le verrons dans nos exemples, le résultat changera en fonction de votre nombre d'arrêts de dégradé et de vos paramètres. J'utilise les couleurs de nos exemples et je l'ai configuré pour qu'il se répète pour le rendre plus facile à voir. Je vais utiliser trois couleurs avec ces paramètres :

• Couleur 1 : #fff6ee (Position 14 %)
• Couleur 2 : #ede3dc (position 46 %)
• Couleur 3 : #e8ded7 (Position 82 %)

Paramètres de dégradé

• Type : Linéaire
• Orientation : 214 degrés
• Répéter le dégradé : oui
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Pour cent

Le pourcentage mesure les arrêts de dégradé en pourcentage. Cela calcule les points de dégradé en fonction de l'élément parent. Plus le dernier point de dégradé est petit, plus le motif créé est serré. Lors du réglage de la position de l'une des couleurs, cette couleur se déplace tandis que les autres restent en place.

pixels

Les pixels mesurent le nombre de pixels pour chaque arrêt de dégradé. Cela donne au dégradé un motif plus petit que la plupart des autres types d'unités. Le déplacement de la position de la première ou de la dernière couleur modifie la position de chaque couleur.

Hauteur de la fenêtre (vh)

La fenêtre d'affichage est la zone de la fenêtre du navigateur qui est visible. Il est mesuré en hauteur et en largeur séparément. La hauteur de la fenêtre utilise les arrêts de dégradé pour mesurer le pourcentage de la hauteur de la taille de la fenêtre. Ajuster la position de la première ou de la dernière couleur affecte toutes les couleurs.

Largeur de la fenêtre (vw)

La largeur de la fenêtre utilise les arrêts de dégradé pour mesurer le pourcentage de la largeur de la taille de la fenêtre (ou largeur du navigateur). Les ajustements changent en fonction de la largeur. Lorsque vous ajustez le nombre plus grand ou plus petit, cette couleur spécifique change de position tandis que les autres restent les mêmes.

Exemples d'options de répétition de dégradé

Pour nos exemples, j'utilise la section Call-to-Action de la page d'accueil du pack de mise en page d'acupuncture gratuit disponible dans Divi.

Nous devrons apporter un ajustement à la première colonne de la section. Ouvrez les paramètres de la ligne en cliquant sur son icône d'engrenage.

Ensuite, sélectionnez l' icône d'engrenage pour la première colonne.

Dégradé de la colonne un

La première colonne a son propre dégradé de fond. Cela fait partie de la mise en page. Nous ne changerons pas cela. Nous utiliserons ce même dégradé dans nos quatre exemples. Voici les paramètres au cas où vous en auriez besoin.

• Couleur 1 : #f4d5b8 (Position 0px)
• Couleur 2 : rgba (244,213,184,0) (Position 100px)

Paramètres de dégradé

• Type : Linéaire
• Orientation : 180 degrés
• Répéter le dégradé : non
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Espacement

Nous ajouterons un espacement à gauche de la colonne. Accédez aux paramètres de conception , faites défiler jusqu'à Espacement et sélectionnez l' icône de la tablette pour ouvrir les options de l'appareil. Ajoutez 5 % de rembourrage à gauche pour les onglets du bureau et de la tablette. Choisissez l'onglet téléphone et supprimez le rembourrage gauche. Laissez Haut et Droite à leurs paramètres actuels.

• Rembourrage supérieur : 180px
• Rembourrage gauche : 5 %
• Rembourrage droit : 80px

Exemple un

Notre premier exemple crée un motif répété en diagonale avec des lignes fines.

Celui-ci a trois arrêts de dégradé. La première couleur est #fff6ee, placée à la position 4px. Le second est #ede3dc, placé à la position 9px. Le dernier est #e8ded7, placé à la position 14px. Cela signifie que le dégradé s'arrête à 14 pixels, là où la répétition commencera. Les arrêts de couleur sont rapprochés, gardant le motif petit.

• Couleur 1 : #fff6ee (Position 4px)
• Couleur 2 : #ede3dc (Position 9px)
• Couleur 3 : #e8ded7 (Position 14px)

Pour les paramètres de dégradé, changez le Type de dégradé en Linéaire et définissez sa Direction sur 156 degrés. Activez Répéter le dégradé . Sélectionnez Pixels pour l' unité .

• Type : Linéaire
• Orientation : 156 degrés
• Répéter le dégradé : oui
• Unité : pixels
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Deuxième exemple

Notre deuxième exemple crée un motif répétitif en diagonale avec des lignes plus grandes.

Celui-ci a trois arrêts de dégradé. La première est la couleur #fff6ee, placée à la position 4px. Notre deuxième couleur est #ede3dc, placée à la position 43px. Le dernier est #e8ded7, placé à la position 50px. Ce dégradé s'arrêtera à 50 pixels et répétera le motif.

• Couleur 1 : #fff6ee (Position 4px)
• Couleur 2 : #ede3dc (Position 43px)
• Couleur 3 : #e8ded7 (Position 50px)

Pour les paramètres de dégradé, sélectionnez Linéaire pour le Type et définissez la Direction sur 156 degrés. Activez Répéter le dégradé et changez l' unité en pixels.

• Type : Linéaire
• Orientation : 156 degrés
• Répéter le dégradé : oui
• Unité : pixels
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Exemple trois

Notre troisième exemple crée un motif circulaire répétitif avec des cercles de taille moyenne.

Celui-ci a trois arrêts de dégradé. La première couleur est #fff6ee, placée à la position 4px. La couleur 2 est #e8ded7, placée à la position 7px. La dernière couleur est #ede3dc, placée à la position 8px. Ce dégradé s'arrêtera à 8 pixels et les autres couleurs seront rapprochées, créant un motif serré.

• Couleur 1 : #fff6ee (Position 4px)
• Couleur 2 : #e8ded7 (Position 7px)
• Couleur 3 : #ede3dc (Position 8px)

Pour les paramètres de dégradé, changez le Type en Circulaire et définissez la Direction sur Bas. Activez Répéter le dégradé et changez l' unité en pourcentage.

• Type : Circulaire
• Orientation : vers le bas
• Répéter le dégradé : oui
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Exemple 4

Notre quatrième exemple crée un motif circulaire avec de grands cercles.

Celui-ci a trois arrêts de dégradé. Le premier est #fff6ee, placé à la position 4px. Le deuxième est # e8ded7, placé à la position 23px. Le troisième est #ede3dc, placé à la position 31px. Ce dégradé crée un motif plus large avec des couleurs plus éloignées et s'arrêtant à 31 pixels.

• Couleur 1 : #fff6ee (Position 4px)
• Couleur 2 : #e8ded7 (position 23px)
• Couleur 3 : #ede3dc (Position 31px)

Pour les paramètres de dégradé, changez le Type en Circulaire et réglez la Direction sur Centre. Activez Répéter le dégradé et changez l' unité en pourcentage.

• Type : Circulaire
• Direction : Centre
• Répéter le dégradé : oui
• Unité : Pourcentage
• Placer le dégradé au-dessus de l'image d'arrière-plan : non

Mettre fin aux pensées

C'est notre regard sur la façon d'utiliser l'option de répétition de dégradé de Divi pour créer des arrière-plans personnalisés. De nombreux ajustements dans les paramètres de dégradé affectent la conception du dégradé. Gradient Repeat fonctionne bien avec tous ces ajustements pour créer facilement des motifs d'arrière-plan personnalisés intéressants. Je vous recommande d'essayer les exemples que nous avons fournis ici et d'apporter des modifications pour voir comment les dégradés sont affectés et créer vos propres dégradés d'arrière-plan personnalisés.

Nous voulons de vos nouvelles. Utilisez-vous l'option de répétition du dégradé de Divi avec vos arrière-plans personnalisés ? Dites-le nous dans les commentaires.