Wie bekomme ich einen Button in die Box der Headergrafik? (Campfire responsive)

  • Hallo zusammen,

    ich habe bei dem Layout ja im Header nur das Bild, die Überschrift (in meinem Fall H1) und den Text bearbeitbar.

    Jetzt würde ich unter dem Text mittig gerne einen Button mit "JETZT ANRUFEN" einfügen.

    Wie ist das machbar?

    Vielen Dank für Unterstützung und einen schönen Restsonntag wünsche ich euch :)

    LG, Dennis

  • Hallo Thefresh,

    in den Header kannst Du keinen Button einfügen. Theoretisch könntest Du unterhalb des Headers einen Button einfügen und dessen oberen Außenabstand so weit reduzieren, bis sich der Button auf dem Header findet. Da musst Du dann aber sehr wahrscheinlich mit einem höheren z-Index arbeiten, und wie sich das dann alles in der mobilen Ansicht verhält ...

    Vielleicht erstellst Du mal eine neue Webseite mit dem Layout „Campfire Responsive – Innovation“ und schaust Dir da mal an, wie hier die Startseite gestaltet wurde. Scheinbar handelt es sich um einen Header mit H1/Text/Button/Text, tatsächlich sind es aber individuelle Widgets, die ein gemeinsames Hintergrundbild auf Container-Ebene haben. Vielleicht wäre das auch in Deinem Fall ein brauchbarer Ansatz.

    Viele Grüße

    Tom

  • Hallo Dennis,


    doch ein Button geht in den Header. Stelle das Bild ein und füge im Quelltext dieses ein (Muss natürlich noch angepasst werden) und verlinke auf z. B. Kontakt


    <p style="text-align: left;">BeispielGrußwortetc</p>


    <p style="text-align: left;">


    </p>


    <p style="text-align: left;"><a class="button" href="oid://page/de$Kontakt"><span class="dmy">Direkt Kontakt aufnehmen!</span></a></p>


  • Wow, hat einwandfrei funktioniert ... jetzt habe ich nur noch das Problem, dass mir auf dem Handy die weiter unten stehenden Buttons für "JETZT ANRUFEN" und "WHATS APP" linksbündig auf dem Handy angezeigt werden :)

    Hier sie Seite: https://www.ihr-kfz-gutachter.koeln/

    Ganz lieben Dank für deine Mühen :)

  • Hallo Dennis,

    versuche mal, den beiden Buttons eine identische Breite zu geben. Möglicherweise behebt das bereits das Problem mit der Ausrichtung in der mobilen Ansicht. Und wenn nicht, sehen gleichgroße Buttons in jedem Fall besser aus. 😉

    In den Einstellungen der _beiden_ Buttons unten links auf das Schieberegler-Symbol klicken und dann „Mehr“ auswählen. Unter „Inline-CSS“ „min-width: 200px“ eingeben. Vielleicht brauchst Du auch 250px. Einfach mal ein wenig mit den Werten spielen.

    Viele Grüße

    Tom

  • Hallo Dennis,

    versuche mal, den beiden Buttons eine identische Breite zu geben. Möglicherweise behebt das bereits das Problem mit der Ausrichtung in der mobilen Ansicht. Und wenn nicht, sehen gleichgroße Buttons in jedem Fall besser aus. 😉

    In den Einstellungen der _beiden_ Buttons unten links auf das Schieberegler-Symbol klicken und dann „Mehr“ auswählen. Unter „Inline-CSS“ „min-width: 200px“ eingeben. Vielleicht brauchst Du auch 250px. Einfach mal ein wenig mit den Werten spielen.

    Viele Grüße

    Tom


    Mit den 200px hat gut gepasst - danke.

    Leider sind die immer noch nicht zentriert :(

  • Hallo Dennis,

    gehe mal in die Einstellungen der beiden Buttons und überprüfe, dass hier unter „Ausrichtung“ „Zentriert“ gewählt ist. Ich vermute hier steht gegenwärtig „Links“. Das scheint für die Desktop-Ansicht keine oder kaum Relevanz zu haben, sofern die Reihe zentriert ist, in der Smartphone-Ansicht scheint es dann aber eine Rolle zu spielen.

    Viele Grüße

    Tom

  • Hallo Dennis,

    gehe mal in die Einstellungen der beiden Buttons und überprüfe, dass hier unter „Ausrichtung“ „Zentriert“ gewählt ist. Ich vermute hier steht gegenwärtig „Links“. Das scheint für die Desktop-Ansicht keine oder kaum Relevanz zu haben, sofern die Reihe zentriert ist, in der Smartphone-Ansicht scheint es dann aber eine Rolle zu spielen.

    Viele Grüße

    Tom

    Hallo Tom,

    hervorragend - es hat 1a funktioniert :)

    Lieben Dank

    Dennis

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!