Jak utworzyć przewijalny tablet z podglądem tekstu za pomocą Divi
Opublikowany: 2017-08-08W dzisiejszym samouczku pokażemy Ci, jak utworzyć przewijalny tablet podglądu tekstu w Twojej witrynie. Podgląd tekstu będzie reprezentowany na tablecie, na którym odwiedzający mogą przewijać w tablecie, aby przeczytać kilka udostępnianych rozdziałów.
Dodanie tabletu z podglądem tekstu do Twojej witryny to doskonały sposób na drażnienie odwiedzających. Dajesz im szansę na zapoznanie się z utworem, który stworzyłeś. Gdy przeczytają treść i poczują się nią zaintrygowani, istnieje większe prawdopodobieństwo, że zechcą przeczytać również resztę. Korzystanie z tabletu z podglądem tekstu może być interesujące na przykład w następujących przypadkach:
- Sprzedając książkę
- Udostępniając bezpłatny ebook swoim odwiedzającym i chcąc zachęcić ich do pobrania pełnej wersji (poprzez subskrypcję)
- Udostępniając studia przypadków lub referencje
Aby pokazać, co dokładnie mamy na myśli, stworzyliśmy przykład, w którym pokażemy, jak odtworzyć krok po kroku:
Możesz dodać do tabletu dowolną ilość treści. Pasek przewijania pozwoli odwiedzającym łatwo przewijać zawartość.
Jak utworzyć przewijalny tablet z podglądem tekstu za pomocą Divi
Subskrybuj nasz kanał YouTube
Utwórz i zmodyfikuj sekcję
Pierwszą rzeczą, której będziemy potrzebować do odtworzenia utworzonego przez nas przykładu, jest sekcja. Aby to ułatwić, dodamy tę sekcję do nowej strony i przełączymy się na Visual Builder, aby wyjaśnić wszystkie kroki, które są używane do tworzenia wyniku.
Dodaj nową stronę
Aby dodać nową stronę, przejdź do pulpitu WordPress > Strony > Dodaj nową . Po dodaniu nowej strony aktywuj Divi Builder i od razu przejdź do Visual Builder.
Dodaj sekcję z wierszem w dwóch kolumnach
W przykładzie, który odtwarzamy, potrzebujemy tylko jednej sekcji. Dodaj sekcję standardową iw obrębie tej sekcji utwórz wiersz z dwiema kolumnami. Potrzebujemy lewej kolumny, aby umieścić tablet z podglądem tekstu, a drugiej kolumny, aby podać informacje i wezwać do działania.
Dodaj tło gradientowe
Następnym krokiem, który wyjaśnimy, jest tło gradientowe. Zdecydowaliśmy się na coś naprawdę prostego, ale to wnosi miłą wartość dodaną do sekcji. Aby odtworzyć gradient tła, przejdź do ustawień swojej sekcji. Następnie użyj następujących dwóch kolorów dla tła gradientowego w podkategorii tła:
- #e02b20
- #f2f2f2
Ustawienia, których użyliśmy dla tła gradientowego, są następujące:
- Typ gradientu: liniowy
- Kierunek gradientu: 143deg
- Pozycja startowa: 28%
- Pozycja końcowa: 28%
Pierwsza kolumna: Dodaj moduł kodu i tablet z podglądem tekstu
Do pierwszej kolumny dodamy moduł kodu z tabletem podglądu tekstu. Aby ukończyć tablet z podglądem tekstu, musimy zrobić trzy rzeczy; dodaj moduł kodu, dodaj linie kodu HTML w module kodu i dodaj potrzebne linie kodu CSS do samej strony. Możesz także dodać wiersze kodu CSS do Opcji motywu lub Konfiguratora motywu. Ale ponieważ w tym przypadku nie jest to konieczne, dodamy go tylko do utworzonej przez nas strony.
Dodaj moduł kodu
Zacznij od dodania modułu kodu do pierwszej kolumny utworzonego wiersza.
Dodaj kod HTML
Następnie otwórz ten moduł kodu i dodaj następujące wiersze w polu zawartości:
<div id="tab-container"> <div class="tablet"> <div class="tab"> <h1 class="title">Chapter 1</h1> <p> 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? </p> <h1 class="title">Chapter 2</h1> <p> 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? </p> <footer> 2017 *Author* </footer> </div> </div> </div>
Zauważysz, że w naszym podglądzie tekstu są trzy części; tytuł, akapity i stopkę. Możesz tworzyć podgląd tekstu tak długo, jak chcesz. W tym przykładzie dodaliśmy dwa rozdziały, które są reprezentowane przez jeden tytuł i jeden akapit. Możesz oczywiście dodawać wiele akapitów i tytułów w dowolnym miejscu na tablecie.
Dodaj potrzebny kod CSS
Po dostosowaniu kodu HTML do swoich potrzeb możesz dodać kod CSS, który sprawi, że tablet będzie wyglądał tak, jak chcesz. Ponieważ będziemy potrzebować tego tabletu tylko na stronie, którą tworzymy; dodamy kod bezpośrednio do strony. W programie Visual Builder Twojej strony kliknij ikonę ustawień:
Następnie przejdź do zakładki CSS i wklej następujące wiersze kodu CSS do pola Custom CSS:
*{ box-sizing: border-box; }
.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}
@media only screen and (max-width:768px) {
height: 400px;
}
.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}
.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}
.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}
footer {
background: black;
color: white;
margin-bottom: 8px;
}
Możesz zmienić wszystkie rzeczy zgodnie z potrzebami w tych liniach kodu CSS. Jak widać w liniach kodu, istnieje pięć głównych części, w których można zmienić wygląd tabletu z podglądem tekstu.
- Zewnętrzny wygląd tabletu
- Wewnętrzny wygląd tabletu
- Tytuł
- Paragrafy
- Stopka
Możesz w ten sposób dopasować tablet do dowolnego rodzaju strony, z którą integrujesz tablet z podglądem tekstu.
Druga kolumna: dodaj dwa moduły tekstowe i wezwanie do działania
Ostatnią rzeczą, jaką zrobimy, jest dodanie modułów do prawej kolumny. Ważne jest, aby informować ludzi, co będą czytać w tablecie z podglądem tekstu. To także idealna okazja do skorzystania z CTA. Im bliżej tabletu z podglądem tekstu jest CTA i im bardziej jest zauważalne, tym bardziej prawdopodobne jest, że ludzie podejmą działanie po przeczytaniu podglądu tekstu.
Pierwszy moduł tekstowy
Zacznij od dodania pierwszego modułu tekstowego do drugiego wiersza. Otwórz ustawienia i zapisz tytuł w polu zawartości w podkategorii Tekst zawartości. Ponadto przejdź do zakładki Projekt i wprowadź następujące zmiany w podkategorii Tekst:
- Czcionka tekstu: skrypt taneczny
- Styl czcionki tekstu: pogrubienie i kursywa
- Rozmiar czcionki tekstu: 40 (komputer), 35 (tablet), 30 (telefon)
- Kolor tekstu: #1c1c1c
- Wysokość linii tekstu: 1,7 em
Przewiń w dół tę samą kartę i dodaj „40%” do górnego marginesu.
Drugi moduł tekstowy
Ponadto dodaj drugi moduł tekstowy. Zacznij od dodania tekstu w polu Zawartość na karcie Zawartość i przejdź do karty Projekt. Na karcie Projekt dokonaj również następujących zmian w podkategorii Tekst:
- Czcionka tekstu: Arimo
- Rozmiar czcionki tekstu: 14
- Wysokość linii tekstu: 1,7 em
Moduł przycisku
Na koniec musimy również dodać moduł przycisku do drugiej kolumny. Dopasowaliśmy kolory CTA do gradientowego tła. Najpierw dodaj moduł przycisku i otwórz Ustawienia. Następnie dodaj wezwanie do działania i adres URL na karcie Treść. Kontynuuj, przechodząc do karty Projekt i wprowadzając następujące zmiany w podkategorii Przycisk:
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar przycisku Tekst: 14 (komputer stacjonarny i tablet), 12 (telefon)
- Kolor tekstu przycisku: #f9f9f9
- Kolor tła przycisku: #e02b20
- Szerokość obramowania przycisku: 0
- Promień obramowania przycisku: 3
- Czcionka przycisku: Arimo
Wskazówka: jeśli promujesz swojego e-booka za pomocą podglądu tekstowego, możesz również połączyć formularz zgody na aktywację Click Bloom, jak wyjaśniono w poniższym poście.
Wynik
Jeśli wykonałeś wszystkie kroki opisane w tym poście, powinieneś otrzymać następujący wynik dla podglądu książki:
Zawijanie
Dzięki modułowi kodu możesz być tak kreatywny, jak chcesz. Ten post był jednym z przykładów tego, jak różnorodna może być Twoja witryna Divi, jeśli zintegrujesz niektóre elementy swoich osobistych preferencji. Jeśli śledziłeś ten post krok po kroku, powinieneś być w stanie odtworzyć podgląd książki i użyć go w swojej witrynie. Podgląd książki możesz używać nie tylko w witrynach autorów, ale także do podglądu utworzonego e-booka, z którego chcesz utworzyć listę e-mailową. Jeśli masz jakieś pytania lub sugestie; śmiało napisz do nas komentarz w sekcji komentarzy poniżej!
Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!