CSS pour Divi

Parce que ce monde est imparfait

fixer


Un module, row ou section

Ajouter dans (Module, Row ou Section) Settings > Advanced > Custom CSS > Main Element.
Changer la marge left ou right au choix. Les valeurs peuvent être changées. Ajouter une marge top au besoin ou du padding.
L’élément restera toujours fixte même lors du défilement.

position: fixed;
left: 0;
right: 0;
z-index:99;

 

Pour fixer un menu au bas du site:

position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index:99;

Demo

hover


Changement d’image au survol

Les 2 images doivent avoir la même taille et avoir été téléversées dans Média.

Créer un module Code et ajouter dans Code Settings > Content (changer la classe CSS si désiré):

<a href="#" class="happy"></a>

Dans Page Settings > Advanced > Custom CSS > Ajouter ce code (changer la classe CSS si désiré et le URL de vos images):

/*CHANGEMENT D’IMAGE AU SURVOL*/
/*Image visible*/
a.happy /* — changer la classe css pour la vôtre — */{
display: block;
height: 300px /* — changer la hauteur de l’image — */;
width: 300px /* — changer la largeur de l’image — */;
background: url(le URL de votre image ici);
margin: 0 auto /* — centre l’image — */;
background-repeat: no-repeat;
transition: .3s all;
}
/*Image visible au survol*/
a.happy:hover /* — changer la classe css pour la vôtre — */{
background: url(le URL de votre image en survol ici);
transition: .3s all;
}

 

Regarder le tutoriel

Démo

Déplacement vers le haut au survol

Créer un module et régler les options de survol (flèche noire) dans les options de Design du module.

Dans Module Settings > Advanced, CSS ID & Classes, ajouter une classe au choix:

Dans Page Settings > Advanced > Custom CSS > Ajouter ce code (changer la classe CSS):

/*HOVER de déplacement vers le haut (Y)/
.haut:hover {
transform: translateY(-3px);
transition: .5s all;
}


Démo
 

Hauteur
et mise en page 


Hauteur d’une colonne (Row)

Ajouter dans Row > Advanced > Custom CSS > Main Element
Changer la hauteur au choix

height: 400px;

Hauteur et largeur plein écran

Ajouter dans Row > Advanced > Custom CSS > Main Element

height: 100vh; width: 100vw;

Créer 2 colonnes dans un module Text

Ajouter dans Module Text Settings > Advanced > Custom CSS > Main Element

column-count: 2;

 

Pour changer la gouttière:

column-gap: 30px;

Centrer verticalement le texte d’une rangée à 2 colonnes

1. Dans la colonne 1, ajouter un module Text. Régler l’alignement pour centrer horizontalement. Dans Design > Spacing, ajouter du padding à gauche et à droite en %.

2. Ajouter dans Row Settings > Advanced > Custom CSS > Column 1 Main Element:

display: flex;
flex-direction: column;
justify-content: center;

Centrer verticalement tous les éléments d’une rangée

Ajouter dans Row > Advanced > Custom CSS > Main Element 

margin: 0; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Placer un module à 90°

Ajouter dans Row > Advanced > Custom CSS > Main Element

transform: rotate(90deg);

Forcer la largeur d’un module (pour qu’il ne se réduise pas)

Ajouter dans Module Settings > Advanced > Custom CSS > Main Element (la largeur peut être changée en mobile avec un media query):

width: 400px;

Typographie 


Placer un module de texte à 90°

Dans le Module Texte > Advanced >  Custom CSS > Main Element

transform: rotate(-90deg);

Espace fine

Dans le Module Text > Content: passer à l’onglet Text (celui avec le code html) et ajouter:

&#8239;

Pour que les mots ne brisent pas

Dans Theme Customizer > Additionnal CSS, ajouter:

h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}

Source

slider

Hauteur et largeur plein écran

1. Ajouter dans Page > Advanced > Custom CSS

.et_pb_slide {height: 100vh;}

2. Ajouter dans Module Slider > Advanced > Custom CSS > Main Element

height: 100vh;

Arrêter l’animation du titre

1. Ajouter un titre avec la même taille et police sur chaque slide.

2. Dans le module Slider > Advanced > Custom CSS > Slide Description, ajouter:

animation-name:none;

Regarder le tutoriel

Vidéo

Un vidéo qui joue automatiquement

Voir la solution du module <Code> qui intègre (embed) un vidéo provenant de Vimeo.

Audio

Un son qui joue automatiquement

1. Téléverser le mp3 dans la section Medias du Dashboard.

2. Clic sur le preview du mp3 pour copier le URL du fichier dans le champ Copy Link.

3. Sur la page du site, utiliser le module <Code> et ajouter:

<audio controls autoplay>
<source src="https://mettre le url du fichier.mp3" type="audio/mpeg">
</audio>

Pour ne pas voir les contrôles du Player, enlever le mot controls du code ci-haut.

Un son en hover d’une image

1. Téléverser le fichier du son (.mp3 pour Chrome et .ogg pour Safari et Firefox) et le fichier image (le bouton) dans la section Media du Dashboard.

2. Sur la page du site, utiliser le module <Code> et ajouter:

<img src="https://www.LIEN-VERS-TON-IMAGE.jpg" value="PLAY"onmouseover="play()">
<audio id="audio"src="https://www.LIEN-VERS-TON-SON.mp3" src="https://www.LIEN-VERS-TON-SON.ogg"
></audio>

 

Liens vers ton image/son: Dans Médias, clic sur le preview du fichier pour copier le URL de l’emplacement du fichier dans Copy Link.

3. Java script à mettre dans: Theme Options > Integration > section <body>

<script>
function play(){
var audio = document.getElementById("audio");
onmouseover =audio.play();
}
</script>

Un grand merci à Jean-Philippe Renaud pour ce code.

Le code ci-dessous est utilisé pour le menu du site créé pour le projet 2

Voir le site du projet 2

Menu

Ajouter dans Theme Customizer > Additionnal CSS

 

Hauteur du logo (Default menu)

Changer la hauteur au choix

/* LOGO – Empêcher que le logo soit plus grand en tablette */
#logo { height: 25px !important;}

