Moitor füllendes Startbild ohne Menü

    Guten Tag,

    ich würde gerne den Start-Effekt von dieser Seite in Wordpress übernehmen https://www.werbewelten-we.de.

    Der Bildschirm soll zu Beginn mit einem Bild gefüllt sein. Es soll kein Menü sichtbar sein.
    Erst wenn der User anfängt zu scollen, schiebt sich der Inhalt der Seite mit Logo und Menü über den Startbildschirm.

    Ich benutze das Be Theme mit WP Bakery. Habe schon sämtliche Ideen ausprobiert, komme aber nicht weiter. Gibt es da evtl. ein Plugin für. Es würd emir auch schon helfen, wenn wir jemand sagen könnte, ob der Effekt einen Namen hat, nachdem ich googlen kann :)

    Danke.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Na ja, ein wenig CSS solltest dun auf jeden Fall können um so was zu machen. Außer in deinem Theme ist das bereits vorgesehen. Falls nein, skizziere ich dir das Prinzip:

    1) Du benötigst mal einen Container, der das Fenster immer zu 100% ausfüllt. Der könnte z. B. dieses CSS haben:

    Code
    .startcontainer{width: 100%; height: 100vH}


    100vH bedeutet, dass er immer 100% der aktuellen Fensterhöhe hat. Bei der Breite von 100% mußt du aufpassen, dass der Container nicht in einem anderen Container drinnen ist und dadurch ev. die 100% sich auf das Elternelement beziehen.

    2) Das Bild in dem Container würde ich als Hintergrundbild definieren. Warum? dieser Container kann alle nur denkbaren Größen und Formen haben. Du wirst das Bild daher in den meisten Fällen also beschnitten ausgeben müssen. Hier würde folgender Codeschnipsel passen:

    Code
    .startcontainer {background: url(pfad/zum/bild.jpg) no repeat center/ cover;}

    Das jetzt mal nur als Skizze zum selbst Bearbeiten.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden