Comment utiliser les paramètres de masque d'arrière-plan et de transformation de motif de Divi

Les motifs d'arrière-plan sont un excellent moyen de donner à votre site Web une touche visuelle et de se démarquer de la foule. Les nouveaux paramètres de masque d'arrière-plan et de transformation de motif de Divi peuvent être combinés de plusieurs façons pour créer ces motifs d'arrière-plan. Dans cet article, nous verrons comment utiliser les paramètres de masque d'arrière-plan et de transformation de motif de Divi pour créer des arrière-plans intéressants pour vos mises en page Divi.

Commençons.

Aperçu

Tout d'abord, voici un aperçu de chaque exemple avec le bureau, le téléphone et les options alternatives pour chacun.

Exemple 1 Résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Exemple Deux Résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Exemple trois résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Masque d'arrière-plan Divi et options de transformation de motif

Les nouvelles fonctionnalités de masque et de motif d'arrière-plan de Divi incluent plusieurs options pour les ajuster. Les ajustements incluent le retournement horizontal et vertical, la rotation et l'inversion. Pour voir les options, accédez aux paramètres d'arrière-plan d'une section ou d'une ligne et sélectionnez les onglets Motif d'arrière-plan ou Masque d'arrière-plan.

Une fois que vous avez ajouté un motif ou un masque, les paramètres de transformation s'affichent. Cliquez simplement sur les options que vous souhaitez utiliser. Nous pouvons les utiliser ensemble et dans n'importe quelle combinaison que nous voulons.

Comment fonctionnent les paramètres de masque et de transformation de motif de Divi

Le motif ci-dessous est Zig Zag avec les paramètres par défaut.

J'ai ajouté un masque Layer Blog dans l'image ci-dessous. Utilisons-les pour montrer comment fonctionnent les paramètres de masque d'arrière-plan et de transformation de motif.

Retournement horizontal

C'est le retournement horizontal. J'ai appliqué les paramètres de transformation à la fois au motif et au masque.

Retournement vertical

C'est le retournement vertical pour le motif et le masque.

Tournant

Celui-ci montre Rotation pour le motif et le masque.

Inverser

Cet exemple montre Inversion pour le motif et le masque.

Combinaisons de masque d'arrière-plan et de transformation de motif

Bien sûr, nous pouvons également utiliser les paramètres de transformation dans diverses combinaisons. Voici quelques exemples.

Celui-ci fait pivoter le motif et inverse le masque.

Cet exemple utilise le retournement vertical, la rotation et l'inversion pour le motif d'arrière-plan. Le masque d'arrière-plan utilise le retournement horizontal, le retournement vertical et la rotation.

Pour cet exemple, j'ai utilisé le retournement et la rotation horizontaux pour le motif d'arrière-plan, et le retournement et la rotation verticaux pour le masque d'arrière-plan.

Exemples de paramètres de masque d'arrière-plan et de transformation de motif

Voyons ensuite comment ces paramètres peuvent être utilisés avec les mises en page Divi. Nous utiliserons une section comme point de départ et créerons trois exemples. Nous allons le styler, puis utiliser les paramètres de transformation pour le modifier pour chaque exemple.

Pour mes exemples, j'utilise une version modifiée de la section héros de la page de destination de la planification successorale disponible dans Divi. Voici un aperçu de ma rubrique. La modification simplifie la section héros pour nos besoins. Il utilise la couleur d'arrière-plan : #92a5ab.

• Arrière-plan : #92a5ab

Paramètres de masque d'arrière-plan et de transformation de motif Exemple 1

Notre premier exemple nous donne une arche qui se trouve verticalement au centre de l'écran. Un côté de l'écran a un motif tufté. Ensuite, nous créerons une version alternative avec l'arc orienté dans l'autre sens.

Motif de fond

Ouvrez les paramètres de la section, faites défiler jusqu'à Arrière -plan et sélectionnez l'onglet Motif d'arrière -plan. Choisissez Tufted pour le motif d'arrière-plan et Inverting pour Pattern Transform.

• Motif de fond : Tufté
• Transformation de motif : inversion

Masque de fond

Sélectionnez l'onglet Masque d'arrière -plan et choisissez Arch pour le masque d'arrière-plan. Changez la couleur du masque en # 616d72 et réglez la transformation du masque sur Inversion. Ceci termine notre première version de l'arc avec des touffes.

• Masque d'arrière-plan : arche
• Couleur : #616d72
• Transformation de masque : inversion

Exemple une variante

Ensuite, créons une variante de notre conception. Modifiez simplement la transformation de masque pour le motif d'arrière-plan en retournement horizontal et retournement vertical. Cela change l'arche pour faire face à l'autre direction et décale le motif, de sorte qu'il ne ressemble pas seulement à une image miroir.

• Transformation de masque : retournement horizontal, retournement vertical

Paramètres de masque d'arrière-plan et de transformation de motif Exemple 2

Pour notre deuxième exemple, nous allons créer un ovale au centre de l'écran avec un motif à l'intérieur de l'ovale. Ensuite, nous allons changer le placement du motif. Nous modifierons également celui-ci pour différentes tailles d'écran.

Motif de fond

Dans les paramètres d'arrière-plan, sélectionnez l'onglet Motif d'arrière -plan et choisissez Shippo pour le motif. Définissez la transformation du motif sur Inverser.

• Motif de fond : Shippo
• Transformation de motif : inversion

Masque de fond

