Want to make creations as awesome as this one?

Ressources Chapitre 5

Transcript

LES RESSOURCES

CHAPITRE 5 : LES BONUS

MODULE 10

LES BONUS

Divi est le thème WordPress ultime.
Divi a été créé pour aider tout le monde à construire des sites Web étonnants en un minimum de temps.

Nous avons écrit ce Book pour fournir de la valeur et de la connaissance à chaque lecteur. Nous avons souhaité vous présenter des offres exclusives, des trésors de trucs et d’astuces et des tutoriels.

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

Avec Divi, vous pouvez placer des images n'importe où sur votre site avec le module d'image.

Les images que vous téléchargez s'étendront sur toute la largeur de la colonne, mais ne dépasseront jamais les dimensions du fichier d'origine.

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

de navigation sombre

Si vous utilisez des arrière-plans de section et des images qui justifient une navigation sombre, vous pouvez utiliser ce CSS pour inverser l'apparence claire des menus de Divi.

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.


Cette personnalisation va désaturer toute image directement dans votre navigateur.

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

30+ Modules gratuits et Premium
Tous les modules Divi intégrés et tiers en un seul endroit.

Les développeurs de Divi sont en train de sortir des modules Divi Builder gratuits et premium, avec le potentiel de rendre vos pages web vraiment géniales. Mais trouver ces modules est une douleur, ils sont dispersés sur tout le web.

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