Website-Einrichten
In Elementor können Sie verschiedene Sektionen erstellen, um Ihre Website ansprechend und funktional zu gestalten.
Jede Sektion hat ihre eigene Bedeutung und trägt dazu bei, dass Besucher eine positive Erfahrung auf Ihrer Website haben. Nutzen Sie die Beispiele, um Ihre eigene kreative Gestaltung zu inspirieren!
1. Hero Sektion
Beschreibung: Die Hero Sektion ist der erste Bereich, den Besucher sehen, wenn sie Ihre Website betreten. Sie sollte auffällig und einladend sein.
Beispiel 1: Verwenden Sie ein großes Hintergrundbild mit einem einprägsamen Slogan und einem Call-to-Action-Button, der die Besucher dazu auffordert, mehr über Ihre Dienstleistungen zu erfahren.
Beispiel 2: Fügen Sie ein Video als Hintergrund hinzu, das die Atmosphäre Ihres Unternehmens vermittelt, zusammen mit einem kurzen Einführungstext und einem Button, der zu Ihrer Kontaktseite führt.
2. Willkommen-Section
Beschreibung: Diese Sektion dient dazu, Besucher willkommen zu heißen und ihnen einen kurzen Überblick über Ihre Website oder Ihr Unternehmen zu geben.
Beispiel 1: Schreiben Sie einen herzlichen Willkommensgruß und fügen Sie ein Bild von Ihrem Team hinzu, um eine persönliche Verbindung herzustellen.
Beispiel 2: Verwenden Sie eine kurze Beschreibung Ihrer Dienstleistungen oder Produkte, ergänzt durch Icons, die die verschiedenen Angebote visuell darstellen.
3. Speisekarten-Section
Beschreibung: Ideal für Restaurants oder Cafés, um ihre Speisen und Getränke ansprechend zu präsentieren.
Beispiel 1: Erstellen Sie eine ansprechende Liste Ihrer beliebtesten Gerichte mit Bildern und kurzen Beschreibungen, um den Besuchern einen Vorgeschmack auf Ihr Angebot zu geben.
Beispiel 2: Fügen Sie eine interaktive Speisekarte hinzu, bei der Besucher auf die einzelnen Kategorien klicken können, um mehr über die jeweiligen Gerichte zu erfahren.
4. About Sektion
Beschreibung: In dieser Sektion können Sie die Geschichte Ihres Unternehmens, Ihre Mission und Werte vorstellen.
Beispiel 1: Schreiben Sie einen kurzen Text über die Gründungsgeschichte Ihres Unternehmens und fügen Sie ein Bild des Gründers oder des Teams hinzu, um Authentizität zu zeigen.
Beispiel 2: Verwenden Sie eine Zeitleiste, um wichtige Meilensteine Ihres Unternehmens visuell darzustellen, was den Besuchern hilft, Ihre Entwicklung nachzuvollziehen.
5. Kontakt Section
Beschreibung: Diese Sektion ermöglicht es Besuchern, mit Ihnen in Kontakt zu treten, sei es durch ein Kontaktformular oder durch die Bereitstellung von Kontaktdaten.
Beispiel 1: Fügen Sie ein einfaches Kontaktformular hinzu, das es Besuchern ermöglicht, direkt über die Website Nachrichten zu senden, und stellen Sie sicher, dass die Felder klar beschriftet sind.
Beispiel 2: Geben Sie Ihre Kontaktdaten, einschließlich Telefonnummer, E-Mail-Adresse und physischer Adresse, zusammen mit einer Google Maps-Karte an, um den Standort Ihres Unternehmens zu zeigen.
6. Slide-Effekt
Beschreibung: Der Slide-Effekt kann verwendet werden, um Inhalte dynamisch anzuzeigen, indem sie von einer Seite zur anderen gleiten.
Beispiel 1: Verwenden Sie einen Slider, um verschiedene Testimonials von Kunden anzuzeigen, wobei jede Bewertung sanft in die nächste übergeht, um das Interesse der Besucher zu halten.
Beispiel 2: Erstellen Sie einen Bildslider, der verschiedene Produkte oder Dienstleistungen zeigt, wobei die Bilder automatisch wechseln oder manuell durch Klicken auf Pfeile navigiert werden können.
HERO-Section einrichten
Container erstellen (erhält im Navigator den Namen Hero-Container)
T
Mindesthöhe 100% einrichten
Container bearbeiten / Layout / Container / Mind. Höhe /
100% (ganze Website)
Container erhält einen dunkelblauen Hintergrund
Container bearbeiten / Stil / Hintergrund / Normal /
Farbe: dunkelblau #020612 (erstreckt sich über die ganzen 100%)
Navigator Namen ändern
Vorhandenen Namen doppelt anklicken und dann ändern
Überschrift Hero 1 erstellen
noch ist nichts zu sehen, da normalerweise die Schrift schwarz ist, der Hintergrund überdeckt sie. Jetzt beschriften wir die Überschrift und dann ist auch der Text zu sehen.
Überschrift Hero 1 erhält Text und Absatz-Formatierung
HTML-Tag = p (Absatz) auch bei einem Widget Überschrift
Überschrift Hero 2 erstellen (darunter)
Widget Überschrift bearbeiten / Inhalt / Titel
Text: Napolitanische Pizza direkt aus dem Holzofen
Widget Überschrift bearbeiten / Stil /
Typografie: H2 / Textfarbe: weiss
Schriftgröße: 54px damit die Überschrift nur auf 2 Zeilen sichtbar ist.
Das Word Holzofen gelb darstellen
Widget Überschrift bearbeiten / Inhalt / Titel
Text: Napolitanische Pizza direkt aus dem Napolitanische Pizza direkt aus dem <span style="color: #FDC14E;">Holzofen</span>
Überschrift bearbeiten / Erweitert / Layout / Breite: individuell 50%
Texteditor Hero 3 erstellen
Überschrift bearbeiten / Text eingeben
Überschrift bearbeiten / Erweitert / Breite: 50%
Container einfügen
Container Button (horizontal) einfügen, dunkelblauer Hintergrund
Container bearbeiten / Layout / Container / Richtung: horizontal
Container bearbeiten / Stil / Hintergrund / Normal / Hintergrundfarbe: dunkelblau
Zwei Buttons einfügen
2 x Widget Button in den Container ziehen. Da der Container mit Richtung horizontal eingerichtet wurde, erscheinen die Buttons nebeneinander
Buttons beschriften
1. Button: Zur Speisekarte
2. Button: Öffnungszeiten
Schriftgröße: 16px beachten
Button für MORMAL + HOVER
Zwischenergebnis
Bild Pizzabäcker einfügen
Container Hero bearbeiten / Stil / Hintergrund / Normal / Bild
Ansicht Notebook
Ansicht mobil
Hero Section - Navigator
Willkommen-Sektion einrichten
Neuen Container einfügen und im Navigator als Container Willkommen benennen
Hintergrundfarbe für Container Willkommen
Container bearbeiten / Stil / Hintergrund / Farbe: #020612
Überschrift Willkommen im Bella Vista. einfügen
Widget Überschrift in den Container ziehen
Überschrift bearbeiten / Inhalt / Überschrift / Titel
Napolitanische Pizza<br>direkt aus dem
<span style="color: #FDC14E;">Holzofen</span> und Titel zentriert
Überschrift bearbeiten / Stil / Überschrift / Ausrichtung: zentriert
Innenabstand zum vorigen Container vergrößern
Container bearbeiten / Erweitert / Layout / Innenabstand /
Oben +Unten je 100px
Text unter der Überschrift 
Unsere Leidenschaft für authentische italienische Speisen vereint sich hier in der Stadtmitte. Bei uns erwartet Sie eine reichhaltige Auswahl an köstlichen Gerichten aus der italienischen Küche, von Pasta bis Pizza. Unser gemütliches Ambiente und unser freundliches Team heißen Sie herzlich willkommen. Lassen Sie sich von uns auf eine kulinarische Reise nach Italien einladen.
Texteditor bearbeiten / Inhalt / Texteditor / Text eingeben = >>
Mögliche Probleme
Wenn Sie im Elementor-Texteditor den Text 20px vom linken Rand abgerückt haben und dabei eine weiße Fläche anstelle der dunkelblauen Hintergrundfarbe (#020612) erscheint, liegt das wahrscheinlich an den Standard-Padding- oder Margin-Einstellungen des Texteditors oder des Containers.
- Container bearbeiten / Erweitert / Padding
- Padding: 0
- Hintergrundfarbe: #020612
- Texteditor bearbeiten / Erweitert / Layout / Padding
- Padding: 20px (links), 0 (oben, rechts, unten)
Ansicht Navigator Willkommen Session
Trenner-Sektion einrichten
Zwischen der Willkommen-Sektion und Speisekarten Sektion ein Pizza-Symbol einrichten.
Container einfügen und im Navigator als Container Trenner bezeichnen.
Container einfügen
Container bearbeiten / Stil / Hintergrund /
Farbe: #020612
Widget Bild in den Container
Dieses Bild wurde umgewandelt von .jpg in .png und der Hintergrund entfernt. Mit Adobe Express können Sie schnell und einfach den Hintergrund Ihres Bildes entfernen. Laden Sie einfach Ihr Bild hoch, bearbeiten Sie es und laden Sie das Ergebnis herunter.
Bildgröße anpassen
Bild bearbeiten / Stil / Bild / Breite: 10px
Navigator Trenner
Speisekarten-Sektion einrichten
Neuen Container einfügen und im Navigator benennen mit Container Speisekarten
Container - Hintergrundfarbe: dunkelblau
Container bearbeiten / Stil / Hintergrund / Farbe / #020612
Überschrift einfügen
Überschrift Willkommen im Bella Vista kopieren und hier einfügen und
Text verändern, sodass das Wort Speisekarte in gelb #FDC14E erscheint.
Unsere <span style="color: #FDC14E;">Speisekarte</span>
Abstand zum Pizza-Icon vergrößern
Container bearbeiten // Erweitert / Layout / Innenabstand
Widget TABS konfigurieren, TABS beschriften
Tabs bearbeiten / Inhalt / Tabs / Tab-Elemente
noch ist nicht viel zu sehen, weil weiße Schrift auf weißem Hintergrund
Widget TABS konfigurieren
Tabs bearbeiten / Stil / Tabs /
- Abstand zwischen den Tabs: 45px,
- Hintergrundfarbe #020612,
- Innenabstand 0px alle Richtungen
HOVER und AKTIV Einstellungen
Der Hintergrund bleibt dunkelblau, allerdings bei beiden Einstellungen = Schriftfarbe gelb #FDC14E
Speisekarten Überschriften BEZEICHNUNG + PREIS
Markiere z.B.DOLCI und klicke auf das PLUS Symbol
Zwei Texteditor-Module einfügen, die nebeneinander angezeigt werden sollen
links der Text: BEZEICHNUNG und rechts der Text: PREIS
Container bearbeiten / Layout / Container /
Richtung: horizontal
Justify Content: Zwischenraum
Unter dem Überschriftbereich eine Rahmenlinie
Container Speisekarte / Container bearbeiten / Stil / Rahmen
Border-Type: durchgezogen
Rahmenbreite: unten 1px
