Jak usunąć obramowanie paska bocznego Divi?

Jedną rzeczą, którą prawie każdy użytkownik Divi chce wiedzieć, jak zrobić z motywem Divi, jest usunięcie obramowania paska bocznego. Na szczęście jest to proste zadanie. Można to zrobić za pomocą kodu, ale co ważniejsze, łatwo to zrobić za pomocą Divi Theme Builder. W tym artykule pokażemy, jak usunąć obramowanie paska bocznego Divi za pomocą obu metod, i zobaczymy, dlaczego korzystanie z Divi Theme Builder daje najlepsze wyniki.

Domyślny pasek boczny Divi

Domyślne układy strony i postów Divi umieszczają linię między treścią a paskiem bocznym. Wiele elementów paska bocznego można stylizować lub dostosowywać za pomocą dostosowywania motywu, ale ten wiersz nie jest jednym z nich. Jest to obszar, w którym brakuje opcji WordPress.

Opcje motywu Divi umożliwiają przesuwanie paska bocznego w prawo lub w lewo, ale nie zawierają opcji stylizacji.

Divi dodaje również ustawienia, które pozwalają wybrać układ paska bocznego na stronie i poziom postu. Obejmuje to nawet opcję usunięcia paska bocznego, aby nie wyświetlały się widżety, dzięki czemu obszar zawartości może wykorzystać całą szerokość strony internetowej.

Te opcje dają kontrolę nad układem, ale nie nad stylami i nie usuwają obramowania paska bocznego. Przyjrzyjmy się dwóm metodom stylizowania lub usuwania obramowania paska bocznego Divi.

Usuwanie lub stylizowanie obramowania paska bocznego Divi za pomocą kodu

Najpierw zobaczmy, jak usunąć lub nadać styl obramowaniu paska bocznego motywu Divi, dodając kod do Divi.

Musisz dodać trochę kodu CSS do pola Niestandardowy CSS opcji motywu Divi. Aby uzyskać dostęp do pola Custom CSS, przejdź do Divi > Opcje motywu w menu pulpitu nawigacyjnego WordPress. Pozostań na karcie Ogólne i przewiń do dołu ustawień, aby wkleić kod.

Oto kod CSS, którego będziesz potrzebować:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Ten kod informuje WordPressa, że ​​obramowanie obszaru widżetu nie ma szerokości, przez co nie jest wyświetlane.

Wklej kod do pola Custom CSS i zapisz zmiany.

Granica jest teraz usunięta. CSS działa z motywem Divi, aby usunąć obramowanie paska bocznego, ale nie jest to idealne rozwiązanie i nie każdy chce obsługiwać jakikolwiek kod. Co zrobić, jeśli chcesz zbudować stronę bloga za pomocą Divi Builder? Najlepszą opcją jest użycie Divi Theme Builder.

Jak korzystać z kreatora motywów Divi, aby usunąć obramowanie paska bocznego Divi bez kodu?

Możliwe jest również użycie motywu Divi do usunięcia obramowania paska bocznego bez kodu. Przejdź do Kreatora motywów Divi, wybierając Divi > Kreator motywów w menu pulpitu nawigacyjnego WordPress. Jeśli nie masz jeszcze układu bloga, wybierz Dodaj nowy szablon .

Ten szablon zostanie przypisany do Twojej strony bloga, strony archiwum lub dowolnej innej strony, więc upewnij się, że ta strona została utworzona jako pierwsza.

Otworzy się modalne, w którym możesz wybrać, gdzie pojawi się ten szablon. Wybierz stronę swojego bloga w obszarze Określone strony . Możesz także tworzyć strony archiwalne, strony autorów, strony kategorii, strony dat, strony tagów i wiele więcej. Kliknij Zapisz po dokonaniu wyboru.

Do Twojej strony jest teraz przypisany pusty szablon. Następnie musisz utworzyć układ bloga. Kliknij obszar oznaczony jako Dodaj niestandardową treść .

Spowoduje to otwarcie listy rozwijanej, w której możesz wybrać, czy chcesz zbudować niestandardową treść, czy dodać ją z biblioteki. Kliknij swój wybór. Wybieram budowanie niestandardowego ciała.

Moduł paska bocznego Divi

Wybrałem układ dwukolumnowy i umieściłem moduł bloga po lewej stronie, a moduł paska bocznego po prawej. Ponieważ jest to moduł Divi, możesz umieścić pasek boczny w dowolnym miejscu, ale wybieram tradycyjny projekt po prawej stronie.

