Jak stworzyć stronę docelową wirtualnego szczytu z Divi
Opublikowany: 2020-07-02Promowanie wirtualnego wydarzenia wiąże się z szeregiem strategii promocyjnych. Jednym z nich jest stworzenie zachęcającego landing page. Stworzenie strony docelowej wirtualnego szczytu to doskonały sposób na zaciekawienie odbiorców. Dzięki odpowiedniej kombinacji sekcji możesz zapraszać, informować i zbierać zarejestrowanych uczestników. Dzisiaj pokażemy Ci, jak utworzyć stronę docelową wirtualnego szczytu z pięcioma sekcjami. Projekt zawiera obrazy bichromii i przegródki do przewijania sekcji. Dołączyliśmy również plik JSON do pobrania, jeśli chcesz pominąć samouczek krok po kroku. W folderze znajdziesz również grafikę nagłówka i stopki w formacie PNG i AI.
Weźmy się za to!
Zapowiedź
Przyjrzyjmy się projektowi strony docelowej na różnych rozmiarach ekranu.
Pulpit
Tablet
mobilny
Pobierz stronę docelową wirtualnego szczytu ZA DARMO
Aby uzyskać bezpłatny układ strony docelowej wirtualnego szczytu, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
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ładów Divi!
Sekcje stron docelowych wirtualnego szczytu
Aby Twój landing page spełniał swoje zadanie, potrzebuje określonego zestawu sekcji. Landing page nie tylko przykuwają uwagę widza, ale także muszą konwertować. Na przykład strona docelowa wirtualnego szczytu musi zawierać istotne informacje i wezwanie do działania. Wszystkie sekcje muszą płynnie przechodzić od jednej do drugiej, aby widz poczuł inspirację do działania i rejestracji.
Na stronie docelowej Virtual Summit zamieściliśmy następujące sekcje:
nagłówek
Sekcja nagłówka zawiera ważne informacje, takie jak tytuł szczytu i data wydarzenia. To najważniejsza informacja, dlatego jest na samej górze. Żaden nagłówek nie jest kompletny bez wezwania do działania i łatwej nawigacji do reszty strony.
W naszym projekcie uwzględniliśmy dwa przyciski z linkami do zakotwiczenia, które przechodzą do sekcji głośników i harmonogramu. Co najważniejsze, zamieściliśmy przycisk z linkiem do sekcji rejestru. Na całej stronie wszystkie przyciski „zarejestruj” wyglądają tak samo, aby zapewnić wizualną jedność w projekcie.
Informacja
Druga sekcja to sekcja informacyjna, która zachęca widza do rozważenia wzięcia udziału w wirtualnym szczycie. W projekcie dodaliśmy cztery notki i obraz, który można łatwo zmienić w wideo. Notki zawierają cztery powody, dla których warto wziąć udział w szczycie, a obraz (lub film) jest wizualną ilustracją wspierającą decyzję.
Głośniki
W kolejnej sekcji znajdziesz zestaw sześcioosobowych modułów. Tutaj przedstawiasz prelegentów, którzy wezmą udział w szczycie. Każdy moduł zawiera następujące elementy:
- Obraz
- Nazwa
- Pozycja
- Opis
- Linki do mediów społecznościowych
Pamiętaj, aby wprowadzić wszystkie istotne informacje dla każdego mówcy. Spróbuj też użyć tej samej liczby linii w tekście głównym, aby projekt wyglądał wyraźnie. Jak widać, na wszystkich zdjęciach głośników zastosowaliśmy dwutonowy efekt kolorystyczny, aby nadać projektowi ciekawy wygląd. Poniżej znajduje się samouczek krok po kroku, jak osiągnąć ten efekt w Photoshopie.
Jeśli masz więcej niż sześć głośników, po prostu zduplikuj wiersz lub sklonuj moduły w rzędy z większą lub mniejszą liczbą kolumn.
Harmonogram
Następna jest sekcja harmonogramu. W tym obszarze elegancko podzieliliśmy się harmonogramem szczytu i upewniliśmy się, że jest on strukturalny. Aby zachować styl projektu tekstu, pamiętaj o zmianie treści, ale nie poziomów nagłówków. Postaraj się, aby zawartość miała mniej więcej tę samą długość, aby projekt pozostał schludny.
Wiersze są uporządkowane według dni z obrazem tytułowym i grupą notek. Na dole ostatniej kolumny znajduje się przycisk wezwania do działania, aby widzowie mogli się zarejestrować.
Zarejestrować
Ostatnia, ale nie mniej ważna jest sekcja rejestracji. Dodaliśmy licznik czasu, aby dodać poczucie pilności. Formularz kontaktowy powinien być bezpośrednio połączony z listą RSVP, aby każda zaproszona osoba była automatycznie rejestrowana.
W całym projekcie strony docelowej wirtualnego szczytu znajdziesz trzy przyciski, które przechodzą do tej sekcji, aby zoptymalizować generowanie leadów.
Utwórz mapę gradientu Duotone w programie Photoshop
Otwórz obraz w Adobe Photoshop
Jeśli chcesz naśladować obrazy bichromii w naszym projekcie, wykonaj poniższe czynności. Najpierw otwórz obraz w Photoshopie.
Otwórz Dopasowania i wybierz mapę gradientu
Otwórz pasek narzędzi korekt i kliknij mapę gradientu. Na karcie właściwości kliknij dwukrotnie pasek gradientu, aby otworzyć wyskakujące okienko ustawień.
Dostosuj kolory gradientu
W ustawieniach gradientu kliknij dwukrotnie każdy kolor, aby dostosować ustawienia.
Aby osiągnąć efekt naszego projektu, dostosuj gradient w następujący sposób:
- Typ gradientu: Stały
- Gładkość: 100%
- Przystanek krycia #1: 100%
- Zatrzymanie koloru nr 2
- Ciemnofioletowy #202060
- Pozycja: 19%
- Punkt środkowy:
- Punkt środkowy krycia: 85%
- Środek koloru: 50%
- Przystanek krycia #2: 55%
- Zatrzymanie koloru #
- Fioletowy #f895f8
- Pozycja: 100%
Zapisz jako niestandardową mapę gradientową
Dodaj nazwę gradientu i kliknij nowy, aby go zapisać. Zostanie on następnie zapisany w Twojej bibliotece gradientów. Zapisz obraz do internetu na 700 pikseli wysokości. Powtórz ten proces z tyloma obrazami, ile potrzebujesz. Po zastosowaniu mapy gradientu wybierz zapisany gradient.
1. Utwórz sekcję nagłówka
Dodaj nową sekcję
Tło
Zacznijmy odtwarzać stronę docelową wirtualnego szczytu. Utwórz nową stronę i otwórz ją za pomocą Divi Builder. Przed dodaniem wierszy dodaj obraz tła i gradient do nowej sekcji. Grafika tła znajduje się w folderze do pobrania powyżej.
- Gradient tła
- Kolor 1: #1f4068
- Kolor 2: #202040
- Obraz tła: Grafika nagłówka
Rozmiary
Następnie ustaw minimalną wysokość.
- Minimalna wysokość: 1050 pikseli
Rozstaw
Rozstaw również.
- Wyściółka górna i dolna
- Stół i telefon: 90px
Widoczność
Na koniec dostosuj ustawienia widoczności w zakładce Zaawansowane.
- Przepełnienie poziome i pionowe: ukryte
Dodaj nowy wiersz
Struktura kolumny
Dodaj wiersz z trzema kolumnami. Wybierz strukturę kolumn 1/2, 1/4, 1/4.
Rozmiary
Dostosuj rozmiar rzędu w następujący sposób:
- Szerokość: 90%
- Maksymalna szerokość: 1800px
- Wyrównanie: Środek
Rozstaw
\Dodaj też górny margines.
- Górny margines: 200px
Kolumna 2, 3 Ustawienia
Rozstaw
Dostosuj ustawienia dla kolumn 2 i 3. Najpierw rozstaw
- Górny margines: 30px
Widoczność
Następnie ukryj kolumny w telefonie.
- Wyłącz na: Telefon
Dodaj pierwszy moduł tekstowy do kolumny 1
Tekst
Dodaj pierwszy moduł tekstowy w kolumnie 1. Wstaw tytuł jako treść H1.
- Ciało: Treść H1
Tekst nagłówka
Na karcie projektu dostosuj następnie styl tekstu nagłówka.
- Poziom nagłówka: H1
- Czcionka: Alata
- Waga: pogrubienie
- Wyrównanie: Środek
- Kolor: białawy #eaeaea
- Rozmiar
- Pulpit: 85px
- Tablet: 70px
- Telefon: 44px
- Odstępy między literami: 2px
- Wysokość linii: 1,1 em
- Cień tekstu: pierwsza opcja
- Kolor cienia: rgba (o,0,0,0.26)
Dodaj drugi moduł tekstowy do kolumny 1
Tekst
Dodaj drugi moduł tekstowy. Wstaw datę jako zawartość H2.
- Treść: Treść H2, 15-16 lipca 2020 r.
Tekst nagłówka
Następnie nadaj styl tekstowi nagłówka.
- Poziom kursu: H2
- Czcionka: Alata
- Waga: Regularna
- Wyrównanie: Środek
- Kolor: fuksja #b030b0
- Rozmiar
- Komputer stacjonarny i tablet: 60px
- Telefon: 45 pikseli
- Wysokość linii: 1,3 em
Rozstaw
Dodaj trochę odstępów.
- Dolna wyściółka: 20px
Dodaj moduł przycisku do kolumny 1
Tekst
Dodaj moduł przycisku dla wezwania do działania.
- Przycisk: Zarejestruj się
Połączyć
Dodaj link do kotwicy.
- Adres URL łącza: #Zarejestruj się
Wyrównanie
Przejdź do karty projektu i ustaw wyrównanie.
- Wyrównanie przycisków: środek
Przyciski niestandardowe style
Stylizuj też przycisk.
- Rozmiar czcionki
- Pulpit: 30px
- Tablet: 25 pikseli
- Telefon: 20px
- Kolor tekstu: biały #ffffff
- Tło: Fioletowe #602080
- Promień graniczny: 35px
- Odstępy między literami: 1px
- Czcionka: Alata
Rozstaw
Na koniec dostosuj odstępy.
- Górny margines
- Tablet i telefon: 15px
- Górna wyściółka: 2px
Dodaj moduł przycisku do kolumny 2
Tekst
Przejdź do kolumny 2 i dodaj moduł przycisku. Dodaj wybraną kopię.
- Przycisk: Głośniki
Połączyć
Następnie dodaj link do kotwicy.
- Link URL: #Głośnicy
Wyrównanie
Na karcie projektu ustaw wyrównanie.
- Wyrównanie przycisków
- Pulpit: prawy
- Tablet i telefon: centrum
Przycisk niestandardowy styl
Dostosuj również niestandardowe style przycisków.
- Rozmiar tekstu: 24px
- Kolor tekstu: biały #ffffff
- Tło: przezroczyste
- Odstępy między literami: 1px
- Czcionka przycisku: Alata
- Promień graniczny: 0px
Cień Pudełka
Na koniec dodaj cień pudełkowy.
- Cień pudełka: czwarta opcja
- Pozycja pozioma: 0px
- Pozycja pionowa: 5 pikseli
- Kolor cienia: Fuksja: #b030b0
Klonuj moduł przycisku do kolumny 3
Przycisk klonowania
Sklonuj przycisk w kolumnie 2 i umieść zduplikowany moduł w kolumnie 3.
Dostosuj moduł przycisku
Tekst
Zmień tekst w sklonowanym przycisku.
- Przycisk: Harmonogram
Połączyć
Zmień też link do kotwicy.
- Adres URL linku: #Zaplanuj
Wyrównanie
Nie zapomnij również o zmianie wyrównania.
- Wyrównanie przycisków
- Pulpit po lewej
Dodaj nowy wiersz
Struktura kolumny
Dodaj nowy wiersz z dwiema równymi kolumnami.
Rozmiary
Najpierw dostosuj szerokość rynny.
- Niestandardowa szerokość rynny: 2
Rozstaw
Dodaj odstępy dalej.
- Górny margines
- Telefon: -35px
Widoczność
Następnie dostosuj widoczność rzędu.
- Wyłącz na: tablecie i komputerze stacjonarnym
Moduł przycisku klonowania i umieszczenie duplikatu w kolumnie 1
Przycisk klonowania
Sklonuj moduł przycisku w kolumnie 2 poprzedniego wiersza i umieść zduplikowany moduł w kolumnie 1 nowego wiersza.
Dostosuj moduł przycisku
Przycisk niestandardowy styl
Dostosuj tekst w nowym przycisku.
- Rozmiar tekstu: 20px
Cień Pudełka
Zmodyfikuj również cień pudełka.
- Pozycja pionowa: 4px
Dodaj sklonowany moduł przycisku do kolumny 2
Przycisk klonowania
Zduplikowany moduł przycisku z kolumny 3 w poprzednim wierszu. Wklej go w kolumnie 2 tego wiersza.
Dostosuj moduł przycisku
Tekst
Dostosuj zawartość tekstu w sklonowanym przycisku.
- Tekst: Harmonogram
2. Utwórz sekcję informacyjną
Dodaj nową sekcję
Tło
Aby utworzyć sekcję informacyjną, najpierw dodaj nową sekcję i wystylizuj tło.
- Gradient tła
- Kolor 1: #202040
- Kolor 2: #202060
Rozstaw
Dodaj też trochę wyściółki.
- Górna wyściółka: 170px
- Dolna wyściółka: 5px
Widoczność
Na koniec dostosuj ustawienia widoczności w zakładce Zaawansowane.
- Przepełnienie poziome i pionowe: ukryte
Dodaj nowy wiersz
Struktura kolumny
Dodaj nowy wiersz z jedną kolumną. Nazwiemy to wierszem tytułowym.
Rozmiary
Następnie ustaw rozmiar.
- Szerokość: 80%
- Maksymalna szerokość: 1800px
Dodaj moduł tekstowy
Tekst
Dodaj moduł tekstowy.
- Treść: Treść H2 – Dlaczego warto wziąć udział w Digital Marketing Virtual Summit?
Tekst nagłówka
Na karcie projektu dostosuj styl tekstu nagłówka.
- Poziom kursu: H2
- Czcionka: Alata
- Kolor tekstu: biały #ffffff
- Rozmiar
- Pulpit: 55px
- Tablet: 45px
- Telefon: 40px
- Odstępy między literami: 2px
- Wysokość linii: 1,1 em
Dodaj moduł dzielnika
Linia
Teraz dodaj moduł rozdzielający i stylizuj linię w zakładce projektu.
- Kolor linii: fuksja #b030b0
Rozmiary
Następnie dostosuj rozmiar.
- Waga dzielnika: 50px
- Maksymalna wysokość: 50px
Efekty przewijania
Na karcie Zaawansowane dodaj efekt przewijania w poziomie.
- Włącz ruch poziomy
- Pulpit
- Przesunięcie początkowe: -6
- Przesunięcie środkowe: 50% / 0
- Przesunięcie końcowe: 6
- Tablet i telefon
- Podanie przesunięcia: -4
- Przesunięcie środkowe: 50% /0
- Przesunięcie końcowe: 4
Dodaj nowy wiersz
Struktura kolumny
Teraz dodaj nowy wiersz z trzema kolumnami. Wybierz strukturę kolumn 1/2, 1/4, 1/4.
Rozmiary
Przed dodaniem modułów dostosuj rozmiar wiersza.
- Szerokość: 80%
- Maksymalna szerokość: 1800px
Ustawienia kolumny 1
Rozstaw
Dostosuj również odstępy pierwszej kolumny.
- Górna wyściółka: 20px
Dodaj moduł obrazu do kolumny 1
Obraz
Teraz dodaj moduł obrazu do kolumny 1. Użyj jednego ze swoich obrazów z efektem bichromii.
- Obraz: zdjęcie z efektem bichromii
Granica
Dostosuj też granice.
- Zaokrąglone rogi: 15px
Dodaj moduł Blurb do kolumny 2
Tekst
Przejdź do kolumny 2 i dodaj moduł notki. Wstaw treść.
- Tytuł: Nawiąż nowe kontakty
- Treść: Treść opisowa
Obraz
Prześlij obraz numer 1, który znajdziesz w folderze do pobrania.
- Obraz: PNG z nr 1
Obraz i ikona
Następnie dostosuj położenie obrazu.
- Umieszczenie: Top
- Wyrównanie: w lewo
Tekst tytułu
Stylizuj też tekst tytułu.
- Poziom nagłówka: H4
- Czcionka: Alata
- Kolor: biały #ffffff
- Rozmiar: 23px
Tekst główny
Nie zapomnij nadać stylu tekstu głównego.
- Czcionka: Open Sans
- Kolor: biały #ffffff
- Rozmiar: 14px
- Odstępy między literami: 1px
niestandardowe CSS
Na koniec dodaj dodatkowe wypełnienie z niestandardowym CSS do tytułu notki na karcie Zaawansowane.
- Tytuł Blurb: padding-bottom: 15px;
padding-bottom: 15px;
Clone Blurb Module i umieść duplikat w kolumnie 2
Klon Blurb
Zduplikuj pierwszą notkę w kolumnie 2.
Zadowolony
Zaktualizuj zawartość.
- Tytuł: Nowy tytuł
- Treść: Nowy tekst opisowy
Obraz
Następnie zmień obraz liczbowy. Możesz znaleźć nowy w folderze do pobrania.
- Obraz: PNG z #2
Usuń kolumnę 3 i sklonuj kolumnę 2
Klonuj kolumnę
W ustawieniach wiersza usuń trzecią kolumnę i zduplikuj drugą. Upewnij się, że zwracasz strukturę kolumn do 1/2, 1/4, 1/4.
Dostosuj Blurb 1 w kolumnie 3
Zadowolony
Zaktualizuj treść tekstową w sklonowanej notce.
- Tytuł: Nowy tytuł
- Treść: Nowy tekst opisowy
Obraz
Zmień również obraz liczbowy.
- Obraz: PNG z #3
Dostosuj Blurb 2 w kolumnie 3
Zadowolony
Zmodyfikuj także treść tej notki. Najpierw tekst.
- Tytuł: Nowy tytuł
- Treść: Nowy tekst opisowy
Obraz
Następnie zmień obraz liczbowy.
- Obraz: PNG z #4
3. Utwórz sekcję mówców
Dodaj nową sekcję
Tło
Przechodzimy do sekcji dla prelegentów. Dodaj nową sekcję i stylizuj tło.
- Gradient tła
- Kolor 1: #202060
- Kolor 2: #162447
Widoczność
Dostosuj ustawienia widoczności w zakładce Zaawansowane.
- Przepełnienie poziome i pionowe: ukryte
Klonuj wiersz tytułu i umieść duplikat w nowej sekcji
Powiel wiersz
Zduplikuj wiersz tytułu z powyższej sekcji i umieść duplikat w sklonowanej sekcji. Nazwiemy to wierszem tytułu 2.
Dostosuj moduł tekstowy
Tekst
Następnie dostosuj ustawienia tekstu H3 na karcie projektu. Dostosuj również identyfikator CSS w sklonowanym module tekstowym. Następnie zmień kolor linii modułu rozdzielającego. Teraz dodaj nowy wiersz z 5 modułami o jednakowej wielkości. Dostosuj rozmiar rzędu w następujący sposób: Dodaj trochę odstępów. Dodaj moduł pierwszej osoby do kolumny 1. Prześlij zdjęcie prelegenta z efektem kolorystycznym. Zalecamy rozmiar obrazu 550 x 770 pikseli. Dodaj zaokrąglone rogi do następnego obrazu. Następnie dostosuj styl tekstu tytułu. Dostosuj również tekst treści. Nie zapomnij o tekście pozycji. Na koniec dodaj niestandardowy CSS, aby uzyskać dodatkowe dopełnienie. W ustawieniach wiersza usuń kolumny 2-5. Zduplikuj kolumnę 1 cztery razy. Zaktualizuj zawartość we wszystkich sklonowanych modułach. Najpierw tekst. Potem obraz. Teraz utworzymy sekcję harmonogramu. Dodaj nową sekcję i stylizuj tło w następujący sposób: Dostosuj ustawienia widoczności w zakładce Zaawansowane. Sklonuj wiersz tytułu z powyższej sekcji i wklej go w tej sekcji. Zmień treść tytułu. Zmień identyfikator CSS w sklonowanym module tekstowym. Zmień również kolor przekładki. Teraz dodaj nowy wiersz z trzema kolumnami o jednakowej wielkości. Dostosuj rozmiar rzędu. Dodaj trochę odstępów. Dodaj moduł tekstowy do pierwszej kolumny. Wstaw treść. Przejdź do karty projektu i nadaj styl tekstowi nagłówka. Dodaj trochę odstępów dalej. Teraz dodaj moduł call to action z wybraną przez siebie treścią. Dodaj też tło obrazu. Na karcie projektu dostosuj styl tekstu nagłówka. Następnie dostosuj tekst treści. Dodaj trochę odstępów. Następnie dostosuj styl obramowania. Na koniec dodaj niestandardowy CSS, aby uzyskać dodatkową stylizację. Przejdź do kolumny 2 i dodaj moduł tekstowy. Postępuj zgodnie z tą strukturą treści: Na karcie projektu nadaj styl tekstowi. Następnie stylizuj wszystkie poziomy nagłówków. Stylizuj też obramowanie. Dwukrotnie zduplikuj pierwszy moduł tekstowy. Zmień zawartość sklonowanych modułów tekstowych. Usuń obramowanie ostatniego modułu w kolumnie. W ustawieniach wiersza usuń kolumnę 3. Powiel kolumnę 2. Usuń trzeci moduł tekstowy w sklonowanej kolumnie. Zaktualizuj zawartość w każdym nowym module tekstowym. Skopiuj przycisk „zarejestruj” w sekcji nagłówka i wklej go poniżej ostatniego modułu tekstowego w kolumnie 3. Zmień wyrównanie przycisku w lewo. Dostosuj trochę rozmiar tekstu. Powiel pierwszy wiersz w sekcji zestawienia. Zmień zawartość w sklonowanym module tekstowym. Dostosuj zawartość modułu wezwania do działania. Zmień również obraz tła. Dostosuj również zawartość w modułach tekstowych. Ostatnia sekcja poświęcona jest rejestracji. Dodaj nową sekcję i stylizuj tło w następujący sposób. Grafika stopki znajduje się w folderze pobierania powyżej. Dostosuj również odstępy między sekcjami. I zmień ustawienia widoczności w zakładce Zaawansowane. Teraz dodaj nowy wiersz z jedną kolumną. Dodaj niewidoczny element rozdzielający, który będzie pełnił rolę łącza kotwicy dla sekcji. Wstaw identyfikator CSS, który prowadzi do wszystkich przycisków „zarejestruj”. Dodaj drugi wiersz z dwiema równymi kolumnami. Dostosuj ustawienia rozmiaru wiersza. Dodaj moduł licznika czasu do pierwszej kolumny. Dodaj treść i datę wydarzenia. Następnie nadaj stylowi tło. Na karcie projektu nadaj styl tekstowi tytułu. Stylizuj też tekst liczb. Również tekst etykiety. Następnie dostosuj rozmiar rzędu. Dodaj też trochę wyściółki. Na koniec wymodeluj obramowanie. Dodaj nowy moduł formularza kontaktowego do kolumny 2. Usuń pole wiadomości. Wprowadź ustawienia dla każdego pola. W zakładce projekt, pod układem, kliknij „utwórz pełną szerokość”. Zrób to samo dla drugiego pola. Wróć do ogólnych ustawień formularza kontaktowego i dodaj trochę treści. Następnie zmień styl pól w następujący sposób: Stylizuj również tekst tytułu. Dostosuj również niestandardowe style przycisku. Nie zapomnij dostosować promienia granicy. Na koniec dodaj niestandardowy CSS, aby uzyskać dodatkowe dopełnienie. Skończyliśmy! Przyjrzyjmy się ponownie projektowi strony docelowej na różnych rozmiarach ekranu. Zrobiłeś to! Jak wygląda Twoja strona docelowa wirtualnego szczytu? Użyj tego projektu dla własnego wirtualnego szczytu lub dla klienta zajmującego się projektowaniem stron internetowych. Nawigacja jest zoptymalizowana pod kątem konwersji z odpowiednią ilością informacji. Dodaliśmy również dzielniki sekcji przewijania, aby uzyskać trochę więcej wizualnego efektu. Daj nam znać, co myślisz w komentarzach. Czy pobrałeś układ, czy postępowałeś zgodnie z instrukcjami?
Tekst nagłówka
niestandardowe CSS
Dostosuj dzielnik
Linia
Dodaj nowy wiersz
Struktura kolumny
Rozmiary
Rozstaw
Dodaj moduł Osoba do kolumny 1
Tekst
Obraz
Obraz
Tekst tytułu
Tekst główny
Tekst pozycji
niestandardowe CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Powiel kolumnę 1
Klonuj kolumnę
Dostosuj zawartość modułów nowej osoby
Tekst
Obraz
4. Utwórz sekcję harmonogramu
Dodaj nową sekcję
Tło
Widoczność
Klonuj wiersz tytułu 2
Powiel wiersz
Dostosuj moduł tekstowy
Tekst
niestandardowe CSS
Dostosuj dzielnik
Linia
Dodaj nowy wiersz
Struktura kolumny
Rozmiary
Rozstaw
Dodaj moduł tekstowy do kolumny 1
Tekst
Tekst nagłówka
Rozstaw
Dodaj wezwanie do działania do kolumny 1
Tekst
Tło
Tekst nagłówka
Tekst główny
Rozstaw
Granica
niestandardowe CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Dodaj moduł tekstowy do kolumny 2
Tekst
Tekst
Tekst nagłówka
Granica
Klonuj moduł tekstowy 2 razy
Klonuj moduł tekstowy
Dostosuj nowe moduły tekstowe
Tekst
Usuń obramowanie trzeciego modułu tekstowego
Granica
Usuń kolumnę 3 i sklonuj kolumnę 2
Klonuj kolumny
Usuń i dostosuj moduły tekstowe
Usuń moduł tekstowy
Dostosuj zawartość
Klonuj moduł przycisku i umieść duplikat w kolumnie 3
Przycisk klonowania
Dostosuj moduł przycisku
Wyrównanie
Przycisk niestandardowy styl
Klonuj 1. rząd sekcji harmonogramu
Klonuj rząd
Dostosuj moduł tekstowy w kolumnie 1
Tekst
Dostosuj moduł wezwania do działania
Tekst
Tło
Dostosuj moduły tekstowe
Tekst
5. Utwórz sekcję rejestru
Dodaj nową sekcję
Tło
Rozstaw
Widoczność
Dodaj nowy wiersz
Struktura kolumny
Dodaj moduł dzielnika
Widoczność
Identyfikator CSS
Dodaj nowy wiersz
Struktura kolumny
Rozmiary
Dodaj moduł licznika czasu do kolumny 1
Tekst
Tło
Tekst tytułu
Liczby Tekst
Tekst etykiety
Rozmiary
Rozstaw
Granica
Dodaj moduł formularza kontaktowego do kolumny 2
Elementy
Układ pól
Tekst
Pola
Tekst tytułu
Przyciski niestandardowe style
Granica
niestandardowe CSS
padding-bottom: 30px;
Zapowiedź
Pulpit
Tablet
mobilny
To jest Wrap