Jak usunąć paski boczne z Divi

Usunięcie paska bocznego z domyślnego szablonu strony Divi można łatwo zrobić, gdy korzystasz z Divi Builder. Ponieważ jednak domyślne szablony stron Divi (z paskiem bocznym) nadal wyświetlają się na stronach takich jak 404 i archiwa, możesz całkowicie usunąć pasek boczny z szablonu.

Najbardziej oczywistym sposobem na zastąpienie domyślnego układu prawego paska bocznego Divi jest użycie Divi Builder do zaprojektowania strony lub postu. Jeśli jednak nie zamierzasz używać Divi Builder do strony lub posta, istnieją dwa główne sposoby usunięcia paska bocznego. Pierwszym z nich jest zmiana układu strony dla każdej strony podczas edytowania pojedynczej strony lub postu. Drugim jest zastąpienie domyślnego szablonu strony lub posta poprzez zbudowanie niestandardowego szablonu w Divi Theme Builder.

Dzisiaj pokażę Ci różne sposoby usuwania pasków bocznych w domyślnym szablonie Divi i zastępowania szablonów za pomocą Divi Builder. Mamy nadzieję, że zapewni to narzędzia potrzebne do stworzenia konsekwentnie zaprojektowanej witryny o pełnej szerokości.

Zacznijmy!

Usuwanie pasków bocznych na stronach za pomocą ustawień strony Divi

Zmiana domyślnego układu prawego paska bocznego dla poszczególnych postów lub stron

W przypadku stron lub postów, które nie korzystają z Divi Builder, domyślny układ strony zawiera prawy pasek boczny, który wygląda następująco:

Jeśli nie chcesz używać Divi Builder dla tej strony lub postu i po prostu chcesz usunąć pasek boczny dla każdej strony, po prostu znajdź pole Ustawienia strony Divi na pasku bocznym podczas edycji strony i wybierz pełną szerokość (lub nie pasek boczny ) dla układu strony.

Spowoduje to usunięcie paska bocznego dla tego konkretnego posta lub strony.

Usuwanie pasków bocznych na stronie sklepu WooCommerce, stronie kategorii i stronach produktów za pomocą opcji motywu Divi

Jeśli masz zainstalowany WooCommerce, możesz znaleźć kilka opcji w opcjach motywu Divi, aby zmienić układ strony WC Shop, Category i Product.

Aby usunąć pasek boczny na stronach sklepu WC i kategorii, przejdź do Divi> Opcje motywu. Na karcie Ogólne znajdź opcję „Układ strony sklepu i kategorii dla WooCommerce” i zmień układ na „Bez paska bocznego” lub „Pełna szerokość”.

Aby usunąć pasek boczny dla stron produktów, przejdź do Divi> Opcje motywu. Wybierz zakładkę Konstruktor. W sekcji Integracja typu posta wybierz układ produktu „Bez paska bocznego” z menu rozwijanego.

Usuwanie pasków bocznych poprzez budowanie niestandardowych szablonów za pomocą Kreatora motywów

Usunięcie pasków bocznych dla każdej strony/postu z ustawieniami strony Divi jest dobrym rozwiązaniem przy tworzeniu nowych postów i stron indywidualnie. Może to jednak być dość uciążliwe, zwłaszcza jeśli zdecydujesz się usunąć paski boczne ze wszystkich stron. Ponadto domyślny szablon (z paskiem bocznym) nadal wyświetla się na stronach takich jak 404 i archiwach. Możesz więc całkowicie usunąć pasek boczny ze strony lub szablonu posta. Aby to zrobić, możesz tworzyć niestandardowe szablony za pomocą Divi Theme Builder. Daje to pełną kontrolę nad tym, jakie strony chcesz ukryć na paskach bocznych globalnie.

Divi's Theme Builder to potężne narzędzie do projektowania globalnych szablonów, które będą miały zastosowanie do dowolnej strony lub postu, którego potrzebujesz. Za każdym razem, gdy tworzysz nowy układ treści dla szablonu, ten szablon zastąpi domyślny układ strony Divi (który zawiera pasek boczny). Dlatego wszystko, co musisz zrobić, aby usunąć pasek boczny na poziomie szablonu, to utworzyć nowy szablon w Divi Theme Builder i przypisać go do wybranych stron lub postów.

