20 nagłówków Flexbox dla Divi 5 (do pobrania za darmo!)

FlexBox ułatwia tworzenie nagłówków, które wyglądają czysto, pięknie dostosowują się do różnych rozmiarów ekranu i są łatwe do dostosowania w Divi 5. W tym bezpłatnym pakiecie znajdziesz 20 unikalnych konstrukcji nagłówków FlexBox, z których każdy zbudował system Flex Layout Divi 5 dla precyzyjnego wyrównania i reagowania. Niezależnie od tego, czy chcesz korzystać z istniejących globalnych stylów witryny, czy zacząć od gotowego projektu, znajdziesz obie opcje.

Podgląd i demo na żywo

Rzućmy okiem na wszystkie 20 nagłówków Flexbox w tym pakiecie. Ten pakiet jest bezpłatny do pobrania postu.

Subskrybuj nasz kanał YouTube

Zobacz demo na żywo

Pobierz 20 nagłówków Flexbox dla Divi 5

Uzyskaj wszystkie 20 nagłówków FlexBox za darmo, w tym zarówno wersje domyślne, jak i prestylowane. Każdy nagłówek jest gotowy do zaimportowania do biblioteki Divi i użycia w konstruktorze motywów. Po prostu pobierz i zacznij budować.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Co zawiera (42 eksport)

Po pobraniu i rozpakowaniu folderu znajdziesz wszystkie 42 eksport układu starannie zorganizowane w wersje domyślne i prestylowane jako poszczególne nagłówki i pełne pakiety „All Headers”.

Domyślnie - poszczególne nagłówki (20) → używa globalnych stylów.
Domyślnie - wszystkie nagłówki (1) → Pełny pakiet przy użyciu globalnych stylów.

PRESTYLED-Poszczególne nagłówki (20) → Zawiera stylizację wbudowaną dla natychmiastowego, gotowego wyglądu.
PRESTYLED - Wszystkie nagłówki (1) → Pełny pakiet z zastosowaną stylistyką.

Jak zainstalować układy

Trzymaj folder do pobrania w pobliżu, aby zacząć je importować na witrynie Divi.

1. Importuj układy do biblioteki Divi

Przejdź do biblioteki Divi → Divi.

Tam kliknij przycisk Importuj i Eksportuj, aby zainstalować pliki.

Poszukaj pliku nagłówka FlexBox (wszystkie) i kliknij, aby go zaimportować.

2. Utwórz nowy szablon nagłówka

Przejdź do Divi → Builder Motyw.

Utwórz nowy szablon nagłówka lub otwórz istniejący.

3. Układ przesyłania nagłówka

Gdy znajdziesz się w obszarze nagłówka, możesz użyć biblioteki Divi, aby wybrać wybrany układ nagłówka. Kliknij przycisk Dodaj układ w lewym górnym rogu konstruktora motywów.

Wybierz zapisany układ .

Kliknij układ nagłówka, który chcesz dodać do konstruktora motywów.

Kliknij przycisk Użyj tego układu , aby załadować nagłówek.

Upewnij się, że zapiszą nowe zmiany nagłówka i konstruktora motywów.

Domyślnie vs Prestyled: który powinieneś wybrać?

Po otwarciu folderu pobierania zobaczysz dwie wersje każdego nagłówka: ** Domyślnie ** i ** Prestyled **. Są zbudowane dokładnie w ten sam sposób, różnica polega na tym, jak radzą sobie ze stylistyką.

Domyślne nagłówki dziedziczą ich wygląd po twoich globalnych stylach. Kolory Twojej marki, czcionki i style guzików są automatycznie stosowane. Jeśli już skonfigurowałeś swoje globalne style, domyślnie jest najszybszym sposobem na dodanie tych nagłówków do Twojej witryny i natychmiastowe dopasowanie projektu.

Prestiteld nagłówki są wyposażone w wszystkie ich style: kolory, czcionki i projekty guzików są wbudowane. Wyglądają dokładnie tak, jak podgląd od razu po wyjęciu z pudełka. Jest to świetne, jeśli budujesz szybkie demo, testujesz pomysły lub chcesz pobrać dokładny projekt, który widzisz na zrzutach ekranu bez dotykania zmiennych.

Krótko mówiąc, idź z domyślnie, jeśli chcesz, aby nagłówki bezproblemowo mieszały się z istniejącymi stylami witryn. Wybierz Prestyled, jeśli chcesz mieć gotowy wygląd pokazany w podglądach.

