Jak zmienić marginesy w WordPress (przewodnik dla początkujących)

Zmiana marginesów w WordPressie to prosty sposób na poprawę wyglądu Twojej witryny. Marginesy tworzą przestrzeń między elementami, dzięki czemu Twoje treści są bardziej czytelne i atrakcyjne wizualnie.

Jako ogólną najlepszą praktykę zawsze używamy marginesów i odstępów podczas projektowania naszych stron WordPress. Zauważyliśmy, że ma to pozytywny wpływ na sposób, w jaki użytkownicy angażują się w nasze strony internetowe i treści.

W tym przewodniku dla początkujących pokażemy Ci, jak dodawać i dostosowywać marginesy w WordPress. Nauczymy Cię różnych metod zmiany marginesów w różnych obszarach Twojej witryny WordPress.

Czym są marginesy w WordPressie i projektowaniu stron internetowych?

Marginesy to przestrzeń dodana wokół strony internetowej lub innych elementów wewnątrz strony internetowej.

Pomyśl o typowej stronie internetowej jak o pustej kartce papieru. Marginesy to biała lub pusta przestrzeń wokół krawędzi papieru.

Celem stosowania marginesów jest zapewnienie, że elementy na stronie internetowej nie wyglądają na ściśnięte.

Podobnie, marginesy mogą być używane wokół różnych elementów w układzie strony.

Na przykład możesz zmienić marginesy wokół obrazów, aby nie były zbyt blisko tekstu, lub dodać margines, aby pozostawić przestrzeń między obszarem treści a paskiem bocznym.

W tym artykule omówimy wiele informacji. Kliknij poniższe linki, aby przejść do dowolnej sekcji.

• Jaka jest różnica między marginesem a dopełnieniem?
• Dlaczego możesz potrzebować dodać lub zmienić marginesy w WordPress?
• Jak dodać marginesy w WordPress?
• Dodawanie marginesów w WordPress przy użyciu edytora całego witryny
• Dodawanie marginesów w edytorze bloków
• Dodawanie marginesów w WordPress za pomocą SeedProd
• Zmień marginesy za pomocą Thrive Architect
• Zmiana marginesów w WordPress za pomocą kodu CSS
• Dodawanie i zmiana marginesów za pomocą niestandardowego CSS w motywie WordPress
• Używanie niestandardowego CSS do zmiany marginesów w edytorze witryny
• Dodawanie marginesów za pomocą CSS w narzędziu dostosowywania motywu
• Zmień marginesy za pomocą niestandardowego kodu CSS przy użyciu WPCode
• Często zadawane pytania dotyczące marginesów w WordPress

Jaka jest różnica między marginesem a dopełnieniem?

Zarówno marginesy, jak i dopełnienia służą do dodawania białej przestrzeni w projektowaniu stron internetowych. Jednak są one używane bardzo różnie.

Marginesy dodają pustą przestrzeń na zewnątrz elementu, a dopełnienie dodaje pustą przestrzeń wewnątrz niego.

Marginesy służą do dodawania przestrzeni na zewnątrz elementu. Pozwalają zapewnić wystarczającą przestrzeń między elementami na stronie internetowej.

Teraz przyjrzyjmy się kilku przykładom, kiedy używać marginesów.

1. Dodawanie marginesów w celu zwiększenia odstępu między obrazem a tekstem w artykule.

2. Dostosowywanie marginesów w celu dodania przestrzeni między sekcjami, takimi jak nagłówek i obszar treści.

Padding natomiast jest używany do dodania przestrzeni buforowej między treścią a krawędziami pola lub elementu.

Oto kilka przykładów sytuacji, w których możesz chcieć użyć dodatkowego dopełnienia.

1. Dostosowanie dopełnienia w celu zwiększenia przestrzeni amortyzującej w przyciskach wezwania do działania.

2. Zwiększanie dopełnienia w kolumnie tekstowej

Zarówno dopełnienie, jak i marginesy są szeroko stosowane w projektowaniu stron internetowych.

Używanie pustych przestrzeni dodaje przestrzeni do oddychania w każdym projekcie, co czyni go bardziej przyjaznym dla użytkownika i eleganckim.

Więcej szczegółów znajdziesz w naszym poradniku na temat różnicy między dopełnieniem a marginesem w WordPress.

Dlaczego możesz potrzebować dodać lub zmienić marginesy w WordPress?

