Jak stworzyć blog w średnim stylu z Divi

W dzisiejszym poście na blogu Divi podzielimy się kilkoma świetnymi wskazówkami, jak stworzyć własną witrynę blogową w tym samym stylu, co blog Medium.

Wiadomo, że Medium jest jedną z najczęściej używanych platform do blogowania. Nie tylko mają dużą społeczność blogerów, którzy regularnie kontaktują się ze swoimi odbiorcami, ale ich platforma blogowa zapewnia również bardzo przyjemne wrażenia użytkownika. To jest dokładnie to, czego chce każdy bloger. Chcą mieć pewność, że dostarczają wiadomość w jasny sposób i w środowisku, w którym czytelnik czuje się komfortowo.

Jednak blogowanie na Medium ma swoje ograniczenia. Na przykład nie ma żadnych korzyści z SEO. Tworząc własny blog, który jest inspirowany stylem bloga Medium, możesz kontynuować to znajome uczucie, które już mają z blogiem Medium i przenieść je na własną stronę internetową.

Zacznijmy

Subskrybuj nasz kanał YouTube

Pokażemy Ci najważniejsze etapy tworzenia bloga w stylu średnim, a także pokażemy krok po kroku, jak stworzyć niektóre z najważniejszych części. Na przykład; jak stworzyć szablon postu na bloga w stylu Medium, którego możesz użyć we wszystkich swoich postach. Szablon wygląda tak:

Pokażemy Ci również, jak dodać wtyczki Worth The Read oraz Highlight and Share, aby wyglądały jeszcze bardziej podobnie. Wynik warty przeczytania wygląda tak:

Podświetlenie i udostępnienie będzie miało następujący efekt:

Stwórz proste menu, takie jak średni blog

Jedną z rzeczy, które można wyraźnie zauważyć odwiedzając stronę Medium, jest prostota ich menu. Nie ma zbyt wielu dostępnych opcji, co od razu ułatwia odwiedzającym nawigację. Odwiedzający mogą przeglądać wyróżnione posty na blogu na stronie głównej i stamtąd kontynuować swój pobyt.

Elementy menu

Wybierz logo, które pasuje do prostoty reszty Twojej witryny i upewnij się, że jest subtelne, nadając mu niewielki rozmiar w swoim menu. Zdecydowanie nie chcesz, aby logo przytłaczało treści, które udostępniasz w swojej witrynie.

Następnie nie umieszczaj w nawigacji zbyt wielu stron. Ponieważ Twoja witryna będzie dotyczyć blogów, prawdopodobnie wystarczy strona główna. Możesz również rozważyć dodanie strony z informacjami, jeśli chcesz powiedzieć odwiedzającym trochę więcej o sobie.

Idąc dalej, dodaj ikonę wyszukiwania, aby ludzie mogli łatwo przeszukiwać Twoje posty na blogu za pomocą kilku słów kluczowych. Chodzi o treść, którą tworzysz i ułatwiasz jej znalezienie.

W powyższym przykładzie użyliśmy następujących ustawień głównego paska menu w konfiguratorze motywów:

• Wysokość menu: 54
• Maksymalna wysokość logo: 37
• Rozmiar tekstu: 18

Użyj palety kolorów z kontrastem i prostymi czcionkami

Blog Medium używa trzech głównych kolorów na całej swojej platformie, dzięki czemu treść jest łatwa do odczytania. Chociaż dwa kolory mogą wydawać się czarno-białe, są nieco bardziej miękkie w oczach. Trzeci ma jasnoszary, ale czytelny kolor. Dokonaj następujących zmian w głównym pasku menu w konfiguratorze motywów, aby zmienić kolory i czcionki używane w menu głównym:

• Czcionka: Source Sans Pro
• Kolor tekstu: rgba (0,0,0,.44)
• Kolor aktywnego łącza: rgba (0,0,0,.44)
• Kolor tła: #fbfcfd

Dołącz ikonę wyszukiwania

Ponadto, aby umieścić ikonę wyszukiwania w menu głównym, przejdź do opcji Nagłówek i nawigacja > Elementy nagłówka > Pokaż ikonę wyszukiwania.

Wyłącz stały pasek nawigacyjny