Dostosowywanie nagłówków

System układu FlexBox Divi 5 zapewnia potężne narzędzia do dostosowania układów, jednocześnie zachowując reakcje. Oto jak dostosować te nagłówki do stylu Twojej witryny.

1. Dostosuj ustawienia Flex

Wybierz wiersz zawierający elementy nagłówka. Na karcie Design zlokalizuj menu rozwijane układu. Rozwiń go, aby ujawnić ustawienia FlexBox.

Tutaj możesz zmienić kierunek układu z wiersza na odwrotność wiersza, kolumnę lub kolumnę. Ta funkcja pozwala zmienić kierunek układu.

Ustawienia zawartości uzasadnienia pozwalają kontrolować, w jaki sposób elementy Flex są rozmieszczone wzdłuż osi głównej - główny kierunek kontenera Flex zdefiniowanego przez kierunek układu. Określa odstępy i wyrównanie elementów poziomo lub pionowo, w zależności od kierunku układu.

Wyrównaj elementy pozwalają kontrolować sposób wyrównania elementów Flex w kolumnie, wierszu lub sekcji. Określa, w jaki sposób pozycje Flex są ustawiane w stosunku do siebie wzdłuż osi krzyżowej w pojemniku. Możesz wybrać Start, Center, End i rozciągnij.

Wreszcie, układanie układu kontroluje to, czy elementy w pojemniku Flex są wymuszane na jedną linię, czy mogą owinąć na wiele linii, gdy przekraczają szerokość pojemnika (lub wysokość, jeśli kierunek układu jest ustawiony na kolumnę).

2. Pokaż/ukryj elementy w różnych punktach przerwania

Divi 5 pozwala przełączać widoczność sekcji, wierszy, kolumn lub poszczególnych modułów w określonych punktach przerwania. Jest to przydatne do uproszczenia układów na mniejszych ekranach, takich jak ukrywanie wtórnego przycisku CTA lub zastąpienie pełnego menu mobilnym.

Na przykład możesz ukryć ikony mediów społecznościowych w nagłówku, aby zaoszczędzić miejsce na ekranach mobilnych. Podczas gdy w punkcie przerwania pulpitu przejdź do karty Advanced. Rozwiń menu rozwijane widoczność. Następnie kliknij punkty przerwania telefonu i tabletu, aby ukryć element.

Użyj responsywnego podglądu Divi 5, aby wyświetlić nagłówek. Podczas przeglądania układu w punkcie przerwania telefonu ukryty element będzie widoczny, ale wyrzucony, wskazując, że zostanie ukryty z przodu.

3. W razie potrzeby dodaj linki

Chociaż każdy układ nagłówka jest gotowy do wyjścia z pudełka, nadal musisz dodać linki. W tym przykładzie dodasz linki do modułu śledzącego media społecznościowe. Kliknij, aby rozwinąć ustawienia modułu. Na karcie Content kliknij pierwszą ikonę mediów społecznościowych, aby ujawnić swoje ustawienia.

Rozwiń rozwijanie linku i dodaj link do konta mediów społecznościowych w polu URL linku konta .

Pamiętaj, aby zapisać swój nagłówek przed wyjściem z konstruktora motywów.

Jeśli jeszcze tego nie zrobiłeś, musisz utworzyć menu dla swojej witryny. Wyjdź z budowniczego wizualnego i przejdź do wyglądu → menu. Dodaj nazwę do pola nazwy menu .

Kliknij pole wyboru Menu Podstawowe , a następnie kliknij Menu Utwórz .

Aby dodać strony do menu, kliknij kartę Wyświetl wszystkie strony i wybierz strony, które chcesz zobaczyć w menu. Kliknij Dodaj do menu , aby je przypisać.

Po powrocie do konstruktora motywów dokonaj dodatkowych zmian w razie potrzeby. Na przykład, jeśli nagłówek używa konstruktora pętli, może być konieczne dostosowanie kolejności linków.

Użyj Divi 5 do budowania nagłówków już dziś

Te 20 nagłówków FlexBox to szybki sposób na przyspieszenie kompilacji Divi 5, niezależnie od tego, czy pracujesz od ustalonych globalnych stylów, czy zaczynasz od poprzedniego wyglądu. Pobierz je, upuść do konstruktora motywów i uczyń je własnymi. Flexbox obsługuje wyrównanie, dzięki czemu można skupić się na projektowaniu.