htmlDecoding WordPress: Buduj szybko z Katalogiem Wzorców WordPress

by Jos Velasco
htmlDecoding WordPress: Buduj szybko z Katalogiem Wzorców WordPress thumbnail

WordPress znowu to zrobił.

Uprościli platformę jeszcze bardziej dla nieprojektantów, niekoderów, zwykłych właścicieli i menedżerów firm na całym świecie, aby mogli tworzyć piękne strony internetowe.

Tym razem dzięki czemuś, co nazywa się wzorcami bloków WordPress oraz nowemu katalogowi i bibliotece, w których są one zorganizowane.

Zaintrygowany?

Pozwól, że przedstawimy Ci Katalog Wzorców WordPress, z którego właściciele stron internetowych na każdym poziomie umiejętności technicznych mogą korzystać, aby stworzyć piękną kompozycję. Ponadto, zaoferujemy kilka wskazówek, jak wybrać odpowiednie wzorce do zbudowania Twojego idealnego doświadczenia markowego.

Czym jest Wzorzec WordPress?

W WordPressie, wzorzec to zbiór indywidualnych bloków zaprojektowanych tak, aby bezproblemowo integrować się z motywami WordPress.

Jeśli nie znasz jeszcze bloków, zacznijmy od tego.

Fioletowa strzałka wskazuje bloki WordPress po lewej stronie ekranu

Bloki WordPress to pojedyncze, układane elementy, które używasz do dodawania funkcjonalności do stron i postów na Twojej stronie WordPress.

W 2018 roku, Gutenberg, edytor bloków, zastąpił klasyczny edytor WordPressa. Od tego czasu bloki stały się złotym standardem w dostosowywaniu stron WordPress dzięki ich potężnej funkcjonalności i łatwej konfiguracji przeciągnij i upuść.

Słownik DreamHost

Gutenberg

Gutenberg to nazwa projektu Edytora Bloków w WordPress. Wielu deweloperów i entuzjastów WordPress używa nazw Edytor Gutenberg i Edytor Bloków zamiennie.

Czytaj więcej

Każdy blok jest jak widget, umożliwiający dodawanie tekstu, multimediów, elementów projektowych, funkcjonalnych, formularzy i więcej w dowolnym miejscu na stronie lub poście WordPress. Możesz układać bloki według własnych upodobań, a wiele z nich można dostosować, aby uzyskać wygląd i funkcje, które chcesz.

Powiązane: 27 motywów blokowych WordPress doskonałych do edycji całej strony

Teraz, gdy zrozumieliśmy bloki, zanurkujmy z powrotem w wzorce.

Jak zaczęliśmy wspominać, wzory bloków to predefiniowane kombinacje bloków, które tworzą funkcjonalne elementy dla stron i postów WordPress, takie jak nagłówki i stopki, skrzynki subskrypcji newslettera oraz wyświetlacze e-commerce.

Być może najfajniejszą funkcją wzorów jest to, że czcionki, kolory i inne elementy stylizacji każdego bloku w wzorze automatycznie dostosowują się, aby pasować do Twojego motywu. Nadal możesz dostosowywać wzory za każdym razem, gdy ich używasz, na wypadek gdybyś chciał przenieść lub usunąć element wzoru na jednej stronie lub poście, ale nie na innym.

Dobrym przykładem może być użycie pojedynczego wzorca jako gotowego szablonu dla wszystkich wpisów na blogu. Chcesz, aby były one dość podobne, ale możesz chcieć, aby wezwania do działania (CTAs), sekcje Najczęściej Zadawane Pytania, formularze i inne elementy znajdowały się w różnych miejscach w zależności od treści i odbiorców.

Twórcy popularnych motywów mają swoje własne niestandardowe wzorce, co ułatwia budowanie pięknych, a nawet złożonych układów, o których wiesz, że będą w pełni funkcjonalne. Jeśli szukasz zarówno nowoczesnych stylów motywów, jak i najlepszych wzorców do ich zasilania, ten przewodnik zawiera przydatną listę motywów i gotowych wzorców, które z nimi współpracują (darmowe i płatne).

Podsumowując, wzory WordPress to zaprojektowane elementy, które umożliwiają właścicielom, zarządcom i deweloperom stron internetowych szybkie tworzenie potężnych, spójnych witryn.

