Krok 1 – moduł BLOG

Zacznijmy od dodania modułu Blog korzystając z The Divi Builder. Ustawienia wiersza i sekcji pozostawiam bez zmian. Otwieramy ustawienia modułu Blog i na pierwszej zakładce Zawartość, zaznaczamy następujące opcje:

• Liczba postów: dowolna, ja wybrałam 12
• Włącz kategorię: wybierz dowolne, które mają się pojawić na blogu
• Zawartość: Pokaż fragment
• Elementy (pokaż obraz główny, pokaż przycisk czytaj więcej, pokaż autora, pokaż datę, pokaż liczbę komentarzy i pokaż paginację): ustawiam na TAK. Jeżeli nie chcesz nie musisz włączać wszystkich tych elementów. Najważniejszy jest element „Pokaż przycisk czytaj więcej” bo to jego będziemy konfigurować i on musi być włączony.

Na zakładce Design, w pozycji Układ graficzny wybierz Siatka lub Pełna szerokość. Ja bardzo nie lubię standardowego wyglądu pełnej szerokości bloga w Divi więc wybieram Siatkę (czyli grid). Pozostałe opcje ustawiasz dowolnie.

Przechodzimy do zakładki Zaawansowane i zjeżdżamy na sam dół do pola o nazwie Przycisk czytaj więcej i wklejamy tam dowolny kod CSS, w zależności od tego jak chcemy, aby nasz przycisk wyglądał. To jeszcze nie koniec 🙂 Przykładowe kody znajdziesz poniżej.

Przykładowe kody CSS zmieniające wygląd przycisku „czytaj dalej”

PRZYKŁAD 1:

Na początek nadamy naszemu „czytaj dalej” wygląd przycisku. Dodamy do niego ramkę, zmienimy kolor, wyśrodkujemy i powiemy mu jak ma się zachować, kiedy ktoś najedzie na niego kursorem. Kod możesz skopiować i zmienić go według własnego uznania. Możesz zmienić kolor tła po najechaniu na przycisk myszką, kolor obramowania, wypełnienie itp. Pierwsza część kodu odpowiada za ogólny wygląd przycisku. To co znajduje się pod „a.more-link:hover” określa, jak ma zachować się przycisk po najechaniu na niego kursorem.

Kody, które użyliśmy powyżej przydadzą nam się również w pozostałych rozwiązaniach, więc pokrótce o nich odpowiem, żebyście wiedzieli co zmienianie, i na co ta zmiana wpłynie.

• border: 1px solid #bfac82; – wartość z px, w moim przypadku 1px, to grubość obramowania. „Solid” to wartość, która określa, jaka ma być nasza ramka, czy ma składać się z linii ciągłej, kropkowanej, podwójnej itp. O ramkach pisałam oddzielny wpis dotyczący sidebaru, więc jeżeli nie chcesz obramowania jednoliniowego to zajrzyj tam koniecznie, żeby dowiedzieć się jakie jeszcze są opcje. #bfac82 to po prostu kolor zapisany w html i jeżeli nic Ci to nie mówi, albo nie wiesz gdzie szukać kolorów zapisanych ciągiem takich właśnie znaków, to zajrzyj do wpisu jak pokolorować swoją stronę.
• padding – to wyrównanie teksu na przycisku. W moim przypadku jest to 10px co oznacza, że tekst będzie o tyle przesunięty od krawędzi ramki.
• color – to kolor tekstu dla „czytaj dalej”
• margin-top – to margines górny. Przesuwa cały przycisk w dół, aby nie zlewał się z treścią powyżej. Można też dodać margines dolny (magrin-bottom), czy lewy lub prawy (margin-left, margin-right) w zależności od tego jak chcesz ustawić przycis.
• text-transform – odpowiada za to jak będą wyświetlały się nasze litery. Wartość „uppercase” oznacza, że będą to tylko wielkie litery.

PRZYKŁAD 2:

Wykorzystamy teraz bardzo podobny kod, ale dodamy do niego zaokrąglone rogi zarówno w normalnym widoku, jak i w widoku po najechaniu na przycisk kursorem ( (border-radius)), zmienimy rozmiar czcionki (font-size) i nieco ją pogrubimy (font-weight):

PRZYKŁAD 3:

W trzecim przykładzie wykorzystamy gradient. Dodamy taki sam kod jak jeden z tych, który użyliśmy powyżej, zmienimy jedynie „background”:

PRZYKŁAD 4:

W przykładzie czwartym dodamy trochę cienia wokół naszego przycisku. Zrobimy to za pomocą box-shadow. Jego wartości możesz dowolnie modyfikować, żeby przesuwać cień lub go zwiększać, czy zmniejszać.

Na dzisiaj to już wszystko. Mam nadzieję, że pomogłam, i że wyniesiesz z tego artykułu dużo przydatnych informacji. Jestem też ciekawa ,jak wygląda Twój blog, albo jakikolwiek inny blog, który właśnie zrobiłeś. Daj znać w komentarzu, chętnie Cię odwiedzę i zobaczę owoce Twojej ciężkiej pracy 🙂