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 i wrażeń użytkownika. Marginesy tworzą przestrzeń między elementami, dzięki czemu twoja treść jest bardziej czytelna i atrakcyjna wizualnie.

Jako ogólną najlepszą praktykę, zawsze używamy dużej ilości marginesów i odstępów w naszych projektach witryn internetowych. Zauważyliśmy, że ma to pozytywny wpływ na sposób, w jaki użytkownicy korzystają z naszych stron i treści.

W tym przewodniku dla początkujących pokażemy, jak dodawać i dostosowywać marginesy w WordPress. Poznasz różne metody zmiany marginesów w różnych obszarach twojej witryny internetowej WordPress.

Czym są marże w WordPress 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 nie będą wyglądały na ściśnięte.

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

Możesz na przykład zmienić marginesy wokół obrazków, aby nie znajdowały się zbyt blisko tekstu lub dodać margines, aby pozostawić przestrzeń między twoją treścią a panelem bocznym.

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

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

Zarówno marginesy, jak i dopełnienie służą do dodawania białej przestrzeni w projektowaniu stron internetowych. Są one jednak używane w bardzo różny sposób.

Marginesy dodają puste miejsce na zewnątrz elementu, a dopełnienie dodaje puste miejsce wewnątrz elementu.

Marginesy służą do dodawania przestrzeni na zewnątrz elementu. Pozwalają one zapewnić dużo miejsca między elementami na stronie internetowej.

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

1. Dodawanie marginesów w celu zwiększenia przestrzeni między obrazkiem a tekstem w artykule.

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

Dopełnienie służy natomiast do dodawania odstępu między treścią a krawędziami ramki lub elementu.

Oto kilka przykładów sytuacji, w których warto zastosować dodatkowe dopełnienie.

1. Dopasowanie dopełnienia w celu zwiększenia miejsca na poduszkę w twoich przyciskach wezwania do działania.

2. Zwiększenie dopełnienia w kolumnie tekstowej

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

Wykorzystanie pustych przestrzeni dodaje przestrzeni do każdego projektu, co czyni go bardziej przyjaznym dla użytkownika i eleganckim.

Więcej szczegółów można znaleźć w naszym poradniku na temat różnicy między dopełnieniem a marginesami w WordPress.

Dlaczego warto dodać lub zmienić marginesy w WordPress?

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

Dokładnie przeprowadzamy testy A/B na wszystkich naszych witrynach internetowych, aby zrozumieć, w jaki sposób użytkownicy wchodzą w interakcję z projektem. Raz po raz wyniki pokazują, że dodanie marginesów ma duży wpływ na konwersje.

Kiedy tworzysz czystszy, bardziej zorganizowany projekt, użytkownicy są bardziej skłonni do pozostania na witrynie dłużej i wykonania pożądanych działań.

Motywy WordPress zajmują się aspektem projektowym twojej witryny internetowej. Większość z nich wykonuje już doskonałą robotę, ustawiając reguły CSS, aby zapewnić dużo białej przestrzeni za pomocą marginesów w całym układzie twojego motywu.

To powiedziawszy, czasami może być konieczne dodanie marginesów w celu dostosowania rzeczy.

Instancja może na przykład nie lubić marginesu wokół twojego menu nawigacyjnego lub chcieć dodać więcej marginesu wokół przycisków wezwania do działania.

Podobnie, czasami możesz mieć wrażenie, że przedmioty znajdują się zbyt blisko siebie lub zbyt daleko od siebie.

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

Jak dodać marginesy w WordPress?

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

W zależności od tego, gdzie chcesz dodać margines i jakie opcje są dostępne w twoim motywie WordPress, musisz wybrać metodę, która będzie dla ciebie odpowiednia.

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

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

Jeśli korzystasz z motywu opartego na blokach z pełną obsługą edytora witry n, możesz użyć wbudowanego edytora witryn do zmiany marginesów w dowolnym miejscu twojej witryny internetowej WordPress.

Najpierw należy przejść do Wygląd ” Edytor, aby uruchomić edytor witryny.

Po wejściu do edytora witryn 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 na karcie „Styl”.

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

