Jak korzystać z ekskluzywnego pakietu układów piekarni w Cyberponiedziałek, aby utworzyć stronę z lokalizacjami dla swojej firmy?

W tym roku otrzymanie oferty na Cyberponiedziałek oznacza również zdobycie mnóstwa darmowych rzeczy! Oprócz skorzystania z 25% zniżki, każdy, kto kupi nowe członkostwo Elegant Themes lub uaktualni swoje istniejące konto (lub kto ma już członkostwo dożywotnie), otrzyma również 6 darmowych i ekskluzywnych pakietów layoutów, które są dostępne TYLKO do pobrania podczas naszej wyprzedaży w Cyber ​​​​poniedziałek.

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Zajrzyj do ekskluzywnego pakietu układów piekarni w Cyberponiedziałek

Jednym z ekskluzywnych pakietów układów, które oferujemy jako dożywotni członkowie i nowi klienci w Cyberponiedziałek, jest ten dla piekarni. Składa się z 5 smacznych stron, które sprawią, że każda witryna piekarni stanie się nie do odparcia.

Projekt strony docelowej

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Projekt strony z przepisami

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Projekt strony menu

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

O projekcie strony

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Projekt strony kontaktowej

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Zdobądź ekskluzywny pakiet układów piekarni w Cyberponiedziałek

Zanim przejdziesz do tego przypadku użycia, musisz położyć ręce na Ekskluzywnym pakiecie układów piekarni w Cyberponiedziałek, który możesz zdobyć, zostając nowym członkiem Elegant Themes, uaktualniając istniejące konto lub będąc już u nas dożywotnim członkiem. Jeśli rzeczywiście jesteś już dożywotnim członkiem, możesz zalogować się do obszaru naszych członków i pobrać wszystkie nasze ekskluzywne pakiety układów tutaj. Wszyscy inni będą musieli użyć poniższego przycisku, aby kupić lub uaktualnić, zanim będą mogli śledzić resztę naszego samouczka.

Pobierz ekskluzywny układ, zanim zniknie!

Jesteś już dożywotnim członkiem? Możesz pobrać pakiet już teraz, nie musisz brać udziału w naszej wyprzedaży w Cyber ​​​​poniedziałek!

Jak korzystać z ekskluzywnego pakietu układów piekarni w Cyberponiedziałek, aby utworzyć stronę z lokalizacjami dla swojej firmy?

W dalszej części tego posta założymy, że albo skorzystałeś z naszej oferty na Cyber ​​Poniedziałek, albo że jesteś już członkiem dożywotnim i masz dostęp do pakietu Bakery Layout Pack.

Po pobraniu nowego pakietu układów piekarni z naszego obszaru członkowskiego możesz obejrzeć poniższy film, aby zobaczyć, jak łatwo jest go skonfigurować. Zachęcamy również do śledzenia tego samouczka, aby przygotować witrynę do dalszego dostosowywania.

Przejdźmy teraz do samego przypadku użycia.

Tworząc witrynę internetową dla firmy mającej więcej niż jedną lokalizację, ważne jest, aby zastanowić się, jak najlepiej przekazać te informacje odwiedzającym. Muszą wiedzieć, która lokalizacja jest najbliżej nich i wszelkie ważne informacje specyficzne dla tej lokalizacji. Zbudowanie strony Lokalizacje dla witryny to świetny początek.

W tym przypadku pokażę, jak szalenie łatwo jest zbudować stronę z profesjonalnymi lokalizacjami dla Twojej firmy przy użyciu pakietu Bakery Layout Pack.

Korzystając z układu strony kontaktowej piekarni, pokażę Ci, jak dodać dodatkowe piny do modułu mapy, aby odzwierciedlić wszystkie lokalizacje Twojej firmy, wraz z dobrze zorganizowanymi i zaprojektowanymi sekcjami do wyświetlania ważnych informacji dla każdej lokalizacji. Ponieważ możemy korzystać z elementów projektu już dostarczonych przez layout, proces ten jest odświeżający i zabawny (przynajmniej dla mnie).