Marginesy są kluczowym aspektem projektowania stron internetowych. Sprawiają, że Twoja witryna wygląda przyjemnie i jest łatwa w użyciu.

Z naszego doświadczenia w przeprowadzaniu testów A/B wynika, że strategiczne wykorzystanie pustej przestrzeni często pozytywnie wpływa na konwersje.

Kiedy tworzysz czystszy, bardziej zorganizowany projekt, użytkownicy prawdopodobnie pozostaną na stronie dłużej i wykonają pożądane działania.

Motywy WordPress obsługują aspekt projektowania Twojej strony WordPress. Większość z nich już doskonale radzi sobie z ustawianiem reguł CSS, aby zapewnić dużo białej przestrzeni, używając marginesów w całym układzie motywu.

Niemniej jednak, od czasu do czasu może być konieczne dodanie marginesów, aby coś dostosować.

Na przykład, możesz nie polubić marginesu wokół swoich menu nawigacyjnych lub chcieć dodać więcej marginesu wokół przycisków wezwania do działania.

Podobnie, czasami możesz odczuwać, że elementy są zbyt blisko siebie lub zbyt daleko od siebie.

W takim przypadku będziesz musiał samodzielnie zmienić marginesy w WordPressie.

Jak dodać marginesy w WordPress?

Istnieje wiele sposobów dodawania marginesów w WordPressie.

W zależności od tego, gdzie chcesz dodać margines i jakie opcje są dostępne w Twoim motywie WordPress, będziesz musiał wybrać metodę, która Ci odpowiada.

Zacznijmy od domyślnych wbudowanych opcji w samym WordPressie, ponieważ są one najłatwiejsze dla początkujących.

Dodawanie marginesów w WordPress przy użyciu edytora całego witryny

Jeśli używasz motywu opartego na blokach z obsługą edytora całego motywu, możesz użyć wbudowanego edytora motywu, aby zmienić marginesy w dowolnym miejscu swojej witryny WordPress.

Prosty sposób, aby to sprawdzić, to spojrzeć na pulpit WordPressa. Jeśli widzisz Wygląd » Edytor, oznacza to, że masz motyw oparty na blokach. Jeśli zamiast tego widzisz Wygląd » Dostosuj, możesz przejść do innej metody poniżej.

Najpierw musisz przejść do Wygląd » Edytor, aby uruchomić edytor strony.

Po wejściu do edytora witryny kliknij, aby wybrać szablon z lewej kolumny lub kliknij w dowolnym miejscu okna podglądu.

Następnie kliknij obszar lub element, w którym chcesz zmienić marginesy. W prawej kolumnie zobaczysz opcję dostosowania marginesów w zakładce 'Styl'.

Podczas dostosowywania marginesów edytor podświetli obszar marginesu.

Możesz również wybrać dodanie marginesów do góry, dołu, prawej lub lewej strony.

Dodawanie marginesów w edytorze bloków

Jeśli pracujesz nad wpisem na blogu lub stroną, będziesz używać edytora bloków.

Edytor bloków w WordPress pozwala dodawać i zmieniać marginesy dla różnych bloków.

Po prostu kliknij na blok, do którego chcesz dodać/dostosować marginesy. W ustawieniach bloku przejdź do zakładki „Styl” i przewiń w dół do opcji „Wymiary” lub „Marginesy”.

Dodawanie marginesów w WordPress za pomocą SeedProd

SeedProd to najlepszy wtyczka kreatora stron WordPress na rynku. Pozwala łatwo tworzyć niestandardowe strony dla Twojej witryny.

Możesz go nawet użyć do stworzenia niestandardowego motywu WordPress od podstaw.

Kilka naszych partnerskich marek zaprojektowało całe swoje witryny za pomocą SeedProd i uwielbiają go używać. Aby dowiedzieć się więcej, zapoznaj się z naszą kompletną recenzją SeedProd.

Intuicyjny kreator stron typu przeciągnij i upuść od SeedProd pozwala łatwo dostosować marginesy dowolnego elementu w edytorze.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym poradniku na temat jak zainstalować wtyczkę WordPress.

Następnie musisz przejść do SeedProd » Strony docelowe, a następnie kliknąć przycisk „Dodaj nową stronę docelową”.

Następnie zostaniesz poproszony o wybranie szablonu dla swojej strony.

