- WordPress :5.8
- Statut : non résolu
- Ce sujet contient 10 réponses, 3 participants et a été mis à jour pour la dernière fois par
, le il y a 2 années et 1 mois.
-
Messages
-
Bonjour à tous,
Dans le cadre d’un projet de stage bénévole, nous sommes un petit groupe à créer le site web d’une ferme locale pour les aider dans leurs activités. La formation nous impose la création d’un thème from scratch, sans possibilité d’utiliser de builder. Nos connaissances restent assez limitées pour le moment, donc nous rencontrons beaucoup de galères.
Le souci du jour : sur la home, on a mis un caroussel, qui réagit bien (qu’on zoome / dézoome, sa taille reste fixe). Sur les autres pages, on affiche dynamiquement l’image à la une (quand il y en a une, sinon une image par défaut) dans une div (en background-image). Par contre, quand on zoome/ dézoome, on se rend compte qu’elle reste alignée à gauche alors que tout le reste du site est centré et elle se réduit beaucoup en taille. On aurait aimé pouvoir bénéficier du même comportement que sur la home (taille de l’image qui le change pas au zoom/dezoom). Pourriez-vous nous aider ?
Merci à vous et bon week-end,
Laurent
Ma configuration WP actuelle
- Thème utilisé : sur mesure
- Extensions en place : sendinblue, ACF, CPT UI
- Nom de l’hébergeur : o2switch
- Adresse du site : ferme-sahouret.fr
- Capture ci-joint
Salut, vous n’avez pas d’attribut sur le positionnement de l’image en « background« , le comportement en arrière-plan est particulier car l’image peut avoir différents affichages en fonctions des attributs CSS que tu lui adjoints.
Dans ton cas le positionnement n’est pas indiqué, si tu veux l’image au centre il faut ajouter cet attribut à la règle du « background-image » :
background-position : center center;
L’image sera centrée mais ne prendra pas toute la largeur de l’élément HTML qui supporte cette règle de « background-image« , si tu veux que l’image « couvre » tout l’élément il faut ajouter un attribut de dimensions « size » à ton image, pour couvrir tout l’élément tu ajoutes :
background-size: cover;
Je t’invite à consulter cet article sur le sujet (en anglais).
Bonsoir,
Merci pour la réponse détaillée et pour le lien. Ce n’est pas faute d’avoir déjà utilisé ces instructions pourtant! Cela fonctionne.
On vient de se rendre compte d’un problème plus gênant. Je ne sais pas si je peux le décrire ici ou s’il vaut mieux que je fasse un autre message ?
Cette image fixe sur les pages n’est pas responsive (elle ne s’adapte pas à la réduction de la résolution comme le carousel de l’accueil) mais surtout, carousel comme l’image fixe dès que l’on passe sur une résolution inférieure (qui déclenche le menu blanc au lieu du transparent), on ne voit presque plus les visuels. J’ai pensé qu’il fallait peut-être ajouter une règle dans le media querie correspondant à ce breakpoint comme un padding-top pour le décaler, mais ce n’est peut être pas la bonne méthode ?
Salut, je vois 3 images de logos dans ton header, ça correspond à quoi ?
Normalement avec les media queries tu peux mettre des règles pour adapter selon les résolutions (ou largeur), pas besoin de mettre ce genre de truc qui met plein de code pour rien.
Sur mobile je réduirais le logo autour de 100/120px et je réduirait le padding du diaporama vers 125px (voir exemple ci-joint).
Le visuel du bas gagnerait à être en taille « contain » (background-size: contain;) (voir exemple ci-joint).
Le formulaire passe mal sur mobile (voir exemple ci-joint).
Bref il y a pas mal de choses à revoir sur mobile (corps des titres par exemple…).
D’où l’intérêt d’utiliser un constructeur de page comme Elementor par exemple. Maintenant il existe aussi des extensions de CSS très pratiques avec WordPress comme Visual CSS Style Editor ou Custom CSS Pro par exemple.
Bonjour,
Je réponds point par point :
- Concernant les 3 logos. Il y a le logo « normal » quand on arrive sur la page (pleine taille, blanc), puis le logo dès qu’on commence à scroller (marron, plus petit) et enfin celui qui apparait au clic sur le toggle du hamburger en version mobile. Notre petit groupe n’est pas du tout expert en développement web. On a eu pas mal de mal à faire çà déjà (gérer le changement de menu au scroll en JS + css).
- Ok pour le logo mobile. On va tester çà. Pour le padding, c’était un essai que j’ai fait juste après mon précédent message pour voir si çà pouvait fonctionner.
- Pour le visuel du bas, il y a en fait 3 images différentes (oiseaux en top left, oiseaux en top right et scène paysanne en bas). Je ne sais pas si on peur assigner des « contain » sur différentes images de fond ?
- Pour le formulaire, oui on s’en est rendu compte aussi et c’est moins pire que lorsqu’on l’a pris. C’est un formulaire provenant de Sendinblue car les contacts doivent partir directement en base de données sur cet outil, mais il n’est pas au point effectivement. On va essayer d’améliorer encore son comportement.
Je suis bien d’accord pour les constructeurs, mais dans le cadre de la formation, il est strictement interdit d’utiliser un thème existant, un constructeur de page ou tout autre extension apportant du confort aux outils natifs prévus dans WordPress. Dans le cadre de ce projet, on n’a aucune obligation de résultat, seulement de « galérer » à faire par nous-même (mais forcément, on veut livrer quelque chose d’aussi « propre » que possible.
Je n’aborde pas encore notre gros morceau : les CPT ! C’est la prochaine grosse étape qu’on doit faire par nous-même (possibilité de les créer par une extension mais pour les afficher, on devra créer nos fichiers en php).
Bonjour,
Je reviens pour un dernier debuggage qui me pose souci. Depuis, nous avons modifié plusieurs fois les formulaires, les titres, padding etc pour avoir un résultat plus homogène. Néanmoins, un bug, sans doute du à du CSS que je n’arrive pas à identifier, reste présent.
Il se produit uniquement en version mobile – il suffit que le menu de navigation passe en hamburger – et de cliquer dessus, on voit alors que le menu vertical est quasi invisible, avec un voile blanc par dessus.
Je vais continuer à chercher mais je ne suis pas contre un dernier petit coup de pouce.
Bonne journée
.https://www.ferme-sahouret.fr/
le voile blanc est le fond du menu donc vous allez peut-être devoir utiliser du javascript pour personnaliser cela sinon le éléments du menu seront difficiles à lire sans le fond.
petite parenthèse : l’acception des cookies ne respecte par le RGPD, le bouton « refuser » doit être présenté de la même façon que « accepter » :
Bonjour @mathieu42,
Merci pour le retour. Entre temps j’ai réussi à avancer sur le problème de CSS. J’ai joué avec certains media queries. Il me semble que c’est mieux ?
Pour la parenthèse RGPD, a priori, cela le respecte. J’ai bien relu ce lien que je connaissais. Il est préconisé de faire apparaître un bouton identique pour refuser mais ce n’est pas imposé. Le fond est imposé (l’internaute doit pouvoir exprimer son refus), la forme n’est que conseillée. De préciser d’ailleurs « En revanche, la seule présence d’un bouton « Paramétrer » en complément du bouton « Tout accepter » tend, en pratique, à dissuader le refus et ne permet donc pas de se mettre en conformité ».
L’absence de conformité est manifeste lorsque il n’y a pas aucun moyen de refuser, mais pas si le moyen de refuse diffère sur la forme que l’acceptation. J’ai néanmoins pris la remarque en compte. Le bandeau a été mis à jour.
Bonjour,
Je vous sollicite pour un dernier problème, que nous venons tout juste de détecter : le carousel de la page d’accueil ne défile plus automatiquement (https://www.ferme-sahouret.fr/).
Nous ne savons pas à quel moment ni quelle modification a fait sauter quelque chose. Le défilement manuel par les flèches du côté ou les tirets en bas du carousel eux fonctionnent. Par contre, plus de transition ni de défilement automatique.
Approchant de nos examens, nous sommes assez fébriles à tenter des modifications qui pourraient créer d’autres dégâts.
Auriez-vous une idée ?
Bon après-midi
Salut, une fois qu’on fait défiler une diapo le défilement automatique est présent (trop rapide pour moi).
Qu’elle extension utilises-tu pour ce diaporama ?
Je viens de me rendre compte qu’en fait le carousel se stoppe si on le survole. Comme la zone est grande, si on laisse trainer le curseur dans cette partie de l’écran, çà ne bougera plus.
Par contre il y avait une transition très simple (fondu) qui n’y est plus et effectivement le défilement est rapide.
Il n’y a pas d’extension, c’est un carousel issu de bootstrap 5 intégré directement.
- Vous devez être connecté pour répondre à ce sujet.