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


méthode

Maintenant, nous devons ajouter notre code. Nous allons commencer par notre JavaScript.

Ajoutez le code suivant Divi> Options du thème> Intégration> Ajouter au Ajoutez du code à votre blog.

Ce que nous faisons ici, c’est d’encapsuler les éléments de titre et de légende dans un div appelé ds-galerie-texte agissent comme un conteneur afin que nous puissions les positionner et les formater comme un seul plutôt que deux éléments séparés. Cela vous permet de contrôler beaucoup plus facilement votre position. Nous avons également intégré cela dans une fonction Ajax pour que cela fonctionne lorsque vous utilisez la pagination pour votre module de galerie (qui utilise maintenant Ajax pour charger plus d’images sans recharger la page).

<script>
(function ($) {
    $(document).ready(function () {
        $(document).bind('ready ajaxComplete', function () {
            $(".ds-hover-gallery .et_pb_gallery_item").each(function () {
                $(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="ds-gallery-text"></div>');
            });
        });
    });
})(jQuery);
</script>

Ensuite, et c’est facultatif, ajoutez ce qui suit functions.php dans votre Thème des enfants.

Ici, nous redéfinissons la taille des images que Divi utilise pour les vignettes de la galerie. Bien sûr, si vous utilisez la même valeur pour la hauteur et la largeur, une vignette carrée apparaîtra. Cependant, vous pouvez modifier la valeur 400 Assurez-vous que les valeurs ne deviennent pas trop grandes car cela augmentera le temps de chargement de la page. Jouez avec les valeurs, commencez bas et si vos vignettes semblent floues, augmentez un peu la valeur jusqu’à ce que vous soyez satisfait.

function ds_gallery_thumbnail_height($height) {
return '400';
}
add_filter( 'et_pb_gallery_image_height', 'ds_gallery_thumbnail_height' );

function ds_gallery_thumbnail_width($width) {
return '400';
}
add_filter( 'et_pb_gallery_image_width', 'ds_gallery_thumbnail_width' );

Maintenant pour le CSS.

Tout d’abord, nous positionnons les éléments de la galerie de manière relative afin que nos effets de survol restent liés aux images correspondantes.

.ds-hover-gallery .et_pb_gallery_item {
    position: relative;
}

Ensuite, nous supprimons la bordure du titre afin de ne pas avoir besoin d’espace supplémentaire lors du positionnement que nous ne voulons pas. Nous attribuons également à la superposition standard Divi un indice Z de 1 afin qu’il soit au-dessus de notre titre et de notre lettrage. Cela permet à l’image de toujours s’ouvrir dans une boîte à lumière, mais si nous définissons l’opacité de la superposition à zéro dans les paramètres du module, nous ne la verrons pas.

.ds-hover-gallery .et_pb_gallery_title {
    margin: 0 !important;
}

.ds-hover-gallery .et_overlay {
    z-index: 1;
}

Et enfin le style de notre nouvelle superposition avec titre et légende.

Premièrement, nous positionnons le nouveau absolument ds-galerie-texte div que nous avons créé avec notre extrait JS et donnez-lui les valeurs supérieure, gauche, droite et inférieure de zéro. Cela permettra à notre conteneur de couvrir complètement notre image.

Ensuite, nous ajoutons un peu de rembourrage, j’ai choisi 20px, mais vous pouvez modifier cette valeur.

Ensuite, nous définissons le conteneur sur: flex ;, cela nous permet de positionner le texte avec le contenu de justification verticalement. Avec la valeur « Milieu », votre texte est au milieu de l’image. Cependant, vous pouvez le changer en « Flex-Start » si vous le souhaitez en haut et en Flex-End si vous le souhaitez en bas.

Nous ajoutons une couleur d’arrière-plan avec RGBA afin que nous ayons une certaine opacité et que l’image soit visible. Ici, j’ai défini la couleur sur blanc avec une opacité de 80%.

Nous définissons ensuite l’opacité du conteneur réel sur zéro. C’est pour qu’il n’apparaisse pas tant que nous n’avons pas déplacé le pointeur de la souris.

La dernière propriété nous donne la transition entre cacher et montrer notre texte. Cela s’estompe dans et hors de la superposition pendant une demi-seconde. Vous pouvez augmenter ou diminuer cette valeur pour rendre cette transition plus lente ou plus rapide.

La déclaration finale définit simplement l’opacité de notre nouvelle superposition de texte sur 1, ce qui signifie qu’elle apparaîtra lorsque le pointeur de la souris passera au-dessus de l’élément de la galerie.

.ds-hover-gallery .ds-gallery-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.ds-hover-gallery .et_pb_gallery_item:hover .ds-gallery-text {
    opacity: 1;
}

Si vous souhaitez que le texte apparaisse par défaut et se masque au survol, modifiez simplement les valeurs d’opacité dans cette dernière section de CSS pour définir le premier sur 1 et le dernier sur 0.

C’est donc tout ce dont vous avez besoin en termes de CSS. Bien sûr, vous pouvez en ajouter si vous voulez un style supplémentaire. Cependant, cela devrait servir de bon point de départ.

Copiez et collez tout le CSS du commutateur ci-dessous avec les commentaires dessus dans le vôtre feuille de style de sous-section ou alors Divi> Options de conception> CSS personnalisé.





Source link

Recent Posts