Możesz także dodać marginesy na górze, na dole, po prawej lub po lewej stronie.

Dodawanie marginesów w edytorze bloków

Jeśli pracujesz nad wpisem na blogu lub stroną, użyjesz edytora bloków.

Edytor bloków w WordPress umożliwia dodawanie i zmianę marginesów dla różnych bloków.

Wystarczy kliknąć blok, w którym chcesz dodać/wyregulować marginesy. W ustawieniach bloku przejdź do karty „Styl” i przewiń w dół do opcji „Wymiary” lub „Marginesy”.

Dodawanie marginesów w WordPress przy użyciu SeedProd

SeedProd to najlepsza na rynku wtyczka do tworzenia stron WordPress. Umożliwia ona łatwe tworzenie własnych stron dla twojej witryny internetowej. Możesz nawet użyć go do stworzenia własnego motywu WordPress od podstaw.

Intuicyjny kreator stron SeedProd typu „przeciągnij i upuść” pozwala na łatwe dostosowanie marginesów dla dowolnego elementu wewnątrz edytora.

Najpierw należy zainstalować i włączyć wtyczkę SeedProd. Więcej szczegółów można znaleźć w naszym poradniku na temat instalacji wtyczki WordPress.

Następnie należy przejść na stronę SeedProd ” Landing Pages, a następnie kliknąć przycisk „Utwórz nową stronę”.

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

SeedProd zawiera dziesiątki gotowych szablonów, które można wykorzystać jako punkt wyjścia lub rozpocząć od pustego szablonu.

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

Spowoduje to uruchomienie kreatora stron SeedProd.

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

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

Kliknięcie elementu spowoduje jego zaznaczenie, a w lewej kolumnie pojawią się jego opcje. Przejdź do karty „Zaawansowane” i kliknij opcję „Odstępy”.

W tym miejscu można zmienić marginesy i dopełnienie wybranego elementu.

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

Następnie możesz przejść na twoją witrynę internetową, aby zobaczyć zmiany w działaniu.

Zmiana marży przy użyciu Thrive Architect

Thrive Architect to jedno z najlepszych narzędzi do tworzenia stron WordPress, które umożliwia korzystanie z interfejsu „przeciągnij i upuść” do projektowania stron WordPress.

Zawiera ponad 300 szablonów, które można wykorzystać jako punkt wyjścia. Co więcej, możesz go również użyć do edycji wpisów i stron WordPress, zapożyczając układ i styl istniejącego motywu WordPress.

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

Następnie należy pobrać i zainstalować wtyczkę Thrive Product Manager. Więcej szczegółów można znaleźć w naszym poradniku na temat instalacji wtyczki WordPress.

Po włączaniu należy przejść na 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 na twoim koncie.

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

Thrive Product Manager zainstaluje teraz wtyczkę Thrive Architect.

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

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

Możesz użyć twojego szablonu motywu, aby utworzyć „Normalną stronę” lub „Gotowy szablon Landing Page”.

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

Wystarczy kliknąć, aby wybrać ten, który przypomina to, co chcesz stworzyć.

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

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

Możesz wskazać lub kliknąć element, aby go zaznaczyć. Możesz też kliknąć przycisk dodawania [+] na pasku narzędzi, aby utworzyć nowy element.

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

Następnie kliknij kartę „Układ i położenie”, aby zmienić marginesy i dopełnienie.

Zobaczysz wizualną reprezentację marginesu i dopełnienia.

Przesuń twój kursor myszy na dowolną stronę marginesu i przeciągnij uchwyt, aby zwiększyć lub zmniejszyć margines.

Możesz powtórzyć ten proces, aby zmienić marginesy na dowolnym z czterech boków.

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

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

Zmiana marginesów w WordPress przy użyciu kodu CSS

Ta metoda wymaga dodania kodu CSS do twojego motywu WordPress. Potrzebna będzie również bardzo podstawowa znajomość HTML i CSS.

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

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

WordPress umożliwia zapisanie własnego CSS w opcjach Twojego motywu WordPress. Jednak w zależności od twojego motywu WordPress istnieje wiele sposobów, aby to zrobić.

