Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak zaprojektować lepkie menu restauracji za pomocą Divi

Rifat Divi Tutorials Oct 20, 2021

Menu żywności to bardzo ważna część strony internetowej restauracji. Ponieważ zapewnia klientowi ogólne wyobrażenie o cenach żywności. Teraz, jeśli chcesz stworzyć kreatywne menu restauracji na swojej stronie, zdecydowanie powinieneś zajrzeć do Divi .

Dzisiaj poprowadzimy Cię do przyciągającego wzrok projektu menu restauracji, który ma efekt klejenia - dzięki wbudowanej opcji przyklejania Divi. Nasz projekt rozdzieli całe menu na różne kategorie i pozwoli odwiedzającym zobaczyć, w której kategorii się znajdują! Więc zróbmy to.

Przebłysk naszego ostatecznego projektu

Rzućmy okiem na końcowy rezultat naszego dzisiejszego projektu.

Widok pulpitu

Widok mobilny

Tworzenie struktury elementów

Dodawanie nowej sekcji

Kolor tła

Dodaj nową stronę z pulpitu nawigacyjnego i otwórz ją za pomocą kreatora Divi . Wybierz „Buduj od podstaw”. Teraz otwórz ustawienia sekcji i dodaj kolor tła.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz
  • Kolor tła: rgba (255,252,244,0,6)

Zdjęcie w tle

Teraz użyj obrazu wzoru jako tła. W Google dostępnych jest wiele obrazów wzorów, więc wybierz jedną z opcji.

  • Rozmiar obrazu tła: rzeczywisty rozmiar
  • Pozycja obrazu tła: górny środek
  • Powtórzenie obrazu tła: Powtórz X (w poziomie)

Rozstaw

Zmień wartości odstępów.

  • Górna wyściółka: 150px
  • Dolna wyściółka: 150px

Dodawanie nowego wiersza

Struktura kolumny

Dodaj nowy wiersz pod obrazem, korzystając z następującej struktury kolumn. Wybierz „Zwykły” z zakładki „Nowa sekcja”.

Teraz wybierz następującą strukturę kolumn.

Rozmiary

Teraz otwórz ustawienia wiersza i zmień wartości, jak podano poniżej.

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Szerokość: komputer stacjonarny i tablet: 80%, telefon: 95%
  • Maksymalna szerokość: 1580 pikseli
  • Wyrównanie wierszy: Środek

Dodaj moduł tekstowy 1 do kolumny 1

Dodaj zawartość H3

Cóż, teraz dodamy moduły do naszej struktury. Zacznijmy od modułu tekstowego w kolumnie 1. Dodaj trochę treści H3 według własnego uznania.

Ustawienia tekstu H3

Przejdź do zakładki design modułu i zmień poniższe ustawienia.

  • Czcionka nagłówka 3: Karla
  • Grubość czcionki nagłówka 3: pogrubiona
  • Nagłówek 3 Rozmiar tekstu: komputer stacjonarny i tablet: 45 pikseli, telefon: 35 pikseli
  • Nagłówek 3 Odstępy między literami: -2px
  • Nagłówek 3 Wysokość linii: 1,2 em

Rozstaw

Dodajmy wyściółkę górną i dolną.

  • Górna wyściółka: 25px
  • Dolna wyściółka: 25px

Dodaj moduł tekstowy 2 do kolumny 1

Dodaj zawartość

Dodaj moduł tekstowy pod poprzednim modułem i dodaj wybrane słowa.

Ustawienie tekstu

Zmień ustawienia modułów.

  • Czcionka tekstu: Crimson Pro
  • Kolor tekstu: #3a3a3a
  • Rozmiar tekstu: 32px

Rozstaw

Zakończ ustawienia modułu, zmieniając wartości odstępów.

  • Górny margines: 20px
  • Margines dolny: 50px
  • Lewa wyściółka: 5%
  • Prawa wyściółka: 5%

Dodaj moduł obrazu do kolumny 1

Przesyłanie obrazu

Ostatnim elementem, którego potrzebujemy w kolumnie 1, jest obraz. Dodaj moduł obrazu, a następnie dodaj wybrany obraz.

Rozmiary

Dodaj maksymalną szerokość z ustawień rozmiaru.

Rozstaw

Teraz zakończ ustawienia modułu, wprowadzając następujące zmiany w odstępach.

  • Margines dolny: Tablet: 80px, Telefon: 50px
  • Lewa wyściółka: 5%
  • Prawa wyściółka: 5%

Dodaj moduł Blurb do kolumny 2

Dodawanie treści

Dodaj wybrane treści do nowego modułu notki w kolumnie 2. Ten moduł jest modułem tekstowym, który dostarcza więcej informacji na dany temat.

