Jak stworzyć niestandardowy separator kształtu w WordPress (2 sposoby)

Czy kiedykolwiek zauważyłeś, że niektóre strony internetowe są po prostu bardziej angażujące podczas przewijania? Często działa subtelny element projektowy – separatory kształtów, które tworzą płynne, płynne przejścia między różnymi sekcjami.

Te zakrzywione, kątowe lub zygzakowate linie mogą wydawać się drobnym szczegółem, ale mają ogromny wpływ na to, jak profesjonalnie i nowocześnie wygląda Twoja strona.

Ponadto pomagają naturalnie dzielić treść i kierować wzrok odwiedzających dokładnie tam, gdzie chcesz.

Po przetestowaniu wielu opcji w celu znalezienia najbardziej niezawodnych metod, zawęziliśmy je do dwóch, które konsekwentnie dają świetne rezultaty.

Dziś przeprowadzimy Cię przez te dwa proste podejścia: użycie domyślnej metody WordPress i SeedProd.

Dlaczego warto dodawać niestandardowe separatory kształtów do swojej witryny WordPress?

Dzielnik kształtu to rodzaj dzielnika sekcji, który dodajesz między blokami treści.

Te separatory mogą być proste, takie jak pozioma linia utworzona za pomocą wbudowanych bloków WordPress.

Możesz użyć tych podstawowych separatorów do organizowania i oddzielania treści, co jest szczególnie przydatne na stronach obejmujących wiele różnych tematów.

Możesz także tworzyć bardziej zaawansowane separatory kształtów za pomocą wtyczek do tworzenia stron i innych programów do projektowania stron internetowych. Mogą one podkreślać najważniejsze treści Twojej witryny, dzięki czemu wyróżniają się dla odwiedzających i klientów.

Wprowadzenie profesjonalnie wyglądających separatorów kształtów może również sprawić, że Twoje strony będą bardziej interesujące i angażujące.

Na przykład, możesz ich użyć, aby stworzyć unikalne tło dla formularza zapisu do newslettera.

Mając to na uwadze, zobaczmy, jak możesz stworzyć niestandardowy separator kształtu w WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Tworzenie prostego separatora kształtów w edytorze blokowym (bez wtyczki)
• Metoda 2: Tworzenie niestandardowego separatora kształtów w WordPress przy użyciu konstruktora stron (zalecane)
• Frequently Answered Questions: Custom Shape Dividers

Metoda 1: Tworzenie prostego separatora kształtów w edytorze blokowym (bez wtyczki)

Najłatwiejszym sposobem dodania separatora kształtu w WordPress jest użycie wbudowanego bloku Separator.

Ta metoda pozwala na dodanie poziomej linii oddzielającej pomiędzy dowolnymi blokami WordPress, a następnie dostosowanie koloru i stylu linii.

Ta metoda nie pozwala na dodawanie różnych kształtów do WordPressa i ma ograniczone ustawienia dostosowywania. Jednak nie będziesz musiał instalować dodatkowej wtyczki WordPress, więc jest to najłatwiejszy sposób na dodanie prostego separatora kształtów do Twojej witryny.

Aby rozpocząć, po prostu otwórz post lub stronę, do której chcesz dodać poziomy separator w edytorze treści Gutenberga. Następnie kliknij przycisk „+” w miejscu, w którym chcesz umieścić ten separator.

W oknie podręcznym wpisz „Separator”.

Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do strony lub posta.

Aby dostosować domyślny blok Separator, kliknij go, a następnie użyj ustawień w menu po prawej stronie.

Możesz przełączać się między domyślnym, szerokim wierszem i kropkami za pomocą przycisków w sekcji „Style”.

Możesz również zmienić kolor linii, aby pasował do reszty motywu lub marki.

Aby to zrobić, kliknij „Tło”, a następnie wybierz kolor z pojawiającego się okna.

Dodatkowo możesz dostosować margines separatora.

Im większy margines, tym więcej miejsca będzie między oddzielonymi blokami.

Gdy będziesz zadowolony z wyglądu separatora, możesz kliknąć przycisk „Opublikuj” lub „Zaktualizuj”, aby funkcja separatora kształtu stała się aktywna.

Metoda 2: Tworzenie niestandardowego separatora kształtów w WordPress przy użyciu konstruktora stron (zalecane)

Jeśli chcesz użyć innego kształtu i dostosować każdą część swoich separatorów, zalecamy użycie wtyczki SeedProd.

SeedProd to najlepsza wtyczka do tworzenia stron WordPress na rynku i pozwala na dodanie niestandardowego separatora kształtów do dowolnej sekcji, wiersza lub kolumny za pomocą prostego edytora typu „przeciągnij i upuść”.

Dokładnie przetestowaliśmy to narzędzie w naszym środowisku demonstracyjnym i uznaliśmy je za niezwykle przyjazne dla początkujących i intuicyjne. Tworzenie stron było dzięki niemu bezproblemowe, zwłaszcza dla nowych użytkowników. Więcej o naszych odkryciach dowiesz się w naszej pełnej recenzji.

