Czy chcesz dostosować link Czytaj więcej w module Blog w Divi ? Następnie postępuj zgodnie z naszym samouczkiem.
Linki „Czytaj więcej” na blogu mogą być kluczowym elementem poprawy doświadczenie użytkownika. Dlatego ważne jest, abyśmy wiedzieli, jak je odpowiednio dostosować.
W tym samouczku pokażemy, jak dostosować link „Czytaj więcej” w module Blog. W tym artykule pokażemy, jak:
- Dostosuj link „Czytaj więcej” za pomocą wbudowanych opcji Divi
- Wyrównaj link „Czytaj więcej” (do lewej, do środka, do prawej)
- Zmień link „Czytaj więcej” w przycisk pełnoekranowy
- Utwórz niestandardowy przycisk Czytaj więcej z efektami najechania
- Zastąp tekst „Czytaj więcej” innym tekstem (np. „Przeczytaj artykuł”).
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
Załaduj moduł bloga na stronę za pomocą kreatora motywów Divi
Aby rozpocząć dostosowywanie linków Czytaj więcej, potrzebujesz dostępu do modułu Blog.
Można załaduj predefiniowany układ z dowolnym wybranym modułem Blog lub po prostu dodaj nowy moduł Blog do strony.
Aby rozpocząć proces, użyjemy strony bloga z predefiniowanego układu Artificial Intelligence.
Dodaj nową stronę z pulpitu WordPress
Następnie nadaj tytuł swojej stronie, a następnie kliknij „ stosowanie Divi Budowniczy”.
Następnie kliknij „ Wybierz układ«
Znajdź i wybierz „ Sztuczny inteligencja Blog Page«
Na koniec wybierz układ bloga i kliknij „ Wybierz układ«
Dostosuj i wyrównaj tekst linku Czytaj więcej
Każdy moduł Blog oferuje opcję pokazania lub ukrycia linku „Czytaj więcej” dla każdego artykułu w układzie. Aby wyświetlić link „Czytaj więcej”, otwórz ustawienia bloga i przełącz „ Pokaż przycisk Czytaj więcej na „TAK” na liście elementów bloga, które chcesz wyświetlić.
Na karcie Styl możesz dostosować tekst Czytaj więcej za pomocą jednej z wbudowanych opcji. W tym przykładzie zaktualizujmy następujące elementy:
- Czcionka Czytaj więcej: Barlow
- Czytaj więcej Dim Light: Semi Bold
- Czytaj więcej Styl kopiowania: Wielkie litery (TT), Podkreślenie (U)
- Kolor tekstu Czytaj więcej: #db0eb7
- Przeczytaj więcej Podkreślony tekst Kolor: #3c5bff
- Odstępy między literami Czytaj więcej: 1px
Oto wynik.
Obecnie link „Czytaj więcej” jest domyślnie umieszczany po lewej stronie, chyba że zmienisz wyrównanie. Aby wyrównać link do środka lub prawej strony posta, dodaj taki fragment kodu CSS:
Na karcie Zaawansowane ustawienia bloga dodaj następujący kod CSS do kodu CSS przycisku Czytaj więcej:
display: block;
text-align: right;
Opcja „display:block” zmieni łącze na element blokowy rozciągający się na całą szerokość kontenera (w tym przypadku treść elementu blokowego) treść publikacji). Po zdefiniowaniu jako element blokowy możemy wyrównać tekst do prawej za pomocą polecenia „text-align:right”.
Czytaj także: Jak utworzyć przyklejony globalny nagłówek w Divi
Oto wynik.
Aby wyśrodkować link, po prostu zamień „right” na „center” dla wartości właściwości „text-align” w następujący sposób:
Oto wynik.
Dostosuj link „Czytaj więcej”, aby wyglądał jak przycisk
W tym przykładzie utworzymy prosty styl przycisku o pełnej szerokości dla łącza „Czytaj więcej”. Przed dodaniem niestandardowego CSS otwórz ustawienia bloga i zaktualizuj tekst linku „Czytaj więcej” w następujący sposób:
- Czytaj więcej Styl kopiowania: wielkie litery (TT)
- Kolor tekstu Czytaj więcej: #ffffff
W poprzednim przykładzie użyliśmy „display:block” i „text-align:center”, aby łącze obejmowało całą szerokość kontenera i wyśrodkowało tekst.
Zobacz także: Jak stworzyć przesuwane i przesuwane menu w Divi
Aby wyglądał jak przycisk, wystarczy dodać kolor tła i odstępy wraz z dodatkowymi fragmentami CSS. Aby to zrobić, przejdź do zakładki Zaawansowane i zaktualizuj CSS przycisku „Czytaj więcej” w następujący sposób:
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
Wynik
Oto wynik!
Tworzenie zaawansowanego stylu przycisków za pomocą CSS
Jeśli chcesz przenieść stylizację przycisków na wyższy poziom, możemy dodać tło i efekt najechania.
Aby to zrobić, zastąp kod CSS przycisku „Czytaj więcej” następującym:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
Aby zmienić tło po najechaniu kursorem, możesz wkleić następujący kod CSS do przycisku „Więcej informacji” po najechaniu kursorem myszy:
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
Wynik
Oto wynik!
Zmień tekst „Czytaj więcej” na coś innego
Aby zmienić tekst „Czytaj więcej” na coś innego, np. „Przeczytaj artykuł”, przyda nam się trochę jQuery. Ale nie martw się, to tylko kilka linijek.
Przed dodaniem naszego kodu jQuery dodaj niestandardową klasę CSS do modułu Blog w następujący sposób:
- Klasa CSS: et-custom-read-more-text
UWAGA: Upewnij się, że nazwa klasy jest poprawna, aby jQuery mogło działać.
Aby dodać jQuery, które modyfikuje tekst „Czytaj więcej”, dodaj moduł Code w module Blog.
Następnie wklej następujący kod jQuery, upewniając się, że jest on owinięty niezbędnymi tagami skryptu:
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);Ten kod zasadniczo mówi przeglądarce, aby po załadowaniu strony zmieniła tekst linku „Czytaj więcej” na „Przeczytaj artykuł”.
Wynik
Oto wynik!
Ostateczne wyniki
Oto kolejne spojrzenie na wprowadzone przez nas dostosowania łącza (lub przycisku) Czytaj więcej.
Pobierz DIVI teraz !!!
Wnioski
Więc ! To tyle w tym artykule. Moduł Divi's Blog pozwala kreatywnie dostosować link „Czytaj więcej”. A jeśli chcesz poeksperymentować z kilkoma fragmentami kodu CSS, możesz samodzielnie tworzyć jeszcze bardziej zaawansowane modyfikacje.
Mamy nadzieję, że ten samouczek pomoże Ci przenieść linki „Czytaj więcej” na wyższy poziom. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
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 w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
