Comportement image à la une en guise de header (Créer un compte)

  • WordPress :5.8
  • Statut : non résolu
  • Ce sujet contient 7 réponses, 3 participants et a été mis à jour pour la dernière fois par Insky, le il y a 31 secondes.
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #2410995
    Insky
    Participant
    Initié WordPress
    27 contributions

    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
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2411500
    momofr@free.fr
    Modérateur
    Maître WordPress
    4794 contributions

    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).

    #2412148
    Insky
    Participant
    Initié WordPress
    27 contributions

    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 ?

     

     

    #2412226
    momofr@free.fr
    Modérateur
    Maître WordPress
    4794 contributions

    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.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2412251
    Insky
    Participant
    Initié WordPress
    27 contributions

    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).

     

    #2414316
    Insky
    Participant
    Initié WordPress
    27 contributions

    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

    #2414326
    mathieu42
    Participant
    Maître WordPress
    1342 contributions

    .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 » :

    .https://www.cnil.fr/fr/nouvelles-regles-cookies-et-autres-traceurs-bilan-accompagnement-cnil-actions-a-venir

    #2414332
    Insky
    Participant
    Initié WordPress
    27 contributions

    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.

     

8 sujets de 1 à 8 (sur un total de 8)
  • Vous devez être connecté pour répondre à ce sujet.