W związku z tym, porozmawiajmy o tym, jak uzyskać dostęp do wzorców WordPress.

Otrzymuj treści bezpośrednio do swojej skrzynki odbiorczej

Zapisz się teraz, aby otrzymywać wszystkie najnowsze aktualizacje bezpośrednio do swojej skrzynki odbiorczej.

Zrozumienie Katalogu Wzorców WordPress

Teraz możemy przejść do interesujących rzeczy, które chciałeś się dzisiaj nauczyć: Katalog Wzorców WordPress.

Ale najpierw (mam cię!) mamy jeszcze jedno zastrzeżenie: istnieje Katalog Wzorców WordPress oraz Biblioteka Wzorców WordPress.

To dlatego, że istnieje jeden zarówno dla WordPress.org, jak i WordPress.com, które są różne.

WordPress.org to platforma open-source służąca do tworzenia spersonalizowanych stron internetowych. Możesz ją pobrać i używać za darmo. Jednakże, aby Twoja strona była aktywna i dostępna w Internecie, musisz zakupić hosting.

To jest miejsce, gdzie WordPress.com, internetowy kreator stron i dostawca hostingu, wchodzi w grę. Podstawy są darmowe na WordPress.com, i można uzyskać dostęp do ulepszonych funkcji za opłatą.

Słownik DreamHost

Kreator Stron

Kreator stron to platforma lub program, który pomaga ludziom tworzyć strony internetowe w uproszczony sposób. Kreatorzy stron często korzystają z edytorów przeciągnij i upuść, i nie wymagają wcześniejszej wiedzy na temat tworzenia stron internetowych lub kodowania.

Czytaj więcej

Katalog Wzorców WordPress, czyli Katalog Wzorców Bloków, znajduje się na WordPress.org. Biblioteka Wzorców WordPress znajduje się na WordPress.com.

Oba zasoby pojawiły się niedawno, aby zapewnić jedno miejsce dla projektantów wzorów i deweloperów do dzielenia się kreacjami, które ułatwiają im życie. Kreatywni właściciele stron internetowych i/lub budowniczowie tak jak Ty mogą korzystać z tych zasobów, aby szybko tworzyć piękne, funkcjonalne eksperymenty bez konieczności wynajdywania koła na nowo każdorazowo.

Najlepsza funkcja ze wszystkich? Setki wzorów wymienionych w bibliotece i katalogu są darmowe do użytku.

Biblioteka i katalog wzorców bloków WordPress ułatwiają znalezienie odpowiedniego wzorca dla Twojej strony internetowej.

Na górze strony głównej każdej witryny znajdziesz zestaw filtrów, które możesz użyć, aby zawęzić typy wzorów, na które patrzysz.

Aktualne kategorie wzorów bloków w katalogu to:

  • Posty: Prezentuj treści swojego bloga
  • Tekst: Prezentuj tekst w dowolnym miejscu na swojej stronie
  • Galeria: Prezentuj zdjęcia
  • Wezwanie do Akcji: Zachęcaj odwiedzających stronę do działania
  • Banery: Wyświetlaj projekty na górze stron, aby angażować odwiedzających
  • Nagłówki: Pomagają w nawigacji po stronie
  • Stopki: Pojawiają się na dole stron, oferując dodatkową nawigację
  • Siatka projektowa: Dostarczaj elementy zastępcze, aby planować i eksperymentować z różnymi elementami projektu

Znajdziesz również pasek wyszukiwania do lokalizowania konkretnych wzorców. To szybki sposób, aby znaleźć rozwiązania dostosowane do Twoich wymagań.

Fioletowy prostokąt podkreśla kategorie wzorców bloków. Poniżej kategorii znajduje się pasek wyszukiwania.

W katalogu możesz kliknąć wzór, aby zobaczyć jego wygląd na różnych szerokościach ekranu.

Podgląd wzoru na szerokim ekranie pokazuje słowo 'etcetera' na tle zielono-łososiowym

Na obu stronach powinieneś zobaczyć niebieski przycisk, który pozwala na skopiowanie wzoru.

Niebieski przycisk z napisem 'Kopiuj wzór'

Pokażemy dokładnie, gdzie to się przyda, gdy zaczniemy używać wzorca na Twojej stronie WordPress po raz pierwszy.

Jak Zacząć Korzystać z Katalogu Wzorców WordPress

