Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak utworzyć przewijany przyklejony nagłówek dla unikalnej nawigacji za pomocą linków do kotwicy w Divi

Rifat Divi Tutorials Oct 18, 2021

Czy kiedykolwiek myślałeś o stworzeniu strony, która ma niezwykły system nawigacji z przyklejonymi linkami do nagłówków na tej samej stronie? Dobrze! Divi otworzyło drzwi do wielu możliwości dla twórców stron internetowych. Dzięki Divi możesz tworzyć wszelkiego rodzaju wspaniałe projekty. Dzisiaj zaprojektujemy stronę z treścią, która pozwoli naszym użytkownikom przeglądać ją za pomocą przyklejonych nagłówków jako linków kotwiczących. Nagłówki będą kolejno przyklejane u góry strony, a odwiedzający mogą kliknąć tylko nagłówki, aby przejść bezpośrednio do sekcji. Brzmi nieźle! Następnie przejdźmy do dzisiejszego samouczka, w którym będziemy tworzyć ten styl za pomocą wbudowanej funkcji Divi o nazwie - „Sticky Option”.

Podgląd projektu

Tak będzie wyglądał nasz dzisiejszy projekt.

Sekcja pierwsza: Pierwsze kroki

Uważamy, że pomyślnie zainstalowałeś i aktywowałeś motyw Divi . Teraz dodaj nową stronę z pulpitu nawigacyjnego i otwórz ją za pomocą kreatora Divi. Tutaj przejdziemy do drugiej opcji, która mówi „Wybierz gotowy układ”.

Przyjrzymy się pakietowi układu zestawu posiłków

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Układ aktywujemy za pomocą opcji „Użyj tego demo”.

Sekcja druga: Modyfikacja układu

Usuń wiersze

Po zakończeniu importowania układu usuń dwa ostatnie dolne wiersze.

Teraz pozostaje ci jeden wiersz o nazwie „Krok-1”.

Tworzenie nowego wiersza i dodawanie treści

Dodaj zaznaczony wiersz pod pierwszym.

Teraz wybierz wiele modułów razem i przeciągnij go do nowo utworzonego wiersza.

Sekcja trzecia: Tworzenie przyklejonego nagłówka

W tym układzie będą cztery rzędy, a każdy z nich będzie zawierał przyklejony nagłówek w lewej kolumnie. Stworzymy pierwszy i powielimy go dla pozostałych wierszy.

Krok pierwszy: utwórz lepki nagłówek dla pierwszego rzędu

Dodaj moduł tekstowy do lewej kolumny. To będzie nasz lepki nagłówek dla tego wiersza.

Teraz zaktualizuj następujące ustawienia w zakładce projekt. Upewnij się, że dokonałeś zmian w nagłówku H4.

  • Grubość czcionki nagłówka 4: pogrubiona
  • Styl czcionki nagłówka 4: TT
  • Nagłówek 4 Wyrównanie tekstu: do środka
  • Rozmiar tekstu nagłówka 4: 15px
  • Nagłówek 4 Odstępy między literami: 3px
  • Nagłówek 4 Wysokość linii: 2em

Zaktualizuj również ustawienia odstępów i zaokrąglonych narożników.

  • Margines: 0px
  • Wypełnienie: 10px
  • Zaokrąglone rogi: 3px

Na karcie Zaawansowane zaktualizuj następujące ustawienia efektów przyklejonych.

  • Sticky Bottom Offset: 150px (komputer), 0px (tablet)
  • Górny limit lepkości: sekcja (komputer), brak (tablet)
  • Dolny limit lepkości: sekcja (komputer), rząd (tablet)
  • Odsunięcie od otaczających lepkich elementów: NIE

Teraz wróć do zakładki treści i zmień tekst według potrzeb. Wstaw też tekst z nagłówkiem H4, ponieważ wcześniej modyfikowaliśmy ustawienia H4. Zmień także lepki kolor tła.

  • Lepki kolor tła: #febd2d

Wróć do zakładki Zaawansowane i zaktualizuj indeks Z w stanie przyklejonym. Dzięki temu tekst na górze pozostanie na urządzeniach mobilnych.

  • Indeks Z (lepki): 10003

