Jak łatwo dodać cień pola w WordPress (4 sposoby)

Cień pola to jeden z najprostszych sposobów na dodanie głębi i podkreślenie elementów na Twojej stronie WordPress. Możemy stworzyć ten efekt za pomocą zaledwie kilku linii CSS.

Mimo to, nawet jeśli jest to proste, niektórzy czytelnicy WPBeginner prosili o wskazówki, jak skutecznie je wdrożyć, zwłaszcza jeśli nie czują się komfortowo z kodowaniem.

W tym artykule pokażemy Ci kilka sposobów na łatwe dodanie cieni pól w WordPress, krok po kroku. 

Dlaczego dodawać cienie pól w WordPress?

Cień pola, czasami znany również jako cień rzucany, to efekt wizualny, który sprawia, że coś na ekranie wydaje się rzucać cień.

Zazwyczaj zwracamy większą uwagę na obiekty, które wydają się być bliżej nas. Mając to na uwadze, wielu właścicieli stron internetowych dodaje cienie pól do swoich najważniejszych treści, aby wyglądały, jakby unosiły się nad stroną.

Na przykład, jeśli dodasz duży cień do przycisku wezwania do działania, będzie on wyglądał fizycznie bliżej odwiedzającego, co przyciągnie jego uwagę.

Mając to na uwadze, zobaczmy, jak możesz dodać cienie pól do swojego bloga WordPress lub strony internetowej. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć.

• Metoda 1. Dodaj cień pola za pomocą kodu (więcej kontroli)
• Metoda 2. Dodaj cień pola za pomocą darmowej wtyczki
• Metoda 3. Dodaj cień pola za pomocą kreatora stron (łatwe)
• Metoda 4. Dodaj cień pola za pomocą CSS Hero (zaawansowane)
• Dowiedz się więcej sposobów na dodanie unikalnych projektów do swojej witryny WordPress

Metoda 1. Dodaj cień pola za pomocą kodu (większa kontrola)

Jeśli dodasz efekt cienia do każdego bloku WordPress, może to sprawić, że Twoja witryna będzie wyglądać niechlujnie i myląco. Mając to na uwadze, cień pola należy dodawać tylko do najważniejszych elementów strony.

Cienie pól powinny być również spójne w całej witrynie. Najlepszym sposobem na osiągnięcie tego jest zdefiniowanie stylu w CSS za pomocą WPCode.

WPCode to najlepsza wtyczka do fragmentów kodu, używana przez ponad 1 milion witryn WordPress. Ułatwia dodawanie niestandardowego kodu w WordPress bez konieczności edycji pliku functions.php.

Dzięki WPCode nawet początkujący mogą edytować kod swojej witryny bez ryzyka błędów i literówek, które mogą powodować wiele typowe błędy WordPress.

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

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny. Obejmują one fragment kodu, który pozwala na całkowite wyłączenie komentarzy, przesyłanie typów plików, których WordPress zazwyczaj nie obsługuje, wyłączenie stron załączników i wiele więcej.

Po prostu najedź kursorem myszy na „Dodaj swój własny kod (nowy fragment kodu)”, a następnie kliknij „+ Dodaj własny fragment kodu”, gdy się pojawi.

Następnie musisz wybrać typ kodu z listy opcji, które pojawią się na ekranie.

W tym samouczku będziesz musiał dodać niestandardowy kod CSS do WordPressa, więc wybierz „Fragment kodu CSS” jako typ kodu.

Teraz zostaniesz przekierowany na stronę Tworzenie własnego fragmentu kodu.

Na początek wpisz tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu WordPress.

Następnie w polu „Podgląd kodu” skopiuj i wklej następujący fragment kodu:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

W powyższym fragmencie kodu może być konieczna wymiana wartości px w zależności od rodzaju cienia, który chcesz utworzyć.

Aby Ci pomóc, oto co oznaczają różne wartości px, od lewej do prawej:

• Przesunięcie poziome. Po ustawieniu wartości dodatniej cień zostanie przesunięty w lewo. Jeśli wpiszesz wartość ujemną, np. -5px, cień zostanie przesunięty w prawo. Jeśli nie chcesz dodawać przesunięcia poziomego, możesz zamiast tego użyć 0px.
• Przesunięcie pionowe. Jeśli użyjesz wartości dodatniej, cień zostanie przesunięty w dół. Jeśli wpiszesz wartość ujemną, cień zostanie przesunięty w górę. Jeśli nie chcesz przesuwać cienia w pionie, po prostu wpisz 0px.
• Promień rozmycia. Rozmywa to cień, dzięki czemu nie ma ostrych krawędzi. Im wyższa wartość, tym większy efekt rozmycia. Jeśli wolisz używać ostrych krawędzi, wpisz 0px.
• Promień rozproszenia. Im wyższa wartość, tym większe rozproszenie cienia. Ta wartość jest opcjonalna, więc pomiń ją, jeśli nie chcesz pokazywać rozproszenia.
• Kolor. Chociaż szary jest najczęstszym kolorem cieni, możesz użyć dowolnego koloru, wpisując kod szesnastkowy. Jeśli nie masz pewności, jakiego kodu użyć, możesz przeglądać różne kolory za pomocą zasobu takiego jak HTML Color Codes.

