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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Ostatnio jeden z naszych czytelników zapytał nas, jak zmienić stronę paska bocznego motywu 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 ds. Użyteczności sądzą, że ludzie skanują strony od lewej do prawej. Zalecają umieszczenie ważnej zawartości po lewej stronie, aby użytkownicy mogli ją najpierw zobaczyć. 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 w WordPress korzysta z typowego układu blogów 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 motyw WordPress nie ma tej opcji, musisz ręcznie zmienić strony 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ć 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 do edycji plików motywów WordPress. Sprawdź 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 motywu WordPress w edytorze tekstu, takim jak Notatnik. Ten plik nazywa się 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ć.

Użyj narzędzia „Inspektor” w przeglądarce, aby wyświetlić kod źródłowy. Wskaż kursorem myszy dotknięty region w przeglądarce, kliknij prawym przyciskiem myszy i wybierz „Inspektor” z menu przeglądarki.

narzędzie do sprawdzania przeglądarki

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]

Gdy poruszasz myszą w widoku kodu źródłowego, zauważysz obszary, na które wpływa, podświetlone w podglądzie w czasie rzeczywistym. W prawym okienku zobaczysz CSS użyty dla tego wybranego elementu.

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

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 pobraniu arkusza stylów na serwer 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 WordPress premium odpowiedzialna za poprawę bezpieczeństwa twojej witryny. Ta wtyczka zawiera zbiór narzędzi zabezpieczających i zabezpieczających, które będą chronić twoją stronę 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 witryny za pomocą kilku kliknięć. To kompletny zestaw szablonów, idealny do Suwak Revolution, Musisz więc najpierw go zainstalować, aby w pełni korzystać z tej wtyczki WordPressPakiet 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, dostępna obsługa klienta 24 / 7, fajne i fajne animacje, dostępność samouczki wideo do szybkiego startu, obsługi czcionek Google i nie tylko.

Pobierz | Demo | hosting

3. Skontaktuj się z nami

Formularz kontaktowy to elastyczna wtyczka WordPress i proste narzędzie, ale bogate w opcje personalizacji, które pozwala wyświetlać przejrzysty i zachęcający formularz, w którym odwiedzający mogą się z Tobą skontaktować, 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

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]

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

Pobierz | Demo | hosting

Polecane zasoby

Odkryj inne zalecane zasoby, które będą Ci towarzyszyć w tworzeniu witryny i zarządzaniu nią.

Wnioski

Nie! To tyle w tym samouczku. Mamy nadzieję, że pomoże to zmienić stronę paska bocznego bloga 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

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział
ćwierkanie
Enregistrer1