Moduł został zaprojektowany do umieszczenia po prawej lub lewej stronie i odpowiednio umieszcza obramowanie. Domyślnie moduł jest wyświetlany jako lewy pasek boczny, więc obramowanie znajduje się po prawej stronie widżetów.

Aby zmienić układ, otwórz moduł, wybierz kartę Projekt , spójrz na sekcję Układ i wybierz W prawo w polu rozwijanym Wyrównanie . Ten przykład ma teraz ramkę po lewej stronie obszaru widżetu, dzięki czemu jest to pasek boczny po prawej stronie.

Użyj tego ustawienia, jeśli chcesz wyświetlić obramowanie paska bocznego. Wyrównanie nie ma znaczenia, jeśli chcesz wyłączyć obramowanie. Jestem pewien, że zauważyłeś już przełącznik pod listą rozwijaną Wyrównanie .

Drugą opcją w sekcji Układ jest przełącznik o nazwie Pokaż separator obramowania . Pozwala to na wyłączenie lub włączenie obramowania. Jest domyślnie włączony. Po prostu kliknij przełącznik. Ramka jest teraz usunięta z paska bocznego. Zapisz układ i wyjdź z edytora. To jest takie proste.

Na koniec wybierz Zapisz zmiany przed opuszczeniem Divi Theme Builder. Teraz pokazuje niestandardową treść strony Blog.

Strona mojego bloga pokazuje teraz pasek boczny bez obramowania. Oczywiście jest jeszcze kilka rzeczy, które możesz zrobić, jeśli chcesz mieć lepszy projekt.

Tworzenie niestandardowej obramowania paska bocznego Divi

Jeśli nie chcesz używać motywu Divi do usuwania obramowania paska bocznego, ale nie chcesz standardowego obramowania WordPress, możesz utworzyć niestandardową obramowanie paska bocznego za pomocą modułu paska bocznego Divi.

Na karcie Projekt modułu paska bocznego przewiń do ustawień Obramowanie . Tutaj możesz dodać obramowanie z jednej strony modułu. Zaznacz każdą stronę, której obramowanie ma nie być wyświetlane, i ustaw szerokość obramowania na 0. Możesz także wybrać szerokość obramowania, wybrać kolor i styl. Style obejmują pełny, przerywany, kropkowany, podwójny, rowek, grzbiet, wstawkę, początek i brak.

Dla strony, którą chcesz wyświetlić obramowanie, wybierz szerokość, kolor i styl obramowania. W tym przykładzie wybrałem wyświetlanie obramowania tylko po lewej stronie modułu. Ustawiłem szerokość obramowania na 7 pikseli, kolor na jasnopomarańczowy, a styl obramowania na kropkowany.

Moja strona bloga wyświetla teraz moją niestandardową ramkę paska bocznego Divi.

Możesz nawet dodać cień do pozostałych trzech boków, jeśli chcesz. W tym przykładzie zaokrągliłem granice po prawej stronie. Kliknąłem w link w środku, więc przerywana ramka pozostaje prosta. Dostosowałem również cień pudełka, aby uzyskać żądany projekt.

Oto mój ostateczny projekt z kropkowaną ramką. Pasek boczny dobrze komponuje się z projektem bloga.

Wracając do pomysłu użycia motywu Divi do usunięcia obramowania paska bocznego, oto mój ostateczny układ bloga. Podoba mi się, jak to się skończyło. To pokazuje, że korzystanie z modułu Divi otwiera wiele możliwości w projektowaniu paska bocznego.

Wniosek

Oto nasze spojrzenie na to, jak używać motywu Divi, aby usunąć obramowanie paska bocznego. Jest dość prosty do usunięcia w kodzie, ale użycie Divi Theme Builder daje o wiele więcej opcji, co daje większą kontrolę nad projektem. Ta funkcja jest niezwykle prosta, ale jest to coś, czego większość użytkowników Divi chce się nauczyć. Jest to również dobre ćwiczenie, aby dowiedzieć się, jak małe korekty w modułach Divi mogą mieć ogromny wpływ na projekt witryny.

Chcemy usłyszeć od Ciebie. Czy usunąłeś obramowanie paska bocznego Divi za pomocą jednej z tych metod? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

Polecane zdjęcie autorstwa Andrew Rybalko / shutterstock.com