Prezentuj najnowsze posty na blogu w oszałamiającym, mobilnym designie dzięki Divi

Sposób, w jaki prezentujesz posty na blogu w swojej witrynie, ma duży wpływ na zachowanie użytkowników, gdy natkną się na nie podczas nawigacji w witrynie. Aby pomóc Ci stać się kreatywnym i skutecznym, pokażemy Ci, jak w oszałamiający sposób prezentować najnowsze posty na blogu.

Przykład, który odtworzymy, będzie wyglądał szczególnie dobrze na mniejszych ekranach, zachowując jednocześnie świetny wygląd i działanie na komputerze stacjonarnym i tablecie. Mamy nadzieję, że ten samouczek zainspiruje Cię do stworzenia własnych niestandardowych projektów najnowszych postów na blogu.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Zacznijmy odtwarzać!

Dodaj nową sekcję

Tło gradientowe

Utwórz nową stronę lub otwórz istniejącą i dodaj do niej zwykłą sekcję. Otwórz ustawienia i dodaj tło gradientowe.

• Kolor 1: #2e1b8f
• Kolor 2: #ffffff
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 53,3%
• Pozycja końcowa: 53,3%

Rozstaw

Następnie przejdź do ustawień odstępów. Tutaj zamierzamy zmniejszyć rozmiar zawartości sekcji na komputerze i stopniowo pozbywać się tego miejsca na mniejszych ekranach.

• Górny margines: 100px
• Margines dolny: 100px
• Lewa wyściółka: 26vw (komputer), 13vw (tablet), 0vw (telefon)
• Prawa wyściółka: 22.8vw (komputer), 11.4vw (tablet), 0vw (telefon)

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła kolumny 2

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj kolor tła do drugiej kolumny.

• Kolor tła kolumny 2: #f7f7f7

Kolumna 3 Kolor tła

Dodaj ten sam kolor również do tła kolumny 3. Używamy tego samego koloru dla obu tych kolumn, aby je połączyć i nadać im wygląd jednej części. W dalszej części wpisu użyjemy tego do manipulowania szerokościami kolumn na mniejszych ekranach.

• Kolor tła kolumny 3: #f7f7f7

Rozmiary

Przejdź do zakładki projektowania i otwórz ustawienia rozmiaru. Tutaj usuniemy wszystkie domyślne odstępy między kolumnami.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Wyświetlacz

Teraz, aby upewnić się, że wszystkie trzy kolumny pojawiają się obok siebie na mniejszych ekranach, musimy dodać jedną linię kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł Blurb do kolumny 1

Wybierz ikonę

Czas zacząć dodawać moduły! Zacznij od modułu Blurb w kolumnie 1 i wybierz wybraną ikonę.

Tło gradientowe

Przejdź do ustawień tła modułu i dodaj promieniste tło gradientowe.

• Kolor 1: #5000ff
• Kolor 2: rgba (41,196,169,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 28%
• Pozycja końcowa: 28%

Ustawienia ikon

Kontynuuj, przechodząc do zakładki projektowania i modyfikując ustawienia ikon.

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: góra
• Użyj czcionki ikony: Tak
• Rozmiar czcionki ikony: 22px

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 20px
• Dolna wyściółka: 10px

Granica

I dodaj subtelną dolną ramkę, aby zakończyć projekt modułu Blurb.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #ffffff
• Styl dolnej granicy: przerywany

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł tekstowy. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i odpowiednio zmodyfikuj ustawienia tekstu:

• Czcionka tekstu: Didact Gothic
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #ffffff

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Do drugiej kolumny! Tutaj jedynym modułem, którego będziemy potrzebować, jest moduł tekstowy. Wprowadź wybraną treść.

Kolor tła

Przejdź do ustawień tła i dodaj całkowicie biały kolor tła.

• Kolor tła: #ffffff

Ustawienia tekstu

Zmieniamy również wygląd naszych treści, modyfikując ustawienia tekstu w zakładce projekt.

• Czcionka tekstu: Source Serif Pro
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 13px
• Orientacja tekstu: Środek

Rozmiary

Jak wspomniano wcześniej, manipulujemy strukturami kolumn, aby stworzyć niestandardowy projekt na mniejszych ekranach. Aby to zrobić, musisz zmniejszyć szerokość modułu tekstowego i upewnić się, że jest wyrównany do lewej strony kolumny.

• Szerokość: 60%
• Wyrównanie modułu: do lewej

Rozstaw

Następnie dodamy kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 57px
• Dolna wyściółka: 57px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px

Cień Pudełka

Wraz z subtelnym pudełkowym cieniem.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.23)

Dodaj moduł tekstowy do kolumny 3

Dodaj zawartość

Przejdź do następnej i ostatniej kolumny. Dodaj moduł tekstowy z tytułem H3 swojego posta na blogu i linkiem. Dodaj szczegóły posta w stylu tekstu akapitowego tuż pod tytułem.

Ustawienia tekstu

Przejdź do zakładki projektowania modułu tekstowego i zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Source Serif Pro
• Kolor tekstu: #a8a8a8
• Rozmiar tekstu: 12px

Ustawienia tekstu H3

Kontynuuj, zmieniając również ustawienia tekstu H3.

• Czcionka nagłówka 3: Dydaktyka gotycka
• Grubość czcionki nagłówka 2: pogrubiona
• Rozmiar tekstu nagłówka 3: 17px

Rozstaw

Na koniec musimy dodać kilka niestandardowych wartości odstępów. Zauważysz, że do modułu dodajemy również ujemny lewy margines. To ostatni krok w kierunku stworzenia innego rodzaju struktury kolumn na mniejszych ekranach. Tak więc, chociaż struktura kolumn jest technicznie nadal taka sama, połączyliśmy tła kolumn, szerokości modułów i ujemny lewy margines, aby stworzyć inaczej wyglądający wynik.

• Górny margines: 35px
• Lewy margines: -80px (komputer), -50px (tablet i telefon)
• Prawe wypełnienie: 20px

Klonuj rząd dwa razy

Po zakończeniu modyfikowania wiersza i wszystkich jego modułów możesz sklonować cały wiersz dowolną liczbę razy, w zależności od liczby najnowszych postów na blogu, które chcesz wyróżnić.

Zmień ikony

Zmień ikonę każdego duplikatu.

Modyfikuj zawartość i linki

Wraz z treścią i linkami, które są zaangażowane, i gotowe!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście pokazaliśmy Ci, jak stworzyć oszałamiający projekt mobilny, który prezentuje Twoje najnowsze posty na blogu. Projekt, który odtworzyliśmy krok po kroku, jest przeznaczony głównie dla mniejszych ekranów, ale świetnie wygląda również na tablecie i komputerze stacjonarnym. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!