Dokumentation

DokumentationHeros

Hero Standard

Beschreibung Bild ...
© Gusen Fertelmann

Digitalisierung im Handwerk Machen, was morgen zählt.

Ob Augmented Reality, digitale Planung oder vernetzte Maschinen: Moderne Technologien eröffnen neue Möglichkeiten in der Werkstatt und auf der Baustelle. Lassen Sie sich beraten, wie Ihr Betrieb davon profitieren kann.

Termin buchen Anrufen
Beschreibung Bild ...
© Gusen Fertelmann

Digitalisierung im Handwerk Machen, was morgen zählt.

Ob Augmented Reality, digitale Planung oder vernetzte Maschinen: Moderne Technologien eröffnen neue Möglichkeiten in der Werkstatt und auf der Baustelle. Lassen Sie sich beraten, wie Ihr Betrieb davon profitieren kann.

Termin buchen Anrufen
Beschreibung Bild ...
© Gusen Fertelmann

Digitalisierung im Handwerk Machen, was morgen zählt.

Ob Augmented Reality, digitale Planung oder vernetzte Maschinen: Moderne Technologien eröffnen neue Möglichkeiten in der Werkstatt und auf der Baustelle. Lassen Sie sich beraten, wie Ihr Betrieb davon profitieren kann.

Termin buchen Anrufen
Beschreibung Bild ...
© Gusen Fertelmann

Digitalisierung im Handwerk Machen, was morgen zählt.

Ob Augmented Reality, digitale Planung oder vernetzte Maschinen: Moderne Technologien eröffnen neue Möglichkeiten in der Werkstatt und auf der Baustelle. Lassen Sie sich beraten, wie Ihr Betrieb davon profitieren kann.

Termin buchen Anrufen

Topline
Headline
Text
Buttons
Hintergrund: weiß, Hellblau 400, Orange 400, Dunkelgrün 400

Html Struktur Hero Default


         <div class="hero hero-default container-fluid pb-8">
            <div class="container-fluid bg-blue-400">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="hero-image col-xl-7 order-xl-last">
                            <figure class="figure mb-0 mb-xl-n8">
                                <img class="img-7x6" src="..." alt="...">
                                <figcaption class="figure-caption caption-inside text-end top-1 top-xl-auto">...</figcaption>
                            </figure>
                        </div>
                        <div class="hero-content bg-blue-400 col-12 col-xl-5 p-4">
                            <h2 class="display-1"><span class="topline">...</span>...</h2>
                            <p>...</p>
                            <div class="d-flex gap-4 flex-column flex-md-row flex-md-wrap">
                                <a href="#" class="btn btn-default">... <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i></a>
                                <a href="#" class="btn btn-light"><i class="hwki hwki-kontakt" aria-hidden="true"></i> ... </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Die Klasse .hero bewirkt, dass auf kleineren Geräten, der Text in .hero-content auf einem weißen Kasten unterhalb des Bildes erscheint. Das Bild selbst bekommt dann einen anderen Ratio zugewiesen.

Um den Farbwechsel auf allen Geräten zu ermöglichen, benötigen wir die bg-color Klasse an zwei Stellen.

Hero Fullscreen

Ausrichtung links / rechts

Beschreibung Bild ...
© Gusen Fertelmann

Topline Viele Roseren schlonderad

Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast.

Termin buchen Anrufen
Beschreibung Bild ...
© Gusen Fertelmann

Topline Viele Roseren schlonderad

Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast.

Termin buchen Anrufen

Topline
Headline
Text
Buttons

Bild
optional: Verschattung unter Schrift

Ausrichtung zentriert

Beschreibung Bild ...
© Gusen Fertelmann

Unternehmensnachfolge Bewährtes weiterführen. Neues gestalten.

Wir begleiten Sie bei der Planung, Finanzierung und Umsetzung Ihrer Betriebsübernahme. Persönlich, unabhängig und kostenfrei.

Termin buchen Anrufen

Topline
Headline
Text
Buttons

Bild
optional: Verschattung unter Schrift

Html Struktur für Hero Image Fullscreen mit Text


            <div class="hero ratio ratio-21x9">
                <div class="container-fluid image-fullscreen">
                    <figure class="figure">
                        <img src="./.." alt="...">
                        <figcaption class="figure-caption caption-inside text-end">...</figcaption>
                    </figure>
                    <div class="container align-content-center">
                        <div class="row justify-content-end">
                            <div class="hero-content col-xl-6 col-xxl-5 p-4 p-md-5 p-lg-6">
                                <h2 class="display-1"><span class="topline">...</span>...</h2>
                                <p class="lead">...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Die Klasse .hero bewirkt, dass auf kleineren Geräten, der Text in .hero-content auf einem weißen Kasten unterhalb des Bildes erscheint. Das Bild selbst bekommt dann einen anderen Ratio zugewiesen.

Über die .align-content-[start|center|end] und .justify-content-[start|center|end] Klassen kann der Text auf dem Bild unterschiedlich platziert werden.

Headerbilder

Einfaches Bild ohne text

Beschreibung Header Bild ...
© Gusen Fertelmann

Beratung Gemeinsam zur erfolgreichen
Betriebsübergabe

Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement.

Html Struktur für Image Fullscreen ohne Text


        <div class="hero container-fluid px-0">
            <figure class="figure z-n1">
                <img src="..." class="img-21x9 z-n1" alt="...">
                <figcaption class="figure-caption text-end">...</figcaption>
            </figure>
        </div>

Das ist die einfache Bootstrap Variante. Der Ratio wird direkt am <img> gesetzt.
Die Klasse .z-n1 lässt dann noch eine weiße Textbox über das Bild laufen. Mit z.B. folgendem Aufbau:


        <div class="container mt-n6 mt-md-n9">
            <div class="row mx-0">
                <div class="col-md-8 bg-white p-4 p-md-5 p-lg-6">
                    <h2><span class="topline">xxx</span> xxx</h2>
                    <p>xxx</p>
                </div>
            </div>
        </div>
Beschreibung Bild ...
© Gusen Fertelmann

Alternatives Html

Alternativ kann auch der Aufbau mit der .image-fullscreen Klasse benutzt werden. Ohne die Klasse .hero bleibt der Ratio des Bildes auf allen Gerätegrößen erhalten.


        <div class="ratio ratio-21x9">
            <div class="container-fluid image-fullscreen">
                <figure class="figure">
                    <img src="..." alt="...">
                    <figcaption class="figure-caption caption-inside text-end">...</figcaption>
                </figure>
            </div>
        </div>