Jak dodać niestandardowe szablony i projekt do formatów postów na blogu Divi (część 3 z 3)
Opublikowany: 2017-05-04Witamy w dniu 3 z 3, ostatnim dniu z naszej serii dotyczącej dodawania niestandardowych stylów do formatów postów na blogu Divi. Domyślnie Divi zawiera sześć formatów postów na blogu: Standardowy, Wideo, Audio, Cytat, Galeria i Link. W tej serii nauczymy Cię, jak dostosować je za pomocą php i css.
Dzisiaj jest ostatni dzień naszej serii poświęconej dodawaniu niestandardowych szablonów i stylów do formatów postów na blogu Divi. Ostatni dzień serii poświęcony jest designowi. Z naszym single.php dostosowanym i aktywnym motywem potomnym, jesteśmy gotowi dodać stylizację do formatów postów na blogu.
Przeprowadzę Cię przez wszystkie sześć formatów postów, ponieważ do każdego z nich dodamy unikalne akcenty projektowe. Pod koniec tego samouczka będziesz mieć sześć świetnie wyglądających alternatyw dla domyślnych formatów postów na blogu, z którymi pochodzi Divi.
Będziesz mieć również dość unikalną stronę bloga, która wyświetla różne elementy polecane w formacie postu. Na przykład format linku wyświetli niestandardowe pole linku zamiast miniatury polecanego obrazu. Post w formacie galerii wyświetli suwak obrazu Twojej galerii zamiast miniatury polecanego obrazu. I tak dalej.
Oto rzut oka na to, jak wyglądałby Twój blog po dzisiejszym samouczku (używam modułu Divi Blog z układem siatki w gifie poniżej).
Zacznijmy.
Konfigurowanie ogólnych ustawień projektu w konfiguratorze motywów
Najpierw musimy wprowadzić kilka ogólnych zmian stylu za pomocą dostosowywania motywu. Z pulpitu nawigacyjnego WordPress przejdź do Divi → Theme Customizer → Ustawienia ogólne → Ustawienia układu i zmień następujące elementy:
Szerokość rynny witryny: 2
Zaznacz Użyj niestandardowej szerokości paska bocznego
Szerokość paska bocznego: 30
Również w Theme Customizer, przejdź do Schematy kolorów i wybierz Pomarańczowy.
Przyjrzyjmy się teraz, jak do tej pory wygląda Twój standardowy post:
Jak widać, nadal wymaga stylizacji, ale wszystko jest na swoim miejscu. Masz sekcję bohatera obejmującą całą szerokość strony. Nie masz jeszcze wyróżnionego obrazu, więc tło pokazuje tylko gradient dodany wcześniej do pliku single.php. Również tytuł i meta posta znajdują się w sekcji bohatera. Teraz nadszedł czas na dodanie pozostałych elementów projektu.
Stylizowanie sekcji bohaterów dla wszystkich formatów postów
Ponieważ każdy z Twoich formatów postów będzie miał tę samą sekcję bohatera i projekt paska bocznego, możesz najpierw dodać ten niestandardowy CSS. Wróć do Theme Customizer, kliknij Dodatkowy CSS na dole i dodaj następujący niestandardowy CSS:
.hero-section {
padding-top: 120px;
padding-bottom: 120px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
max-height: 450px;
background-color: #333;
}
.single-post #main-content #left-area {padding-top: 0px;}
/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}
/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
@media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
}
Sprawdź teraz, jak teraz wygląda standardowy post.
Dzięki sekcji bohatera i stylizacji paska bocznego możesz nadać styl indywidualnym formatom postów.
Stylizacja standardowego formatu postu
Standardowy format postów to domyślny format dla wszystkich Twoich postów na blogu. Podczas edycji wpisu możesz wybrać standardowy format wpisu.
Wszystko, co zamierzamy zrobić dla tego standardowego formatu, to dodać polecany obraz. Ponieważ opisywany obraz rozciąga się na całą szerokość ekranu, sugeruję użycie obrazu o wymiarach 2000 x 600. Używam obrazów z unsplash.com.
Po dodaniu polecanego obrazu sprawdź, jak wygląda standardowy post.
Stylizacja formatu posta wideo
Aby wystylizować format postu wideo, upewnij się, że dla posta wybrano format wideo.
Następnie dodaj adres URL lub umieść film wideo do swoich treści. Format wideo przyjmie pierwszy adres URL wideo, tag wideo lub osadzi go i wyświetli go u góry treści posta. Ten film wideo zastąpi również polecany obraz na stronie Twojego bloga.
W tym przykładzie używam tylko adresu URL wideo z YouTube.
Dodaj swój wyróżniony obraz o wymiarach 2000 x 600 do posta.
Następnie dodamy dodatkową stylizację do polecanego filmu, aby nadać filmowi białą ramkę i lekko go podnieść, tak aby nakładał się na sekcję bohatera i nieco się wyróżniał.
Przejdź do Theme Customizer → Dodatkowy CSS i dodaj następujący niestandardowy CSS:
/* ---- Format the Position of the Video Wrapper ---- */
@media only screen and (min-width: 980px) {
/*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}
Teraz sprawdź swój nowy post w formacie wideo.
Alternatywnie możesz zrobić ten post o pełnej szerokości, aby uzyskać kolejną świetną opcję projektowania. Po prostu przejdź do edycji swojego posta i w ustawieniach Divi Post w prawym górnym rogu strony wybierz układ strony o pełnej szerokości.
Teraz sprawdź post o pełnej szerokości wideo:
Stylizacja formatu postu audio
W przypadku formatu postu audio upewnij się, że dla posta wybrano format dźwięku.
Dodaj wyróżniony obraz o wymiarach 2000 x 600.
Następnie dodaj swój plik audio do swojego posta. Może to być plik .mp3, .m4a, .ogg lub .wav. Możesz przesłać plik audio do biblioteki multimediów i wstawić do swojego posta na trzy różne sposoby (wstaw odtwarzacz multimediów, link do pliku multimedialnego lub link do strony załącznika).
Każda z tych trzech opcji będzie działać. Ale w tym przykładzie dodam prosty adres URL do pliku audio. WordPress przekonwertuje ten adres URL audio na odtwarzacz multimedialny na górze posta.
Przyjrzyjmy się teraz poście o formacie audio.
Nie jest źle, ale mogłoby być lepiej. Ukryjmy zduplikowany odtwarzacz multimedialny, który wyświetla się pod pomarańczowym odtwarzaczem multimedialnym, i dodajmy obraz tła do naszego pomarańczowego odtwarzacza multimedialnego.
Przejdź do Theme Customizer → Dodatkowy CSS i dodaj następujący niestandardowy CSS:
/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Hide the Duplicate Audio Player ------ */
div#mep_1 {display: none;}
Następnie znajdź i prześlij obraz do swojej galerii multimediów (powinien mieć około 700 x 300). Następnie skopiuj adres URL i wklej w powyższym CSS, gdzie jest napisane „WPROWADŹ URL OBRAZU TUTAJ”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Teraz sprawdź swój nowy post w formacie audio.
Stylizacja formatu posta z cytatem
W przypadku formatu posta z wyceną upewnij się, że dla posta został wybrany format wyceny.
Następnie dodaj do posta wyróżniony obraz o wymiarach 2000 x 600.
Format cytatu wykorzystuje krótki kod cytatu blokowego do wygenerowania niestandardowego wyświetlania cytatu. Dodaj więc cytat blokowy do swojej treści, aby wyświetlić niestandardowy cytat.
Teraz sprawdź swój post.
Dostosujmy polecane pole cytatu za pomocą małego kodu CSS, aby uzyskać obraz tła i duże cytaty w prawym górnym rogu.
Przejdź do Theme Customizer → Dodatkowy CSS i dodaj następujący niestandardowy CSS:
/* ---- Add Background Image to the Quote Box ---- */
.et_quote_content {
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
}
/* ---- Add the Quotation Symbol to the Quote Box ---- */
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px;
font-color: #fff;
content: "\201C" !important;
}
/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}
Znajdź i prześlij obraz do swojej galerii multimediów (powinien mieć około 700 x 300). Następnie skopiuj adres URL i wklej w powyższym CSS, gdzie jest napisane „WPROWADŹ URL OBRAZU TUTAJ”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Teraz sprawdź swój końcowy wynik:
Stylizacja formatu postu w galerii
W przypadku formatu postu w galerii upewnij się, że dla posta został wybrany format galerii.
Następnie dodaj swój polecany obraz o wymiarach 2000 x 600.
Gallery Post Format pozwala tworzyć galerię w treści posta z galerii multimediów.
Aby utworzyć galerię dla swojego postu, najpierw prześlij co najmniej 6 obrazów do swojej galerii multimediów. Rozmiar obrazu może się różnić, ale ponieważ galeria ma efekt lightbox, który powiększa obrazy do pełnego rozmiaru, możesz zrobić obrazy około 1200 x 800.
Teraz wybierz swoje obrazy w galerii multimediów, wybierz Utwórz galerię i kliknij przycisk „Utwórz nową galerię”.
Teraz powinieneś mieć krótki kod galerii w swojej treści.
Ta galeria będzie wyświetlana w Twoim poście w układzie mozaiki o szerokości trzech kolumn. Galeria zastąpi również wyróżniony obraz na stronie bloga suwakiem obrazów galerii.
Teraz sprawdź swój post.
Dodajmy trochę CSS do galerii, aby ją nieco podnieść, aby zakryć sekcję bohatera i zmienić marginesy wokół każdego z obrazów.
Przejdź do Theme Customizer → Dodatkowy CSS i dodaj następujący niestandardowy CSS:
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important;
background: #fff !important;
}
/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
.et_gallery_item { margin: 0 0 0 0 !important;}
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}
Teraz sprawdź efekt końcowy.
Stylizacja formatu posta z linkiem
W przypadku formatu postu z linkiem upewnij się, że dla posta wybrano format linku.
Następnie dodaj wyróżniony obraz o wymiarach 2000 x 600 do swojego posta.
Link Post Format przyjmuje pierwszy link w poście i wyświetla go na górze treści w polu. Ten niestandardowy sposób wyświetlania linku zastępuje również miniaturę polecanego obrazu dla tego posta na stronie Twojego bloga.
Śmiało dodaj link do swojego posta i sprawdź projekt posta.
Teraz ulepszymy nieco projekt, dodając obraz tła do niestandardowego pola linku i ikonę po lewej stronie adresu URL linku.
Przejdź do Theme Customizer → Dodatkowy CSS i dodaj następujący niestandardowy CSS:
/* ---- Add thick border to the left side and Lower the link box ---- */
.et_link_content {
border-bottom: 8px solid #ddd;
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059;
border-radius: 25px;
}
/* ---- Font Settings within the Link box ---- */
.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}
/* ---- Link Symbol on the right side ---- */
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px;
color: #fff;
content: "\e02c";
}
/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
@media only screen and (min-width: 980px) {
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
Następnie znajdź i prześlij obraz do swojej galerii multimediów (powinien mieć około 700 x 300). Następnie skopiuj adres URL i wklej go we fragmencie CSS, który właśnie wpisałeś, gdzie jest napisane „WPISZ URL OBRAZU TUTAJ”.
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
Sprawdź teraz jak wygląda post.
Otóż to!
Teraz, gdy mamy już zaprojektowane wszystkie nasze formaty postów, nadszedł czas, aby sprawdzić, jaki fajny układ tworzy na stronie bloga. Możesz zobaczyć, jak wyświetlane są wszystkie polecane elementy w różnych formatach postów.
Uwaga: możesz wyświetlić swojego bloga za pomocą domyślnego edytora lub Divi Builder, a projekt będzie nadal działał.
Czuły?
Wszystkie formaty postów są całkowicie responsywne i działają dobrze na wszystkich urządzeniach. Oto przykład tego, jak wygląda post w formacie galerii, gdy zmniejszam rozmiar ekranu:
Końcowe przemyślenia
Gratulacje! Wszystko gotowe. Mam nadzieję, że podobała Ci się ta 3-częściowa seria poświęcona dostosowywaniu formatów postów na blogu. Jeśli już, to mam nadzieję, że nauczyłeś się czegoś wartościowego do zabrania ze sobą na kolejny projekt. Po ukończeniu samouczka możesz eksperymentować z własnymi elementami projektu dla formatów postów na blogu.
Prosimy o przesłanie komentarzy poniżej. Czekam na kontakt z Państwem.