-
Posts
-
Bonjour,
J’ai une question concernant le block Masonry.
Je l’utilise pour afficher des produits avec le titre centré en superposition de l’image.
Cependant, j’aimerais pouvoir insérer des éléments supplémentaires au survol de l’image avec la souris (texte, icone).
Je ne vois pas comment faire. Pourriez-vous me guider si c’est du simple paramétrage ou m’expliquer si en programmation ce n’est pas trop compliqué.
Merci d’avance
Hey sebzh22,
Merci pour votre patience, pour utiliser l’élément de maçonnerie pour afficher les produits et avoir plus d’informations affichées au survol de la souris, survolez, veuillez vous rendre sur votre produit et ajouter vos informations supplémentaires dans la courte description du produit, puis ajoutez ce css à votre CSS rapide domaine:#top .av-masonry-entry:hover .av-masonry-entry-title, #top .av-masonry-entry:hover .price span { display: none; } #top .av-masonry-entry .av-masonry-entry-content { display: none; } #top .av-masonry-entry:hover .av-masonry-entry-content { display: block; font-size: 1.5em; }puis au passage de la souris, le titre et le prix se cacheront et plus d’informations s’afficheront, vous pouvez ajouter des emoji mais le shortcode ou le html ne fonctionnera pas ici.
J’ai lié à ma page de démonstration ci-dessous.
— Translated with Google —
Thank you for your patience, to use the masonry element to show products and have more information shown on mouse-over, hover, please go to your product and add your extra information in the Product short description, then add this css to your Quick CSS field:
#top .av-masonry-entry:hover .av-masonry-entry-title, #top .av-masonry-entry:hover .price span { display: none; } #top .av-masonry-entry .av-masonry-entry-content { display: none; } #top .av-masonry-entry:hover .av-masonry-entry-content { display: block; font-size: 1.5em; }then on mouse-over the title and price will hide and the more information will show, you can add emoji but shortcode or html will not work here.
I linked to my demo page below.
Best regards,
MikeBonjour,
Après avoir insérer votre code dans le Quick CSS et ajouter des informations complémentaires dans un produit, je n’ai pas de changement. les informations complémentaires s’écrivent avec le titre et le prix et au passage de la souris, il n’y a plus rien.
Cordialement
Hi,
Thanks for the feedback, did you add the information into the Product short description
If so and you cleared your cache and still have trouble please include and admin login to your site and a direct link to your page so we can examine.Best regards,
MikeBonjour,
Merci pour votre retour. Je vous ai mis l’acces au site et j’avais bien mis mon texte dans la description courte.
Je pense ne pas bien comprendre le cache et comment dois-je procéder pour avoir des résultats visible directement au rajout de code CSS.Parce que je pense que votre code dois fonctionner.
Je dois vider le cache de wordpress. Comment procéder via mon plugin (litespeed cache)? Est ce suffisant?
Faut-il également faire mon navigateur internet? Ainsi que mon DNS Windows?Par exemple, je souhaite faire la modification de l’image (faite via chrome en direct). Une fois que j’ai en visuel ce que je veux. Je copie le code correspondant dans le Quick CSS et cela devrais fonctionner? Pour ma part pas de changement. Donc j’en déduit que c’est un problème de cache?
Ici le code :
.av-masonry-sort a {
border: solid 2px black;
border-radius: 25px;
}
Je viens de désactiver cloudflare et litespeed comme vous m’aviez conseillé dans un autre sujet.
J’ai l’impression de ne pas tout comprendre mais peut-être que c’est juste le problème de cache?
Merci d’avance
Hi,
Merci pour la connexion, mais je n’ai pas trouvé où vous affichez votre élément de produit de maçonnerie, veuillez inclure un lien vers la page.
Je vois un élément de maçonnerie sur votre page d’accueil, mais ce n’est pas pour les produits.
Dans votre capture d’écran pour le tri maçonnerie, veuillez noter comment les règles sont estompées, cela signifie qu’elles ne sont pas actives
vous avez probablement besoin de plus de spécificité mais j’aurais besoin de voir l’élément à vérifier et je ne l’ai pas trouvé, mais allons travailler sur l’effet de survol de la souris pour le produit de maçonnerie en premier.— Translated with Google —
Thank you for the login, but I couldn’t find where you are displaying your masonry product element, please include a link to the page.
I do see a masonry element on your homepage but it is not for products.
In your screenshot for the masonry sort, please note how the rules are faded, this means that they are not active
you probably need more specificity but I would need to see the element to check and I couldn’t find it, but lets work on the mouse-over effect for the masonry product first.Best regards,
MikeBonjour,
Votre code fonctionne bien depuis la mise en cache. Même effet que sur votre exemple.
Mais par exemple, maintenant quand je change la taille de la police de votre code, celle-ci ne change pas. Faut-il faire une mise en cache du navigateur et de wordpress à chaque changement?Pour le changement de code du tri masonry, je sais que lorsque les règles sont estompées c’est qu’elles ne sont pas activent. Le fait est que j’avais ajouté les deux dernières lignes directement dans l’inspecteur de chrome. Donc en direct, je vois bien les changement s’effectué. J’en avais déduit que si je reprenait ce code dans le quick CSS celui si fonctionnerait également mais rien ne change à l’ajout de ce code à savoir : .av-masonry-sort a {
border: solid 2px black;
border-radius: 25px;
}Hi,
Thanks for the link to your page, I found your border to not include the radius but it was working from what you added to the child theme stylesheet, I added the radius to your rule with a little padding and also testing it in your Quick CSS and it works in both places:.av-masonry-sort a { border: solid 2px black; border-radius: 25px; padding: 0 10px; }
so I imagine the issue was your caching plugins, which is a common issue, I recommend to disable your caching while building your site and when it is done then enable it.
As for the font size of your masonry content, in your Quick CSS had the size set to: font-size: 0.5em; which is very small, so I changed it to font-size: 1.5em; to match your title, so the Quick CSS is working, what size do you want it to be?
I test with Chrome on Windows, if you are testing with Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.Best regards,
MikeBonjour Mike et merci pour la réponse.
J’ai donc remarquer que mon problème vient du cache de mon navigateur, à savoir Chrome.
Pour ne pas avoir a purger le cache à chaque modification, j’ai décidé de travailler sur mon site sur Firefox en désactivant complètement le cache. Le problème à l’air d’être régler. Chaque modification s’actualise à chaque fois que j’actualise ma page.
Pensez-vous que c’est la bonne solution pour travailler?
Cordialement
J’aimerais encore pouvoir modifier les éléments masonry.
Pour rajouter du CSS je sais maintenant ou le faire et comment faire.
Cependant, si je veux rajouter des éléments dans les images (par exemple un logo au survole de l’image, ou un bouton) c’est modification se font également dans la page de modification du CSS ou y a -t-il un autre endroit pour rajouter cela?Faut-il par exemple créer ce que je souhaite dans une page brouillon et copier le code dans la description du produit?
Cordialement
Hi,
Lorsque vous affichez des produits dans l’élément de maçonnerie, vous ne pourrez pas ajouter d’éléments à la Description courte du produit car elle ne rend pas les codes courts.— Translated with Google —
When showing products in the masonry element you will not be able to add elements to the Product short description because it doesn’t render shortcodes.
Best regards,
MikeHi,
Il doit y avoir une certaine personnalisation, je ne sais pas quelle personnalisation cependant.— Translated with Google —
It must be some customization, I’m not sure what customization though.
Best regards,
MikeTrès bien merci. Je vais me contenté du basique pour le moment et voir par la suite avec plus de connaissance pour personnaliser ceci.
Vous pouvez cloturer ce sujetMerci encore
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Informations supplémentaire survole image masonry’ is closed to new replies.