Jak osadzić galerie Divi w przełącznikach, aby utworzyć niestandardowe menu restauracji?

Używanie przełączników na swojej stronie internetowej to świetny sposób na uporządkowanie treści w przejrzysty i zwięzły sposób. Może to pomóc poprawić wrażenia użytkownika, zmniejszając przewijanie i dając użytkownikowi większą kontrolę nad tym, co chce zobaczyć na Twojej stronie. Menu restauracji online jest dobrym przykładem, w którym przełączniki mogą dobrze działać. Użytkownik może łatwo znaleźć element menu, który mu się podoba i kliknąć go, aby uzyskać więcej informacji.

W tym samouczku pokażę, jak stworzyć intuicyjne i przyjazne dla urządzeń mobilnych przełączniki dla menu restauracji za pomocą przełączników Divi. Pokażę Ci nawet, jak zoptymalizować przełącznik pod kątem urządzeń mobilnych i osadzić galerie obrazów Divi w treści przełącznika, aby zaprezentować wspaniałe zdjęcia konkretnych potraw.

Zacznijmy.

Przed i po

Oto zapowiedź projektu menu restauracji, który będziemy budować przed i po.

Przed

Później

Pierwsze kroki

Zastąpienie wyświetlania galerii WordPress wyświetlaczem galerii Divi

Divi umożliwia zastąpienie domyślnego wyświetlacza galerii WordPress wyświetlaczem Galerii Divi. Tak więc za każdym razem, gdy tworzysz galerię WordPress i osadzasz ją na swojej stronie, galeria będzie wyświetlana jak galeria za pomocą modułu Divi Gallery. Pozwala to dodawać galerie obrazów Divi do dowolnego modułu w Divi Builder (więcej na ten temat później). Aby wprowadzić tę zmianę, przejdź do Divi > Opcje motywu. Na karcie Ogólne kliknij, aby włączyć opcję Galeria Divi.

Ustawianie koloru akcentu motywu (opcjonalnie)

Ponieważ wstawimy galerię Divi do modułu przełączania, kolor ikony wyświetlany po najechaniu kursorem na obraz w galerii automatycznie odziedziczy kolor akcentu ustawiony dla motywu Divi. Możesz ustawić kolor akcentu motywu z pulpitu nawigacyjnego WordPress, przechodząc do Divi > Dostosowywanie motywu > Ustawienia ogólne > Ustawienia układu. W obszarze Ustawienia układu zmień kolor dostępu do motywu na następujący:

Kolor akcentu motywu: #a06d51

Jest to kolor, który będzie pasował do układu menu piekarni, którego będziemy używać w tym samouczku.

Aktualizacja domyślnego rozmiaru ikony przełączania w module Customizer (opcjonalnie)

Pomyślałem, że w przypadku tego projektu pomocne byłoby wyświetlenie większej ikony przełączania podczas korzystania z modułu Divi Toggle. Możesz zmienić domyślny rozmiar modułu przełączania, przechodząc do Divi > Dostosowywanie modułu. Następnie wybierz z listy moduł przełączania i zaktualizuj rozmiar ikony w następujący sposób:

Przełącz rozmiar ikony: 32

Konfigurowanie nowej strony z układem strony menu piekarni

Na początek musisz utworzyć nową stronę, nadać jej tytuł i wdrożyć Divi Builder. Wybierz opcję „Wybierz gotowy układ”.

Z okna wyskakującego ładowania z biblioteki wybierz pakiet układu piekarni, a następnie kliknij, aby użyć układu strony menu piekarni.

Po załadowaniu układu na stronę opublikuj swoją stronę. Następnie kliknij przycisk „Build on Front End”. a następnie opublikuj swoją stronę. Następnie kliknij, aby zbudować z przodu.

Po zakończeniu możesz rozpocząć projektowanie menu!

Implementacja niestandardowego projektu menu restauracji za pomocą przełączników Divi i galerii obrazów

Projektowanie przełącznika pozycji menu

Gdy Divi Builder jest aktywny z przodu, dodaj moduł Toggle pod modułem tekstowym z podtytułem „Sweet Tooth”.

Na razie możesz pozostawić domyślną zawartość makiety używaną dla zawartości tytułu i treści. Musisz jednak dodać cenę pozycji menu w treści głównej zakładki. Kliknij kartę Tekst (zamiast Wizualny) i dodaj następujący kod HTML pod bieżącym tekstem domyślnym.

<h5>$8.00</h5>

Następnie zacznij aktualizować ustawienia przełączania w następujący sposób:

• Kolor ikony: #a06d51
• Otwórz przełącznik koloru tekstu: #333333
• Zamknięty przełącznik koloru tekstu: #333333
• Zamknięty przełącznik koloru tła: #ffffff

• Czcionka tytułu: Patua One
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: TT
• Odstępy między literami tytułu: 1px
• Wysokość wiersza tytułu: 4em
• Niestandardowe wypełnienie: 0px na górze, 0px na dole

Aby zwiększyć klikalny obszar tytułu przełączania, zwiększa się wysokość wiersza tytułu i usuwa górne i dolne dopełnienie.

Teraz dodajmy lewą ramkę do naszego przełącznika.

• Szerokość lewej krawędzi: 5px
• Kolor lewej krawędzi: #a06d51

Dodawanie galerii obrazów do modułu przełączania

Jak wspomniano wcześniej, po włączeniu opcji Divi Gallery w opcjach motywu Divi, osadzona galeria WordPress nabierze stylu Galerii Divi. Pozwala to na osadzenie galerii obrazów w stylu Divi w dowolnym module. W tym przykładzie chcemy dodać kilka obrazów wewnątrz modułu toggle, aby wyświetlić niektóre obrazy konkretnego elementu menu restauracji. Aby to zrobić, otwórz ustawienia przełączania i kliknij przycisk Dodaj multimedia nad polem treści.

W wyskakującym okienku Media Library wybierz kartę Utwórz galerię po lewej stronie. Następnie wybierz obrazy, których chcesz użyć w galerii, i kliknij „Utwórz nową galerię”.

W sekcji Edytuj galerię wyskakującego okienka zignoruj ​​ustawienia galerii, ponieważ style Galerii Divi zastąpią te ustawienia galerii WordPress. Następnie kliknij przycisk Wstaw galerię.

Spowoduje to umieszczenie skróconego kodu galerii w treści modułu przełączania. Jeśli chcesz, aby galeria była wyświetlana po bieżącym tekście głównym, umieść skrót po treści.

Dostosowywanie dopełnienia wiersza dla smartfona

Zawartość będzie dość ciasna z obecnymi odstępami w gotowym układzie. Musimy zaktualizować ustawienia wierszy, aby uzyskać więcej miejsca na smartfonie. Aby to zrobić, otwórz ustawienia wiersza zawierającego przełączniki menu Twojej restauracji i zaktualizuj następujące elementy:

• Niestandardowe dopełnienie (telefon): 0px w lewo, 0px w prawo

Powiel przełącznik w razie potrzeby

Aby dodać więcej pozycji menu, po prostu zduplikuj moduł Przełącz i zaktualizuj zawartość o nowe galerie tekstu i obrazów w razie potrzeby. Następnie możesz usunąć oryginalne elementy menu dostarczone z gotowym układem.

Ostateczny wynik

Sprawdźmy teraz efekt końcowy projektu.

Zmiana liczby kolumn w galerii

Domyślnie galeria ma układ składający się z trzech kolumn na wszystkich szerokościach przeglądarki i na wszystkich urządzeniach. Jednak dzięki efektowi lightbox użytkownicy będą mogli zobaczyć większą wersję po kliknięciu elementu galerii. Tak więc mniejsze obrazy mogą nadal działać. Ale jeśli chcesz zmienić liczbę kolumn, zawsze możesz dodać mały fragment kodu CSS. W tym przykładzie zmienię galerię, aby wyświetlać obrazy w dwóch kolumnach. Aby to zrobić, najpierw otwórz ustawienia przełączania i dodaj niestandardową klasę CSS w następujący sposób:

Klasa CSS: dwukolumnowa

Następnie otwórz ustawienia strony i dodaj następujący niestandardowy CSS:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Zmiana koloru nakładki galerii obrazów w module Customizer

Jeśli chcesz zmienić kolor nakładki elementu galerii bez użycia niestandardowego CSS, możesz zmienić domyślne ustawienia modułu galerii w module dostosowywania. Aby to zrobić, przejdź do Divi > Dostosowanie modułu. Następnie kliknij moduł galerii i zmień kolor nakładki kursora na dowolny.

Końcowe przemyślenia

Mamy nadzieję, że ten samouczek zainspiruje Cię do korzystania z modułu Divi Toggle do tworzenia niesamowitych menu restauracji. Jako bonus możesz nauczyć się nowej sztuczki, aby osadzić niektóre galerie Divi w dowolnym module, który chcesz (nie tylko przełącza). Jedynym ograniczeniem jest dostosowanie liczby kolumn, które chcesz wyświetlić w osadzeniu galerii. Możesz jednak dodać mały fragment niestandardowego kodu CSS, aby umieścić Cię na właściwej drodze.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!