Czy chcesz umieszczać posty na blogu w Divi?
Dzisiaj pokażemy Ci kreatywny sposób prezentowania postów na blogu jako pływających kart w Divi. Każdy blog lub Witryna internetowa powinno dążyć do osiągnięcia doskonałości treść atrakcyjne i być może równie ważne lub dostępne.
Jednym ze sposobów zapewnienia, że treść pozostaje dostępny dla użytkowników, jest umieszczenie go na stronie.
A dla blogerów pokażemy, jak prezentować artykuły z Twój blog jako karty pływające, dzięki czemu pozostają widoczne podczas przewijania strony.
Chodźmy.
badanie
Oto krótki przegląd wyniku, który uzyskamy na końcu tego samouczka.
To, czego potrzebujesz, aby zacząć
Zanim zaczniesz tworzyć ten projekt w Divi, musisz wykonać następujące czynności:
- Utwórz nową stronę, nadaj odpowiednią nazwę i kliknij „Użyj Divi Builder”
- Wybierz opcję Wybierz układ”.
- Znajdź i wybierz układ 'strona docelowa blogera".
- Kliknij przycisk Wybierz układ aby załadować go na stronę.
Następnie będziesz mieć gotowy układ gotowy do użycia w tym samouczku.
Jak stworzyć pływające kartki na blogu za pomocą modułu blogu Divi
Teraz, gdy układ jest załadowany na stronie, jesteśmy gotowi do tworzenia pływających kart postów na naszym blogu.
Czytaj także: Jak utworzyć przyklejony globalny nagłówek w Divi
Utwórz nową sekcję na samym dole układu.
Następnie dodaj do sekcji nowy wiersz z jedną kolumną.
Dodaj moduł Blog i tytuł do wiersza/kolumny
Zamiast tworzyć tutaj nowy moduł Blog, przewiń w górę i znajdź istniejący moduł Blog wyświetlający trzy wpisy na blogu (znajduje się w trzeciej sekcji w pobliżu środka strony). Otwarty " Inne parametry modułu »I wybierz« Kopia modułu”.
Następnie wklej moduł do nowego, jednokolumnowego wiersza, który utworzyliśmy na dole strony, klikając prawym przyciskiem myszy szarą ikonę plusa i wybierając „ Wklej moduł”.
Następnie dodamy tytuł nad naszymi postami na blogu, który będzie również unosił się nad kartami blogów. Aby to zrobić, skopiuj istniejący moduł Tekst z małym tekstem tytułu " Styl życia”.
Następnie wklej moduł tuż nad nowym modułem Blog, który właśnie dodaliśmy.
Następnie edytuj tekst tytułu, aby opisać typ postów na blogu, które chcesz wyróżnić. W tym przykładzie użyjemy po prostu „ Top Story”.
Dostosowywanie linii ze stałą pozycją i niestandardową szerokością
Chcemy zmniejszyć rozmiar ruchomych postów na blogu, aby nie zajmowały zbyt dużo miejsca na stronie, gdy mają stałą pozycję. To byłoby zabawne. Aby to zrobić, otwórz ustawienia linii i zaktualizuj następujące elementy:
Aby elementy unosiły się w powietrzu, musimy nadać linii stałą pozycję. Na karcie Zaawansowane zaktualizuj następujące elementy:
- Pozycja: Naprawiono
- Lokalizacja: dolny prawy
- Przesunięcie w pionie: 20px
- Przesunięcie w poziomie: 20px
- Indeks Z: 12
Zaktualizowany moduł bloga z minimalną zawartością i cieniem w pudełku
Ogólnie rzecz biorąc, moduł Blog ma już trzykolumnowy układ siatki i ładny styl, który jest dostarczany z wybranym przez nas pakietem układów. Ale jest kilka rzeczy, które musimy zrobić.
Zobacz także: Jak stworzyć globalny nagłówek z formularzem logowania w Divi
Przede wszystkim musimy zmniejszyć rozmiar map (w pionie) i usunąć z nich część elementów treść.
Aby to zrobić, otwórz ustawienia bloga i ukryj wszystkie elementy z wyjątkiem polecanego obrazu. Spowoduje to, że post będzie zawierał tylko wyróżniony obraz i tytuł.
Na karcie Styl skonfiguruj cień pudełka w następujący sposób:
- Pudełko cienia: Zobacz zrzut ekranu
- Siła rozmycia cieni w pudełku: 28px
- Kolor czcionki napisów: rgba(0,0,0,0.19)
badanie
Oto podgląd dotychczasowego wyniku.
Spraw, aby wiersz artykułów pojawił się po najechaniu kursorem
Na koniec możemy dodać ładny efekt najechania, który zachęca użytkowników do interakcji z pływającymi artykułami.
Czytaj także: Jak stworzyć stronę bloga za pomocą modułu Blog w Divi
Otwórz ustawienia linii i opcje aktualizacji:
Do biura
- Transformacja: 50%
Dla stanu najechania
- Przekształcenie: 0%
Spowoduje to początkowo przeniesienie całej linii poza obszar roboczy przeglądarki o 50%. Gdy użytkownik najedzie kursorem na linię, całkowicie wróci do widoku.
Ukryj wiersz na urządzeniu mobilnym
Jeśli nie chcesz opublikować jednego posta na blogu, nie ma sensu umieszczać go na urządzeniach mobilnych. Prawdopodobnie zajęłoby to zbyt dużo miejsca i spowodowałoby problemy podczas przewijania.
Zobacz także: Jak dodać formularz kontaktowy do globalnego nagłówka w Divi
Aby ukryć mapy na telefonie komórkowym, otwórz ustawienia sekcji i wyłącz widoczność sekcji na telefonie i tablecie.
Ostateczny wynik
Pobierz DIVI teraz !!!
Wnioski
Więc ! W tym samouczku pokazaliśmy Ci kreatywny i oryginalny sposób prezentowania postów na blogu, które chcesz wyróżnić.
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.
...