Gdy będziesz zadowolony z fragmentu kodu, przewiń do sekcji „Wstawianie”. WPCode może dodać Twój kod do różnych lokalizacji, takich jak po każdym poście, tylko na froncie lub tylko w panelu administratora.

Aby użyć niestandardowego kodu CSS w całej swojej witrynie WordPress, kliknij „Automatyczne wstawianie”, jeśli nie jest jeszcze zaznaczone. Następnie otwórz menu rozwijane „Lokalizacja” i wybierz „Nagłówek całej witryny”.

Następnie jesteś gotowy, aby przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz fragment”, aby fragment CSS stał się aktywny.

Teraz możesz dodać niestandardową klasę CSS do dowolnego bloku.

W edytorze blokowym WordPress edytora blokowego, po prostu zaznacz blok, do którego chcesz dodać cień pola. Następnie w menu po prawej stronie kliknij, aby rozwinąć sekcję „Zaawansowane”.

Tutaj zobaczysz pola, w których możesz dodać różne klasy.

W polu „Dodatkowe klasy CSS” wpisz shadow-effect.

Gdy będziesz gotowy do opublikowania cienia pola, po prostu kliknij przycisk „Opublikuj” lub „Zaktualizuj”.

Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz cień pola na żywo.

Oprócz dodawania cienia pola, możesz również użyć WPCode, aby zmienić kolor tekstu lub nawet dostosować styl cytatów w motywie WordPress za pomocą CSS.

Metoda 2. Dodaj cień pola za pomocą darmowej wtyczki

Jeśli nie czujesz się komfortowo z pisaniem kodu, możesz preferować tworzenie cieni za pomocą Drop Shadow Box. Ta darmowa wtyczka pozwala dodawać cienie pól do dowolnego bloku za pomocą wbudowanego edytora stron i wpisów WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Nie ma żadnych ustawień do skonfigurowania, więc możesz zacząć używać tej wtyczki od razu.

Aby dodać cień, po prostu kliknij ikonę „+” i zacznij wpisywać „Drop Shadow Box”. Gdy pojawi się odpowiedni blok, kliknij go, aby dodać do strony lub wpisu.

To dodaje cień jako pusty blok, więc następnym krokiem jest dodanie jakiejś zawartości.

Aby to zrobić, kliknij ikonę „+” wewnątrz bloku Drop Shadow Box.

Następnie po prostu dodaj blok, którego chcesz użyć i skonfiguruj go jak zwykle.

Na przykład, na poniższym obrazku dodaliśmy blok Obraz i wybraliśmy zdjęcie z biblioteki multimediów WordPress.

Po wykonaniu tej czynności kliknij, aby wybrać blok Pudełko z cieniem. W menu po prawej stronie zobaczysz wszystkie ustawienia, których możesz użyć do stylizacji tego bloku.

WordPress automatycznie ustawia szerokość cienia, ale możesz ją zmienić, otwierając menu rozwijane „Szerokość”, a następnie wybierając „Piksele” lub „%”.

Następnie możesz zmienić jego rozmiar, używając wyświetlonych ustawień.

Wtyczka Drop Box Shadow zawiera kilka różnych efektów, takich jak zaokrąglone krawędzie i efekt „Perspektywa”, który przyciąga wzrok.

Aby wyświetlić podgląd różnych efektów, po prostu otwórz menu rozwijane „Efekt” i wybierz z listy. Podgląd zaktualizuje się automatycznie, dzięki czemu możesz wypróbować różne style, aby zobaczyć, co wolisz.

Możesz również zmienić, czy wtyczka wyświetla cień wewnątrz pudełka, na zewnątrz pudełka, czy oba, używając przełączników „Cień wewnętrzny” i „Cień zewnętrzny”.

Następnie możesz zmienić kolor pola i obramowania, korzystając z ustawień w sekcji „Kolory”.

Pamiętaj tylko, że „Tło” odnosi się do wnętrza pola cienia, podczas gdy „Obramowanie” pojawia się na zewnątrz bloku.

Jeśli chcesz stworzyć bardziej miękkie, zaokrąglone pole cienia, możesz włączyć przełącznik „Zaokrąglone rogi”. Na koniec możesz zmienić wyrównanie i wypchanie, podobnie jak w przypadku dostosowywania innych bloków w WordPressie.