Zanurkujmy w implementacji Twojego pierwszego wzoru na stronie internetowej.

Najpierw musisz wybrać post lub stronę, na której chcesz dodać wzór. Zalogujemy się do WordPress, szukamy Posts w pasku bocznym, przechodzimy do All Posts i wybieramy ten, który chcemy edytować.

Menu Postów w WordPress. Pierwsza opcja wyświetla 'Wszystkie posty' na białym tle.

Gdy już znajdziemy się w tym poście, w lewym górnym rogu obszaru edycji powinien znajdować się przycisk plus, który otwiera zarówno menu bloków, jak i wzorów.

Na górnym lewym rogu obszaru edycji narysowano fioletowy prostokąt wokół niebieskiego przycisku plus

Uwaga: Nie widzisz opcji dodawania bloków lub wzorców na edytowanej stronie? Możliwe, że jeszcze nie używasz motywu, który je obsługuje. Nasz przewodnik Jak przejść z klasycznego motywu na motywy blokowe WordPress przeprowadzi Cię przez proces aktualizacji do motywu blokowego, abyś mógł korzystać ze wszystkich jego nowoczesnych korzyści.

Po otwarciu tego menu przełącz się na zakładkę Wzorce. Tutaj zobaczysz wszystkie dostępne wzorce bloków dla motywu, którego używasz.

Zakładka Wzory ujawnia długą pionową listę opcji. Na dole znajduje się przycisk z napisem 'Zobacz wszystkie wzory'

Załóżmy, że chcemy dodać wezwanie do działania do posta. Klikniemy w tę kategorię i wybierzemy wybrany wzór CTA. I tak oto pojawi się tam, gdzie znajduje się nasz kursor w poście.

Porada: Wstaw wzór, który skopiowałeś z katalogu wzorów lub biblioteki. Po prostu użyj niebieskiego przycisku kopiowania przy wybranym wzorze, wróć na stronę lub post WordPressa, który chcesz edytować, kliknij na ekranie, gdzie chcesz umieścić wzór, i wklej.

Szary box mówi 'Zacznij Teraz' w lewym górnym rogu.

Chcesz przenieść, usunąć, lub inaczej edytować swój wzór? Kliknij na nim w poście, aby zobaczyć wszystkie ustawienia i opcje wzoru.

Ustawienia, aby przenieść, usunąć lub edytować Twój wzór, mają prosty interfejs użytkownika z ikonami do kliknięcia

Upewnij się, że wybrałeś Zapisz wersję roboczą lub Opublikuj w prawym górnym rogu ekranu WordPress, aby zapisać swoją pracę.

To są podstawy używania wzorców na Twojej stronie internetowej. Bardzo łatwe, prawda? 

Jaki jest cel wzorców WordPress?

Wzory zdają się mieć wszystko. Mogą zwiększyć prędkość, z jaką tworzysz i budujesz, zapewnić bezproblemową jednolitość, aby poprawić wrażenie związane z Twoją marką, oraz dostarczyć estetykę, jakiej zawsze chciałeś dla swojej strony internetowej.

Szybkość Tworzenia

Każdy wzór w katalogu bezproblemowo integruje się z większością nowoczesnych motywów. Implementacja wzorów jest tak prosta, jak przeciąganie i upuszczanie ulubionych elementów na odpowiednie miejsce.

To oznacza, że nie musisz być projektantem WordPressa ani rozumieć programowania, aby szybko tworzyć potężne doświadczenia, które prezentują Twoją markę, zwiększają SEO, a nawet rosną konwersje i retencję.

Spójność Strony

Spędzasz godziny na starannym przeglądaniu każdej strony na swojej witrynie, aby zmienić schemat kolorów z ciemnoniebieskiego na granatowy?

Ojej, znowu to samo.

Wzorce WordPress dziedziczą ustawienia czcionki, koloru i odstępów bezpośrednio z motywu. Tutaj nie ma ogólnych ustawień!

To znacznie zmniejsza prawdopodobieństwo wystąpienia wizualnych niekonsekwencji, czy to podczas aktualizacji, czy eksperymentowania z wyglądem i uczuciem Twojej strony.

Piękne Projekty

Prawdopodobnie jedną z najlepszych i najbardziej oczywistych zalet używania wzorców do rozbudowy strony internetowej Twojej firmy jest to, że zazwyczaj są one niesamowicie atrakcyjne wizualnie.