Zacznijmy.

Zacznij od użycia układu kontaktów do zbudowania swojej strony lokalizacji

Układ strony Kontakt piekarni jest idealny do wykorzystania jako podstawa dla naszej nowej strony Lokalizacje. Na górze znajduje się moduł mapy, którego użyjemy do zaprezentowania każdej lokalizacji naszej firmy. Dodatkowo ma kilka innych elementów, takich jak moduły tekstowe, które są już zaprojektowane, które możemy zmieniać i modyfikować w razie potrzeby.

Utwórz nową stronę

Najpierw musisz utworzyć nową stronę i nadać jej tytuł (coś w rodzaju „Nasze lokalizacje”) i kliknąć, aby użyć divi Builder, a następnie wizualnego kreatora.

Załaduj układ strony kontaktowej piekarni

W tym momencie powinieneś już mieć przesłane układy stron do swojej biblioteki Divi. Kliknij, aby otworzyć fioletowe menu na dole strony i wybierz przycisk „Dodaj z biblioteki” z ikoną plusa. Wybierz wsad z biblioteki, a następnie wybierz z listy układ Kontakt piekarni. Układ zostanie natychmiast załadowany na stronie.

Publikować.

Dodawanie sekcji dla określonych informacji o lokalizacji

Naprawdę nie mamy zbyt wielu treści na stronie kontaktowej, które można wykorzystać do tworzenia dodatkowych treści dla naszych konkretnych lokalizacji. Przejdźmy więc do strony docelowej piekarni i wybierzmy wiersz z drugiej sekcji strony i zapiszmy go w Bibliotece.

Teraz wróć do strony lokalizacji. Zduplikuj sekcję na dole strony zawierającą formularz kontaktowy (nie usuwaj tego, będzie nam potrzebny później). W sekcji bezpośrednio pod mapą usuń cały wiersz z sekcji i dodaj wiersz zapisany z biblioteki.

Następnie zmień układ kolumn wiersza na układ dwie trzecie jednej trzeciej.

Zlokalizuj moduł tekstowy z zawartością adresu w prawej kolumnie dolnej sekcji. Przeciągnij go pod moduł obrazu w prawej kolumnie wiersza w sekcji powyżej.

Następnie zaktualizuj Treść w modułach tekstowych w lewej kolumnie, aby reprezentować konkretną lokalizację Twojej firmy. Do mojego przykładu dodam następujące:

Główna siedziba
Nowy Jork

Teraz zaktualizuj moduł obrazu w prawej kolumnie, aby zawierał obraz lokalizacji Twojej firmy.

Będzie to przyjemna sekcja dla każdej z notatek dotyczących konkretnej lokalizacji.

Teraz wystarczy zduplikować tę sekcję, aby dodać kolejne lokalizacje.

Powiel tę sekcję dwukrotnie, aby uzyskać łącznie 3 sekcje lokalizacji. Następnie zmień kolor tła sekcji środkowej lokalizacji na biały, aby lepiej podzielić sekcje.

Następnie zaktualizuj zduplikowane sekcje o zawartość specyficzną dla lokalizacji. W tym przykładzie, oprócz mojej lokalizacji w Nowym Jorku, utworzę również sekcję dla San Francisco i Houston.

Zaprojektuj sekcję stopki formularza kontaktowego

Pamiętaj, że zapisaliśmy na dole sekcję zawierającą nasz formularz kontaktowy. Będzie to świetna sekcja stopki na naszej stronie z lokalizacją. Wszystko, co musimy zrobić, to trochę go poprawić.

Najpierw usuńmy pozostałe moduły w prawej kolumnie. Następnie zaktualizuj układ kolumn wiersza do układu jednokolumnowego. Teraz wszystko, co powinieneś zobaczyć, to formularz kontaktowy w jednej kolumnie.