Tworzenie szablonu wpisu na blogu o pełnej szerokości za pomocą Divi Builder

Posty na blogu są doskonałym przykładem tego, gdzie może być potrzebny szablon dla całej witryny bez paska bocznego. Wbudowane opcje zawartości dynamicznej Divi umożliwiają zaprojektowanie szablonu postu na blogu, który zostanie zastosowany do wszystkich postów na blogu w całej witrynie za pomocą Divi Builder i zawartości dynamicznej. Gdy to zrobisz, wszystko, co musisz zrobić, to zaktualizować rzeczywistą zawartość treści dla wszystkich przyszłych postów. Nowa treść posta odziedziczy projekt niestandardowego szablonu!

Oto krótki przykład, jak to zrobić:

Najpierw utwórz nowy szablon i przypisz szablon do wszystkich postów.

Następnie dodaj do szablonu niestandardową treść.

Korzystając z Edytora układu szablonów, zaprojektuj cały układ za pomocą Divi Builder w połączeniu z wbudowanymi modułami i opcjami dynamicznej zawartości Divi.

Na przykład, możesz użyć modułu Tytuł posta, aby dynamicznie wyświetlić tytuł posta. Możesz też wciągnąć tytuł posta jako treść dynamiczną do treści modułu tekstowego i owinąć go tagami H1.

Możesz użyć modułu obrazu, aby pobrać polecany obraz jako zawartość dynamiczną.

Lub użyj serii modułów notatek, które pobierają określone metadane jako treści dynamiczne, takie jak autor posta, biografia autora posta, kategorie postów, data publikacji posta i liczba komentarzy.

Co najważniejsze, podczas tworzenia dowolnego niestandardowego układu treści dla szablonu musisz uwzględnić moduł Post Content. Moduł treści posta zawiera obszar dla treści strony lub posta, który ma być wyświetlany w obszarze treści szablonu.

Po utworzeniu szablonu możesz łatwo utworzyć nowy post na blogu za pomocą domyślnego edytora postów WordPress i odziedziczyć projekt szablonu postu na blogu, który utworzyłeś za pomocą Kreatora motywów Divi.

Aby uzyskać więcej informacji, zapoznaj się z naszym postem na temat projektowania szablonu postu na blogu za pomocą Kreatora motywów Divi.

Tworzenie szablonu strony produktu o pełnej szerokości WooCommerce za pomocą Divi Builder

Jeśli chcesz usunąć domyślny pasek boczny dla stron produktów, możesz również utworzyć ładny szablon układu o pełnej szerokości dla wszystkich swoich postów na blogu. Podobnie jak w przypadku szablonu postu na blogu, możesz również użyć wbudowanych modułów Divi WooCommerce (lub Woo), aby zbudować niestandardowy szablon strony produktu dla całej witryny bez paska bocznego.

Aby to zrobić, po prostu utwórz nowy szablon i przypisz szablon do „Wszystkie produkty”.

Następnie dodaj niestandardową treść do szablonu i kliknij, aby zbudować układ treści za pomocą edytora szablonów.

Następnie użyj Divi Builder, aby dołączyć dynamiczne moduły Woo do zaprojektowania szablonu strony produktu.

Teraz tworzysz nowy produkt na zapleczu za pomocą standardowego edytora strony produktu, produkt automatycznie odziedziczy projekt przypisanego szablonu treści.

Aby uzyskać więcej informacji, zapoznaj się z naszym postem na temat tworzenia szablonu strony produktu woo dla całej witryny.

Tworzenie szablonów stron archiwum o pełnej szerokości za pomocą Divi Builder

Theme Builder ułatwia również projektowanie szablonów stron archiwum bez pasków bocznych. Kluczem do stworzenia szablonu dla strony kategorii jest utworzenie nowego szablonu i przypisanie go do jednego z wielu szablonów archiwum dostępnych w Divi Builder. Na przykład, możesz przypisać go do wszystkich stron archiwum w całej witrynie lub możesz przypisać go do szablonu strony kategorii, aby wyświetlał tylko strony wyświetlające archiwum postów w ramach kategorii.