Centrer verticalement le menu

Changer le padding au choix

/* MENU – Centrer verticalement */
#top-menu-nav #top-menu {padding-bottom: 10px;}

Hover pour les items du menu

Changer la couleur au besoin

/* MENU – Hover */

#top-menu-nav #top-menu a:hover,#mobile_menu_slide a:hover {color: #FE5943; opacity:1 !important;}

 

/* MENU FIXTE – hover */
.et-fixed-header #top-menu a:hover { color: #FE5943!important;}

Hover pour le logo

Changer le URL entre parenthèse de l’image du logo en survol (voir URL de l’image téléversée dans la section Medias)

/* MENU – Logo Hover */
#logo:hover { content: url(https://amsterdam.metanguay.com/wp-content/uploads/2018/10/tripadvisor_logo_orange.svg);}

 

/* MENU FIXTE – Hover */
.et-fixed-header #logo:hover {content: url(https://amsterdam.metanguay.com/wp-content/uploads/2018/10/tripadvisor_logo_orange.svg);}

Bouton S’inscrire dans le menu

Dans Appearance > Menus, donner la classe CSS sinscrire à l’item S’inscrire (Screen Options dans le haut pour ajouter le champs CSS).

Changer les valeurs aux besoin.

/* MENU – Bouton */
.sinscrire a {color: #FFDF00!important;}.sinscrire a {color: #FFDF00!important;}li.sinscrire { text-transform: uppercase;  text-align: center;  padding: 8px 10px 8px 12px!important; height: 34px; width: 120px; width: 120px;border: solid 2px #FFDF00; border-radius: 18px;}

Hover du bouton S’inscrire dans le menu

Changer les valeurs aux besoin

/* MENU – Bouton – Hover */
.sinscrire a {-moz-transition: all 0.5s;  -webkit-transition: all 0.5s; transition: all 0.5s;}
.sinscrire a:hover { color: #fff!important;} li.sinscrire:hover { background-color:#4A90E2; border: solid 2px #4A90E2;}

 

/* MENU FIXTE – Bouton – Hover */
.et-fixed-header #top-menu .sinscrire a {color: #FFDF00!important;}
.et-fixed-header #top-menu .sinscrire a:hover { color: #fff!important;}

Icônes du menu MOBILE

Ajouter dans Theme Customizer > Additionnal CSS

 

Hamburger devient un X sur le menu ouvert

• Télécharger la police Elegant Icon Font
• Dans un Module Text > Design > Heading Text > Fonts > Upload: ElegantIcons.ttf 
• Dans le CSS ci-bas, changer la couleur ou l’icône au choix
Content indique le code de l’icône. Pour un autre icône (et code), voir ce lien

/* hamburger devient un x sur le menu ouvert */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
color: #FE5943;
}

Changer la couleur de l’icône hamburger

Changer la couleur au choix

/* hamburger change de couleur */
.mobile_menu_bar:before { color: #FE5943; }

Enlever la ligne bleu dans le menu mobile

.et_mobile_menu {
border-top: none;
}

Menu tablette

Ajouter dans Theme Customizer > Additionnal CSS
Ajuster au besoin les valeurs

/*MENU tablette*/
@media screen and (max-width: 980px){
.et_mobile_menu {
background-color: #383641 !important;
margin-left: -13%;
height: 100vh;
width: 130%;
padding-top: auto;
border-top: none;
font-size: 1.3em;
}
.et_mobile_menu li a {
text-align: center;
font-size: 35px;
border: 0;
padding-top: 10%;
}
/*BOUTON tablette*/
li.sinscrire {
text-align: center;
text-transform: uppercase;
margin-top: 60px;
height: 90px;
width: 290px;
border: solid 2px #FFDF00;
border-radius: 55px;
margin-left: auto;
margin-right: auto;
}
}

Menu téléphone

Ajouter dans Theme Customizer > Additionnal CSS
Ajuster au besoin les valeurs

/*MENU téléphone*/
@media screen and (max-width: 480px){
.et_mobile_menu {
background-color: #383641 !important;
padding-top: 25%;
height: 100vh;
width: 130%;
border-top: none;
}
.et_mobile_menu li a {
text-align: center;
font-size: 21px;
border: 0;
padding: 4%;
}
/*BOUTON téléphone*/
li.sinscrire {
text-align: center;
font-size: 1.1em;
text-transform: uppercase;
margin-top: 30px;
margin-left: 25%;
height: 50px;
width: 180px;
padding: 7px 10px 20px 15px;
border: solid 2px #FFDF00;
border-radius: 27px;
}
}

footer

Enlever le footer WordPress

Ajouter dans Theme Customizer > Additional CSS:

/* Hide footer */
#main-footer {
height: 0 !important;
}

ou

#main-footer {
height: 0 !important;
overflow: hidden;
}

