Comment transférer un nouveau style de conception vers une autre page à l'aide des fonctionnalités d'efficacité de Divi

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment transférer un nouveau style de conception vers une autre page à l'aide du pack de mise en page du magasin de meubles de Divi. Avec tous les nouveaux packs de mise en page qui sortent, vous auriez peut-être voulu modifier le style d'une page existante en utilisant le style du nouveau pack de mise en page. Au lieu de remplacer la page entière, vous pouvez également transférer le style de conception à l'aide des fonctionnalités d'efficacité de Divi. L'une des options les plus récentes incluses dans Visual Builder est la fonction copier-coller entre pages. Cela vous permettra d'apporter de nombreuses modifications dans la mise en page sans toucher aux paramètres d'un élément de conception.

Mais bien sûr, chaque mise en page est unique, ce qui signifie que vous devrez également appliquer quelques modifications manuelles. La bonne nouvelle est que vous pouvez étendre ces paramètres manuels à des éléments similaires sur la page en un seul clic. Nous espérons que cet article vous aidera à suivre une certaine structure lors du transfert d'un style de conception.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat.

Approcher

Les structures de page diffèrent les unes des autres, c'est pourquoi il est difficile de transférer complètement un style de conception en un seul clic. Mais avec Divi, vous pouvez utiliser les fonctionnalités d'efficacité pour accélérer le processus. Nous combinerons la fonction de copier-coller entre pages, la fonction d'extension des styles et la fonction de recherche et de remplacement pour gagner du temps en transférant un style de conception vers une page existante, sans avoir à modifier la structure de la page.

Partie 1 : Ouvrir deux pages l'une à côté de l'autre

Nous commencerons par ouvrir deux pages l'une à côté de l'autre. La page existante et la nouvelle page contenant le style de conception que nous voulons appliquer. Nous allons prendre la page de destination du pack de mise en page du magasin de meubles (le style de conception que nous voulons appliquer à la page existante) et la page de destination du pack de mise en page de la société d'hébergement (la page que nous voulons modifier).

Partie 2 : Réinitialisation de certains paramètres de section

La deuxième partie concernera la réinitialisation de certains paramètres de section. Les paramètres que vous devez réinitialiser varient d'une mise en page à l'autre, mais incluent généralement les paramètres d'arrière-plan et les paramètres de séparation.

Partie 3 : Utilisation des fonctionnalités de copier-coller et d'extension des styles entre pages de Divi pour la section Hero

Ensuite, nous pouvons commencer à utiliser la fonction copier-coller entre pages de Divi pour commencer à changer les choses. La chose naturelle à faire est de commencer par les sections de héros. Nous allons remplacer chaque élément de conception de la section héros par le nouveau style de conception en copiant les paramètres du nouveau style de conception et en les collant sur la page existante. Après cela, nous étendrons ces styles à des éléments similaires sur la page.

Partie 4 : Apportez des modifications manuelles (selon la disposition) et utilisez les fonctionnalités d'efficacité

Comme mentionné précédemment, chaque mise en page est unique. C'est pourquoi il est également nécessaire d'apporter des modifications manuelles à la page existante. Une fois les quelques modifications apportées, vous pouvez étendre le style ou utiliser rechercher et remplacer pour l'appliquer à des éléments similaires sur la page.

Partie 5 : Ajouter des caractéristiques de conception

Enfin, vous pouvez également ajouter certaines caractéristiques de conception à la page existante.

Partie 1 : Ouvrir deux pages l'une à côté de l'autre

Créer une nouvelle page à l'aide de la mise en page à l'aide de la page de destination du pack de mise en page du magasin de meubles

Maintenant que nous avons parcouru la partie approche de cet article, commençons à utiliser Divi ! Ajoutez une nouvelle page à l'aide de la page de destination du pack de mise en page du magasin de meubles.

Créer une nouvelle page à l'aide de la page de destination du pack de mise en page de la société d'hébergement

Créez également une autre page en utilisant la page de destination du pack de mise en page de la société d'hébergement. Nous allons remplacer le style de conception de cette mise en page par la conception de la page de destination du pack de mise en page du magasin de meubles.

Partie 2 : Réinitialisation de certains paramètres de section

Réinitialiser les paramètres spécifiques de la section de la page de destination de la société d'hébergement

Ouvrir la section des héros

Une fois que vous avez les deux mises en page à proximité, continuez en ouvrant les paramètres de la section héros de la page de destination de la société d'hébergement.

Réinitialiser l'arrière-plan de la section et étendre à toutes les sections

Accédez aux paramètres d'arrière-plan et réinitialisez les options en cliquant avec le bouton droit de la souris et en cliquant sur Réinitialiser l'arrière-plan. Une fois cela fait, vous pouvez étendre ces styles d'arrière-plan à toutes les sections de la page pour vous assurer qu'aucune section de votre page ne contient d'éléments d'arrière-plan.

Réinitialiser les diviseurs et étendre à toutes les sections

Faites la même chose pour les diviseurs de section pour vous assurer que tous les diviseurs de section sur la page ont disparu.

Partie 3 : Utilisation des fonctionnalités de copier-coller et d'extension des styles entre pages de Divi pour la section Hero

Éléments de la section Hero Copier-Coller entre pages

Paramètres de section

Il est temps de commencer à utiliser l'option copier-coller entre pages ! Nous allons modifier chaque élément de conception dans la section héros. Commencez par copier les styles de la section des héros sur la page de destination du magasin de meubles. Ensuite, revenez à la page de destination de la société d'hébergement et collez les styles de section copiés.

