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


Hé les gars, apprenons à transformer un module de présentation Divi en un bloc de survol de souris cool.

Préface:
Je n’aime pas que la souris plane sur les appareils mobiles. Ça n’a aucun sens.
Je pense également qu’il est obsolète et que les sites qui l’ont encore n’adaptent tout simplement pas le comportement hérité à la scène mobile.
Pourquoi? Parce que l’entrée des appareils mobiles est principalement TAPPING.
Appuyez, appuyez, appuyez sur.
et essuyez.

Balayez, appuyez sur.

Il y a maintenant un appui long, un toucher 3D et un appui-maintenir-faire glisser et ainsi de suite, mais c’est à peu près tout. Ce sont tous essentiellement contrôlés par tap + swipe.
Il n’y a aucune action de survol dans l’interface du smartphone.

Le moyen le plus simple de le faire est de vérifier les systèmes d’exploitation du smartphone et toutes les applications. Allez-y, déverrouillez votre téléphone et regardez autour de vous. Vous n’utilisez pas de lévitation, n’est-ce pas?

Pour l’enregistrement,
Les iPhones permettent un toucher léger sans enthousiasme qui déclenche l’état de lévitation. En 2007, les survols de souris étaient un peu plus importants qu’ils ne le sont aujourd’hui.
Android ne le fait pas. Android affiche l’état de survol, mais ne l’arrête pas, mais passe directement au lien.

Cela signifie que les limbes sont également incohérents dans son comportement.

(Pour plus d’informations sur ce sujet, consultez les liens de référence ajoutés au bas de cet article.)

Cependant, c’est plutôt cool lorsqu’il est bien fait sur le bureau.

MISE À JOUR DU 4 octobre + AVANT-PROPOS 2: OK, alors Divi a finalement (et étonnamment vite) livré le sien Options de survol ce que je pense est assez rapide dans leur vitesse de développement (premier aperçu le 24 mai). Alors la couleur m’a impressionné. Cependant, ces options de survol sont maladroites sur mobile, et c’est … MAUVAIS … parce que le mobile vaut la peine d’être envisagé, c’est le moins qu’on puisse dire.

Ainsi, lorsque je propose des solutions, je pense à ce à quoi cela ressemblera sur mobile, et je soutiens cette approche. Je pense donc que cet article est toujours pertinent car il couvre également la version mobile.

Hé, vous voulez en savoir plus sur la réactivité mobile?

Cliquez sur moi pour un cours sympa sur la façon de rendre Divi plus réactif

Alors … essayons-le.

Jetez un œil à l’aperçu

Le bureau

Au téléphone

La vidéo

La structure HTML

La raison pour laquelle j’ai choisi le module de présentation est parce qu’il a la bonne structure pour permettre à un panneau flottant d’apparaître.

Ce dont vous avez besoin est quelque chose comme ceci:

-> tout le conteneur
– >> la photo
– >> le contenu

Nous devons masquer la partie du contenu avec l’opacité: 0; et lorsque vous déplacez la souris, changez l’opacité sur 1.

Nous devons également utiliser un positionnement absolu.

Le positionnement absolu n’est pas aussi effrayant que cela puisse paraître. Quel que soit l’élément qui reçoit le positionnement absolu, il se positionne en utilisant le parent le plus proche avec une position relative comme point de départ. (Ceci est différent du positionnement fixe car la position fixe sur l’écran est FIXE.)

Donc dans ce cas

-> tout le conteneur -> relatif
– >> l’image -> absolue -> ci-dessus: 0; gauche: 0; Largeur: 100%; Hauteur: 100%;
– >> le contenu -> absolu -> ci-dessus: 0; gauche: 0; Largeur: 100%; Hauteur: 100%;

Cela signifie que les deux éléments (image et contenu) se chevauchent et que l’élément de contenu est en haut (car il vient après).

Après avoir stylisé le bloc de contenu, vous pouvez le rendre invisible avec l’opacité: 0;

Le CSS devrait ressembler à ceci:


.theparent {
	position: relative;
}
.theparent .theimage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.theparent .thetext {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

et maintenant nous apprenons à changer les choses.

Nous apprendrons comment être abandonné plus tard. Pour l’instant, c’est le point de départ de base.

La jquery flotte

Pour que le survol fonctionne, le: Hover dans CSS sonne comme un moyen vraiment cool et facile de le faire fonctionner. Malheureusement, parfois, cela ne fonctionne pas comme nous le souhaiterions. C’est pourquoi j’ai simplement opté pour la route de requête.

Alors ajoutons quelques jquery.
Ajoutez ceci à la fin de votre fichier functions.php. (Remarque: vous pouvez utiliser un module de code avec une balise de script, mais pourquoi vous limiter à une seule page?)


function universal_mouse_hover() {?>
<script>
jQuery(document).ready(function($){
    $( ".et_pb_module" ).hover(
    function() {
      $( this ).addClass( "beethoven" );
    }, function() {
      $( this ).removeClass( "beethoven" );
    }
  );
});
</script>
<?php
}
add_action( 'wp_footer', 'universal_mouse_hover');

Ou si vous voulez vraiment utiliser le module de code (je ne vois pas pourquoi vous voulez faire cela, mais bon, juste au cas où), copiez-le dans un module de code:
(OU ajoutez-le simplement aux intégrations de thèmes)


<script>
jQuery(document).ready(function($){
    $( ".et_pb_module" ).hover(
    function() {
      $( this ).addClass( "beethoven" );
    }, function() {
      $( this ).removeClass( "beethoven" );
    }
  );
});
</script>

Donc si nécessaire:

Comme vous pouvez le voir, la classe beethoven est ajoutée à chaque élément avec la classe et_pb_module. Ainsi, lorsqu’une souris survole un module, une classe est ajoutée.

Cela signifie que vous pouvez le styliser.

Quelque chose comme ca:
(REMARQUE: l’exemple ici n’est PAS le code réel. Il s’agit simplement d’une version simplifiée pour que vous puissiez mieux le comprendre.)


.theparent .thetext.beethoven {
	opacity: 1;
}

Le style

Maintenant pour le CSS.

C’est assez long donc je vais ajouter le fichier ici:

J’utiliserais un sous-thème (Obtenez-le ici) et ajoutez-le au fichier main.css et vous avez terminé. 🙂

OU ALORS
Vous pouvez ajouter (copier / coller) le CSS à l’option de thème comme suit:

Alors voilà, déposez-le simplement là et pour vous aider, voici un fichier JSON de la mise en page.

REMARQUE: le fichier JSON doit être importé dans la bibliothèque Divi.

Voici. Il est assez facile de faire fonctionner cela.

Assurez-vous d’obtenir les trois extraits.

Le code JQuery, le CSS et le fichier JSON.

Mise à jour: vidéo de la solution complète

Juste au cas où vous voudriez les images d’espace réservé:

Ici vous pouvez trouver ses photos:

https://unsplash.com/@steveroe_

ET, j’en aurai fini avec:


Pour plus d’informations sur CSS, consultez ce cours complet qui couvre tout sur l’utilisation de CSS avec Divi. (Utilisez le code promo « getcoursewith5off » pour une réduction de 5%)
Commencez par apprendre le bon CSS pour Divi
Mettre à jour

– Le fichier CSS a été mis à jour pour inclure des commentaires pour une modification facile.

photo de Alex Perez au Unsplash



Source link

Recent Posts