Przejdź do głównej treści

Jak zmienić stronę na pasku bocznym WordPressa

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Niedawno jeden z naszych czytelników zapytał nas, jak zmienić stronę paska bocznego w motywie WordPress?

Zazwyczaj otrzymujemy to pytanie od użytkowników, którzy chcą zmienić lokalizację paska bocznego z lewej na prawą lub z prawej na lewą.

W tym samouczku pokażemy, jak zmienić lokalizację paska bocznego w WordPress.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Jak zmienić lokalizację paska bocznego w wordpress e1568058176266

Po co zmieniać lokalizację paska bocznego w WordPress?

Eksperci od użyteczności uważają, że ludzie skanują strony od lewej do prawej. Zalecają umieszczenie ważnych treści po lewej stronie, aby użytkownicy widzieli je jako pierwsi. Można to jednak odwrócić, jeśli witryna jest w języku RTL (po lewej stronie).

Dowiedz się, czy jeśli Twój blog WordPress ma paski boczne

Wiele witryn WordPress używa typowego układu bloga z dwiema kolumnami. Jedna dla treści, a druga dla paska bocznego.

typowe demo zawartości Pasek boczny WordPress

Jeśli jesteś nowy na stronach internetowych, powinieneś wybrać motyw WordPress, który ma pasek boczny w preferowanej lokalizacji.

Wiele motywów WordPress oferuje opcje zmiany strony paska bocznego w ustawieniach tego ostatniego. Jeśli jednak Twój motyw WordPress nie ma tej opcji, będziesz musiał ręcznie zmienić stronę paska bocznego. Idź dalej, odkrywając jak usunąć pasek boczny z WordPress

To powiedziawszy, spójrzmy na metodę, której musisz użyć, aby łatwo zmienić stronę paska bocznego WordPressa za pomocą CSS.

Zmiana paska bocznego za pomocą CSS

Przed wprowadzeniem jakichkolwiek zmian w motywie WordPress należy najpierw rozważyć rozszerzenie tworzenie motywu podrzędnego, Używając motywu podrzędnego, będziesz mógł zaktualizować motyw nadrzędny bez utraty zmian.

Odkrywaj Jak wyświetlić inny pasek boczny dla każdej pozycji na WordPressie

Po drugie, zawsze należy utworzyć kopię zapasową witryny WordPress podczas wprowadzania zmian w aktywnym motywie w czasie rzeczywistym.

Będziesz potrzebował klienta FTP, aby edytować pliki motywów WordPress. Zapoznaj się z przewodnik na temat korzystania z FTP.

Zaloguj się do witryny WordPress za pomocą klienta FTP i przejdź do folderu motywów. Zwykle znajduje się w:

 / Yoursite / wp-content / themes / twój-theme-folderu / 

Teraz musisz pobrać i otworzyć główny plik arkusza stylów swojego motywu WordPress w edytorze tekstu, takim jak Notatnik. Ten plik nosi nazwę style.cssi znajduje się w katalogu głównym motywu WordPress.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Odkrywaj jak zarządzać plikami i folderami WordPress

W tym pliku znajdź klasę CSS paska bocznego. Ogólnie ta klasa to „ sidebar ”. W tym przykładzie używamy domyślnego motywu WordPress „ dwadzieścia piętnaście Kto ma tę klasę dla paska bocznego:

.sidebar {float: left; margines z prawej: -100%; max-width: 413px; pozycja: względna; szerokość: 29.4118%; }

Jak widać pasek boczny unosi się w lewo z marginesem -100%. Zmienimy pływak w prawo:

.sidebar {float: right; margines lewy: -100%; max-width: 413px; pozycja: względna; szerokość: 29.4118%; }

Zapisz zmiany i prześlij plik style.css na swoją stronę za pomocą klienta FTP. Teraz, jeśli odwiedzisz swoją witrynę, będzie ona wyglądać następująco:

zmiana paska bocznego strony demonstracyjnej

Rzeczywiście przesunęliśmy pasek boczny, ale nie przesunęliśmy obszaru zawartości. " Dwadzieścia Piętnaście Używa tego CSS do zdefiniowania pozycji obszaru zawartości.

.site-content {display: block; float: left; margines lewy: 29.4118%; szerokość: 70.5882%; }

Zmienimy to, aby przenieść zawartość w prawo. W następujący sposób:

.site-content {display: block; float: left; margines z prawej: 29.4118%; szerokość: 70.5882%; }

Oto jak będzie wyglądać Twoja witryna po zastosowaniu tego kodu CSS.

nowa prezentacja przeniosła stronę paska bocznego

Jak widać zmieniliśmy położenie obszaru zawartości i paska bocznego. Jednak po lewej stronie nadal jest biały blok.

Idź dalej, odkrywając jak zarządzać plikami i folderami WordPress

Często napotykasz te błędy podczas pracy z CSS. Potrzeba trochę pracy detektywistycznej, aby zrozumieć, co to powoduje i jak to naprawić.

