Téléchargez 6 motifs de fond de répétition GRATUITS pour Divi

Accorder à votre site Web une attention particulière aux détails peut influencer votre style de conception Web global plus que vous ne le pensez. Ce sont généralement les petits détails qui aident les gens à distinguer un modèle de site Web d'un site Web personnalisé.

Il existe plusieurs façons d'aborder la réalisation de conceptions élevées. L'une des choses que vous pouvez faire est d'utiliser des motifs de répétition d'arrière-plan subtils pour tout élément de conception de votre page. Non seulement cela vous aide à réduire la taille des images d'arrière-plan, mais cela vous aide également à remplir des arrière-plans vierges sans les surcharger.

Dans cet article, vous pourrez télécharger 6 motifs d'arrière-plan basiques mais polyvalents que vous pouvez utiliser lors de la création de tout type de site Web avec Divi. Ces modèles sont parfaits à garder au fond de votre poche lorsque vous avez besoin de pimenter votre conception de sites Web.

Aperçu

Jetons un coup d'œil au type de résultat que vous pouvez obtenir sur votre site Web en utilisant ces motifs d'arrière-plan :

Téléchargez les motifs de fond GRATUITEMENT

Pour mettre la main sur les motifs de fond gratuits, vous devrez d'abord le télécharger à l'aide du 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 encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis et vendredis ! 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 les fichiers

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.

TÉLÉCHARGER

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 !

Approcher

• Une fois le dossier téléchargé et décompressé, vous trouverez 5 dossiers différents
• Chacun de ces dossiers représente un ensemble de dimensions différent : 1000×1000, 500×500, 100×100, 50×50 et 25×25
• Bien qu'il s'agisse techniquement des mêmes modèles, le résultat final sur votre site Web sera différent en fonction de l'ensemble de dimensions que vous décidez d'utiliser.
• Nous combinons ces motifs avec les options d'arrière-plan de Divi pour créer l'effet de répétition d'arrière-plan
• Cela permettra non seulement de garder votre image d'arrière-plan cohérente, mais cela réduira également le besoin d'images d'arrière-plan haute résolution

Comment ça fonctionne

Choisissez une section sur votre page

Vous pouvez appliquer ces motifs d'arrière-plan à n'importe quel élément de conception de votre page. Nous allons le démontrer en ajoutant comme arrière-plan de section. Mais n'hésitez pas à ajouter ces mêmes motifs à d'autres éléments de conception, tels que des lignes, des colonnes et des modules. Plus votre élément de conception est petit, plus vous aurez besoin de réduire la dimension de votre motif, en fonction de la façon dont vous souhaitez que l'apparence et la sensation se révèlent.

Choisissez vos dimensions préférées

Motif 1 : 1000×1000

Paramètres d'arrière-plan

Pour obtenir le résultat que nous avons partagé ci-dessus, allez-y et localisez le motif n°1 dans le dossier 1000×1000 de votre téléchargement. Ensuite, téléchargez-le dans les paramètres d'arrière-plan de votre section et utilisez les paramètres suivants avec lui :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre
• Répéter l'image d'arrière-plan : répéter

Avec superposition de dégradé

Vous voulez mélanger le motif à l'aide d'arrière-plans dégradés ? Vous pouvez le faire aussi. Dans l'exemple ci-dessous, nous avons utilisé une couleur unie et une couleur semi-transparente en combinaison avec le placement du dégradé au-dessus de l'image d'arrière-plan pour créer l'effet de fusion.

• Couleur 1 : #E2E2E2
• Couleur 2: rgba (255,255,255,0.37)
• Type de dégradé : Linéaire
• Direction du gradient : 181 degrés
• Position de départ : 7 %
• Position finale : 35 %

Motif #1 : 500×500

Paramètres d'arrière-plan

Vous pouvez également faire apparaître le motif uniquement horizontalement ou verticalement à l'aide des options d'arrière-plan intégrées de Divi. Pour l'exemple ci-dessus, nous avons utilisé le fichier image du modèle #1 de 500 × 500 dimensions. Après l'avoir téléchargé, 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 au centre
• Répétition de l'image d'arrière-plan : Répéter X (horizontal)

Motif #2 : 500×500

Paramètres d'arrière-plan

Nous avons fait de même en utilisant le deuxième modèle dans votre dossier 500×500.

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : en haut au centre
• Répétition de l'image d'arrière-plan : Répéter X (horizontal)

Motif #3 : 100×100

Paramètres d'arrière-plan

Pour l'exemple suivant, localisez le motif n° 3 dans le dossier des dimensions 100 x 100 et combinez-le avec les options d'arrière-plan suivantes qui feront que le motif occupera toute la section :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre
• Répéter l'image d'arrière-plan : répéter

Motif #4 : 50×50

Paramètres d'arrière-plan

Plus les dimensions sont petites, plus la fréquence du motif est élevée. Localisez l'arrière-plan #4 dans le dossier des dimensions 50×50 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 au centre
• Répéter l'image d'arrière-plan : répéter

Motif #5 : 100×100

Paramètres d'arrière-plan

Le cinquième motif donne un design étonnant et subtil lorsque vous utilisez le jeu de dimensions 100 × 100 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 au centre
• Répéter l'image d'arrière-plan : répéter

Motif #6 : 25×25

Paramètres d'arrière-plan

Enfin, localisez le modèle n°6 dans le dossier des dimensions 25 × 25 et téléchargez-le dans l'arrière-plan de votre section 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 au centre
• Répéter l'image d'arrière-plan : répéter

Utilisez également des motifs pour les arrière-plans de lignes, de colonnes et de modules

Les exemples que nous avons traités ci-dessus ne sont que quelques-unes des options dont vous disposez. Vous obtiendrez un résultat différent pour chaque motif si vous expérimentez avec les différentes dimensions incluses. En plus de cela, vous pouvez également utiliser les options d'arrière-plan de Divi pour créer divers résultats. Vous n'êtes pas limité à utiliser ces motifs d'arrière-plan pour les sections uniquement. Vous pouvez les utiliser pour chaque élément de conception dans Visual Builder de Divi. La taille de votre motif doit correspondre à la taille de votre élément. Utilisez les motifs pour les arrière-plans des lignes, des colonnes et des modules pour créer des designs personnalisés et uniques.

Aperçu

Maintenant que vous avez traité quelques résultats finaux différents que vous pouvez obtenir avec les motifs d'arrière-plan, jetons un dernier coup d'œil au résultat final :

Dernières pensées

Dans la conception de sites Web, il est important de prêter attention aux détails. Il existe de nombreuses façons de le faire, mais dans cet article, nous avons spécifiquement traité l'utilisation de motifs d'arrière-plan pour obtenir des arrière-plans subtils pour les éléments de conception à l'aide de Divi. Nous vous avons fourni 6 modèles différents que vous pouvez télécharger et utiliser gratuitement. Pour chacun des modèles, nous avons également fourni différentes dimensions qui conduisent à des résultats différents une fois utilisés sur une page. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!