Comment superposer une image avec l’image d’en-tête (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 Raph01, le il y a 20 secondes.
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #2413117
    Raph01
    Participant
    Initié WordPress
    4 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Thème utilisé : Rife Free

    Problème(s) rencontré(s) :
    Bonjour,

    J’utilise le thème Rife Free, avec une image d’en-tête sur chaque page. Je voulais savoir s’il était possible, avec une extension ou directement sur le thème, de superposer une image en png (sans fond) par dessus cette image d’en-tête pour la page d’accueil, un peu comme dans le fichier joint.

    Est-ce que quelqu’un pourrait m’apporter une réponse, merci d’avance !

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2413379
    momofr@free.fr
    Modérateur
    Maître WordPress
    4786 contributions

    Salut, tu parles de l’en-tête (logo + menu) ou du diaporama en bandeau Hero ?

    PS : les captures écrans sont plus légères en JPG au lieu de PNG. Tu peux aussi les alléger avec ce site.

    #2413444
    Raph01
    Participant
    Initié WordPress
    4 contributions

    Salut, je parle du bandeau Hero qui est sur toutes les pages du thème Rife Free (image comme dans le fichier joint n1). J’aimerais laisser dépasser un peu l’image d’en dessous sur le bandeau (voir fichier joint n2), et je voulais donc savoir si un module pouvait me permettre de faire ça.

    Merci d’avance,

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2413459
    mathieu42
    Participant
    Maître WordPress
    1313 contributions

    mettez une classe css sur le conteneur de l’image à gauche et ensuite vous pourrez la monter avec une règle « margin-top » en négatif.

    #2413492
    momofr@free.fr
    Modérateur
    Maître WordPress
    4786 contributions

    Salut, si tu n’utilises pas de constructeur de page il faut ruser avec les CSS effectivement (voir pièces jointes).

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2413500
    Raph01
    Participant
    Initié WordPress
    4 contributions

    C’est exactement ce que je souhaite faire !
    Cependant je ne suis pas très douée avec les CSS etc 😅

    Que je marque « moins_180 » comme dans l’exemple, ou .moins_180{ margin-top: -180px; } (voir en pièce jointe), rien ne se passe, une explication ?

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2413507
    momofr@free.fr
    Modérateur
    Maître WordPress
    4786 contributions

    Salut, tu n’as pas bien regardé mes exemples, le principe des CSS c’est d’ajouter une classe CSS (moins_180 – sans le point) à l’élément à cibler avec la règle (dans Gutenberg pour mon exemple) et d’ajouter une règle CSS (.moins_180{ margin-top: -180px; }) dans la partie de personnalisation de l’administration WP (Apparence -> Personnaliser -> CSS additionnelle).

    Une fois la règle enregistrée elle sera effective pour tous les éléments de Gutenberg qui sont tagués avec la classe CSS (moins_180).

    Le webdesign demande un peu de connaissance sur les principes des CSS, sinon utilises un constructeur de page, c’est fait pour designer sans coder.

    #2413514
    Raph01
    Participant
    Initié WordPress
    4 contributions

    Merci pour toutes ces explications ! J’ai réussi <b>😁</b>

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