SeedProd oferuje dziesiątki gotowych szablonów, których możesz użyć jako punktu wyjścia, lub możesz zacząć od pustego szablonu.

Kliknij, aby wybrać szablon, a następnie podaj nazwę dla swojej strony docelowej.

To uruchomi kreator stron SeedProd.

Po prawej stronie zobaczysz podgląd swojej strony na żywo. Po lewej kolumnie znajdują się elementy, które możesz dodać do swojej strony.

Możesz wskazać i kliknąć dowolny element na stronie, aby go edytować.

Kliknięcie na element zaznaczy go, a jego opcje zobaczysz w lewej kolumnie. Stamtąd przejdź do zakładki „Zaawansowane” i kliknij opcję „Odstępy”.

Stąd możesz zmienić marginesy i dopełnienie dla wybranego elementu.

Po zakończeniu edycji strony nie zapomnij kliknąć przycisku „Zapisz” i „Opublikuj” w prawym górnym rogu.

Następnie możesz odwiedzić swoją stronę internetową, aby zobaczyć zmiany w akcji.

Zmień marginesy za pomocą Thrive Architect

Thrive Architect to przyjazny dla użytkownika kreator stron WordPress, który pozwala na projektowanie stron WordPress za pomocą interfejsu przeciągnij i upuść.

Podczas testów odkryliśmy, że ma ponad 300 szablonów, których można użyć jako punktu wyjścia. Ponadto można go również używać do edycji postów i stron WordPress, zapożyczając układ i styl istniejącego motywu WordPress.

Aby dowiedzieć się więcej, zapoznaj się z naszą pełną recenzją Thrive Architect.

Aby zainstalować Thrive Architect, najpierw musisz zalogować się na swoje konto na stronie Thrive Themes.

Stamtąd musisz pobrać i zainstalować wtyczkę Thrive Product Manager. Więcej szczegółów znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę Thrive Product Manager.

Kliknij przycisk „Zaloguj się na moje konto”, aby połączyć WordPress z Twoim kontem Thrive Themes.

Po połączeniu zobaczysz listę dostępnych produktów Thrive Themes w Twoim koncie.

Kliknij pole wyboru „Zainstaluj produkt” pod Thrive Architect, a następnie kliknij przycisk „Zainstaluj wybrane produkty” na dole.

Menedżer Produktów Thrive zainstaluje teraz dla Ciebie wtyczkę Thrive Architect.

Następnie możesz edytować lub utworzyć nowy post lub stronę WordPress i kliknąć przycisk 'Edytuj za pomocą Thrive Architect' lub 'Uruchom Thrive Architect'.

Thrive Architect poprosi Cię o wybranie szablonu, jeśli jest to nowa strona.

Możesz użyć szablonu swojego motywu, aby utworzyć „Zwykłą stronę” lub szablon „Gotowa strona docelowa”.

Jeśli wybierzesz opcję „Gotowa strona docelowa”, wtyczka wyświetli wiele szablonów do wyboru.

Po prostu kliknij, aby wybrać ten, który przypomina to, co chcesz stworzyć.

Niezależnie od tego, czy jest to zwykła strona (korzystająca ze stylów motywu), czy strona docelowa, kreator stron Thrive Architect będzie miał te same funkcje.

Zobaczysz podgląd swojej strony na żywo z paskiem narzędzi po prawej stronie i panelem ustawień po lewej.

Możesz najechać kursorem i kliknąć element, aby go wybrać. Lub kliknij przycisk dodawania [+] na pasku narzędzi, aby dodać nowy element.

Po kliknięciu, aby wybrać i edytować element, jego ustawienia pojawią się w lewej kolumnie.

Stąd kliknij zakładkę „Układ i pozycjonowanie”, aby zmienić marginesy i dopełnienia.

Zobaczysz wizualną reprezentację marginesu i dopełnienia.

Najedź kursorem myszy na dowolną stronę marginesu i przeciągnij uchwyt, aby zwiększyć lub zmniejszyć margines.

Możesz powtórzyć proces, aby zmienić marginesy po każdej z czterech stron.

Po zakończeniu nie zapomnij kliknąć przycisku Zapisz pracę, a następnie wybierz opcję Zapisz i wyjdź do edytora posta.

Możesz teraz kliknąć przycisk „Opublikuj” lub „Zapisz”, aby zapisać swój wpis lub stronę WordPress.