Inną rzeczą, jaką robi blog Medium, jest utrzymywanie paska nawigacyjnego u góry strony. W ten sposób odwiedzający nie będą niepotrzebnie przerywani podczas czytania. Aby wyłączyć stały pasek nawigacji w witrynie Divi, przejdź do panelu WordPress> Divi> Opcje motywu> Ustawienia ogólne> Wyłącz stały pasek nawigacji.

Wystylizuj swoją stronę główną Moduły bloga według kategorii

Następnie chcesz wystylizować stronę główną swojej witryny według kategorii. W zależności od tworzonego bloga możesz tworzyć różne sekcje na swojej stronie głównej, które odpowiadają tym, co Twoi użytkownicy najbardziej lubią czytać. Zalecamy korzystanie przynajmniej z następujących kategorii: popularne, najnowsze i sugerowane. Możesz przypisywać posty na blogu do tych kategorii, tworząc różne kategorie na stronie „Kategorie” w menu „Wpisy” w menu WordPress i przypisując każdy post do jednej lub więcej kategorii w samym poście.

Inną rzeczą, którą naprawdę chcesz zrobić, jest ułatwienie śledzenia różnych modułów i sekcji bloga na stronie głównej. Aby to osiągnąć, możesz użyć standardowej siatki blogów w kreatorze Divi lub możesz wyszukać coś bardziej zaawansowanego. Poniżej wymieniliśmy trzy wtyczki, których możesz użyć.

Wtyczka do karty artykułów Divi

Wtyczka Divi Article Card to darmowa wtyczka, która została udostępniona na naszym blogu podczas Divi 100. Styl używany w tej wtyczce jest czysty i ma ładny efekt najechania kursorem. To prosty efekt, ale może nadać Twojemu blogowi dodatkowy akcent.

Wtyczka jest całkowicie darmowa, wystarczy przejść do wpisu i pobrać!

Niestandardowy moduł bloga Divi

Kolejną wtyczką, która stworzyła ładnie wyglądający układ Blog Module, jest Divi Custom Blog Module. Ten bardziej przypomina posty na blogu Medium niż poprzedni, ponieważ wyróżniony obraz jest umieszczony po lewej stronie.

Cena wtyczki to 20 USD.

Dodatki do bloga Divi

Ostatnią wtyczką, która może pomóc Ci zbliżyć Twój blog do wyglądu bloga średniego, jest Divi Blog Extras. Ta wtyczka ma również wiele różnych układów modułów Blog, które mogą pomóc w tworzeniu bloga w stylu średnim.

Wtyczka kosztuje 15 USD za licencję jednostanowiskową i 30 USD za licencję rozszerzoną.

Utwórz szablon postu na blogu

Medium ma standardowy format postów na blogu dla wszystkich tworzonych postów. Projekt skupia się na istocie posta: treści. Używany format postu na blogu jest zgodny z tym, jak wygląda reszta witryny: uproszczona. Sięga do celu, wykorzystując kombinację pisanej treści i mediów, które można wstawić w całym poście.

Divi oferuje te same możliwości. Możesz uczynić swój wpis na blogu tak prostym lub tak delikatnym, jak chcesz, korzystając z różnych modułów, które zapewnia konstruktor Divi. Oto przykładowy układ, który pokażemy, jak krok po kroku stworzyć:

Ustawienia Divi Post

Zacznij od dodania nowego posta, nadawania mu tytułu i aktywacji kreatora Divi. Następnie upewnij się, że ustawienia Divi Post są następujące:

• Układ strony: Pełna szerokość
• Nawigacja punktowa: wyłączona
• Ukryj nawigację przed przewijaniem: domyślnie
• Tytuł posta: Ukryj

Autor (komputer)

Aby stworzyć układ, przejdziemy do Visual Builder. Zacznij od dodania nowej sekcji z dwoma rzędami. Kontynuuj, dodając moduł obrazu do pierwszej kolumny i dwa moduły tekstowe do drugiej kolumny. Otwórz ustawienia sekcji i dodaj wybierz „#fbfcfd” jako kolor tła.

Moduł obrazu

Otwórz moduł obrazu, prześlij obraz w zakładce Treść i ustaw Wyrównanie obrazu na „Lewo” w zakładce Projekt. Idąc dalej, dodaj „-5%” do górnego marginesu i „25%” do lewego marginesu w podkategorii Odstępy na karcie Projekt.

