Si il y a une chose compliqué » dans Divi c’est de savoir quel module utiliser pour arriver à ses fins.
C’est pour cela que je vous ai préparer un petit tuto sur l’utilisation des modules Divi et leur personnalisations (en css bien sur ! ).

Pour ce tuto j’ai choisi de refaire le design des blocs du site Openclassrooms.

Voir la démo Télécharger la source

Préparer les modules

Tout d’abord il nous faut savoir quel module utiliser.
Je vous ai préparé un visuel qui montre tout ça.

Le module « thème »

Pour faire ce rendu j’ai simplement utilisé le module texte de base.
centré et mise en gras le texte.
Tout le reste se passe en CSS.
J’ai donné une classe « entete » à ce module pour le cibler plus facilement en CSS.


.bloc .entete {
margin-top: -10px;
position: relative;
text-align: center;
}
.bloc .entete strong {
background-color: red;
color: #fff;
border-radius: 20px;
box-shadow: 1px 1px 10px rgba(121, 121, 121, 0.35);
display: inline-block;
line-height: 1.6rem;
padding: 3px 15px;
}

Dans un 1er temps j’ai remonté en négatif le bloc pour que celui-ci soit à cheval sur le haut de la colonne. Ici nous allons nous servir de la balise « strong » qui est de type « inline » pour mettre la couleur de fond et les arrondis.

Le module « titre »

Là aussi c’est un module texte avec un h2 centré de base.

Le module « pictos »

Alors ici, il faut jouer avec le CSS pour pouvoir mettre 2 éléments en face à face sur 1 seule ligne.
Pour ça rien de plus simple on va utiliser le systeme « flex » en CSS.

On commence par positionner nos 2 textes

Nous aurons en sorti du HTML avec 2 balises <p>. C’est ces 2 balises que nous allons mettre en face à face.


.bloc .picto {
display: flex;
flex-direction: row;
justify-content: space-around;
}

Facile non ? 🙂

Display : flex
Nous sert à préparer le terrain

flex-direction: row;
Indique que nous voulons une répartition sur l’horizontal des élements

justify-content: space-around;
Indique le positionnement des éléments entre eux.

Si vous souhaitez plus d’informations sur le système flex en CSS

Le module « séparateur »

C’est plus de l’esthétique pour coller au design, il nous sert à avoir le petit filer au dessus du bouton.

Le module « bouton »

C’est le module bouton classique auquel j’ai mis une petite couche de CSS.


.bloc .bouton {
background: #fbfbfb;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #e4e4e4;
display: block;
text-align: center;
}

Dernière étape

Enfin il nous reste à mettre un peu de CSS sur chaque colonne pour avoir le fond avec l’ombre portée.
Pour simplifier j’ai mis une classe CSS sur chaque colonne


.bloc {
background: #fff none repeat scroll 0 0;
border-radius: 5px;
box-shadow: 1px 20px 30px rgba(121, 121, 121, 0.35);
}

 

Voir la démo Télécharger la source

Importer les sources :