Aby utworzyć więcej cieni pól, po prostu postępuj zgodnie z powyższym procesem.

Gdy będziesz zadowolony z wyglądu strony, po prostu kliknij „Aktualizuj” lub „Opublikuj”, aby wszystkie nowe cienie pól stały się aktywne.

Metoda 3. Dodaj cień pola za pomocą konstruktora stron (łatwe)

Jeśli chcesz dodać cienie pól do stron docelowych, niestandardowych stron głównych lub dowolnej części motywu WordPress, zalecamy użycie wtyczki konstruktora stron.

SeedProd to najlepszy konstruktor stron WordPress typu przeciągnij i upuść. Pozwala on projektować niestandardowe strony docelowe, a nawet tworzyć niestandardowy motyw WordPress bez konieczności pisania ani jednej linijki kodu.

Pozwala również dodawać cienie pól do dowolnego bloku za pomocą zaawansowanego edytora przeciągnij i upuść.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat instalacji wtyczki WordPress.

Po aktywacji przejdź do SeedProd » Landing Pages w swoim panelu administracyjnym WordPress.

SeedProd oferuje ponad 300 profesjonalnie zaprojektowanych szablonów, które są pogrupowane w kategorie. Na górze zobaczysz kategorie, które pozwalają tworzyć piękne strony „wkrótce”, aktywować tryb konserwacji, tworzyć niestandardową stronę logowania dla WordPress i wiele więcej.

Wszystkie szablony SeedProd są łatwe do dostosowania, dzięki czemu możesz użyć dowolnego projektu.

Gdy znajdziesz szablon, którego chcesz użyć, po prostu najedź na niego kursorem myszy i kliknij ikonę zaznaczenia.

Teraz możesz wpisać nazwę swojej strony docelowej w polu „Page Name”. SeedProd automatycznie utworzy „Page URL” na podstawie nazwy strony.

Warto w miarę możliwości umieszczać w adresie URL odpowiednie słowa kluczowe, ponieważ pomaga to wyszukiwarkom zrozumieć, o czym jest dana strona. Często poprawi to Twoje SEO w WordPressie.

Aby zmienić automatycznie generowany adres URL strony, po prostu wpisz go w polu „Adres URL strony”.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „Zapisz i rozpocznij edycję strony”. Spowoduje to załadowanie interfejsu konstruktora stron SeedProd.

Ten prosty konstruktor metodą przeciągnij i upuść pokazuje podgląd na żywo projektu Twojej strony po prawej stronie. Po lewej znajduje się menu pokazujące wszystkie różne bloki i sekcje, które można dodać do strony.

Gdy znajdziesz blok, który chcesz dodać, po prostu przeciągnij i upuść go na swój szablon.

Aby dostosować blok, kliknij go, aby go zaznaczyć w edytorze SeedProd. Menu po lewej stronie pokaże teraz wszystkie ustawienia, których możesz użyć do dostosowania bloku.

Na przykład, jeśli klikniesz na blok nagłówka, możesz wpisać własny tekst lub zmienić kolor tekstu i rozmiar czcionki.

Podczas tworzenia strony możesz przenosić bloki w swoim układzie metodą przeciągnij i upuść. Bardziej szczegółowe instrukcje znajdziesz w naszym przewodniku na temat tworzenia strony docelowej w WordPress.

Aby utworzyć cień pola, kliknij, aby zaznaczyć dowolny blok w edytorze stron SeedProd. Ustawienia w menu po lewej stronie mogą się różnić w zależności od bloków, ale zazwyczaj będziesz musiał kliknąć na zakładkę „Zaawansowane”.

Tutaj poszukaj rozwijanego menu „Cień” w sekcji „Style”. Po prostu otwórz to menu i wybierz styl cienia, taki jak cienki, średni lub 2x duży.

Podgląd zaktualizuje się automatycznie, dzięki czemu możesz wypróbować różne style, aby zobaczyć, co najlepiej wygląda w projekcie Twojej strony.

Jeśli nie chcesz używać żadnych gotowych stylów, kliknij „Niestandardowy”.

Dodaje to nowe ustawienia, w których możesz zmienić kolor, rozmycie, rozszerzenie i pozycję niestandardowego cienia.

Po wykonaniu tej czynności możesz kontynuować pracę nad stroną, dodając więcej bloków i cieni pól.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”, a następnie wybierz „Opublikuj”, aby udostępnić ją online.

Metoda 4. Dodaj cień pola za pomocą CSS Hero (zaawansowane)

Jeśli nie czujesz się komfortowo pracując z kodem, ale nadal chcesz tworzyć zaawansowane cienie pól, możesz wypróbować CSS Hero. Ten płatny wtyczka pozwala na dopracowanie każdej części motywu WordPress bez konieczności pisania ani jednej linii kodu.

