Erlebniswelt der Demo


In den folgenden Schritten erklären wir Ihnen, wie Sie die Erlebniswelt der Neusicht Demo nachbauen können.

Screencast


Einrichtung

Als erster Block wird folgende Informationsleiste erstellt: image

Öffnen Sie den Menüpunkt Inhalte -> Erlebniswelten und erstellen Sie mit einem Klick auf "Neues Layout anlegen" ein neues Layout.

Mit einem Klick auf "Volle Breite" erstellen Sie eine neue Sektion. image

Die Einstellungen der neuen Sektion finden Sie im rechten Menü. Falls das Menü nicht angezeigt wird, können die Einstellungen mit einem Klick auf folgendem Icon geöffnet werden: image Folgende Sektion-Einstellungen müssen hier übernommen werden:

  • CSS-Klassen: no-margin
  • Hintergrundfarbe: #4a545b


Nachdem die Einstellungen übernommen wurden, muss ein neuer Text Block in die Sektion eingefügt werden. Klicken Sie dazu auf das (+) Icon im rechten Menü, wählen die Block-Kategorie Text und ziehen den Block Text in die Sektion. image

Mit einem Klick auf das Zahnrad im neu eingefügten Block gelangen Sie in die Element-Einstellungen. image

Wechseln Sie hier den Bearbeitungsmodus des Text-Editors um zum HTML Editor zu gelangen. image

Fügen Sie folgenden HTML-Code in den Editor ein:

<div class="d-flex justify-content-between align-items-center flex-wrap text-white">
    <div class="d-flex align-items-center">
        <!-- Icon -->
        <i class="fad fa-pencil-paintbrush fa-2x mr-3"></i>
        <div>
            <!-- Text -->
            <span class="d-block">
                Andere Farbkombination ausprobieren?
            </span>
            <!-- Link -->
            <a class="text-white font-weight-bold" href="https://neusichtalt.shopwaves.io/">
                Alternative Demo besuchen <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </div>
    <!-- Button -->
    <a href="https://neusichtalt.shopwaves.io/" class="btn btn-sm btn-white d-none d-sm-block">
        <i class="fad fa-external-link-alt"></i> Alternative Demo
    </a>
</div>

Mit einem Klick auf Fertig wird das Element gespeichert und der erste Block wurde erfolgreich hinzugefügt.

{alert.fa-info-circle} Das Neusicht Theme verwendet Bootstrap 4. Es können im HTML Editor daher alle Bootstrap Klassen und Komponenten verwendet werden. Weitere Informationen zu Bootstrap finden Sie unter getbootstrap.com/docs/

Mit einem Klick auf das (+) Icon unter oder über der Sektion können Sie eine neue Sektion hinzufügen. Weitere Beispielblöcke finden Sie in in den nachfolgenden Punkten.

image





Beispielblöcke


Unsere Produktauswahl

image

Sektion-Einstellungen

  • CSS-Klassen: no-margin
  • Hintergrundfarbe: #45aaf2

HTML-Code

<div class="d-flex align-items-center text-white mb-5 py-4">
        <!-- Icon -->
        <i class="fad fa-bags-shopping fa-3x mr-3"></i>
        <div>
            <!-- Title -->
            <h2 class="text-white m-0 d-block">Unsere Produktauwahl</h2>
            <!-- Text -->
            <span>Lorem ipsum dolor sit amet consetetur sadipscing elitr</span>
        </div>
</div>


Um die Bilder unter diesem Block wie in der Demo darzustellen, muss eine neue Sektion mit folgenden Einstellungen erstellt werden:

  • CSS-Klassen: mt-n80 pb-5

Neuheiten

image

Sektion-Einstellungen

  • CSS-Klassen: pt-5 pb-5

HTML-Code

<h2><i class="fad fa-plus-circle"></i> Neuheiten</h2>

Sale

image

Sektion-Einstellungen

  • CSS-Klassen: no-margin
  • Hintergrundfarbe: #bb2c2f

HTML-Code

<div class="d-flex align-items-center text-white mb-5 py-4">
    <h2 class="text-white m-0"><i class="fad fa-badge-percent"></i> Sale</h2>
</div>


Um den Produkt-Slider unter diesem Block wie in der Demo darzustellen, muss eine neue Sektion mit folgenden Einstellungen erstellt werden:

  • CSS-Klassen: mt-n80 pb-5

Newsletter

image

Sektion-Einstellungen

  • CSS-Klassen: mb-5
  • Hintergrundfarbe: #eeeeee

HTML-Code

<div class="text-center">
    <!-- Title -->
    <h2 class="m-0"><i class="fad fa-envelope-open-text"></i> Newsletter</h2>
    <!-- Text -->
    <span class="d-block mb-2">Zum Newsletter anmelden und <h3 class="text-primary d-inline m-0">5€</h3> auf den ersten Einkauf sparen!</span>
    <!-- Button -->
    <a href="https://neusicht.shopwaves.io/" class="btn btn-sm btn-primary">
        <i class="fad fa-chevron-square-right"></i> Zur Anmeldung
    </a>
</div>

© IWAVES Medientechnik e.U 2020