Médias sociaux

Ajouter une bande vertical fixte
à gauche avec les icônes

1. Créer (n’importe où) un module Social Media Follow. Ce module devra être dupliqué dans toutes les pages du site (sauvegarder dans la librairie).

2. Ajouter dans Theme Customizer > Additional CSS:

/*BAR FIXTE – médias sociaux*/
ul.et_pb_social_media_follow {
position: fixed;
left: 20px;
top: 50%;
padding: 0 !important;
z-index: 999 !important;
width:0%
}
.et_pb_social_media_follow li {
margin: 0 !important;
/*espace entre les icônes*/
padding: 5px!important;
}

Source

 

Ajouter une bande vertical fixte
à droite avec les icônes

1. Créer (n’importe où) un module Social Media Follow. Ce module devra être dupliqué dans toutes les pages du site (sauvegarder dans la librairie).

2. Ajouter dans Theme Customizer > Additional CSS:

/*BAR FIXTE – médias sociaux*/
ul.et_pb_social_media_follow {
position: fixed;
right: 20px;
top: 50%;
padding: 0 !important;
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important;
/*espace entre les icônes*/
padding: 5px!important;
}

Source

Médias sociaux dans le menu mobile (voir exemple projet 2)

1. Installer et activer ce plugin pour cacher les médias sociaux dans le menu du bureau: Menu Item Visibility Control

2. Ajouter chaque média comme un Custom Link dans le menu et les éléments suivant:

• URL: adresse de la page Fb ou du compte Instagram. Ex.: https://www.facebook.com/iamsterdam/

• Navigation Label: Code de l’icône Elegant Icon (Fb: &#xe0aa; et Insta: &#xe0b1; )

Open Link in a new tab

CSS Class: et-pb-icon

Visibilitywp_is_mobile()

3. Dans Theme Customizer, ajouter ce code et changer les valeurs aux besoin:

 

/* MÉDIAS SOCIAUX*/
/* pour qu’ils n’apparaissent pas sur le bureau*/
/@media screen and (min-width: 981px){
li.et-pb-icon a{
display: none!important;}
}
/* tablette*/
@media screen and (max-width: 980px) and (min-width: 481px){
li.et-pb-icon a{
font-size: 50px!important;
color: grey;
padding-top: 50px!important;
padding-right: 30px!important;
}
#menu-item-206426 {
margin-left: 40%;}
}
/* téléphone*/
@media screen and (max-width: 480px){
li.et-pb-icon a{
font-size: 50px!important;
color: grey;
padding-top: 30px!important;
padding-right: 30px!important;
margin-left: 142%;}
}