Aby przejrzeć kod źródłowy, użyj narzędzia „Inspector” przeglądarki. Najedź myszą na region w przeglądarce, którego dotyczy problem, kliknij prawym przyciskiem i wybierz „Inspektor” z menu przeglądarki.

narzędzie do sprawdzania przeglądarki

Poruszając myszą po widoku kodu źródłowego, zauważysz obszary, na które ma wpływ, podświetlone w podglądzie na żywo. W prawym okienku będziesz mógł zobaczyć CSS użyty dla tego wybranego elementu.

Odkryj nasze Wtyczki 5 WordPress do wizualnej edycji CSS na swoim blogu

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Dlatego CSS odpowiadający podświetlonemu elementowi musi zostać ponownie dostosowany.

@media screen i (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); treść: „”; wyświetlacz: blok; wzrost: 100%; min-wysokość: 100%; pozycja: stała; góra: 0; po lewej: 0; szerokość: 29.4118%; indeks z: 0; / * Naprawiono błąd flashowania podczas przewijania w Safari * /}

Ten kod CSS dodaje pusty blok o szerokości 29,4118% i szerokości 100% w lewym górnym rogu. Oto jak zamierzamy przenieść go w prawo.

@media screen i (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); treść: „”; wyświetlacz: blok; wzrost: 100%; min-wysokość: 100%; pozycja: stała; góra: 0; po prawej: 0; szerokość: 29.4118%; indeks z: 0; / * Naprawiono błąd flashowania podczas przewijania w Safari * /}

Po zapisaniu i załadowaniu arkusza stylów na serwer, tak będzie wyglądać Twoja witryna.

nowy pasek boczny po prawej stronie

Praca z CSS może być myląca dla początkujących. Jeśli nie chcesz wykonywać całej pracy ręcznej, możesz spróbować Wtyczka WordPress CSS Hero. Pozwala edytować CSS bez pisania kodu i działa z każdym motywem WordPress.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Zxeion

Zxeion to potężna wtyczka premium do WordPressa odpowiedzialna za poprawę bezpieczeństwa Twojej witryny. Ta wtyczka zawiera zbiór narzędzi ochrony i bezpieczeństwa, które ochronią Twoją witrynę przed możliwymi atakami.Wtyczki Zxeion wordpress chronią witrynę przed atakami złośliwego oprogramowania

System ochrony w czasie rzeczywistym pomoże Ci zidentyfikować zagrożenia dla Twojej witryny i zablokować je, bez konieczności robienia czegokolwiek.

Odkryj także nasze 7 wtyczek, aby zwiększyć swoje paski boczne w WordPress

Jego funkcje to: ochrona w czasie rzeczywistym, doskonała obsługa klienta, regularne aktualizacje, blokowanie adresów IP, doskonała dokumentacja, nowoczesny i profesjonalny interfejs, dedykowana obsługa klienta i inne

Pobierz | Demo | hosting

2. Slaido 

Slaido to wysokiej jakości wtyczka WordPress, która pozwala wybierać spośród prawie 320 responsywnych szablonów suwaków i importować jeden z nich do swojej witryny za pomocą zaledwie kilku kliknięć. To kompletny zestaw szablonów, idealny do Suwak Revolution. Aby w pełni korzystać z tej wtyczki WordPress, musisz najpierw zainstalować tę ostatniąPakiet szablonów Slaido dla WordPress Slider Revolution

Jego główne cechy to: responsywny układ suwaków, łatwość importowania lub eksportowania suwaków, regularne aktualizacje, obsługa klienta dostępna 24/7, płynne i bardzo fajne animacje, dostępność samouczki wideo zapewniające szybki start, obsługę czcionek Google i wiele innych.

Pobierz | Demo | hosting

3. Skontaktuj się z nami

Formularz kontaktowy to responsywna wtyczka WordPress premium i proste narzędzie, ale bogate w opcje dostosowywania, które pozwalają wyświetlać przejrzysty i zachęcający formularz, w którym odwiedzający mogą skontaktować się z Tobą, pozostawiając swoją wiadomość.

Skontaktuj się z nami za pomocą wtyczki do formularza kontaktowego wordpress

Będziesz mógł zdefiniować niezbędne pola, wybrać najlepszy układ pól i całkowicie go dostosować, aby zachęcić klientów lub odwiedzających do pozostawienia swoich sugestii lub wiadomości.

Zapraszamy również do przeczytania: Wtyczki 10 WordPress do tworzenia i zarządzania witryną restauracji

Wystarczy ustawić adres e-mail, na który chcesz otrzymywać wiadomości, i użyć go do rozwoju firmy w najbardziej dochodowym kierunku.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Nie! To wszystko w tym samouczku. Mamy nadzieję, że pomoże Ci to zmienić stronę paska bocznego na Twoim blogu WordPress. Nie wahaj się udostępnij ten artykuł znajomym w swoich ulubionych sieciach społecznościowych

Będziesz jednak mógł również skonsultować się z nami 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.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...  

Ten artykuł zawiera 1 komentarz

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Powrót do góry