Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

Wie man ein klebriges Restaurant-Menü mit Divi entwirft

Rifat Divi Tutorials May 7, 2021

Speisekarten sind ein sehr wichtiger Teil einer Restaurant-Website. Weil es dem Kunden eine Gesamtvorstellung über die Lebensmittelpreise gibt. Nun, wenn Sie ein kreatives Restaurant-Menü für Ihre Website machen möchten, sollten Sie auf jeden Fall in Divi schauen.

Heute führen wir Sie zu einem auffälligen Restaurant-Menü-Design, das einen klebrigen Effekt hat - mit der eingebauten klebrigen Option von Divi. Unser Design wird das gesamte Menü in verschiedene Kategorien aufteilen und den Besuchern sehen können, in welcher Kategorie sie sich befinden! Also, lassen Sie uns es tun.

Blick auf unser endgültiges Design

Werfen wir einen kurzen Blick auf das Endergebnis unseres heutigen Designs.

Desktopansicht

Mobile Ansicht

Elementstrukturerstellung

Hinzufügen eines neuen Abschnitts

Hintergrundfarbe

Fügen Sie eine neue Seite aus Ihrem Dashboard hinzu, und öffnen Sie sie mit Divi builder. Gehen Sie mit "Build From Scratch". Öffnen Sie nun die Abschnittseinstellungen, und fügen Sie eine Hintergrundfarbe hinzu.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Hintergrundfarbe: rgba(255,252,244,0.6)

Hintergrundbild

Verwenden Sie nun ein Musterbild als Hintergrund. Es gibt eine Menge von Musterbildern bei Google, so wählen Sie eine Ihrer Entscheidungen.

  • Hintergrundbildgröße: Tatsächliche Größe
  • Hintergrundbildposition: Top Center
  • Hintergrundbild-Wiederholung: Wiederholen X (horizontal)

Abstand

Ändern Sie die Abstandswerte.

  • Top Polsterung: 150px
  • Untere Polsterung: 150px

Neue Zeilenhinzufügen

Spaltenstruktur

Fügen Sie eine neue Zeile unter dem Bild mithilfe der folgenden Spaltenstruktur hinzu. Wählen Sie "Regular" aus der Registerkarte "Neuer Abschnitt".

Wählen Sie nun die folgende Spaltenstruktur aus.

Größenanpassung

Öffnen Sie nun die Zeileneinstellungen, und ändern Sie die unten angegebenen Werte.

  • Verwenden Sie Custom Gutter Width: Ja
  • Gutter breite: 1
  • Maximale Breite: 1580px
  • Zeilenausrichtung: Mitte

Hinzufügen von Textmodul 1 zu Spalte 1

H3-Inhalte hinzufügen

Nun, jetzt werden wir Module zu unserer Struktur hinzufügen. Beginnen wir mit einem Textmodul in Spalte 1. Fügen Sie einige H3-Inhalte Ihres Wunsches hinzu.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls, und ändern Sie die folgenden Einstellungen.

  • Überschrift 3 Schriftart: Karla
  • Überschrift 3 Schriftgewicht: Fett
  • Überschrift 3 Buchstabenabstand: -2px
  • Position 3 Linienhöhe: 1.2em

Abstand

Lassen Sie uns einige obere und untere Polsterung hinzufügen.

  • Top Polsterung: 25px
  • Untere Polsterung: 25px

Hinzufügen von Textmodul 2 zu Spalte 1

Hinzufügen von Inhalten

Fügen Sie ein Textmodul unter dem vorherigen Modul hinzu, und fügen Sie einige Wörter Ihrer Wahl hinzu.

Texteinstellung

Ändern Sie die Moduleinstellungen.

  • Textschriftart: Crimson Pro
  • Textfarbe: #3a3a3a
  • Textgröße: 32px

Abstand

Beenden Sie die Moduleinstellungen, indem Sie die Abstandswerte ändern.

  • Obere Marge: 20px
  • Unterer Rand: 50px
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

Hinzufügen des Bildmoduls zu Spalte 1

Bild-Upload

Das letzte Element, das wir in Spalte 1 benötigen, ist ein Bild. Fügen Sie ein Bildmodul hinzu, und fügen Sie dann ein Bild Ihrer Wahl hinzu.

Größenanpassung

Fügen Sie eine maximale Breite aus den Größeneinstellungen hinzu.

Abstand

Schließen Sie nun die Moduleinstellungen ab, indem Sie die folgenden Änderungen am Abstand implementieren.

  • Unterer Rand: Tablet: 80px, Tel.: 50px
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

Hinzufügen von Blurb-Modul zu Spalte 2

Inhaltshinzufügen

Fügen Sie einige Inhalte Ihrer Wahl zu einem neuen Unschärfemodul in Spalte 2 hinzu. Dieses Modul ist ein textbasiertes Modul, das weitere Informationen zu einem einzelnen Thema liefert.

