Chaque semaine, nous proposons un nouveau paquet gratuit de mise en page Divi que pouvez utiliser pour votre prochain projet. Pour lamp;rsquoun de ces paquets de mise en page, nous partageons également un cas damp;rsquoutilisation qui aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous montrerons comment utiliser le module Divi pour créer des formes de fond avec des options de conversion Divi et des paquets de mise en page pour les assistants juridiques. Les modules de partition sont très polyvalents et peuvent vraiment améliorer la conception globale de la page. Bien que nous recréerons quelques exemples qui correspondent spécifiquement à la trousse de mise en page des parajuristes, pouvez utiliser cette technique pour namp;rsquoimporte quel type de site Web créé en utilisant Divi.
Allons y! Aperçu avant damp;rsquoaller plus loin dans ce tutoriel, jetons un coup damp;rsquooeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Utilisez la page damp;rsquoatterrissage du paquet de mise en page des parajuristes pour créer une nouvelle page et charger la page damp;rsquoatterrissage du paquet de mise en page des parajuristes. Recréer lamp;rsquoexemple 1 section débordement commençons à créer le premier exemple! Continuez, ouvrez la section paramètres Hero et allez à lamp;rsquoonglet conception. Ici, nous voulons nous assurer quamp;rsquoaucun contenu ne passe par le conteneur de section. Pour ce faire, nous ajouterons une ligne de code CSS à lamp;rsquoélément principal.
Débordement: caché Ajoutez le module séparateur à la visibilité de la colonne 2, puis continuez à ajouter le module séparateur à la deuxième colonne de la section spécialisée. Assurez que lamp;rsquooption afficher le séparateur est activée. Afficher les séparateurs: Oui Couleur de fond nous utiliserons la couleur dans la palette des paquets de mise en page comme couleur de fond pour les séparateurs. Couleur de fond: d94144 Ensuite, nous allons à lamp;rsquoonglet conception et changeons la couleur du séparateur. Couleur: f3f1f2 Le style passe aux paramètres de style et change le style du séparateur. Style
Lubrifier et façonner le module séparateur! Assurez que lamp;rsquooption afficher le séparateur est activée. Afficher les séparateurs: Oui Couleur de fond encore une fois, nous utilisons une couleur dans la palette des paquets de mise en page comme couleur de fond.
Couleur de fond: d94144 La couleur passe à lamp;rsquoonglet conception et change la couleur du séparateur. Couleur: f3f1f2 Redimensionner nous utilisons également les paramètres de taille. Poids du séparateur: 10px hauteur: 0px Espacement, nous utiliserons des remplissages personnalisés pour créer la forme exacte souhaitée, et nous modifierons ces remplissages sur différentes tailles damp;rsquoécran. Remplissage supérieur: 2vw remplissage inférieur: 2,5vw (bureau), 3vw (tablette), 3,9vw (téléphone) Il est temps de changer lamp;rsquoéchelle de transformation! La première chose que nous devons faire est de redimensionner le module séparateur. Nous le faisons pour nous assurer quamp;rsquoil namp;rsquoy a pas de place au début ou à la fin de cette section. Ne inquiétez pas que le module séparateur soit trop redimensionné et que tout ce qui dépasse cette section ne soit pas affiché dans le projet.
En bas: 153% à droite: 153% (bureau), 250% (tablette), 500% (téléphone) Ensuite, nous changerons également la position du module séparateur pour quamp;rsquoil apparaisse à droite. Assurez que les valeurs correspondent à différentes tailles damp;rsquoécran. En bas: 25vw (bureau), 27vw (tablette et téléphone) à droite: 0px (bureau), 32vw (tablette et téléphone) Enfin et surtout, nous convertissons le séparateur horizontal en séparateur vertical en utilisant les paramètres de rotation de la transformation. Gauche: 270° Recréez le débordement de la section Exemple 3 dans le prochain et dernier exemple! Encore une fois, assurez que rien ne dépasse le conteneur de section en ajoutant une ligne de code CSS à lamp;rsquoélément de section primaire.
Débordement: caché En
En haut de cette section. Assurez de placer la ligne en haut afin quamp;rsquoelle ne chevauche pas le contenu de base après le tutoriel. Redimensionner sans ajouter de module, activer les paramètres de ligne et permettre aux colonnes de prendre toute la largeur de lamp;rsquoécran. Faire cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Ajouter la visibilité du module séparateur ajouter le module séparateur plus tard. Assurez que lamp;rsquooption afficher le séparateur est activée.
Afficher les séparateurs: Oui Passez aux paramètres damp;rsquoarrière plan et ajoutez la couleur damp;rsquoarrière plan que avez sélectionnée. Couleur de fond: d94144 La couleur change également la couleur du séparateur. Couleur: f3f1f2 Style e modifie le style du séparateur dans les paramètres de style. Styles de séparateurs: lignes pointillées Ensuite, allez aux paramètres de taille et faites quelques changements. Poids du séparateur: 4px hauteur: 0px Lamp;rsquoespacement e crée la forme souhaitée en remplissant le haut et le bas dans les paramètres damp;rsquoespacement. Emballage supérieur: 3vw emballage inférieur: 3vw
Nous allons également augmenter la profondeur de la page en donnant une mince ombre au séparateur. Intensité du flou de lamp;rsquoombre de la boîte: 80 Px couleur de lamp;rsquoombre: rgba (0,0,0,0,3) Transformez lamp;rsquoéchelle de transformation maintenant que nous avons dessiné la ligne de division, nous pouvons commencer à la transformer. La première chose que nous allons faire est damp;rsquoaugmenter la taille du module séparateur dans le réglage de lamp;rsquoéchelle de transformation. En bas: 140% à droite: 140% Convertissez la transformation, puis nous irons aux paramètres de conversion et changerons lamp;emplacement du module séparateur. Placer la ligne en haut de la section nous aide à garder lamp;rsquoindex Z en dessous de la ligne, créant ainsi ce beau chevauchement! En bas: 4vw à droite: 16vw (bureau)
TOP), 26vw (tablette), 35vw (téléphone) Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau Mobile Dans nous montrons comment utiliser le module séparateur de Divi et les nouvelles options de conversion pour créer des formes de fond et améliorer lamp;rsquoapparence globale de la page. Ce tutoriel fait partie de notre plan de conception Divi en cours et chaque semaine, nous essayons damp;rsquoajouter plus de contenu à votre boîte à outils de conception. avez des questions ou des suggestions, assurez de laisser un commentaire dans la section commentaires ci dessous!
Créer une forme de fond avec l&rsquooption Divi transform en utilisant le module Splitter
