Comment passer à une mise en page sombre en 5 étapes à l'aide des fonctionnalités d'efficacité de Divi

Lors de la conception d'un site Web, l'une des premières décisions que vous prenez consciemment ou inconsciemment est le style de couleur que vous allez donner à votre site Web. Les plus courageux d'entre nous oseraient opter pour une palette de couleurs vibrantes complète mais, soyons honnêtes, c'est incroyablement difficile à réaliser. C'est pourquoi il est généralement plus sûr d'opter pour une disposition claire ou sombre. Dans la section Mises en page prédéfinies de la bibliothèque Divi, vous pouvez trouver une tonne de mises en page claires et sombres que vous êtes libre d'utiliser lors de la création de tout type de site Web. Mais que se passe-t-il si vous aimez la mise en page, mais préférez une palette de couleurs plus foncée ou vice versa ?

Avec les fonctionnalités d'efficacité de Divi, passer d'un pack de mise en page clair à sombre, et inversement, est plus facile que jamais. Dans cet article, nous allons vous montrer comment transformer une disposition claire en une disposition sombre en seulement 5 étapes. Le temps nécessaire pour effectuer cette transition est incroyablement bas si vous utilisez les bonnes techniques. Sachez que le nombre d'étapes que vous devez suivre dépendra toujours de la mise en page sur laquelle vous travaillez, mais une fois que vous aurez obtenu l'approche globale, vous pourrez la faire fonctionner pour n'importe quelle mise en page avec laquelle vous travaillez.

Allons-y !

Aperçu

En 5 étapes seulement, nous allons changer la page de destination claire du Web Freelancer Layout Pack en une page sombre.

Télécharger la page de destination de l'indépendant Web

Ajouter une nouvelle page et activer Visual Builder

Commencez par ajouter une nouvelle page, donnez un titre à votre page et passez à Visual Builder.

Télécharger le pack de mise en page Web Freelancer

Parmi les trois options qui apparaissent sur votre écran, choisissez de télécharger une mise en page prédéfinie.

Recherchez la page de destination du Web Freelancer Layout Pack dans la liste des packs de mise en page gratuits et téléchargez-la en cliquant sur le bouton vert indiquant « Utiliser cette mise en page ».

Étape 1 : Changer la couleur d'arrière-plan globale

Changer la couleur d'arrière-plan de la première section

Il est temps de commencer ! La première étape que nous vous recommandons de prendre est de changer la couleur d'arrière-plan de toutes les sections de votre page. Une fois cela fait, vous pourrez rapidement remarquer quels éléments de conception doivent être modifiés pour correspondre à la couleur de fond sombre. Ouvrez la première section de la page et choisissez '#0c0c0c' comme couleur d'arrière-plan de la section.

Étendre le style à toutes les sections

Dès que vous ajoutez la couleur d'arrière-plan, faites un clic droit dessus et cliquez sur l'option « Étendre la couleur d'arrière-plan ».

Une fois que vous l'avez fait, choisissez d'étendre la couleur d'arrière-plan à toutes les sections de la page.

Étape 2 : Changer les couleurs du texte

Ouvrez le module d'en-tête pleine largeur et modifiez la couleur du texte

La prochaine étape que vous devez prendre est de changer les couleurs du texte qui sont utilisées. Comme vous le savez peut-être ou non, il existe une option par défaut dans Divi qui vous permet de choisir une palette de couleurs claires ou foncées pour le texte de votre page. Cependant, une fois que vous avez choisi une couleur personnalisée, cette option est remplacée par la couleur personnalisée que vous avez choisie. Au lieu de vérifier chacun des éléments pour voir s'il y a une couleur personnalisée, allez-y et choisissez "Lumière" comme couleur de texte dans le module d'en-tête pleine largeur.

Étendre le style à tous les modules

Ensuite, étendez cette couleur de texte clair en cliquant avec le bouton droit de la souris et en sélectionnant l'option "Étendre la couleur du texte".

Étendez cette nouvelle couleur à tous les modules sur toute la page.

Modifier les couleurs personnalisées à l'aide de la fonction de sélection multiple

Comme mentionné précédemment, l'étape précédente ne s'appliquera pas aux couleurs qui ont été choisies à l'avance. Les modules à bascule, par exemple, ont une couleur de texte de titre personnalisée. Au lieu de modifier chacune des bascules individuellement, sélectionnez-les toutes à la fois à l'aide de la touche contrôle/commande de votre clavier et en cliquant sur chacun des modules individuellement. Une fois que vous les avez tous sélectionnés, cliquez sur l'icône des paramètres.