Zmiana marginesów w WordPress za pomocą kodu CSS

Ta metoda wymaga dodania kodu CSS do motywu WordPress. Będziesz również potrzebować bardzo podstawowej wiedzy o HTML i CSS.

Jednak ta metoda daje Ci większą elastyczność, ponieważ możesz ręcznie wybrać obszar, w którym chcesz dodać lub dostosować marginesy.

Dodawanie i zmiana marginesów za pomocą niestandardowego CSS w motywie WordPress

WordPress pozwala na zapisywanie niestandardowego kodu CSS w opcjach motywu WordPress. Jednak w zależności od motywu WordPress, istnieją różne sposoby, aby to zrobić.

Zanim dodasz lub zmienisz marginesy za pomocą CSS, być może będziesz musiał dowiedzieć się, który element musisz wybrać jako cel dla swojego kodu CSS.

Na przykład, jeśli chcesz zmienić marginesy wokół ciała strony, możesz użyć następującego kodu:

body { 
margin:50px; 
}

W tym kodzie „px” oznacza piksele, powszechną jednostkę miary dla ekranów. Użycie właściwości margin z tylko jedną wartością w ten sposób ustawia margines dla wszystkich czterech stron (góra, prawo, dół i lewo) jednocześnie.

Najprostszym sposobem na znalezienie elementu, który chcesz wybrać, jest użycie narzędzia Inspect w przeglądarce.

Otwórz swoją stronę internetową w nowej karcie przeglądarki i najedź kursorem myszy na element, wokół którego chcesz zmienić marginesy. Następnie kliknij prawym przyciskiem myszy i wybierz 'Zbadaj' z menu przeglądarki.

Spowoduje to podzielenie ekranu przeglądarki, a zobaczysz kod HTML i CSS strony.

Możesz najechać kursorem myszy na kod, a przeglądarka podświetli obszar, na który on wpływa.

W kodzie możesz zobaczyć element HTML lub klasę CSS, którą musisz skierować za pomocą niestandardowego CSS. Pomyśl o tym jako o 'adresie' dla konkretnej części strony, którą chcesz stylizować.

Możesz nawet wypróbować swoje marginesy tutaj, aby zobaczyć podgląd, jak to będzie wyglądać.

Jednak te zmiany nie są zapisywane w Twoim motywie i znikną po odświeżeniu lub zamknięciu karty przeglądarki.

Przejdźmy przez różne sposoby zapisywania niestandardowego CSS w WordPressie.

Używanie niestandardowego CSS do zmiany marginesów w edytorze witryny

Jeśli używasz motywu blokowego z obsługą edytora pełnej strony. Oto jak możesz dodać własny kod CSS do swojego motywu.

Najpierw przejdź do strony Wygląd » Edytor, aby uruchomić edytor witryny, a następnie przełącz się na panel „Style”.

Na dole panelu „Style” kliknij kartę „Dodatkowe CSS”.

Spowoduje to wyświetlenie edytora tekstu, w którym możesz dodać własny kod CSS. Twój kod CSS zostanie natychmiast zastosowany i będziesz mógł zobaczyć zmiany pojawiające się na ekranie.

Gdy będziesz zadowolony ze zmian, nie zapomnij kliknąć przycisku „Zapisz”, aby je zachować.

Dodawanie marginesów za pomocą CSS w narzędziu dostosowywania motywu

Jeśli używasz klasycznego motywu (bez obsługi edytora witryny), możesz zapisać swój niestandardowy CSS w dostosowywaniu motywu.

Przejdź do strony Wygląd » Dostosuj, aby uruchomić narzędzie do dostosowywania motywu.

Dostosowywanie pokaże różne opcje w zależności od Twojego motywu WordPress.

Musisz kliknąć kartę Dodatkowe CSS, aby ją rozwinąć.

Zakładka przesunie się, aby pokazać proste pole, w którym możesz dodać własny kod CSS.

Jak tylko dodasz prawidłową regułę CSS, zobaczysz ją zastosowaną w podglądzie na żywo Twojej witryny.

Gdy będziesz zadowolony ze zmian, kliknij przycisk „Opublikuj”, aby zapisać swoje zmiany.

Zmień marginesy za pomocą niestandardowego kodu CSS przy użyciu WPCode

Najprostszym sposobem dodania niestandardowego kodu CSS w WordPress jest użycie wtyczki WPCode.