Ensuite, sélectionnez l'onglet Masque d'arrière -plan. Choisissez Eclipse pour le masque d'arrière-plan et survolez les options d'arrière-plan. Sélectionnez l'icône de la tablette qui apparaît. Cela ouvre les paramètres de l'appareil. Pour les paramètres du bureau, définissez la couleur sur #758489. Pour Mask Transform, choisissez Horizontal Flipping and Rotating. Ceci termine la version de bureau. Changeons-le pour la version mobile.

• Masque d'arrière-plan : Éclipse
• Couleur : #758489
• Transformation de masque : retournement horizontal, rotation

Tablette et Téléphone

La tablette et le téléphone utiliseront tous les deux les mêmes paramètres, nous n'aurons donc qu'à modifier les paramètres de la tablette. Sélectionnez l' onglet Tablette et modifiez la transformation du masque en retournement horizontal.

• Transformation de masque : retournement horizontal, inversion

Exemple Deux Variation

Ensuite, nous allons créer la variation pour notre deuxième exemple. Tout d'abord, sélectionnez l'onglet Motif d'arrière -plan et définissez la Couleur du motif sur rgba(0,0,0,0.06).

• Couleur du motif : rgba (0,0,0,0.06)

Ensuite, sélectionnez l'onglet Masque d'arrière -plan et choisissez Retournement horizontal, rotation et inversion pour la transformation du masque.

• Transformation de masque : retournement horizontal, rotation, inversion

Tablette et téléphone

Pour les options tablette et téléphone, sélectionnez l'icône de la tablette . Modifiez la transformation du masque en retournement et inversion horizontaux. La version alternative de l'exemple deux est maintenant terminée.

• Transformation de masque : retournement horizontal, inversion

Paramètres de masque d'arrière-plan et de transformation de motif Exemple 3

Pour notre troisième exemple de paramètres de masque et de transformation de motif, nous utiliserons un motif en nid d'abeille avec un masque de peinture. Nous créerons également une version mobile pour celui-ci.

Motif de fond

Tout d'abord, choisissez l'onglet Paramètres de l'appareil et sélectionnez l'icône du bureau . Sélectionnez l'onglet Motif d'arrière -plan et choisissez Nid d'abeille pour le motif d'arrière-plan. Changez la Couleur en rgba(0,0,0,0.42). Pour celui-ci, nous laisserons les options Pattern Transform désactivées. Nous les ajouterons pour la version alternative.

• Motif de fond : Nid d'abeille
• Couleur du motif : rgba (0,0,0,0.42)
• Transformation de motif : aucune

Masque de fond

Ensuite, sélectionnez l'onglet Masque d'arrière -plan. Choisissez Peinture pour le masque d'arrière-plan. Changez la couleur en #697b82. Choisissez Retournement vertical pour la transformation de masque.

• Masque d'arrière-plan : peinture
• Couleur : #697b82
• Transformation de masque : retournement vertical

Ensuite, sélectionnez Couverture pour la taille. Cela ouvre quelques options supplémentaires. Choisissez En bas à droite pour la Position. C'est tout pour la version de bureau. Ensuite, nous allons créer la version mobile.

• Taille: Couverture
• Position : En bas à droite

Tablette et téléphone

Ensuite, sélectionnez l'onglet tablette et modifiez la transformation du masque d'arrière -plan en retournement et rotation verticaux. Ceci termine le style de notre troisième exemple. Ensuite, nous allons créer la version alternative.

• Transformation du masque d'arrière-plan : retournement vertical, rotation

Exemple trois variante

Pour la version alternative de cet exemple, nous ajusterons à la fois le motif d'arrière-plan et le masque d'arrière-plan.

Motif de fond

Pour le motif d'arrière -plan, changez la couleur du motif en rgba(0,0,0,0.11). Modifiez la transformation du motif en retournement horizontal, retournement vertical et rotation.

• Couleur du motif : rgba (0,0,0,0.11)
• Transformation de motif : retournement horizontal, retournement vertical, rotation

Masque de fond

Ensuite, sélectionnez l'onglet Masque d'arrière -plan. Changez la couleur en blanc et la transformation du masque en retournement horizontal, retournement vertical et inversion.

• Couleur : #ffffff
• Masque de transformation : retournement horizontal, retournement vertical, inversion

Ensuite, changez la taille du masque en couverture, puis choisissez Centre pour la position du masque.

• Taille du masque : couverture
• Position du masque : centre

Tablette et téléphone

Enfin, choisissez l'onglet tablette pour créer la version mobile. Choisissez l'onglet Masque d'arrière -plan et sélectionnez les quatre options de transformation de masque. Ceci termine la version alternative du troisième exemple.

• Transformation du masque d'arrière-plan : retournement horizontal, retournement vertical, rotation, inversion

Résultats

Voici un aperçu de chaque exemple avec le bureau, le téléphone et les options alternatives pour chacun.

Exemple 1 Résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Exemple Deux Résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Exemple trois résultats

Bureau de la version régulière

Téléphone de version régulière

Bureau de version alternative

Version alternative du téléphone

Mettre fin aux pensées

C'est notre regard sur la façon d'utiliser les paramètres de masque d'arrière-plan et de transformation de motif de Divi pour créer de nombreux motifs d'arrière-plan intéressants. Étant donné que les motifs et les masques peuvent être utilisés ensemble, leurs paramètres de transformation peuvent également être utilisés ensemble. Cela ouvre de nombreuses options de conception, vous donnant encore plus d'outils pour ajouter de l'élégance à vos arrière-plans Divi. La meilleure façon d'apprendre à les utiliser est de jouer avec les ajustements et de voir ce que vous pouvez créer.

Nous voulons de vos nouvelles. Avez-vous essayé les paramètres de masque d'arrière-plan et de transformation de motif de Divi dans vos mises en page Divi ? Dites-le nous dans les commentaires.