Jak stworzyć dedykowane menu dla Landing Page?
Roksana
Ostatnia aktualizacja: 4 miesiące temu
System CONREGO umożliwia łatwe i intuicyjne tworzenie stron internetowych, opartych na zakładkach.
Aby dostosować stronę do bardziej zaawansowanych potrzeb, w tym tworzenia landing page, przedstawiamy sposób na zbudowanie odrębnego menu, które idealnie wpisuje się w strukturę takiej strony.
Krok 1: Ukrywanie domyślnego menu
Aby uniknąć powielania menu na stronie typu landing page, należy najpierw ukryć domyślny pasek nawigacyjny. W tym celu przejdź do sekcji:
Strona WWW > Stylistyka strony > wybierz Pasek nawigacyjny, a następnie wybierz opcję Ukryj element.
Krok 2: Tworzenie nowego menu
Po ukryciu domyślnego menu możesz przystąpić do tworzenia własnego. Pierwszym krokiem jest dodanie struktury HTML menu. W tym celu skopiuj poniższy kod i wklej go w sekcji Konfiguracja > Dla deweloperów > header.html.
Krok 3: Stylowanie menu
Następnie, aby dostosować wygląd swojego menu, przejdź do sekcji Konfiguracja > Dla deweloperów > custom.css, gdzie dodasz odpowiednie style CSS.
Warto pamiętać, że zarówno kod HTML, jak i CSS możesz dowolnie modyfikować. W kodzie pozostawiono komentarze, które ułatwią Ci edytowanie poszczególnych elementów menu.
Krok 4: Dodanie funkcjonalności hamburgera (wersja mobilna)
Aby menu działało poprawnie w wersji mobilnej, po kliknięciu na przycisk hamburgera, należy dodać odpowiedni kod JavaScript. Wklej poniższy kod w sekcji Konfiguracja > Dla deweloperów > custom.js.
Krok 5: Powiązanie menu z sekcjami strony
Kiedy Twoje menu jest już gotowe i wygląda tak, jak tego oczekiwałeś, przejdź do sekcji Strona WWW > Lista stron i wybierz opcję Edycja dla wybranej zakładki. Następnie w blokach treści dodaj odpowiednie ID elementów, aby po kliknięciu w menu użytkownik został automatycznie przeniesiony do wskazanej sekcji strony.
Mamy nadzieję, że Twoje menu jest już gotowe i działa zgodnie z oczekiwaniami. Jeśli napotkasz jakiekolwiek trudności, pamiętaj, że masz pełną swobodę w edytowaniu kodu HTML, CSS i JavaScript, by dostosować stronę do swoich potrzeb.