Pierwszy istotny element zawartości dynamicznej szablonu archiwum musi zawierać tytuł posta/archiwum.

Drugim istotnym elementem treści dynamicznych jest faktyczne archiwum postów do wyświetlenia. Aby to zrobić, dodaj moduł bloga i wybierz opcję wyświetlania postów dla bieżącej strony.

Aby zapoznać się z pełnym przewodnikiem, zapoznaj się z naszym postem na temat tworzenia szablonu strony kategorii dla swojego bloga za pomocą Kreatora motywów Divi.

Tworzenie szablonu strony o pełnej szerokości 404 za pomocą Divi Builder

Theme Builder ułatwia również zaprojektowanie szablonu strony 404 dla Twojej witryny Divi bez domyślnego paska bocznego. Strona 404 niekoniecznie opiera się na żadnej dynamicznej zawartości, więc możesz zaprojektować wszystko, co chcesz, za pomocą Divi Builder.

Aby uzyskać pełny przewodnik, zapoznaj się z naszym postem na temat tworzenia szablonu strony 404 za pomocą Kreatora motywów Divi.

Tworzenie szablonu strony wyszukiwania o pełnej szerokości za pomocą Divi Builder

Theme Builder ułatwia również zaprojektowanie szablonu strony wyników wyszukiwania dla witryny Divi bez domyślnego paska bocznego. Podobnie jak szablony stron kategorii, kluczem do tworzenia szablonu wyników wyszukiwania jest utworzenie niestandardowego obszaru treści i uwzględnienie następujących elementów:

1: Tytuł posta/archiwum jako treść dynamiczna

2: Moduł Blog do wyświetlania postów na bieżącej stronie.

3: Moduł wyszukiwania umożliwiający użytkownikom kontynuowanie wyszukiwania w razie potrzeby.

Aby zapoznać się z pełnym przewodnikiem, zapoznaj się z naszym postem na temat tworzenia szablonu strony wyników wyszukiwania dla swojej witryny za pomocą narzędzia Divi Theme Builder.

Nie twórz szablonu treści o pełnej szerokości dla wszystkich stron, chyba że masz konkretny powód

Tworzenie niestandardowego szablonu z układem treści o pełnej szerokości dla wszystkich stron może początkowo wydawać się dobrym pomysłem. Jednak może nie działać zgodnie z oczekiwaniami. Na przykład możesz ograniczyć obszar, w którym możesz użyć Divi Builder dla strony lub utworzyć obszar ciała, który jest zbyt szeroki dla stron, które nie korzystają z Divi Builder. Dlatego lepiej jest utworzyć szablon strony tylko dla tych stron, które nie będą korzystać z Divi Builder.

Aby uzyskać więcej informacji, zapoznaj się z dokumentacją dotyczącą tworzenia globalnego szablonu ciała.

Usuwanie domyślnego paska bocznego za pomocą niestandardowego CSS

Jeśli używasz domyślnych układów stron tematycznych Divi bez korzystania z Divi Builder lub jeśli chcesz pozbyć się paska bocznego w całej witrynie bez konieczności zastępowania go za pomocą indywidualnych ustawień strony lub szablonów kreatora motywów, możesz użyć starego dobrego CSS .

Przejdź do Divi > Opcje motywu. Na karcie Ogólne wklej następujący kod w polu Niestandardowy CSS na dole strony:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Końcowe przemyślenia

Tworząc witrynę internetową, ważne jest, aby wszystkie Twoje strony zachowały ten sam spójny układ i projekt. Tak więc, jeśli budujesz witrynę z układem o pełnej szerokości za pomocą Divi Builder, możesz domyślnie zachować ten układ dla wszystkich stron. Może to poprawić wrażenia użytkownika. Jeśli już, masz teraz możliwość dostosowywania wyświetlania paska bocznego według własnego uznania.

Mam nadzieję, że okaże się to przydatne dla Twojej witryny i przyszłych projektów.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!