Dodaj więcej treści

Musimy dołączyć trochę więcej treści pod obrazem, abyśmy mieli wystarczająco dużo treści do przewijania. Dodaj więc kolejny moduł tekstowy pod obrazkiem i dodaj wybrane przez siebie teksty.

Powiel wiersz 1

Na koniec utwórz replikę pierwszego rzędu, powielając go.

Krok drugi: utwórz lepki nagłówek dla drugiego rzędu

Teraz zmień nagłówek H4 w kolumnie 1.

Teraz zmień lepkie ustawienia.

  • Przyklejony górny offset: 50px (komputer), 0px (tablet)
  • Przyklejony dolny offset: 100px (komputer)
  • Górny limit lepkości: sekcja (tablet)

Zaktualizuj wartość indeksu Z.

  • Indeks Z (lepki): 10002

Powiel wiersz 2

Następnie ponownie wykonaj replikę drugiego rzędu, powielając ją.

Krok trzeci: utwórz lepki nagłówek dla trzeciego rzędu

Ponownie zmień H4 w kolumnie 1 i nazwij ją jako Krok - 3.

Teraz zmień lepkie opcje tekstu.

  • Przyklejony górny offset: 100px (komputer)
  • Przyklejony dolny offset: 50px (komputer)

Ponownie zaktualizuj wartość indeksu Z dla trzeciego wiersza.

  • Indeks Z (lepki): 10001

Zaktualizuj indeks Z dla każdej kolumny jeden

Umieściliśmy już wartość indeksu Z we wszystkich nagłówkach H4. Teraz zaktualizujemy również wartość dla każdej kolumny zawierającej te przyklejone nagłówki. Otwórz każdą kolumnę i zaktualizuj wartość.

  • Rząd 1
  • Rząd 2
  • Rząd 3

Sekcja trzecia: Linki kotwiczne do przyklejonych nagłówków

Teraz przypiszemy identyfikator CSS do wierszy, aby użytkownik mógł łatwo obsługiwać za ich pośrednictwem całą stronę.

Wiersz 1: link do kotwicy

Otwórz ustawienia wiersza 1 i dodaj następujący identyfikator CSS.

  • Identyfikator CSS: jeden

Teraz otwórz ustawienia modułu tekstowego w kolumnie 1 lub wierszu 1 i dodaj adres URL łącza modułu.

  • Adres URL łącza modułu: #jeden

Wiersz 2: Link do kotwicy

Otwórz ustawienia wiersza 2 i dodaj następujący identyfikator CSS.

  • Identyfikator CSS: dwa

Teraz otwórz ustawienia modułu tekstowego w kolumnie 1 lub wierszu 1 i dodaj adres URL łącza modułu.

  • Adres URL łącza modułu: #dwa

Wiersz 3: Link do kotwicy

Otwórz ustawienia wiersza 3 i dodaj następujący identyfikator CSS.

  • Identyfikator CSS: trzy

Teraz otwórz ustawienia modułu tekstowego w kolumnie 1 lub wierszu 1 i dodaj adres URL łącza modułu.

  • Adres URL łącza modułu: #trzy

Widok końcowy

Oto nasz przewijany lepki nagłówek dla unikalnego projektu nawigacji z linkami do kotwicy.

Ostatnie słowa

Szczerze mówiąc, używanie przyklejonych nagłówków w projektowaniu stron internetowych zapewnia więcej uroku i pomaga odwiedzającym przejść przez treść. Korzystanie z linków zakotwiczonych może zwiększyć liczbę odwiedzających, zwiększając wygodę użytkownika na wiele sposobów. Te wbudowane opcje Divi dają coraz więcej sposobów na zapewnienie lepszej strony internetowej dla odwiedzających. Mamy nadzieję, że ten samouczek pomoże ci stworzyć przyklejony nagłówek z unikalną nawigacją za pomocą linków kotwicznych. Przewijanie przyklejonego nagłówka w celu uzyskania unikalnej nawigacji za pomocą linków kotwicznych. Daj nam znać, jakimi innymi tematami możemy się z Tobą podzielić. Baw się dobrze z Divi .