Niektóre pełne wzory stron praktycznie projektują strony internetowe za Ciebie. Wszystko, co musisz zrobić, to wprowadzić kilka zmian, a możesz mieć spersonalizowaną, zgodną z marką stronę internetową, która wygląda profesjonalnie zaprojektowana.

Pełnostronicowy wzór dla szkoły klaunów. Ikony promują zalety wzoru: szybkość, spójność i projekt

Przytłoczony? 3 wskazówki, jak wybrać najlepsze wzory

To wspaniała sprawa, że dostępne są tysiące wzorów WordPress.

Może być również nieco przytłaczające przeanalizować je i wybrać najlepsze dla Twojej strony.

Podsumujmy więc kilka wskazówek, które pomogą Ci podejmować mądrzejsze, szybsze decyzje odnośnie wzorów.

Zacznij od Dostępności

Jak się okazuje, 15% populacji świata doświadcza niepełnosprawności, dlatego sieć praw i agencji na całym świecie utrzymuje wysokie standardy dostępności stron internetowych.

Kilka wskazówek dotyczących zwiększenia dostępności to użycie czytelnych rozmiarów czcionek, tworzenie projektów o wysokim kontraście, upraszczanie nawigacji, opisywanie grafik i nadawanie logiki strukturze twojej strony. Wybierz wzory, które poprawią dostępność na całej stronie — takie jak wzory tekstowe z dużymi czcionkami lub wzory projektowe z wysokim kontrastem — bez konieczności porzucania całego projektu.

Aby zapoznać się z pełnym przewodnikiem, koniecznie przeczytaj Jak zaprojektować dostępną stronę internetową (Kompletny przewodnik)

Zdecyduj o swojej historii i stylu

Jeśli chodzi o projektowanie strony internetowej, układ i wygląd opowiadają historię Twojej marki.

Tylko ty możesz opowiedzieć tę historię dokładnie. Gdy już ją dobrze opracujesz, powinna ona kształtować wszystko inne, takie jak twoje treści i styl, w jakim je prezentujesz.

Czy minimalistyczny i prosty to odpowiedni klimat? A może Twoja marka jest głośna i pełna energii? Czy obrazy odgrywają główną rolę przy sprzedaży produktu, czy kluczowa jest treść przy oferowaniu usług?

Kiedy znasz odpowiedzi na te pytania, możesz przejść do rzeczy i stworzyć kolekcję wzorów, które tworzą stronę internetową opowiadającą Twoją historię.

Dowiedz się więcej o projektowaniu stron internetowych z Siedmiu Podstawowych Elementach Projektowania Stron WWW.

Mimo to, czasami zrozumienie twojej marki do głębi nie przynosi żadnych pomysłów na projekt. Niektórzy z nas po prostu nie myślą wizualnie.

Jeśli to ty i potrzebujesz szybkiej inspiracji, nie szukaj dalej niż nasz przewodnik po trendach w projektowaniu stron internetowych.

Z odrobiną wskazówek możesz zacząć dostrzegać wzorce i budować stronę, która będzie zarówno stylowa, jak i niepowtarzalna.

Pomożemy Ci rozszyfrować katalog wzorców WordPress

Z tym jesteś w pełni przygotowany, aby uzyskać dostęp do katalogu i biblioteki WordPressa i zacząć tworzyć projekt strony internetowej swoich marzeń.

A co jeśli nie ufasz swoim zdolnościom projektowym, nie masz czasu się tym zajmować, ponieważ obsługujesz zamówienia biznesowe z lewej i prawej strony (gratulacje!), lub po prostu nie chcesz?

Rozumiemy to.

Dlatego nasze proste, przystępne plany hostingowe oraz profesjonaliści od rozwoju webowego, projektowania stron i zarządzania stronami wspierają właścicieli i menedżerów stron w ich misjach tworzenia doświadczeń online, które zwiększają SEO, konwersje i są po prostu piękne.

Obraz tła reklamy

Uruchom swoją stronę z DreamPress

Nasze automatyczne aktualizacje i silne zabezpieczenia ochronne zdejmują z Ciebie obowiązek zarządzania serwerem, więc możesz skupić się na tworzeniu świetnej strony internetowej.

Sprawdź Plany