Hintergrundfarbe

Fügen Sie eine weiße Hintergrundfarbe auf der Registerkarte Inhalt hinzu.

  • Hintergrundfarbe: #ffffff

Titel Texteinstellungen

Wechseln Sie nun zum Entwurfsabschnitt, und ändern Sie die folgenden Werte.

  • Titel Schriftart: Karla
  • Titel Font Weight: Bold
  • Titel Textfarbe: #3a3a3a
  • Titel Letter Spacing: -2px
  • Titel Linienhöhe: 1.2em

Körpertexteinstellungen

Bearbeiten Sie die Körpertexteinstellungen wie unten erwähnt.

  • Titel Schriftart: Karla
  • Titel Textfarbe: #3a3a3a
  • Titel Letter Spacing: -0.5px
  • Titel Linienhöhe: 2em

Größenanpassung

Ändern Sie nun die Größe.

  • Inhaltsbreite: 100%

Abstand

Wechseln Sie zu den Abstandseinstellungen, und ändern Sie die Werte entsprechend.

  • Unterer Rand: 30px
  • Top Polsterung: 40px
  • Untere Polsterung: 40px
  • Linke Polsterung: 8%

Grenze

Es ist an der Zeit, Rahmeneinstellungen anzuwenden.

  • Linke Rahmenbreite: 3px
  • Linke Rahmenfarbe: #000000

Box Shadow

Wir verwenden auch einen Kastenschatten.

  • Box Shadow Blur Stärke: 20px
  • Schattenfarbe: rgba(0,0,0,0.05)

Blurb-Titel CSS

Um die Moduleinstellungen abzuschließen, müssen wir die folgende Zeile des CSS-Codes dem CsS-Feld für unscharfer Titel auf der erweiterten Registerkarte hinzufügen.

margin-bottom: 20px;

Klon-Vschärfemodul

Jetzt kann Ihr Restaurant eine Vielzahl von Artikeln zum Frühstück haben. Sie müssen nicht jeden Abschnitt von Grund auf neu erstellen, da Divi Es Ihnen ermöglicht, Ihr Modul so oft zu kopieren, wie Sie benötigen. Also, klonen Sie das Unschärfemodul nach Ihrem Element.

Und ändern Sie dann den Inhalt innerhalb der Elemente.

Sticky Effects anwenden

Textmodul 1 in Spalte 1

Da wir alle Elemente strukturiert haben, nein, werden wir uns auf das Hinzufügen von klebrigen Effekten konzentrieren. Öffnen Sie dazu das erste Textmodul in Spalte 1.

Machen Sie Modul Sticky

Wechseln Sie zur erweiterten Registerkarte und nehmen Sie die folgenden Sticky-Einstellungen vor:

  • Sticky Position: Stick to Top
  • Bottom Sticky Limit: Reihe
  • Offset Surrounding Sticky Elements: Ja
  • Übergangsstandard und Haftstile: Ja

Sticky Style für Modul

Hintergrundfarbe

Da wir jetzt ein klebriges Modul haben, können wir klebrige Stile darauf anwenden. Wählen Sie zunächst Schwarz als klebrige Hintergrundfarbe aus.

  • Sticky Hintergrundfarbe: #000000

Textfarbe

Ändern Sie dann die klebrige H3-Textfarbe in Weiß.

  • Sticky Überschrift 3 Textfarbe: #ffffff

Abstand

Und schließen Sie die klebrigen Stile ab, indem Sie die folgenden reaktionsschnellen Sticky-Padding-Werte hinzufügen:

  • Sticky Left Padding: 5%
  • Sticky Right Padding: 5%

Klonen Sie die gesamte Zeile für die Wiederverwendung

Nachdem Sie mit den klebrigen Effekten des Frühstücksabschnitts fertig sind, sollten Sie den Mittags- und Dinerbereich hinzufügen. Duplizieren Sie also die gesamte Zeile zur Wiederverwendung.

Ändern des gesamten Inhalts für die zweite Zeile

Stellen Sie sicher, dass Sie den Inhalt für Sekundenzeile geändert haben.

Endergebnis

Unser endgültiges Design sieht also so aus.

Desktopansicht

Mobile Ansicht

Schlussfolgerung

Heute haben wir in diesem Beitrag versucht, Ihnen zu zeigen, wie kreativ Sie Ihr nächstes Website-Menü mit Divis klebrige Option anpassen können. Dies ist eine großartige interaktive Möglichkeit, Lebensmittel für Kunden anzuzeigen. Wenn Sie Vorschläge oder Tutorial-Anfragen haben, teilen Sie bitte Ihre Gedanken im Kommentarfeld. Wenn Sie diesen Artikel nützlich fanden, wird eine Aktie schön sein.