Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Avec l’aide de Générateur de pages Divi les zones peuvent être facilement séparées par couleur – mais pas par des lignes diagonales. Si vous ne voulez plus séparer différentes zones avec juste une ligne horizontale ennuyeuse, il existe de nombreuses autres options. Cependant, jusqu’à présent, vous devez faire un petit travail manuel pour que cela fonctionne.

Mettre à jour:: En attendant, une fonction simple d’utilisation a été intégrée à Divi. Si vous êtes intéressé par la solution CSS, vous trouverez notre ancien article ci-dessous. Vous trouverez tout sur la nouvelle fonction dans notre nouvel article « Diviseurs de forme: utilisez des transitions conçues pour les sections« .

Cette fois, nous montrons comment créer une ligne de division diagonale avec des ombres.

Une zone qui ressemblait à ça avant …

Thème Divi: section horizontale

Devrait être montré plus tard comme suit …

Lignes diagonales

Tutoriel de thème Divi: créer des lignes diagonales entre les sections

1. Dans Divi Builder, ouvrez la section Paramètres de la section dessus que la section diagonale doit apparaître.

Thème Divi: Paramètres de la section

2. Attribuez la classe CSS «diagonal-shadow» dans la zone «Custom CSS» et enregistrez-la.

Thème Divi: classe CSS

3. Nous avons maintenant besoin de code CSS en place.

Si vous travaillez déjà avec un thème enfant, vous pouvez y éditer votre feuille de style dans l’éditeur (ou via FTP) (style.css dans le dossier du thème enfant). Si vous n’avez pas encore utilisé de thème enfant, ce serait une bonne occasion d’en créer un (voir Créer un thème enfant WordPress).

Cependant, il existe également la possibilité d’enregistrer le code CSS dans les paramètres du thème Divi. Pour ce faire, allez dans la zone des paramètres de Divi dans le backend et là sous «Options du thème» dans l’onglet «Général» relativement loin dans le champ de saisie du CSS défini par l’utilisateur.

Options du thème Divi: CSS personnalisé

Quel que soit l’endroit où vous le faites, il s’agit du code CSS à insérer, ce que le développeur fait Quiroz.co aimablement fourni:

/*------------------------------------------------*/
/*------[Shadow Diagonal Lines - Quiroz.co]-------*/
/*------------------------------------------------*/
 
    #et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
    .diagonal-shadow::before,
    .diagonal-shadow::after {
        position: absolute;
        content: '';
        pointer-events: none;}
 
    .diagonal-shadow {
        z-index: 1;
        padding-top: 6em;
        background: #2072a7;}
 
    .diagonal-shadow::before, 
        .diagonal-shadow::after {
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;}
 
    .diagonal-shadow::before {
        height: 50%;
        background: #535353;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;}

Et immédiatement, lorsque les options style.css ou Thème Divi sont enregistrées, le séparateur diagonal souhaité apparaît:

Thème Divi: section diagonale

Si vous souhaitez ajouter ce séparateur diagonal à d’autres sections de la même page d’accueil, il vous suffit d’y effectuer les étapes 1 et 2. Il n’est plus nécessaire de réinsérer le code CSS.

PS: Encore une fois, le rappel que Thème Divi en attendant, divers paramètres pour transitions attrayantes a intégré.



Source link

Recent Posts