Zanim dodasz lub zmienisz marginesy za pomocą CSS, być może będziesz musiał dowiedzieć się, na który element musisz kierować swój kod CSS.

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

body { 
margin:50px; 
}

Najprostszym sposobem na znalezienie elementu, który ma być celem, jest użycie narzędzia Inspect w twojej przeglądarce.

Otwórz swoją witrynę internetową w nowej karcie przeglądarki i najedź myszką na element, którego marginesy chcesz zmienić. Następnie kliknij prawym przyciskiem myszy i wybierz „Sprawdź” z menu przeglądarki.

Spowoduje to podzielenie ekranu twojej przeglądarki i wyświetlenie kodu HTML i CSS znajdującego się za stroną.

Możesz najechać myszką na kod, a twoja przeglądarka podświetli obszar, na który ma on wpływ.

W kodzie możesz zobaczyć element HTML lub klasę CSS, na którą musisz skierować swój własny CSS.

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

Zmiany te nie są jednak zapisywane w twoim motywie i znikną po przeładowaniu lub zamknięciu karty przeglądarki.

Przyjrzyjmy się różnym sposobom zapisywania własnego CSS w WordPress.

Używanie własnego CSS do zmiany marginesów w edytorze witryn

Jeśli korzystasz z motywu blokowego z pełną pomocą techniczną edytora witryn. Oto jak dodać własny CSS do twojego motywu.

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

W dolnej części panelu „Style” kliknij kartę „Dodatkowe CSS”.

Spowoduje to wyświetlenie edytora tekstu, w którym można dodać własny kod CSS. Twój kod CSS zostanie natychmiast zastosowany, a zmiany będą widoczne na ekranie.

Gdy będziesz zadowolony ze zmian, nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać twoje zmiany.

Dodawanie marginesów za pomocą CSS w konfiguratorze motywu

Jeśli korzystasz z klasycznego motywu (bez pomocy technicznej edytora witryn), możesz zapisać swój niestandardowy CSS w konfiguratorze motywu.

Przejdź do strony Wygląd ” Dostosuj, aby uruchomić konfigurator motywu.

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

Należy kliknąć kartę Dodatkowe CSS, aby ją rozwinąć.

Karta przesunie się, aby pokazać proste pole, w którym możesz dodać swój własny CSS.

Gdy tylko dodasz poprawną regułę CSS, będziesz mógł zobaczyć jej zastosowanie w panelu podglądu na żywo twojej witryny internetowej.

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

Zmiana marginesów za pomocą własnego kodu CSS przy użyciu WPCode

Najprostszym sposobem na dodanie własnego kodu CSS w WordPressie jest użycie wtyczki WPCode.

Jest to najlepsza wtyczka do fragmentów kodu WordPress, która umożliwia dodawanie dowolnego kodu CSS/HTML/PHP/JavaScript do twojej witryny internetowej WordPress bez jej łamania.

Zaletą korzystania z WPCode jest to, że nie utracisz zmian CSS podczas zmiany twojego motywu WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę WPCode. Więcej szczegółów można znaleźć w naszym poradniku na temat instalacji wtyczki WordPress.

Po włączaniu przejdź do strony Fragmenty kodu ” + Utwórz nowy.

Najedź myszką na opcję „Add Your Custom Code (New Snippet)” w bibliotece fragmentów kodu i kliknij przycisk „Use snippet”.

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

Następnie zapisz lub wklej swój własny CSS w polu „Podgląd kodu” i ustaw „Rodzaj kodu”, wybierając opcję „Fragment kodu CSS” z rozwijanego menu.

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

body { 
margin:50px;
}

Następnie przewiń w dół do sekcji „Wstaw” i wybierz metodę „Auto-Insert”, aby wykonać kod w 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 „Włączanie”.

Na koniec kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje zmiany.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć własny CSS w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać lub zmieniać marginesy w WordPress. Możesz również dowiedzieć się , jak umieścić obrazki obok siebie w WordPressie lub jak dodać podkreślenie i justowanie przycisków tekstowych w WordPressie.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.