Następnie kliknij, aby edytować ustawienia wiersza i zaktualizować następujące elementy:

W zakładce treści…

kolor tła: #ffffff

W zakładce Projekt…

niestandardowe dopełnienie: 5% Góra, 5% Prawo, 5% Dół, 5% Lewo

Cień pudełka: [wybierz cień pudełka]

Dodajmy teraz obraz tła do naszej sekcji. Przejdź do ustawień sekcji i wybierz jeden z obrazów tła zawartych w układzie.

Świetny! Przejdźmy teraz do modułu mapy.

Dodaj swój klucz API Google

W tym momencie musisz upewnić się, że utworzyłeś swój klucz API Google, a następnie dodałeś go do opcji motywu.

Zaktualizuj moduł mapy za pomocą nowych pinezek lokalizacji

W tym momencie większość naszej strony została ukończona. Pozostały tylko aktualizacje modułu mapy u góry strony. Musimy dodać nowe lokalizacje pinezek dla trzech sekcji, które utworzyliśmy w sekcjach strony (Nowy Jork, San Francisco i Houston).

Kliknij, aby edytować moduł mapy i zaktualizować ustawienia w następujący sposób:

Usuń jedną pinezkę pokazaną w module, aby zacząć od nowa. Następnie dodaj nowy pin i zaktualizuj ustawienia w następujący sposób:

Tytuł: Piekarnia w Nowym Jorku
Treść: Więcej informacji
Mapa Pin Adres: Nowy Jork

Kliknij przycisk Znajdź.

Następnie dodaj nowy pin i zaktualizuj ustawienia w następujący sposób:

Tytuł: Piekarnia San Francisco
Treść: więcej informacji
Mapa Pin Adres: San Francisco

Kliknij przycisk Znajdź.

Następnie dodaj nowy pin i zaktualizuj ustawienia w następujący sposób:

Tytuł: Piekarnia Houston
Treść: więcej informacji
Mapa Pin Adres: Houston, Teksas

Kliknij przycisk Znajdź.

Możesz zostawić adres centrum mapy jako Nowy Jork. Ale dostosuj wyświetlanie mapy, aby oddalić się na tyle, aby móc zobaczyć wszystkie lokalizacje, gdy odwiedzający po raz pierwszy wyświetli mapę.

Dodaj linki zakotwiczenia do pól zawartości przypinania

Jako dodatkową funkcję możesz poprawić wrażenia użytkownika, dodając link do kotwicy w treści pinezki, który pojawia się po kliknięciu pinezki. Ten link do zakotwiczenia przeniesie użytkownika w dół strony do określonej sekcji strony, która prezentuje informacje o tej lokalizacji.

Otwórz ustawienia modułu mapy, a następnie edytuj pierwsze ustawienia pinów. Zaznacz tekst w polu treści, który brzmi „Więcej informacji”, a następnie kliknij ikonę linku, aby utworzyć link. Jako adres URL wpisz „#newyork” i kliknij OK.

Zrób to samo z pinezką San Francisco (użyj adresu URL „#sanfran”) i pinezką Houston (użyj adresu URL „#houston”).

Teraz wszystko, co musisz zrobić, to dodać niestandardowy identyfikator CSS do każdej sekcji, który będzie odpowiadał adresom URL linków, które właśnie utworzyłeś w pinach.

W sekcji „Nowy Jork” zaktualizuj ustawienia sekcji na karcie Zaawansowane o identyfikator CSS „newyork” i zapisz ustawienia.

Teraz, gdy użytkownik kliknie link „więcej informacji” (z adresem url #newyork) w pinie nowojorskiej, strona przeskoczy do tej sekcji.

Zrób to samo dla sekcji San Francisco (użyj identyfikatora CSS „sanfran”) i sekcji Houston (użyj identyfikatora CSS „houston”)

Otóż ​​to. Wszystko gotowe!