CSS Hero pozwala tworzyć unikalny cień dla każdego bloku, więc jest to również świetny wybór, jeśli chcesz stworzyć wiele różnych efektów cienia. Więcej o wtyczce dowiesz się w naszej recenzji CSS Hero.

Najpierw musisz zainstalować i aktywować wtyczkę CSS Hero. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji na górze ekranu zobaczysz przycisk „Przejdź do aktywacji produktu”. Kliknij ten przycisk.

Zostaniesz przekierowany na stronę CSS Hero, gdzie możesz zalogować się na swoje konto i uzyskać klucz licencyjny. Po prostu postępuj zgodnie z instrukcjami na ekranie, a po kilku kliknięciach zostaniesz przekierowany z powrotem na swoją stronę.

Następnie kliknij tekst „CSS Hero” na pasku narzędzi administratora WordPress.

Spowoduje to otwarcie edytora CSS Hero.

Domyślnie edytor CSS Hero zawiera podgląd strony internetowej w trybie WYSIWYG oraz panel po lewej stronie, gdzie można edytować każdy element projektu strony internetowej.

Jeśli okaże się, że nie jesteś na stronie, na której chcesz dodać cień pola, możesz przełączyć się z trybu „Edytuj” na tryb „Nawiguj”.

Pozwala to na interakcję z menu nawigacyjnymi, linkami i innymi treściami jak zwykle.

Możesz teraz przejść do strony lub wpisu, na którym chcesz dodać cień.

Gdy tylko dotrzesz do tej strony, przełącz się ponownie na tryb „Edytuj”.

Po wykonaniu tej czynności kliknij akapit, obraz, przycisk lub inną treść, do której chcesz dodać cień pola.

W panelu po lewej stronie kliknij „Dodatki”.

Teraz możesz kliknąć „Utwórz cień”.

Spowoduje to wyświetlenie wszystkich ustawień, których możesz użyć do utworzenia cienia pola.

Na początek możesz zmienić, czy cień pojawia się wewnątrz czy na zewnątrz bloku, używając ustawień „Pozycja cienia”.

Tutaj wybraliśmy opcję „Na zewnątrz”, aby cień pojawił się poza samym obrazem.

Po podjęciu tej decyzji możesz dopracować orientację cienia za pomocą małej kropki w polu „Orientacja”.

Po prostu przeciągnij i upuść kropkę w nowej pozycji, aby zobaczyć, jak przesuwa się ona w podglądzie na żywo.

Gdy będziesz zadowolony z pozycji cienia, możesz zmienić jego kolor, rozmycie i rozproszenie.

CSS Hero natychmiast pokaże te zmiany, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

Aby dodać cień do innych bloków, postępuj zgodnie z powyższym procesem.

Gdy będziesz zadowolony z wyglądu strony, kliknij „Zapisz”, aby wprowadzić zmiany na żywo.

Dowiedz się więcej sposobów na dodanie unikalnych projektów do swojej witryny WordPress

Powyższe metody stanowią świetną podstawę do dodawania cieni w WordPressie. Ale co, jeśli chcesz osiągnąć jeszcze bardziej unikalne i kreatywne efekty?

W poniższych artykułach znajdziesz pomocne przewodniki dotyczące dodawania różnych elementów projektowych do swojej witryny:

• Jak dodać efekty najechania myszką na obrazy w WordPressie – Ten przewodnik omawia różne efekty najechania myszką, które możesz stworzyć dla swoich obrazów, dzięki czemu Twoja witryna będzie bardziej angażująca i interaktywna dla odwiedzających.
• Jak łatwo dodawać animacje CSS w WordPressie – Animacje, wraz z cieniami, mogą stworzyć dynamiczne i atrakcyjne wizualnie doświadczenie użytkownika, przyciągając uwagę odwiedzających i utrzymując ich zaangażowanie.
• Jak dodać efekt paralaksy do dowolnego motywu WordPress – Włączając efekty paralaksy, możesz wzmocnić iluzję głębi i stworzyć bardziej immersyjną witrynę.
• Jak utworzyć niestandardowy separator kształtu w WordPressie – Ten artykuł pokazuje, jak tworzyć unikalne kształty do wizualnego oddzielania sekcji treści.
• Jak łatwo stworzyć responsywny slider w WordPress – Ten przewodnik nauczy Cię, jak tworzyć slidery, aby prezentować swoje treści w atrakcyjny i oszczędzający miejsce sposób.
• Jak dodać animowane tło w WordPress – Dodanie animowanych teł może stworzyć unikalne i interesujące wizualnie doświadczenie użytkownika.

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się, jak dodać cień pudełka w WordPress. Możesz również chcieć dowiedzieć się jak usunąć nieużywany CSS w WordPress oraz jak łatwo zoptymalizować dostarczanie CSS 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.