Paramètres de ligne

Faites la même chose pour la rangée.

Titre du module de texte

Copiez également les styles de module du module de texte du titre et faites-les s'appliquer au titre de la page de destination de la société d'hébergement.

Module de corps de texte

Ouvrez ensuite le module de texte de description et copiez les styles de texte. Une fois que vous l'avez fait, faites-les appliquer au module de texte sur la page de la société d'hébergement.

Étendre les styles

Une fois que vous avez appliqué les nouveaux styles de texte, continuez et étendez ces styles à tous les modules de la page.

Changez les orientations du texte en arrière pour centrer là où cela est nécessaire

Vous remarquerez que l'orientation du texte à gauche sera appliquée à tous les éléments de conception de la page. Vous pouvez le conserver ou modifier manuellement l'orientation du texte.

Paramètres des boutons

Le dernier module de la section héros auquel vous devrez appliquer de nouveaux styles de module est le module de boutons.

Étendre les styles pour les paramètres de bouton

Au lieu d'étendre l'ensemble des styles du module de boutons, nous allons étendre les paramètres de bouton spécifiques.

Étendre les styles pour l'espacement

Avec les paramètres d'espacement.

Étendre les styles pour Box Shadow

Et les paramètres d'ombre de la boîte aussi.

Copier-coller les éléments restants une fois + étendre le style

Diviseur

Nous devrons également copier et coller les styles du module de division et les appliquer aux diviseurs sur la page de destination de la société d'hébergement.

Étendre les styles

Encore une fois, étendez les styles de ce module sur toute la page.

Partie 4 : Apportez des modifications manuelles (selon la disposition) et utilisez les fonctionnalités d'efficacité

Modifications spécifiques à la mise en page

Rechercher et remplacer la police du titre

Il est temps de commencer à faire quelques changements manuels ! La première chose que nous allons faire est de faire correspondre la police. Ouvrez un module de texte sur la page et recherchez la police Rubik utilisée dans toute la page. Ensuite, cliquez sur Rechercher et remplacer et remplacez la police par Montserrat.

Rechercher et remplacer le poids de la police du titre

Faites la même chose pour le poids de la police. Au lieu d'utiliser Medium, sélectionnez Light.

Rechercher et remplacer les coins arrondis

Nous supprimons également les bordures des coins arrondis sur toute la page en utilisant Rechercher et remplacer et en appliquant « 0px » à chacun des coins de la page.

Réinitialiser les paramètres d'arrière-plan du CTA et étendre le style dans la section

Continuez en trouvant les modules d'appel à l'action sur la page et réinitialisez les paramètres d'arrière-plan du premier module. Ensuite, étendez ces styles à tous les appels à l'action de la section.

Rechercher et remplacer la couleur d'arrière-plan du CTA dans la section

Une fois que vous l'aurez fait, la couleur d'arrière-plan par défaut apparaîtra. Recherchez et remplacez cette couleur et remplacez-la par « 1a2545 » dans toute la section.

Rechercher et remplacer la couleur du texte CTA dans la section

Remplacez également la couleur du texte par « Lumière » dans toute la section.

Modifier les paramètres du bouton du tableau des prix

Ensuite, accédez aux tableaux de prix sur la page et modifiez les paramètres du bouton :

• Couleur d'arrière-plan du bouton : #ef6f49
• Largeur de bordure de bouton : 8px
• Couleur de la bordure du bouton : #ef6f49
• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px (par défaut), 1px (survol)
• Police des boutons : Montserrat
• Poids de la police : semi-gras
• Style de police : majuscule
• Alignement des boutons : à gauche

Étendre les styles pour les tableaux de prix et les modules CTA

Étendez le nouveau paramètre de bouton à tous les tableaux de prix et modules d'appel à l'action sur toute la page.

Partie 5 : Ajouter des caractéristiques de conception

Couleur d'arrière-plan de la section #1

Dans la dernière partie de ce tutoriel, nous allons ajouter manuellement certaines caractéristiques de conception. Cela inclut, mais sans s'y limiter, les paramètres d'arrière-plan. Ouvrez la section marquée dans l'écran d'impression ci-dessous et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f7f3ec

Couleur d'arrière-plan de la section #2

Faites la même chose pour la section ci-dessous.

• Couleur d'arrière-plan : #f7f3ec

Fond dégradé de section #1

Ensuite, recherchez la section dans l'écran d'impression ci-dessous et ajoutez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #1a2545
• Direction du gradient : 90 degrés
• Position de départ : 55 %
• Position finale : 55 %

Fond dégradé de section #2

Utilisez un autre arrière-plan dégradé pour la section ci-dessous :

• Couleur 1: rgba (210,218,228,0,38)
• Couleur 2 : #ffffff
• Direction du gradient : 90 degrés
• Position de départ : 45 %
• Position finale : 45 %

Fond de dégradé de section #3

Enfin, ajoutez également un arrière-plan dégradé linéaire à la dernière section de la page.

• Couleur 1 : #ffffff
• Couleur 2: #f7f3ec
• Position de départ : 40 %
• Position finale : 40 %

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat.

Dernières pensées

Dans cet article, nous vous avons montré comment transférer le style de conception d'une mise en page à l'aide des fonctionnalités d'efficacité de Divi. Ce didacticiel tire parti de la nouvelle fonctionnalité de copier-coller entre pages qui fait partie du nouveau Visual Builder. Ce tutoriel fait partie de notre initiative de conception Divi en cours où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de laisser une section de commentaires ci-dessous!