Jest to najlepsza wtyczka do fragmentów kodu WordPress, która pozwala dodawać dowolny kod CSS/HTML/PHP/JavaScript do Twojej witryny WordPress bez jej psucia.

Podczas naszej oceny uznaliśmy, że jest to bardzo przyjazne dla użytkownika. Aby dowiedzieć się więcej o naszym doświadczeniu, zapoznaj się z naszą szczegółową recenzją WPCode.

Zaletą korzystania z WPCode jest to, że nie stracisz zmian w CSS podczas przełączania motywu WordPress.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki WPCode. Więcej szczegółów znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj nowy.

Najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” w bibliotece fragmentów kodu i kliknij przycisk „Użyj fragmentu”.

Następnie, na górze strony, dodaj tytuł dla swojego niestandardowego fragmentu kodu CSS. Może to być cokolwiek, co pomoże Ci zidentyfikować kod.

Następnie wpisz lub wklej swój niestandardowy kod CSS w polu „Podgląd kodu” i ustaw „Typ kodu”, wybierając opcję „Fragment kodu” z menu rozwijanego.

Na przykład, jeśli chcesz dodać lub zmienić marginesy wokół całego ciała strony internetowej, możesz użyć następującego kodu CSS:

body { 
margin:50px;
}

Następnie przewiń w dół do sekcji „Wstawianie” i wybierz metodę „Automatyczne wstawianie”, aby wykonać kod na całej Twojej witrynie WordPress.

Jeśli chcesz wykonać kod tylko na określonych stronach lub wpisach, możesz wybrać metodę „Krótki kod”.

Teraz musisz wrócić na górę strony i przełączyć przełącznik na „Aktywny”.

Na koniec kliknij przycisk „Zapisz fragment”, aby zachować zmiany.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć swój niestandardowy CSS w akcji.

Często zadawane pytania dotyczące marginesów w WordPress

Oto kilka pytań, które nasi czytelnicy często zadają na temat dodawania marginesów w WordPressie:

Jaka jest główna różnica między marginesem a dopełnieniem?

Margines to przestrzeń poza obramowaniem elementu, która tworzy odległość między nim a innymi elementami. Wypełnienie (padding) to przestrzeń wewnątrz obramowania elementu, tworząca amortyzację między treścią a samym obramowaniem.

Pomyśl o marginesie jako o odstępie między ramkami obrazów na ścianie, a wypełnieniu jako o passe-partout wewnątrz pojedynczej ramki obrazu.

Aby uzyskać więcej informacji, możesz również zapoznać się z naszym przewodnikiem na temat marginesów i dopełnienia w WordPressie.

Jak mogę zmienić marginesy specjalnie dla urządzeń mobilnych?

Aby dostosować marginesy dla urządzeń mobilnych, możesz użyć zapytań o media CSS. Pozwala to na stosowanie określonych stylów dla różnych rozmiarów ekranu.

Wtyczki do tworzenia stron, takie jak SeedProd, oferują również kontrolki specyficzne dla urządzeń, pozwalając łatwo zmieniać marginesy dla widoków na komputerach, tabletach i urządzeniach mobilnych.

Dlaczego opcja marginesu nie jest widoczna dla konkretnego bloku w edytorze WordPress?

Nie wszystkie bloki WordPress mają wbudowane kontrolki marginesów, ponieważ może to zależeć od Twojego motywu.

Jeśli opcja jest niedostępna, możesz owinąć blok w blok Grupa, który ma ustawienia marginesu i dopełnienia. Możesz również użyć jednej z niestandardowych metod CSS, aby bezpośrednio skierować blok.

Czy lepiej użyć wtyczki czy niestandardowego CSS do zmiany marginesów?

Dla początkujących kreator stron, taki jak SeedProd, jest często łatwiejszy, ponieważ zapewnia wizualny interfejs.

Dla bardziej zaawansowanych użytkowników lub do wprowadzania zmian w całej witrynie, niestandardowy CSS daje większą precyzję kontroli.

Użycie wtyczki takiej jak WPCode do dodawania kodu CSS jest świetnym wyborem, ponieważ chroni Twój kod podczas aktualizacji lub zmiany motywu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać lub zmieniać marginesy w WordPress. Możesz również chcieć dowiedzieć się jak umieszczać obrazy obok siebie w WordPress lub jak dodać przyciski podkreślenia i justowania tekstu w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.