Następnie dodaj następujący kod do elementu głównego w podkategorii Niestandardowy CSS na karcie Zaawansowane:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Pierwszy moduł tekstowy

Dodaj nazwisko autora w polu Zawartość na karcie Zawartość i dokonaj następujących zmian w podkategorii Tekst na karcie Projekt:

• Orientacja tekstu: w lewo
• Czcionka tekstu: Source Sans Pro
• Rozmiar czcionki tekstu: 18
• Kolor tekstu: rgba(0,0,0,0.8)
• Wysokość linii tekstu: 1,7 em

Przewiń w dół tę samą zakładkę, aby dodać „-3%” do górnego marginesu i „-70%” do lewego marginesu.

Drugi moduł tekstowy

Wpisz slogan w drugim module tekstowym i dokonaj następujących zmian w podkategorii Tekst na karcie Projekt:

• Orientacja tekstu: w lewo
• Czcionka tekstu: Source Sans Pro
• Rozmiar czcionki tekstu: 14
• Kolor tekstu: rgba(0,0,0,0.44)
• Wysokość linii tekstu: 1,7 em

Dodatkowo przewiń w dół tę samą zakładkę i dodaj '-5%' do Górnego marginesu i '-70%' do lewego marginesu w podkategorii Odstępy.

Widoczność wiersza

Na koniec otwórz Ustawienia wiersza i wyłącz wiersz na telefonach i tabletach w podkategorii Widoczność na karcie Zaawansowane.

Autor (komórka)

Dodaj kolejny wiersz do tej samej sekcji z wierszem o pełnej szerokości. Kontynuuj, klonując moduł obrazu i moduły tekstowe w poprzednim rzędzie i umieszczając je w rzędzie o pełnej szerokości. Będziemy musieli wprowadzić pewne modyfikacje w każdym module, aby były wyśrodkowane na ekranie, gdy ktoś otworzy stronę na telefonie komórkowym lub tablecie.

Moduł obrazu

Otwórz moduł obrazu i ustaw wyrównanie obrazu na „Centrum”.

Pierwszy moduł tekstowy

Otwórz pierwszy moduł tekstowy i zmień orientację tekstu na „Środek” w podkategorii Tekst na karcie Projekt.

Przewiń w dół tę samą kartę, usuń lewy margines i zachowaj górny margines.

Drugi moduł tekstowy

Co więcej, zrób to samo dla drugiego modułu tekstowego. Ustaw orientację tekstu na „Środek” i usuń lewy margines w podkategorii Odstępy na karcie Treść.

Widoczność wiersza

Na koniec otwórz ustawienia wiersza i wyłącz wiersz dla komputerów stacjonarnych.

Moduł tytułu posta

Ponieważ wyłączyliśmy tytuł posta w naszych ustawieniach Divi Post, dodamy moduł tytułu posta do wiersza o pełnej szerokości w tej samej sekcji, z której korzystaliśmy do tej pory.

W podkategorii Elementy zakładki Treść możemy wybrać, które elementy chcemy, aby się pojawiły. Ponieważ wspomnieliśmy już o autorze, wyłączyliśmy wszystko oprócz tytułu.

Ponadto; wprowadź następujące zmiany w podkategoriach Tekst i Tekst tytułu na karcie Projekt:

• Orientacja tekstu: Środek
• Czcionka tytułu: Source Sans Pro
• Styl czcionki tytułu: pogrubiony
• Rozmiar czcionki tytułu: 47px (komputer), 40 (tablet), 35 (telefon)
• Kolor tekstu tytułu: rgba(0,0,0,0.8)

Obrazy o pełnej szerokości

Pierwszy dodany obraz o pełnej szerokości jest reprezentacją polecanego obrazu. Dodaj sekcję o pełnej szerokości, umieść w niej moduł obrazu o pełnej szerokości i prześlij obraz w zakładce Treść. To takie proste.

Moduły tekstowe

Idąc dalej, utworzymy moduły tekstowe, które są używane w poście na blogu. Dodaj standardową sekcję z wierszem o pełnej szerokości i umieść w niej moduł tekstowy. W tym przykładzie używamy rodziny czcionek „Cardo” zamiast „Georgia”, ponieważ „Cardo” jest wbudowaną rodziną czcionek.