Kolor tła

Dodaj biały kolor tła z zakładki treści.

  • Kolor tła: #ffffff

Ustawienia tekstu tytułu

Teraz przejdź do sekcji projektu i zmień następujące wartości.

  • Czcionka tytułu: Karla
  • Grubość czcionki tytułu: pogrubiona
  • Kolor tekstu tytułu: #3a3a3a
  • Rozmiar tekstu tytułu: komputer: 40 pikseli, tablet: 35 pikseli i telefon: 30 pikseli
  • Odstępy między literami tytułu: -2px
  • Wysokość wiersza tytułu: 1,2 em

Ustawienia tekstu podstawowego

Edytuj ustawienia tekstu podstawowego, jak wspomniano poniżej.

  • Czcionka tytułu: Karla
  • Kolor tekstu tytułu: #3a3a3a
  • Rozmiar tekstu tytułu: komputer: 18 pikseli, tablet: 25 pikseli i telefon: 20 pikseli
  • Odstępy między literami tytułu: -0,5px
  • Wysokość wiersza tytułu: 2em

Rozmiary

Teraz zmień rozmiar.

  • Szerokość treści: 100%

Rozstaw

Przejdź do ustawień odstępów i odpowiednio zmień wartości.

  • Margines dolny: 30px
  • Górna wyściółka: 40px
  • Dolna wyściółka: 40px
  • Lewa wyściółka: 8%
  • Prawa wyściółka: komputer stacjonarny: 25%, tablet i telefon: 8%

Granica

Czas zastosować ustawienia obramowania.

  • Szerokość lewej krawędzi: 3px
  • Kolor lewej krawędzi: #000000

Cień Pudełka

Używamy również cienia pudełkowego.

  • Siła rozmycia cieni w pudełku: 20px
  • Kolor cienia: rgba (0,0,0,0,05)

CSS tytułu plamy

Aby zakończyć ustawienia modułu, musimy dodać następujący wiersz kodu CSS do pola CSS tytułu blurb w zakładce Zaawansowane.

margin-bottom: 20px;

Moduł Clone Blurb

Teraz Twoja restauracja może mieć różne produkty na śniadanie. Nie musisz tworzyć każdej sekcji od zera, ponieważ Divi umożliwia kopiowanie modułu tyle razy, ile potrzebujesz. Więc sklonuj moduł notki zgodnie z twoim przedmiotem.

A następnie zmień zawartość wewnątrz elementów.

Zastosuj lepkie efekty

Moduł tekstowy 1 w kolumnie 1

Ponieważ mamy ustrukturyzowane wszystkie elementy, nie, skupimy się na dodawaniu lepkich efektów. W tym celu otwórz pierwszy moduł tekstowy w kolumnie 1.

Uczyń moduł lepkim

Przejdź do zakładki Zaawansowane i dokonaj następujących lepkich ustawień:

  • Lepka pozycja: trzymaj się góry
  • Dolny limit lepkości: wiersz
  • Przesuń otaczające lepkie elementy: Tak
  • Domyślne i trwałe style przejścia: Tak

Lepki styl dla modułu

Kolor tła

Ponieważ mamy teraz moduł lepki, możemy zastosować do niego lepkie style. Przede wszystkim wybierz czarny jako lepki kolor tła.

  • Lepki kolor tła: #000000

Kolor tekstu

Następnie zmień lepki kolor tekstu H3 na biały.

  • Kolor tekstu przyklejonego nagłówka 3: #ffffff

Rozstaw

Zakończ lepkie style, dodając następujące responsywne wartości dopełnienia lepkiego:

  • Lepka lewa wyściółka: 5%
  • Lepkie prawe wypełnienie: 5%

Sklonuj cały rząd do ponownego wykorzystania

Gdy skończysz z lepkimi efektami sekcji śniadaniowej, możesz dodać sekcję z lunchem i kolacją. Tak więc zduplikuj cały wiersz do ponownego wykorzystania.

Zmień całą zawartość drugiego rzędu

Upewnij się, że zmieniłeś zawartość rzędu sekund.

Ostateczny wynik

Więc nasz ostateczny projekt wygląda tak.

Widok pulpitu

Widok mobilny

Wniosek

Dzisiaj w tym poście staraliśmy się pokazać, jak kreatywnie możesz dostosować menu swojej następnej witryny za pomocą przyklejonej opcji Divi . To świetny interaktywny sposób na prezentację produktów spożywczych klientom. Jeśli masz jakieś sugestie lub prośby o samouczek, podziel się swoimi przemyśleniami w polu komentarza. Jeśli uznasz ten artykuł za przydatny, udostępnienie będzie cudowne.