Maintenant, vous pouvez apporter des modifications à chacun des modules sélectionnés en même temps. Dans ce cas, nous modifions la couleur du texte du titre en « #848484 ».

Étape 3 : Changer les boutons

Ouvrir les paramètres du bouton One de l'en-tête pleine largeur

Il est important de s'assurer que les appels à l'action sur votre page correspondent toujours à la palette de couleurs de la mise en page. Dans ce cas, nous avons un module de boutons qui a fière allure sur une disposition claire et sombre. C'est pourquoi nous allons également l'étendre aux autres boutons de la page. Allez-y et ouvrez le module d'en-tête pleine largeur et accédez aux paramètres du bouton One.

Étendre le style du bouton à tous les boutons de la page

Ensuite, faites un clic droit sur les paramètres de Button One et sélectionnez l'option 'Extend Button One Styles'.

Étendez le style de bouton à tous les boutons sur toute la page.

Changer la couleur du texte du bouton 2 dans la section Hero

La fonctionnalité d'extension n'atteint pas le deuxième bouton du module d'en-tête pleine largeur car il ne s'agit pas d'un module autonome. C'est pourquoi nous allons ouvrir les paramètres du bouton Deux et changer la couleur du texte en « #ffffff ».

Étendre les styles à tous les en-têtes pleine largeur de la page

Pour nous assurer que cette couleur de texte est appliquée à tous les modules d'en-tête pleine largeur de la page, nous allons également l'étendre.

Une fois que vous avez cliqué avec le bouton droit de la souris sur la couleur du texte et sélectionné l'option " Étendre le bouton deux couleurs de texte ", continuez et appliquez-la à tous les en-têtes pleine largeur sur toute la page.

Étape 4: Supprimer la marge personnalisée et remplacer par un rembourrage personnalisé

Supprimer la marge personnalisée

Lors du passage à une mise en page sombre, il est également important de supprimer toutes les valeurs de marge personnalisées qui apportent des espaces à votre page.

Utilisez plutôt un rembourrage personnalisé

Cependant, vous pouvez conserver la distance qui existait auparavant en ajoutant à la place la marge personnalisée en tant que remplissage personnalisé.

Étape 5 : rechercher et modifier les paramètres de conception spéciaux

Déterminer les paramètres de conception spéciaux

La dernière étape que vous devrez franchir est très spécifique à chacune des mises en page. Les éléments de conception propres à une mise en page doivent également être modifiés. Cela peut inclure, mais sans s'y limiter, certains des paramètres suivants :

• Boîte d'ombres
• Arrière-plans de colonne
• Couleurs des icônes
• Couleurs de séparation
• …

Utilisez Rechercher et remplacer sur la couleur de l'ombre de la boîte de rangée

Pour cette mise en page particulière, l'une des choses que nous devrons changer est la couleur de l'ombre de la zone de ligne qui est utilisée. Ouvrez les paramètres de ligne et cliquez avec le bouton droit sur l'ombre de la boîte sans la modifier. Ensuite, sélectionnez l'option « Rechercher et remplacer ».

L'utilisation de la fonction Rechercher et remplacer est la meilleure solution si vous souhaitez modifier un code de couleur spécifique sur l'ensemble de la page. Vous pouvez facilement le remplacer par un autre code couleur, dans ce cas '#33302f'. Cela garantira que vous n'aurez pas à explorer tous les éléments de conception pour voir exactement où une couleur a été utilisée.

Modifier manuellement les paramètres d'occurrence unique

Cependant, il existe également des paramètres de conception récurrents ponctuels dans les mises en page. Pour les modifier, vous devrez le faire manuellement. La ligne de l'écran d'impression ci-dessous, par exemple, a une couleur d'ombre de boîte qui n'a pas été utilisée ailleurs sur la page. C'est pourquoi nous le changeons manuellement en '#33302f'.

Aperçu

Jetons un dernier coup d'œil au résultat final après avoir parcouru les cinq étapes.

Dernières pensées

Dans cet article, nous vous avons expliqué comment transformer un pack de mise en page clair en un pack sombre en seulement 5 étapes. Le nombre d'étapes que vous devez effectuer dépendra toujours de la mise en page sur laquelle vous travaillez, mais dans l'ensemble, l'approche reste la même. Si vous avez des questions ou des suggestions, faites-le nous savoir dans la section commentaires ci-dessous!