Ressources Chapitre 4

LES RESSOURCES

CHAPITRE 4 : LES BONUS

MODULE 10

LES BONUS

IMPORTANT : Tous les liens de ce Book sont des liens informatifs et des sources que nous vous communiquons. Il n’y a aucun lien d’affiliation et ne touchons aucune commission.

Modèles d'image parfaits pour chaque situation

Pour tirer pleinement parti de cette fonctionnalité, nous recommandons que vos images soient au moins la largeur de la colonne dans laquelle vous les placez. Dans ce téléchargement, nous avons fourni un tableau de modèles d'image de taille parfaite que vous pouvez utiliser dans votre thème Divi.

Rendez votre menu

Pour appliquer cette modification, il suffit de copier et coller le code suivant dans la zone CSS personnalisée dans ePanel, puis cliquez sur Enregistrer . Si vous souhaitez revenir au style d'origine, vous pouvez simplement supprimer le code du champ CSS personnalisé.

#top-menu a, .et_mobile_menu a, #et_search_icon:before { color: #ddd !important;

}

#top-menu a:hover, .et_mobile_menu a:hover { color: #fff !important;

}

.nav ul li a:hover, .et_mobile_menu li a:hover { color: #111; background-color: #2b2b2b; } #top-menu li.mega-menu > ul > li > a:first-child, .et_mobile_menu li a {

border-bottom: 1px solid #444;

}

#main-header, .et_mobile_menu, .nav li ul , #top-menu li.mega-menu > ul > li > a:first-child:hover, .et-search-form { background-color: #333 !important;

}

.et-search-form input { background-color: #2b2b2b; color: #999;

}

Style vos messages avec un effet Hover gris-échelle

En utilisant les filtres CSS3, nous pouvons appliquer des effets amusants à nos images Project, Post et Product.

En combinant cela avec les transformations CSS, nous pouvons créer un effet de fondu astucieux sur hover. Après l'application de cette feuille de style CSS, votre blog, votre portfolio et les vignettes de votre boutique s'affichent en noir et blanc en survol.

Pour appliquer cette modification, il suffit de copier et coller le code suivant dans la zone CSS personnalisée- dans ePanel, puis cliquez sur Enregistrer. Si vous souhaitez revenir au style d'origine, vous pouvez simplement supprimer le code du champ CSS personnalisé.

.et_shop_image:hover, .et_portfolio_image:hover, .et_pb_post img:hover {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><f- eColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333

0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: grayscale(100%);

}

.et_pb_post img{-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all0.3s}

.et_overlay {background: rgba(255, 255, 255, .25);}

.et_overlay:before {color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.3);}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; border: 0 solid #e5e5e5;}

Divi Module Mate

Divi Module Mate résout ceci, avec une façon plus intelligente de trouver des modules tiers. Il suffit d'installer le plugin gratuit Divi Module Mate et il ajoutera un onglet "More Modules ..." dans l'écran "Insert Module" de Divi Builder.

Quand vous allez insérer un module et constatez que les Divi Modules intégrés ne fonctionnent pas, cliquez simplement sur l'onglet "Plus de modules ..." et trouvez ce dont vous avez besoin parmi les nombreux modules créés par la communauté Divi.

MERCI