Ponadto otwórz ustawienia modułu Tekst, wpisz przykładowy tekst w polu Treść i przejdź do zakładki Projekt. W podkategorii Tekst wprowadź następujące zmiany:

• Orientacja tekstu: w lewo
• Czcionka tekstu: Cardo
• Rozmiar czcionki tekstu: 25px (komputer), 19px (tablet), 17px (telefon)
• Kolor tekstu: rgba(0,0,0,0.8)
• Wysokość linii tekstu: 1,8 em

Przewiń w dół tę samą kartę, dodaj „800px” do maksymalnej szerokości w podkategorii Rozmiar i dodaj „10%” do lewego marginesu w podkategorii Odstępy.

Moduł wideo

Ostatnią rzeczą, która może nadać wartość dodaną Twojemu wpisowi na blogu, jest integracja wideo. Aby to zrobić, musisz sklonować poprzednio utworzoną sekcję za pomocą modułu tekstowego i podzielić całą zawartość między dwa moduły tekstowe. Pomiędzy tymi dwiema sekcjami dodamy kolejną sekcję z wierszem o pełnej szerokości. W tym wierszu o pełnej szerokości dodamy moduł wideo.

Tak powinna wyglądać struktura w backendzie:

Poza dodaniem adresu URL nie wprowadziliśmy żadnych zmian w module wideo.

Zapisz szablon

Możesz ponownie wykorzystać różne sekcje, aby dopasować je do tworzonego posta na blogu, klonując je i zmieniając zawartość. Gdy to zrobisz, możesz zapisać szablon posta na blogu, klikając „Zapisz w bibliotece” i nadając mu nazwę.

Następnym razem, gdy będziesz chciał użyć szablonu, po prostu kliknij „Wczytaj z biblioteki” i załaduj szablon.

Warto przeczytać

Typową rzeczą przy tworzeniu bloga Medium jest liczba minut potrzebna do przeczytania określonego posta na blogu. Zwykle pojawia się na początku strony i daje użytkownikom oszacowanie, ile czasu zajmie im ukończenie czytania. W erze, w której najcenniejszy jest czas, pomaga to ludziom zdecydować, czy chcą czytać posty na blogu, czy nie.

Bezpłatna wtyczka WordPress, która pomoże Ci się tam dostać, jest warta przeczytania przez Well Done Marketing. Możesz go pobrać na stronie, do której zalinkowaliśmy, lub wyszukać go w wtyczkach. Zaletą tej wtyczki jest to, że możesz wybrać, gdzie ma się pojawiać czas czytania; strony, posty lub jedno i drugie. Możesz także wybrać umiejscowienie i format.

Po pobraniu wtyczki i jej aktywacji kliknij opcję „Postęp czytania” w jej menu. Śmiało i wprowadź zmiany, które musisz wprowadzić. Umieszczenie czasu czytania jest zwykle używane tylko w przypadku postów, więc większość ludzi prawdopodobnie wybierze tylko tę opcję.

Na karcie Styl możesz wybrać styl, którego chcesz użyć. Upewnij się, że używasz tej samej czcionki, co w tytule. Możesz także dodać niestandardowy kod CSS, jeśli chcesz wprowadzić dodatkowe modyfikacje.

Zaznacz i udostępnij

Inną typową cechą Medium jest możliwość wyróżnienia czegoś, udostępnienia lub skomentowania, jeśli Ci się spodoba. Daje wartość dodaną wpisowi na blogu, pozwalając mu na interakcję z ludźmi, którzy go czytają. Znaleźliśmy wtyczkę, która pomaga zrobić coś podobnego; wtyczka Highlight and Share, z której również można korzystać bezpłatnie.

Możesz zdecydować, w których kanałach mediów społecznościowych użytkownicy mogą udostępniać, przechodząc do opcji Ustawienia > Zaznacz i udostępnij > Włącz kanały mediów społecznościowych, których chcesz używać.

Zawijanie

Po przeczytaniu tego posta powinieneś być w stanie zacząć budować swój blog w stylu Medium, który zawiera niektóre z najbardziej odpowiednich części Medium. Masz wiele możliwości, aby zachować prostotę, tak jak robi to blog Medium, ale nadal tchnąć go osobistymi akcentami. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej, abyśmy mogli pozostać w kontakcie z naszą niesamowitą społecznością Divi!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa Julii Tim / shutterstock.com