Czy chcesz dodać zawartość zwiastuna do przewijanego tabletu w Divi?
Dodawanie treści zwiastuna do Twojego Witryna internetowa może być strategią marketing skuteczny. Działa to szczególnie dobrze w przypadku promować rzeczy takie jak e-booki. Dajesz im podgląd treści, więc chcą więcej.
W dzisiejszym samouczku pokażemy, jak prezentować zawartość zwiastuna na rozwijanym tablecie w Divi.
Aby to zrobić, skorzystamy z wbudowanych opcji Divi, aby zmienić kolumnę w rozwijany kontener (zaprojektowany tak, aby wyglądał jak tablet), który może zawierać dowolny rodzaj treści.
Możesz go użyć do promować pierwsze rozdziały dowolnego ebooka, zobacz przykładowe projekty ze swojego portfolio lub innego rodzaju treści.
Zacznijmy!
badanie
Oto krótkie spojrzenie na tablet z przewijaną zawartością, który będziemy tworzyć w tym samouczku.
Utwórz nową stronę za pomocą Divi Builder
W panelu WordPress przejdź do „Strony > Dodaj nowy”
Podaj tytuł, który ma dla Ciebie sens, a następnie kliknij „Użyj DiviBuilder”
Następnie kliknij przycisk „Rozpocznij budowanie”
Projekt tabletu z przewijaną zawartością zwiastuna w Divi
Tworzenie rozwijanego kontenera tabletu z kolumną Divi
Dodaj wiersz
Na początek utwórz dwukolumnowy wiersz ze zwykłą sekcją.
Ustawienia kolumny 1
Kolor tła
Otwórz ustawienia kolumny 1 i dodaj białe tło do kolumny.
- Tło: #ffffff
Obramowanie i margines
Idź do zakładki Wnętrze rozwijana opcja Rozstaw i zmień ustawienia w następujący sposób:
- Padding (góra, dół, lewo i prawo): 25px (góra, dół, lewo, prawo)
Następnie rozwiń opcję Granica i odpowiednio zmień ustawienia:
- Zaokrąglone rogi: 20px
- Szerokość obramowania: 30px
- Kolor obramowania: #000000
Pole cienia
Aby nadać projektowi tabletu pewną głębię, rozwiń opcję Cień Pudełka i dodaj następujący cień pudełka:
- Cień pudełka: patrz zrzut ekranu
- Cień pudełka (poziomo i pionowo) Pozycja: 5 px
- Kolor cienia: #555555
Niestandardowa wysokość i szerokość kolumny z CSS
Kluczem do przewijania zawartości kolumny jest nadanie jej określonej wysokości. Spowoduje to, że zawartość przekroczy wysokość kolumny.
Chcemy również, aby proporcje tabletu pozostały spójne, więc dobrym pomysłem jest nadanie również maksymalnej szerokości kolumny.
Aby nadać kolumnie niestandardową wysokość i szerokość, przejdź do zakładki Zaawansowane i zaktualizuj następujące elementy:
Sous Niestandardowe CSS, dodaj następujący kod CSS do wyświetlania na pulpicie (element główny):
height:650px;
max-width: 488px;
Następnie aktywuj kartę dla innego wyświetlacza i wklej następujący niestandardowy kod CSS dla wyświetlacza telefonu głównego elementu:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Przepełnienie pionowe: przewijanie
Jak wspomniano wcześniej, kolumna ma teraz określoną wysokość, która nieuchronnie spowoduje pionowe przepełnienie kolumny.
Aby upewnić się, że przepełniona zawartość może być wyświetlana, przewijając kolumnę w dół, ustaw opcję widoczności przepełnienia pionowego na "zwój". Aby to zrobić, rozwiń opcję Widoczność patka Zaawansowane
- Przepełnienie pionowe: Przewiń
Dodaj treść zwiastuna do rozwijanej kolumny
W tym momencie kolumna (lub półka) jest gotowa do treści. Możesz użyć dowolnego modułu Divi w tej kolumnie, aby utworzyć zawartość podglądu.
W tym przykładzie dodajemy fikcyjną treść ebooka, która będzie składać się z modułu reklama wydawnicza (aby wyświetlić początkowe wezwanie do działania), moduł Obraz (aby wyświetlić okładkę książki) i moduł Tekst (aby wyświetlić niektóre rozdziały ebooka).
Przewijanie CTA (wezwanie do działania) z tłem okładki książki
Pierwszym elementem zawartości zwiastuna, który zamierzamy dodać, jest moduł reklama wydawnicza które posłuży jako wezwanie do działania „przewiń do podglądu”.
Użyjemy ikony prezentacji, tytułu i tła z okładką książki jako obrazem tła i nakładką z gradientem kolorów.
W kolumnie tabletu dodaj moduł reklama wydawnicza.
Zaktualizuj zawartość w następujący sposób:
- Tytuł: Przewiń, aby przeczytać fragment
Opcja rozwijania „Obraz i ikona”
- Użyj ikony: Tak
- Ikona: zobacz zrzut ekranu
Następnie rozwiń opcję Tło i dodaj gradient
- Kolor lewej strony: rbga(0,0,0,0,0.0)
- Kolor prawej strony: #ffffff
- Pozycja wyjściowa: 20%
- Pozycja końcowa: 85%
- Kwadratowy gradient nad obrazem tła : TAK
Następnie dodaj obraz okładki książki. Aby uzyskać najlepsze wyniki, dodaj obraz o wymiarach około 600 na 850 pikseli .
Na karcie Projekt zaktualizuj następujące style ikony i tytułu:
- Kolor ikony: #000000
- Rozmiar czcionki ikony: 80px (komputer i tablet), 70px (telefon)
- Czcionka tytułu: Montserrat
- Wyrównanie tekstu tytułu: wyśrodkowane
- Kolor tekstu: #000000
Następnie możemy przesunąć ikonę i tytuł w dół kolumny, dodając górny margines.
Aby zmienić rozmiar i rozmieścić notkę, zaktualizuj następujące elementy:
- Wzrost: 100%
- Margines: 25px (dolny)
- Padding: 400px (komputer i tablet), 270px (telefon)
Obraz okładki książki
Kolejnym fragmentem teasera będzie obraz okładki książki. Aby dodać obraz, po prostu dodaj moduł Obraz poniżej modułu Blurb.
Następnie prześlij ten sam obraz, który został użyty jako tło blurb.
Zawartość podglądu tekstu
Naszą ostatnią zawartością zwiastuna będzie tekst, który będzie zawierał kilka fikcyjnych rozdziałów z naszego ebooka. Aby dodać tekst, dodaj nowy moduł Tekst pod poprzednim obrazem.
Następnie wklej następujący kod HTML do zakładki z tekstem głównym:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Na karcie Projekt zaktualizuj styl nagłówka i odstępy w następujący sposób (nagłówek 3):
- Czcionka: Montserrat
- Grubość czcionki: Ultra Bold
- Wyrównanie tekstu: wyśrodkowane
- Wysokość linii: 1,3 em
- Wyściółka: 10% (góra i dół)
Kilka ostatnich szlifów
Zaktualizuj parametry linii
Po umieszczeniu treści musimy wprowadzić pewne poprawki w wierszu, aby projekt był bardziej responsywny. Otwórz ustawienia linii i zaktualizuj następujące elementy:
- Szerokość: 100% (komputer stacjonarny), 90% (tablet i telefon)
- Maksymalna szerokość: 1px (komputer), 080px (tablet i telefon)
Dodaj dodatkową treść do kolumny 2
W tym momencie możemy w razie potrzeby dodać dodatkową zawartość do kolumny 2. W tym przykładzie dodaliśmy moduł tekstowy i moduł przycisku i dostosowaliśmy je podobnie do projektu pokazanego w naszym pakiecie układów ebooków.
Pobierz DIVI teraz !!!
Ostateczny wynik
Zobaczmy teraz końcowy wynik.
Sprawdź zawartość rozwijaną dostępną w tablecie laptopa.
I tak projekt układa się na ekranie tabletu i telefonu.
Wnioski
Być może najlepszą rzeczą w tym projekcie tabletu z przewijaniem jest jego wszechstronność. Ponieważ tablet jest zasadniczo kolumną Divi, możesz użyć dowolnej liczby modułów Divi (tekst, obraz, przycisk) do zaprojektowania treści, które chcesz prezentować.
Mam nadzieję, że pomoże Ci to następnym razem, gdy będziesz chciał zaprezentować zawartość zwiastuna na swoim Witryna internetowa.
Jeśli chcesz dowiedzieć się więcej o Divi, nie wahaj się zajrzeć do naszego katalogu Samouczki Divi. Możesz również skonsultować Jak stworzyć stronę Blog z modułem Divi Blog
Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale tymczasem, udostępnij ten artykuł w różnych sieciach społecznościowych.
...