SeedProd oferuje również ponad 300 profesjonalnie zaprojektowanych szablonów i ponad 90 bloków, których możesz użyć do tworzenia pięknych niestandardowych stron głównych, stron docelowych i nie tylko.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki SeedProd. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywacji musisz wprowadzić swój klucz licencyjny.

Te informacje znajdziesz w swoim koncie na stronie SeedProd. Po wprowadzeniu klucza licencyjnego kliknij przycisk „Zweryfikuj klucz”.

Po wykonaniu tej czynności przejdź do SeedProd » Strony i kliknij przycisk „Dodaj nową stronę docelową”.

Następnie nadszedł czas na wybór szablonu strony. SeedProd oferuje mnóstwo profesjonalnych szablonów projektów stron internetowych, które możesz dostosować, aby idealnie pasowały do Twojej strony WordPress.

Aby wybrać szablon, po prostu najedź na niego kursorem myszy, a następnie kliknij ikonę „Zaznaczenie”.

Następnie wpisz nazwę strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz zmienić adres URL na dowolny inny.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij przycisk „Zapisz i zacznij edytować stronę”.

Następnie zostaniesz przeniesiony do konstruktora stron metodą przeciągnij i upuść, gotowy do dostosowania szablonu.

Edytor SeedProd pokazuje podgląd na żywo Twojego projektu po prawej stronie i niektóre ustawienia bloków po lewej.

Menu po lewej stronie również zawiera bloki, które można przeciągnąć na swój układ.

Na przykład możesz przeciągać i upuszczać standardowe bloki, takie jak przyciski i obrazy, lub używać zaawansowanych bloków, takich jak odliczanie, przyciski udostępniania w mediach społecznościowych i inne.

Aby dostosować blok, po prostu kliknij, aby go wybrać w swoim układzie.

Menu po lewej stronie pokaże wszystkie ustawienia, których możesz użyć do skonfigurowania tego bloku. Możesz również zmienić kolory tła strony, dodać obrazy tła lub zmienić schemat kolorów i czcionki, aby lepiej pasowały do Twojej marki.

SeedProd zawiera również „Sekcje”, które są kolekcjami bloków często używanych razem. Na przykład, SeedProd ma sekcję nagłówka, obraz główny, wezwanie do działania, opinie klientów, funkcje, sekcje stopki i inne.

Aby przejrzeć różne sekcje, po prostu kliknij zakładkę „Sekcje”.

Możesz przenosić sekcje i bloki w swoim układzie za pomocą funkcji przeciągnij i upuść.

Jeśli chcesz usunąć blok, najedź na niego kursorem, a następnie kliknij ikonę kosza, gdy się pojawi.

Niezależnie od tego, czy zdecydujesz się użyć sekcji SeedProd, czy nie, możesz teraz utworzyć niestandardowy separator kształtu. Po prostu kliknij, aby wybrać sekcję, wiersz lub kolumnę, do której chcesz dodać separator.

Następnie kliknij zakładkę „Zaawansowane” w menu po lewej stronie.

Teraz kliknij, aby rozwinąć sekcję „Separator kształtu”.

Aby rozpocząć, możesz wybrać, gdzie chcesz pokazać separator kształtu, wybierając przycisk „Góra” lub „Dół”.

Możesz teraz otworzyć menu „Typ” i wybrać separator kształtu, którego chcesz użyć.

Podczas wybierania różnych kształtów podgląd na żywo będzie automatycznie aktualizowany, dzięki czemu możesz wypróbować różne style, aby zobaczyć, co wygląda najlepiej.

Po wybraniu separatora kształtu możesz go stylizować za pomocą nowych ustawień.

Na początek możesz kliknąć „Kolor”, a następnie wybrać nowy kolor z pojawiającego się okna.

Po wykonaniu tej czynności możesz powiększyć lub zmniejszyć separator, przeciągając suwaki „Szerokość” i „Wysokość”.

Jeśli masz już na myśli konkretny rozmiar, możesz wpisać te liczby w polach.

Możesz również spróbować odwrócić dzielnik, klikając, aby włączyć lub wyłączyć przełącznik „Odwróć”.

Domyślnie separator będzie pojawiał się za resztą treści, dzięki czemu użytkownicy będą mogli wyraźnie widzieć wszelki tekst, obrazy lub inne treści, które nakładają się na separator.

Jednak przesunięcie kształtu na przód może stworzyć ciekawe efekty. Jeśli chcesz zobaczyć, jak to wygląda, po prostu kliknij, aby włączyć przełącznik „Przenieś na przód”.

Aby dodać więcej separatorów, po prostu wykonaj ten sam proces opisany powyżej.

Możesz nawet dodać dzielnik kształtu na górze i na dole obszaru, co często daje imponujące i przyciągające wzrok rezultaty.

Możesz kontynuować pracę nad stroną, dodając więcej bloków i dostosowując te bloki w menu po lewej stronie.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”. Następnie możesz wybrać „Opublikuj”, aby opublikować stronę.

Jak dodać separatory kształtu do motywu WordPress

