Jak zrobić przycisk „czytaj dalej” zamiast samego napisu?

2 mar 2019Divi, tips&tricks, Wordpress0 komentarzy

Kiedy standardowo wrzucasz moduł „blog” i definiujesz jakie wpisy mają się tam pojawić – masz możliwość włączenia linku „czytaj dalej” pod zajawką każdego wpisu.

Problemem jest jednak to, że poza kolorem i atrybutami – standardowo nie ma opcji wyróżnienia tego napisu. A co jeśli chcemy zrobić zamiast zwykłego tekstu przycisk – dzięki czemu będzie zwracał większą uwagę?

Poniżej przykład jak za pomocą CSS zbudować przycisk, który będzie pojawiał się na dole wpisów na całą szerokość tekstu – przy układzie „siatka”

/******* przycisk "czytaj dalej" *******/
.et_pb_blog_grid .et_pb_post a.more-link {
background: #2ea3f2; /* kolor tła przycisku */
color: #fff; /* kolor tekstu na przycisku */
border: 2px solid #2ea3f2; /* kolor ramki przycisku */
display: block;
margin-top: 10px;
padding: 10px;
text-transform: uppercase; /* tekst będzie pisany dużymi literami */
letter-spacing: 1px; /* zwiększona odległość pomiędzy literami */
font-weight: bold; /* wariant fontu - pogrubiony */ 
text-align:center; /* pozycja tekstu na przycisku - wycentrowany /*
}
/******* przycisk "czytaj dalej" - po najechaniu kursorem *******/
.et_pb_blog_grid .et_pb_post a.more-link:hover {
background: #fff; /* kolor tła przycisku */
color: #2ea3f2; /* kolor tekstu na przycisku */
border: 2px solid #2ea3f2; /* kolor ramki przycisku */
}

0 komentarzy

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Paweł Szynkiewicz

Paweł Szynkiewicz

Ekspert od produktywności i WordPressa/Divi

Od ponad 20 lat pracuję jako projektant, a od 10 lat specjalizuję się w wykorzystaniu WordPressa i Divi do samodzielnego wdrażania projektów. W tym czasie rozwinąłem swoją wiedzę na temat produktywności i efektywnego wykorzystania tych narzędzi. W tym wpisie dzielę się praktycznymi wskazówkami, które pomogą Ci zoptymalizować Twój warsztat pracy i samodzielnie wdrażać projekty.

Przydała Ci się ta wiedza? Postaw mi kawę, abym mógł tworzyć więcej wartościowych treści!

Postaw mi kawę na buycoffee.to

Gdzie umieścić powyższy kod?

Pamiętaj – nigdy nie umieszczaj żadnego kodu w plikach motywu Divi (ani żadnego innego). Z prostej przyczyny – każda aktualizacja motywu spowoduje wyczyszczenie Twoich zmian.

W celu dodania kodu CSS, który ma wpływać na wszystkie elementy danego typu w serwisie  – użyj przystosowanych do tego miejsc:

Opcja 1

W kokpicie swojej strony przejdź do zakładki „Divi” i przewiń ekran na sam dół. W opcjach szablonów graficznych znajduje się pole „Niestandardowe CSS”. Wszystkie zmiany tam wprowadzone zostaną zachowane nawet po aktualizacji.

Opcja 2

Będąc zalogowanym w panelu administracyjnym i przeglądając swoją stronę – na górze serwisu masz włączony pasek administratora. Klikając na tytuł strony rozwinie Ci się menu. Wybierz z niego „Stylista tematów”, a następnie „Spersonalizowany CSS”. Po wpisaniu kodu kliknij „Opublikuj”.

Opcja 3

Umieść w pliku style.css w Motywie potomnym. Jak stworzyć motyw potomny (child theme) dowiesz się tutaj.

Share This