Edytor metodą przeciągnij i upuść w SeedProd daje Ci swobodę dodawania unikalnych separatorów kształtu do każdej strony. Jednak czasami możesz chcieć użyć tych samych separatorów kształtu na wielu stronach internetowych, a nawet w całym swoim blogu WordPress lub witrynie.

Pomoże Ci to stworzyć spójny projekt i może również zaoszczędzić mnóstwo czasu. W tym przypadku zalecamy dodanie dzielnika kształtu do swojego motywu za pomocą konstruktora motywów SeedProd.

Dzięki SeedProd możesz tworzyć i dostosowywać motyw WordPress bez pisania kodu. Tworzy on wszystkie pliki tworzące Twój motyw, w tym pasek boczny, nagłówek, stopkę, pojedyncze wpisy i inne.

Następnie możesz dostosować te pliki za pomocą znanego kreatora przeciągnij i upuść. Obejmuje to dodawanie separatorów kształtów, postępując zgodnie z tym samym procesem opisanym powyżej.

Po aktywacji nowego motywu za pomocą SeedProd, nadpisze on Twój istniejący motyw WordPress, dlatego powinieneś używać tej metody tylko wtedy, gdy chcesz zastąpić swój obecny motyw.

Szczegółowe instrukcje krok po kroku znajdziesz w naszym przewodniku jak łatwo stworzyć niestandardowy motyw WordPress.

Często zadawane pytania: niestandardowe separatory kształtów

Oto kilka często zadawanych przez naszych czytelników pytań dotyczących tworzenia niestandardowych separatorów kształtu:

Czy separatory kształtów wpłyną na szybkość mojej strony?

Ogólnie rzecz biorąc, separatory kształtów nie mają większego wpływu na wydajność, zwłaszcza jeśli są tworzone przy użyciu czystego CSS lub SeedProd. Są one lekkie i szybko ładują się w przeglądarce.

Jednak nadmierne ich używanie lub poleganie na plikach obrazów może nieznacznie zwiększyć czas ładowania. Aby utrzymać szybkość strony:

• Używaj minimalnej liczby wtyczek.
• Preferuj pliki SVG zamiast dużych plików graficznych.
• Unikaj nakładania zbyt wielu efektów w jednej sekcji.

Równowaga między projektem a szybkością jest kluczem do płynnego doświadczenia użytkownika.

Jak upewnić się, że moje separatory kształtów dobrze wyglądają na urządzeniach mobilnych?

Responsywny projekt jest niezwykle ważny. Jeśli korzystasz z kreatora stron, większość z nich pozwoli Ci osobno dostosować widoczność, wysokość i orientację dzielnika kształtu dla komputerów stacjonarnych, tabletów i urządzeń mobilnych.

Oto kilka wskazówek:

• Przetestuj swoje separatory kształtów na różnych rozmiarach ekranu. SeedProd ułatwia to, umożliwiając podgląd wyglądu projektu na urządzeniach mobilnych bezpośrednio w edytorze typu „przeciągnij i upuść”.
• Używaj mniejszych lub uproszczonych kształtów na urządzeniach mobilnych.
• Unikaj kształtów, które utrudniają czytanie tekstu lub nakładają się na ważne treści.

Narzędzia takie jak SeedProd zapewniają responsywne sterowanie, które pozwala łatwo dostosować każdą wersję Twojej witryny.

Gdzie mogę znaleźć gotowe pliki SVG dzielników kształtu?

Istnieje wiele darmowych zasobów, z których można pobrać gotowe separatory kształtów SVG. Świetnie się sprawdzają, jeśli chcesz czegoś niestandardowego bez projektowania od podstaw.

Oto kilka opcji:

• Haikei – Darmowy generator SVG dla unikalnych, konfigurowalnych kształtów.
• ShapeDividers.com – Oferuje różne separatory SVG, które można skopiować i wkleić.

Po pobraniu pliku SVG możesz wkleić go do niestandardowego bloku HTML lub dołączyć do plików swojego motywu, w zależności od konfiguracji.

Odkryj więcej wskazówek i trików dotyczących projektowania WordPress

Chcesz dodać więcej funkcji projektowych, które zaimponują odwiedzającym Twoją stronę internetową? Sprawdź te wskazówki i triki dotyczące projektowania WordPress, aby uzyskać więcej informacji:

• Jak dodać efekt paralaksy do dowolnego motywu WordPress
• Jak stworzyć „przyklejony” pływający pasek stopki w WordPress
• Przewodnik dla początkujących po tworzeniu responsywnego menu WordPress gotowego do urządzeń mobilnych
• Jak dodać animację preloadera do WordPressa (krok po kroku)
• Jak dodać inicjały w postach WordPress
• Przewodnik dla początkujących: Jak dodać tryb ciemny do swojej strony WordPress (łatwy sposób)
• Jak dodać animowane tło w WordPress

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak tworzyć niestandardowe separatory kształtów w WordPress. Możesz również chcieć dowiedzieć się jak dodać pola z funkcjami i ikonami w WordPress oraz nasze wskazówki ekspertów dotyczące sposobów tworzenia przyjaznej dla urządzeń mobilnych witryny 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.