Jak zbudować witrynę WordPress w 2021 w 6 krokach. Przewodnik od A do Z

w 2017 roku w firmie, w której pracowałem, pojawiła się okazja do nauki projektowania stron internetowych.

zacząłem uczyć się HTML, CSS i Javascript. Bardzo mi się podobało. Dopóki nie natknąłem się na moje pierwsze robaki. Później przydzielono mi projekt poboczny: prawdziwą stronę internetową. Byłem zachwycony, moi koledzy byli przy mnie, gdy prosiłem o pomoc.

kilka miesięcy później pracowałem nad projektem pro-bono WordPress dla organizacji pozarządowej.

stwierdzam, że działamy na rynku turystycznym i zajmujemy się marketingiem. Ale była taka kultura wzmacniania ludzi w uczeniu się nowych umiejętności.

jestem typem majsterkowicza i zdałem sobie sprawę, że krzywa uczenia się kodu uczenia jest znacznie dłuższa niż oczekiwano. Z WordPress wszystko działało inaczej.

przewiń do przodu, w 2020 roku skończyłem pracę dla Colibri makers, Colibri jest popularnym narzędziem do tworzenia stron typu przeciągnij i upuść WordPress.

z takimi narzędziami wszystko jest dziś takie proste. WordPress może naprawdę upoważnić ludzi do zbudowania strony internetowej od podstaw w krótkim czasie. A inspiracja dla stron internetowych jest po prostu … w całym Internecie.

oto kroki:

1. wybierz nazwę domeny
2. uzyskaj hosting witryny
3. zapoznaj się z interfejsem WordPress
4. zainstaluj motyw WordPress
5. Zbuduj swoją witrynę WordPress
6. zainstaluj ważne wtyczki WordPress

ponieważ masz kilka kroków nie wystarczy mieć supercalifragilisticexpialidocious stronę, mam jeden bonus dla ciebie na końcu przewodnika: UX design tips and tricks.

ale zanim przejdę do tematu, chcę rzucić światło na inny temat. To nie potrwa długo, obiecuję.

ile kosztuje strona WordPress?

jeśli mamy dokonać podziału kosztów dla witryny WordPress, oto, co powinniśmy uwzględnić:

• zakup domeny: ceny mogą zaczynać się od $15 / rok
• zakup hostingu: ceny zaczynają się już od $8/rok
• motyw WordPress. Teraz, w zależności od poziomów dostosowywania i liczby funkcji, które chcesz uwzględnić, możesz zacząć od $0. Jeśli nie chcesz rozliczać się z podstawową stroną internetową, roczne plany motywów WordPress obracają się wokół $70.
• wtyczki do WordPressa. Wiele z nich jest bezpłatnych, ale jeśli potrzebujesz zaawansowanych opcji, musisz przejść na plan płatny.

oznacza to, że najbardziej podstawowa strona zacznie się od $23/rok. W momencie, gdy chcesz zaawansowanych funkcji motywu, koszt wzrośnie do około $100 / rok.

po uaktualnieniu wtyczek możesz zapłacić około $200-500 rocznie.

jeśli chcesz coś zrobić na zamówienie i musisz zadzwonić do programisty WordPress, koszty mogą przekroczyć $1000 w pierwszym roku.

w przypadku sklepów internetowych koszty mogą znacznie wzrosnąć, ponieważ potrzebujesz wielu funkcjonalności, a wydajność i bezpieczeństwo są najważniejsze.

teraz, gdy to wyjaśnimy, nadszedł czas, aby przejść do sedna naszego tematu dzisiaj: jak stworzyć witrynę WordPress w 2021 roku.

wybierz nazwę domeny

źródło: https://unsplash.com/photos/N1XUwR8iOf0

Jeśli jeszcze o tym nie wiesz, nazwa domeny to nazwa Twojej firmy lub Nazwa produktu. Nazwy mogą być naprawdę potężne, więc nie śpiesz się z wyborem nazwy domeny. Jeśli czujesz, że stchórzysz, nie martw się, istnieją narzędzia, które mogą Ci pomóc.

porady i wskazówki dotyczące nazwy domeny internetowej wybór

robiłem burzę mózgów dla domeny internetowej dla firmy jakiś czas temu i zdałem sobie sprawę, że „Wazz” brzmiało dość interesująco. Jest krótki, łatwy do zapamiętania. Ale w chwili, gdy to wygooglowałem, cóż … pozwólcie, że powiem, że wybuchłem śmiechem. W brytyjskim slangu oznaczało „oddawanie moczu”. Naprawdę ludzie, zrobić swoje badania.

później chciałem nazwać moją stronę fotograficzną. Analizowałem „bimber”. To było takie miłe, Romantyczne, baśniowe … tyle, że nie było. wydaje się, że oznaczało „nielegalnie destylowany lub przemycany alkohol”.

więc upewnij się, że Twoje nazewnictwo jest wyjątkowe, niezapomniane i nie ma żadnego dziwnego znaczenia w języku angielskim lub innym popularnym języku (np. Jeśli jesteś lokalnym biznesem, możesz to pominąć.

teraz spójrzmy na małą listę kontrolną wyboru nazwy domeny dla Twojej witryny WordPress:

• stwórz listę odpowiednich słów kluczowych dla swojej firmy / produktu. Pomyśl o tym, jak użytkownicy powinni się czuć po użyciu produktu. Załóżmy, że masz linię produktów do skóry na bazie naturalnych składników. Twoja lista może zawierać słowa takie jak” skóra”,” pielęgnacja”,” bezpieczny”,” naturalny”,” piękny”,” świeży ” itp. Użyj narzędzia takiego jak Namelix lub Novanym do generowania pomysłów na nazwy domen.
• Sprawdź znaczenie nowo znalezionej nazwy domeny. Zawsze wygoogluję to w ten sposób „{insert name here} meaning”. Skończę z wyjaśnieniami słownikowymi. Następnie Idę Do Google images i zobaczyć, jak to się dopasowuje. Może jest piosenkarka o takim imieniu, nazwa Kreskówki manga itp. Jeśli tak, musisz ponowić proces.
• poszukaj nazwy domeny na Facebooku lub LinkedIn, aby sprawdzić, czy istnieje strona firmowa o tej nazwie.
• sprawdź, czy istnieje domena internetowa dostępna na sprzedaż. Dla wielu witryn”. com ” jest najlepszą domeną najwyższego poziomu (TLD), a następnie „.org”,”. net” lub”. io”.
• kup swoją nazwę domeny. Możesz to zrobić za pośrednictwem rejestratora domen, takiego jak GoDaddy lub dostawcy usług hostingowych.

i to prowadzi nas do następnego rozdziału.

uzyskaj hosting stron internetowych

każda odwiedzona witryna jest hostowana na serwerze. Oznacza to, że musisz nabyć hosting od dostawcy hostingu.

biorąc pod uwagę, że budujemy stronę WordPress, możesz wybrać plan hostingowy z WordPress.com lub innego zewnętrznego dostawcy usług hostingowych.

pozwól mi coś wyjaśnić zanim przejdziemy dalej. Są wordpress.com oraz wordpress.org. różnica polega na tym, że na WordPress.com możesz hostować i budować stronę internetową. Od WordPress.org zazwyczaj nabywasz motywy i wtyczki do swojej witryny, która jest hostowana gdzie indziej. Możesz porównać WordPres.com plany tutaj.

hipoteza tego przewodnika jest taka, że naprawdę chcesz zbudować markę i mieć pełną kontrolę nad swoją stroną internetową. Oznacza to, że udasz się do zewnętrznego dostawcy usług hostingowych.

istnieją trzy główne usługi hostingowe: hosting współdzielony, VPS i hosting zarządzany. W pierwszej sytuacji zasoby serwera są dzielone na więcej witryn. Na dłuższą metę, jeśli te witryny się rozwijają, a także twoje, możesz napotkać problemy z wydajnością. Możesz zdać sobie sprawę, że potrzebujesz usługi VPS lub zarządzanego planu hostingowego.

więc musisz mieć to na uwadze przy wyborze dostawcy hostingu: jakie są Twoje cele biznesowe?

jeśli korzystasz z hostingu VPS, zasoby nadal będą udostępniane, ale zyskasz nad nimi kontrolę. Zobaczysz również ulepszenia pod względem bezpieczeństwa i wydajności.

hosting zarządzany to rodzaj usługi „à la carte”. Uzyskasz własny serwer fizyczny dla siebie, a zobaczysz wzrost wydajności i bezpieczeństwa.

zdecydowanie, rzeczy mogą być bardziej skomplikowane niż to, ale chciałem tylko namalować duży obraz hostingu.

następnie, analizując plany, przyjrzyj się bliżej:

• cennik
• Przechowywanie
• wsparcie
• wydajność

niektórzy dostawcy hostingu mają kilka dodatkowych funkcji, takich jak oferta domen (np.

teraz prawdopodobnie zauważyłeś już niektóre strony internetowe używające „HTTP” lub „HTTPS”. Co z nimi?

HTTP jest podstawą nowoczesnej sieci. Łączy przeglądarki i serwery oraz działa na zasadzie żądanie-odpowiedź. Teraz dodatkowe ” s ” oznacza, że połączenie z witryną jest szyfrowane, a dane udostępniane witrynie są bezpieczne.

powiedzmy, że użytkownik dokonuje płatności na swojej stronie lub loguje się na konto. Informacje, które użytkownik wprowadzi, będą prywatne. Zabezpieczony przed włamaniem. Dzieje się tak dzięki technologii SSL, która oznacza „Secure Sockets Layer.”Dla konsumentów, widząc „HTTPS” sygnalizuje zaufanie, ponieważ można chronić swoje dane i prywatność. Oznacza to, że musisz zdobyć certyfikat SSL.

upewnij się, że wybrany plan również to zawiera.

w momencie nabycia planu hostingowego i skonfigurowania danych logowania, jedynym brakującym elementem będzie sam WordPress. Większość dostawców hostingu pozwala zainstalować WordPress z ich pulpitu/kreatora. To wszystko jest dość intuicyjne.

jak się zalogować na swojej stronie? Bułka z masłem. Wystarczy wpisać w przeglądarce adres swojej strony internetowej i dodać do niej „/ wp-admin”, jak widać poniżej.

zapoznaj się z interfejsem WordPress

pulpit nawigacyjny WordPress ma sekcje 9. Przyjrzyjmy się im.

ustawienia WordPressa

w tej sekcji znajduje się więcej pozycji menu 7. Opiszę krótko najważniejsze rzeczy, które należy zrobić tutaj.

• w sekcji „Ogólne” możesz ustawić tytuł witryny, slogan, adres URL, strefę czasową, format daty czasu & i język.
• pod „czytaniem” „powiesz” WordPressowi, która strona służy jako Strona główna, A która jest Twoim „blogiem”. To ważny krok. Możesz także wybrać, ile postów na blogu może pojawić się na stronie lub jeśli chcesz, aby Twoja witryna była indeksowana przez Google.
• pod „dyskusja” zrobisz konfigurację komentarzy na blogu.
• wewnątrz „Media” można określić maksymalne wymiary w pikselach, które będą używane podczas dodawania obrazu do biblioteki multimediów.
• wewnątrz 'Permalinks’ ustawisz format swoich adresów URL.
• możesz zdefiniować swoje strony polityki prywatności w „prywatność”.

najlepszym sposobem podejścia do panelu „Ustawienia” jest wprowadzenie wszystkich tych elementów i wypełnienie brakujących informacji, aby upewnić się, że nie pominiesz niczego ważnego. Sprawy są dość proste, więc nie tchórz. Całą konfigurację można wykonać w mniej niż 30 minut.

strony i posty WordPress

co musisz wiedzieć, to to, że Twoje treści wejdą do „stron” lub „postów”. Tutaj spędzisz 95% swojego czasu.

„strony” są statyczne. Możesz mieć stronę „Strona główna”,” usługi”,” skontaktuj się z nami”, dostaniesz punkt. Pod postami możesz mieć swoje najnowsze artykuły na blogu, może swoje portfolio. Są to dynamiczne strony, ponieważ automatycznie umieszczają najnowszą zawartość witryny na górze.

po wybraniu „posty” z Pulpitu nawigacyjnego będziesz mógł utworzyć post, wizualizować wszystkie posty i zarządzać tagami i kategoriami.

możesz utworzyć nowy post, jeśli wybierzesz „Dodaj nowy”, Jak pokazano powyżej, lub przejdź do „wszystkie posty”, a następnie wybierz „Dodaj nowy”.

to samo działa dla stron.
to, co zobaczysz w „wszystkich stronach” lub „wszystkich postach”, to niektóre domyślne strony i posty wdrożone przez Twój motyw.

teraz, jak możesz edytować post lub stronę?

po najechaniu kursorem na domyślne strony i posty zobaczysz kilka opcji: Edycja, Szybka edycja, kosz, widok. Na powyższym zrzucie ekranu znajduje się również „Edytuj w Colibri”. Dzieje się tak dlatego, że zainstalowaliśmy wtyczkę, która pozwala dostosowywać strony za pomocą Colibri WordPress builder (ale porozmawiamy o tym nieco później).

WordPress media

wszystkie Twoje media trafiają tutaj: Zdjęcia i filmy. Możesz je przeciągać i upuszczać lub przesyłać.

możesz również dodawać multimedia z poziomu wpisu/strony. Więcej na ten temat pokażę później.

WordPress komentarze

czwarta sekcja Pulpitu nawigacyjnego nazywa się „Komentarze”. Tutaj możesz zarządzać komentarzami swoich postów. Otrzymasz mnóstwo komentarzy spamowych, które można przenieść do spamu lub kosza. Możesz zatwierdzić odpowiednie.

menu” Wygląd ”

na tym poziomie możesz:

• wyszukaj, zainstaluj i Aktywuj motyw (więcej szczegółów w następnym rozdziale).
• Dostosuj widżety, aby dodać bloki zawartości do pasków bocznych, stopek i innych obszarów witryny.
• Zdefiniuj menu swojej witryny WordPress.
• Dodaj obraz tła do swojej witryny.
• edytuj kod swojego motywu w „edytorze motywów” (zalecane tylko jeśli jesteś programistą).

teraz, w momencie aktywacji niektórych wtyczek, możesz zobaczyć kilka nowych pozycji menu pod „wyglądem”. W tym przypadku, ponieważ aktywowaliśmy motyw Skyline, widzimy opcję skonfigurowania go w „Ustawieniach SkylineWP”. Każdy motyw może mieć własną konfigurację.

„Install Plugins” to drugi dodatkowy element menu dodany przez motyw Skyline. Tutaj zobaczysz kilka zaleceń wtyczek, które działają dobrze z Skyline.

to prowadzi nas do następnego elementu menu.

wtyczki

istnieje wiele funkcji, których nie można zarządzać tylko przez motyw, takich jak optymalizacja SEO, audyt SEO, bezpieczeństwo witryny i tworzenie kopii zapasowych, tabele, formularze, funkcje e-commerce i inne. Wtyczki są tutaj, aby zrekompensować brak takich opcji.

oto mały samouczek na temat instalacji, aktywacji i dezaktywacji wtyczek. Wszystko jest intuicyjne i przyjazne dla użytkownika.

użytkownicy

na tym poziomie decydujesz, kto ma dostęp do twojej witryny. Możesz dać dostęp do współpracowników, autorów gości, redaktorów i innych, w zależności od twoich potrzeb.

narzędzia

w zakładce „Narzędzia” masz możliwość importowania i eksportowania danych narzędzi do iz innych systemów zarządzania treścią (np. Blogger).

istnieje również sekcja „zdrowie witryny”, która pokazuje krytyczne informacje o konfiguracji WordPress i elementach, które wymagają twojej uwagi, z pewnymi poradami.

ponieważ musimy szanować politykę prywatności, tutaj możesz wyeksportować lub usunąć dane osobowe swoich użytkowników.

i dzięki temu Zapakowaliśmy rozdział Pulpitu nawigacyjnego WordPress.

przejdźmy do ciekawszych spraw.

jak zainstalować motyw WordPress

w tym celu musisz przejść do panelu administracyjnego WordPress, kliknij „wygląd” z lewego menu, a następnie „motywy”.

następnie kliknij przycisk „Dodaj nowy”.
zobaczysz kilka szablonów i możesz je filtrować według najnowszych, polecanych, popularności … lub funkcji.

z dumą możemy powiedzieć, że nasze własne motywy Mesmerize i Colibri są wymienione w top 20 najpopularniejszych motywów WordPress.

Po wybraniu motywu kliknij „Zainstaluj”, a następnie „aktywuj”.

możesz również aktywować swój motyw WordPress, jeśli powrócisz do motywów wygląd->.

cały proces instalacji jest również wyjaśniony w naszym samouczku.

teraz jesteś gotowy na rock and roll!

przez GIPHY

Zbuduj swoją witrynę WordPress

w WordPress Twój wygląd strony zależy od wybranego motywu. Jeśli potrzebujesz czegoś ekstra, cóż … może będziesz musiał znaleźć coś, co uzupełni brakujące funkcje.

Zwykle każdy motyw WordPress ma 2 projekty: jeden na bloga i jeden na strony. Kolory są ograniczone, nie ma specjalnych dostosowań. Oznacza to, że w określonym czasie przydadzą się wtyczki.

teraz motywy WordPress mają dostosowywanie motywów z podstawową funkcjonalnością. Są dobre dla tych, którzy nie potrzebują żadnych niestandardowych funkcji i chcą szybko zbudować swoją witrynę. W razie potrzeby możesz dodać własne style CSS. Po prostu wybierz motyw, który ma układ pasujący do twojej wizji.

jak dostosować motyw? Po prostu przejdź do wyglądu – > Dostosuj.

z lewej strony możesz wybrać, co chcesz zmodyfikować: zawartość, menu i inne. Po prawej stronie znajduje się podgląd Twojej strony. Możesz zmienić tekst w czasie rzeczywistym, klikając ikonę ołówka.

po drugiej stronie historii mamy budowniczych WordPress. Są to wtyczki, które pomagają budować naprawdę wyjątkowe strony internetowe. Możesz całkowicie zmienić układ motywu.

w naszym przypadku Skyline preinstaluje takiego konstruktora o nazwie Colibri, użyjemy go jako przykładu.

w zależności od wersji motywu, darmowej lub płatnej, masz różne elementy do zabawy: od nagłówków, określonych sekcji stron po mniejsze komponenty, takie jak wywołania akcji, karty, liczniki, akordeony i inne.

możesz edytować swój motyw jak wcześniej, od wyglądu-> Dostosuj lub skorzystaj ze skrótu, jak pokazano poniżej.

jakie zmiany? Uzyskasz dostęp do większej liczby funkcji w narzędziu dostosowania.

oprócz korzystania z dostosowywania, istnieje inna opcja dostosowywania witryny w WordPress – domyślny edytor. Możesz uzyskać do niego dostęp z opcji „Edytuj” pod każdym postem i stroną. Ponadto, w momencie dodania nowego posta lub strony, dostaniesz się prosto do domyślnego edytora (chyba że masz aktywowanego konstruktora).

więc w następnym rozdziale omówimy, jak to zrobić:

1. Utwórz witrynę WordPress za pomocą narzędzia do tworzenia stron WordPress
2. Utwórz witrynę WordPress za pomocą domyślnego edytora WordPress

A. Jak zbudować witrynę WordPress za pomocą darmowych kreatorów witryn

kreatory witryn WordPress pomogą Ci przenieść WordPress Customizer na zupełnie nowy poziom. Będziesz mógł dostosować wszystko: nagłówki, zawartość strony, stopki, menu nawigacji, globalne, Indywidualne stylizacje, nazwij to! Nie potrzeba żadnych umiejętności projektowania ani kodowania!

zwykle jest to proces przeciągania i upuszczania. I nie musisz się martwić o mobilny projekt, Budowniczowie mają aspekt responsywności.

jak dostosować ustawienia witryny w Dostosowywaczu

spójrz na lewy panel boczny. Teraz przewiń w dół do „Ustawienia Ogólne”.

tutaj możesz skonfigurować:

• Nazwa Twojej strony.
• ogólna kolorystyka i typografia Twojej strony.
• Szablony bloga, nagłówka i stopki: jakich tła użyć, odstępów, obramowań, cieni itp.
• odstępy: wewnętrzne przyciski, kolumny itp.
• Niestandardowa Stylizacja CSS

jak utworzyć zawartość w WordPress za pomocą konstruktorów

jak wspomniano wcześniej, jeśli chcesz utworzyć nową stronę internetową, przejdź do „stron” i wybierz „Dodaj nową”. Zostaniesz przekierowany do domyślnego edytora WordPress, w którym nadasz nazwę swojej stronie. Następnie wybierz „Edytuj z Colibri”.

jeśli chcesz edytować istniejącą stronę WordPress, po prostu kliknij „Edytuj w Colibri”.

jak dodać sekcje do stron WordPress

każdy znak „+” w lewym panelu bocznym otwiera okno z blokami i komponentami. Możesz przewijać w dół, aż znajdziesz projekt, który Ci się podoba, lub po prostu wpisać kategorię. Oto kategorie dostępne w Colibri builder: akcent Bohatera, Informacje, funkcje, treść, wezwanie do działania, Blog, liczniki, Portfolio, Galeria Zdjęć, Referencje, Klienci, Zespół, Kontakt, F. A. Q. i ceny.

są to wstępnie zdefiniowane szablony, które będą pasować do wybranego schematu kolorów.
wybierając jeden z bloków, klikając na znak ” + ” pojawiający się na bloku, blok zostanie umieszczony na dole strony.

możesz je przenosić w dowolne miejsce, przeciągając i upuszczając sekcję z panelu po lewej stronie.

istnieje również opcja „pustych” bloków.

oznacza to, że możesz je dostosować w dowolny sposób. W końcu możesz nawet zapisać swój projekt do późniejszego wykorzystania.

z ikony ustawień w prawym górnym rogu każdej sekcji możesz dostosować liczbę elementów w wierszu, możesz zmieniać kolejność elementów, dodawać nowe bloki, a nawet usuwać całą sekcję.

jak dostosować sekcje strony WordPress

jeśli chcesz zmienić tekst w swoich sekcjach, możesz to zrobić w linii, co oznacza, że wewnątrz samej sekcji, na żywo.

w przypadku tekstów na przyciskach nie jest dostępna edycja in-line. Będą one zarządzane w panelu po lewej stronie.

jeśli chcesz zmienić obraz ze swojej witryny, wszystko jest intuicyjne. Zacznij od wybrania obrazu.

będziesz mógł zobaczyć je również w panelu po lewej stronie. Kliknij na obrazek. Pojawi się nowe okno z prośbą o przesłanie obrazu lub wybranie go z biblioteki. Jeśli zdecydujesz się przesłać, możesz to zrobić, przeciągając i upuszczając.

teraz, wracając do panelu, o którym właśnie wspomniałem, ma 3 główne opcje: układ, styl i zaawansowane. Za każdym razem, gdy wybierzesz sekcję z podglądu witryny po prawej stronie, zobaczysz odpowiedni panel sekcji.

weźmy je jeden po drugim:

• Layout

tutaj możesz dostosować szerokość i wysokość kontenera na poziomie struktury. . Mówiąc najprościej, pojemnik jest rzeczywistą przestrzenią, którą zajmuje blok. Wewnątrz kontenera umieszczasz zawartość (tekst, obrazy).

Możesz również dostosować odstępy treści i to, jak blisko góry lub dołu zostanie ona umieszczona.

możesz również dodać nowe wiersze wewnątrz bloku.

• Style

na tym poziomie możesz dostosować tło bloku lub dodać dzielniki. Dzielniki to wizualne wskazówki, które sygnalizują, kiedy sekcja witryny kończy się lub zaczyna.

• zaawansowane

nadchodzi zabawa, ludzie!

od typografii i odstępów po responsywność, tutaj możesz uzyskać najdrobniejsze szczegóły strony internetowej.

możesz tworzyć wariacje w zależności od stanu elementu: normalny lub najechany.

jeśli wybierzesz pewien element wewnątrz bloga, powiedzmy nagłówek, ten sam panel pojawi się po lewej stronie.

oznacza to, że możesz przejść bardziej szczegółową edycję.

mówiąc o nagłówkach i bardziej ziarnistych elementach, są one nazywane „komponentami”. Zobaczmy, jak można się z nimi bawić.

jak korzystać z komponentów w witrynie WordPress

składniki odnoszą się do nagłówków, suwaków, dzielników, przycisków, karuzel, cen i innych. Dostęp do nich można uzyskać w taki sam sposób, jak do bloków. Siedzą obok siebie i mają funkcję przeciągania i upuszczania. Colibri oferuje 40 komponentów.

jak wspomniano wcześniej, możesz dostosować je z panelu po lewej stronie, jeśli przejdziesz do „Układ”, „styl” lub „zaawansowane”.

responsywność mobilna

w świecie wielu urządzeń bardzo ważne jest posiadanie w pełni responsywnej strony internetowej. Domyślnie Skyline jest motywem responsywnym dla urządzeń mobilnych. Oznacza to, że jego sekcje będą dostosowywać się do różnych urządzeń. Jeśli chcesz wyświetlić podgląd, jak wygląda Twoja witryna WordPress na tabletach lub urządzeniach mobilnych, możesz to zrobić, grając za pomocą elementów sterujących w lewym dolnym rogu.

możesz także ukryć niektóre funkcje na urządzeniach mobilnych, na przykład w opcjach „zaawansowane”.

jak zbudować menu w WordPress Customizer

teraz Załóżmy, że zaprojektowałeś swoje strony i musisz je dodać do menu. W panelu po prawej stronie masz wszystkie sekcje, uporządkowane od góry do dołu, jak na swojej stronie. Stopka jest twoją ostatnią sekcją. Poniżej znajdziesz kilka dodatkowych funkcji.

tutaj możesz utworzyć swoje menu.

po wybraniu „Utwórz nowe Menu” otrzymasz nazwę swojego menu i wybierz miejsce jego umieszczenia (Nagłówek, stopka, strony itp.).

po wybraniu opcji „Dalej” będziesz mógł dodać swoje strony do menu, z opcji „Dodaj artykuły”. Nie może być łatwiej.

jak pracować z widżetami WordPress

już wspomniałem, że widżety to bloki treści, które można dodać do pasków bocznych, stopek i innych obszarów witryny.

korzystając z wtyczki WordPress builder, będziesz używać widżetów tylko dla pasków bocznych WordPress, ponieważ masz wstępnie zaprojektowane układy stopki.

zazwyczaj paski boczne są używane przez strony bloga. Każdy motyw ma różne opcje widżetów, od pasków wyszukiwania, ostatnich postów i komentarzy, widżetów społecznościowych po obrazy i filmy. Załóżmy Instagram Instagram profil na pasku bocznym, tam jest widżet WordPress Instagram do tego.

jednym z moich ulubionych widgetów jest ten, który pozwala na niestandardową edycję HTML. Uważam, że to naprawdę potężne.

to już koniec. Gratulacje, Twoja witryna WordPress jest uruchomiona!

teraz sprawdźmy inną metodę budowania witryn w WordPress.

B. Jak zbudować witrynę WordPress za pomocą domyślnego edytora WordPress (Gutenberg)

zamierzam zrobić to naprawdę szybko. Ten edytor jest nadal nowy w WordPress (jest to domyślny edytor WordPress od grudnia 2018), ale ewoluuje nieprzerwanie dzięki wkładowi społeczności.

klasyczny edytor WordPress wyglądał tak:

teraz mamy:

teraz musisz wiedzieć, że nie każdy motyw jest kompatybilny z tym nowym edytorem. Musisz znaleźć jednego gotowego na Gutenberga.

projektowanie układu z domyślnym edytorem WordPress jest ograniczone. Opiera się również na blokach. Teraz, jak zapewne zauważyłeś w poprzednim rozdziale, bloki mogą być praktycznie wszystkim: nagłówkami, obrazkami, przyciskami, filmami itp.

teraz, dlaczego nie nalegam na ten temat: jeśli sprawdzasz recenzje Gutenberga, Najnowsze są recenzje z gwiazdką 1. To nie jest dobre doświadczenie. Nawet jeśli minęły już 2 lata od premiery i wiele aktualizacji w środku, to wciąż jest w powijakach. WordPress polega teraz na społeczności, aby tworzyć nowe bloki, dzięki czemu edytowanie może ewoluować.

w tej chwili narzędzie zachowuje się jak edytor tekstu, z niską mocą po stronie Stylizacji.

istnieją narzędzia, takie jak Kadence, które mogą Ci pomóc, ale jeszcze tego nie zrobiliśmy.

zainstaluj istotne wtyczki WordPress

ekosystem WordPress składa się z motywów i wtyczek

dostępne są tysiące wtyczek WordPress, które mogą rozszerzyć funkcjonalność lub dodać nowe funkcje do twojej witryny.

jest to bardzo krótki tutorial na temat instalacji wtyczki.

nasze rekomendacje wtyczek

przejdźmy teraz do innego tematu: szybkość strony.

zarówno odwiedzający, jak i Google dbają o szybkość Twojej witryny.

Dlaczego Google?

szybkość jest ważnym czynnikiem, który bierze się pod uwagę przy rankingu organicznym, czyli tutaj:

dlaczego Szybkość witryny jest zła dla użytkowników, a ostatecznie dla Ciebie?
cóż, jeśli zaoferujesz im złe wrażenia, mogą nie zaangażować się w Twoją ofertę lub nawet nie wrócić w najbliższym czasie.

według badań Google z 2018 roku 53% użytkowników mobilnych opuszcza witrynę, która trwa dłużej niż 3 sekundy (jasny gwint!).

i zobacz!

jak ładowanie strony wpływa na użytkowników mobilnych (Uwaga: odbicie oznacza opuszczenie strony)?
.
więc jak możesz to naprawić, a także poprawić ogólną wydajność witryny, aby nie otrzymywać kciuków w dół od użytkowników i Google?

wybrałem 2 rozwiązania (jest ich o wiele więcej, ale dość techniczne).

● Optymalizuj obrazy
obrazy witryny nie powinny być przesyłane w oryginalnym rozmiarze. Spróbuj również użyć plików PNG zamiast plików JPEG (mają mniej kolorów).
Smush to nasza preferowana Wtyczka WordPress do kompresji obrazu. Nie zobaczysz żadnego widocznego spadku jakości, a szybkość strony zostanie zoptymalizowana.

● buforowanie
Mówiąc najprościej, pamięć podręczna zapewnia tymczasową pamięć masową dla zawartości, która ma być później dostępna. Twoja witryna ładuje się inaczej, jeśli jest dostępna po raz pierwszy lub po raz piąty przez tego samego użytkownika.

dlaczego?
kiedy masz do czynienia z buforowaniem przeglądarki, twoja przeglądarka zapisuje kopię plików ze strony internetowej na urządzeniu użytkownika
(dysk twardy, telefon komórkowy). Gdy witryna jest buforowana, przeglądarka musi tylko załadować nowe lub zaktualizowane fragmenty strony i nie musi inicjować nowego żądania serwera. To samo dzieje się, jeśli klikniesz przycisk „Wstecz”, przeglądarka wyświetli stronę z pamięci podręcznej. Jest to
również bardzo pomocne w przypadku wolnego połączenia z Internetem, strony będą się szybko ładować.

chcesz zrozumieć więcej o tym, jak działa buforowanie? Czytaj dalej.

narzędzia, które polecamy, to:
➔ W3 Total Cache (W3tc) poprawia SEO i wygodę użytkownika witryny, zwiększając wydajność witryny i skracając czas ładowania.
Koliber. Ma to również kilka dodatkowych funkcji, które kochamy, takich jak kompresja plików Javascript, HTML & CSS.

jak sprawdzić jak szybko ładuje się Twoja strona?
Google ma tylko narzędzie, które Ci w tym pomoże, a także zapewnia kilka pomysłów na naprawę.

Bonus: UX design tips and tricks

pamiętasz, jak mówiłem „sky’ s the limit” z kreatorami stron WordPress?

cóż … zawsze jest”ale”. Projektując stronę internetową należy zawsze mieć na uwadze odbiorców
lub osoby kupujące (jak to mówią marketerzy). Musisz zapewnić im wspaniałe wrażenia na swojej stronie internetowej, to jest to, co oznacza UX (user-experience).

w tym celu należy przestrzegać pewnych zasad, aby zapewnić bezproblemowe wrażenia użytkownika.

zaspokajaj potrzeby użytkowników
użytkownicy na stronie nie chcą za dużo myśleć. Potrzebują przydatnych informacji, które można z łatwością przejrzeć i zrozumieć. Nie potrzebują doświadczenia składającego się z wielu kliknięć lub wiele tam iz powrotem.

ludzie szukają natychmiastowej satysfakcji: znajdując to, czego potrzebują szybko i łatwo. Jeśli nie dzieje się to na twojej stronie, będą szukać innej.

hierarchia wizualna

nie wszystkie części Witryny są traktowane jednakowo, niektóre są ważniejsze od innych (formularze, przyciski, nagłówek, propozycja wartości itp.).

gdzie ma wylądować twój użytkownik? Gdzie ma kliknąć?

wykorzystaj wizualne wskazówki, aby pomóc mu osiągnąć to, co chcesz. Wszystkie elementy na stronach powinny zachowywać się jak przewodnik.

naukowcy odkryli, że użytkownicy czytający od lewej do prawej strony skanują strony internetowe w kształcie litery Z.

oznacza to, że tam powinieneś kierować najważniejsze informacje.

Łatwa nawigacja

powinieneś zachować prosty pasek nawigacji, nie wchodzić w zbyt wiele opcji. Możesz skończyć z sytuacją paradoksu wyboru, gdy użytkownicy zostaną przytłoczeni możliwościami.

strony powinny być wewnętrznie połączone z innymi odpowiednimi stronami, aby nawigacja była płynna, a użytkownik nie powinien klikać „wstecz” wiele razy, aby przejść do poprzednich stron.

użyj białej spacji. Biała przestrzeń pozwala na uporządkowanie informacji w strawnych obszarach treści. Dzięki temu użytkownicy poczują się bardziej komfortowo i nie będą przytłoczeni mnóstwem danych.

ten sam schemat kolorów (konsystencja)

unikaj super ciemnych lub super intensywnych kolorów na swojej stronie internetowej. Mogą odesłać użytkowników. Możesz użyć mocniejszych kolorów, aby podkreślić ważne aspekty swojej witryny.

Użyj kolorów, które są jednakowo zrównoważone. Oto Inspiracja.

i jeszcze jedno, zanim przejdziemy do następnej zasady projektowania UX. Kolory mają znaczenie na całym świecie, są związane z różnymi emocjami. Ta infografika rzuci światło na ten temat.

używaj skutecznego pisania

nie używaj przesadzonych i klikających kopii. Pisz zdrowym rozsądkiem, w języku naturalnym, nie używaj żargonu (nie każdy zna pewne techniczne słowa).

użyj max. 3 kroje pisma w maksymalnie 3 rozmiarach punktowych-maksymalnie 18 słów lub 50-80 znaków w wierszu tekstu, jak zaleca Smashing Magazine.

użyj dowodu społecznego

Dlaczego mam ufać tobie, Twojej firmie lub twoim produktom?
my, ludzie, jesteśmy istotami społecznymi. Żyjemy w społecznościach, mamy przyjaciół i rodzinę. Mogą być naszymi influencerami. Zależy nam na ich opinii.
.
Oto kilka przykładów:
● oceny i recenzje

● Referencje

● Nie. klientów („jesteś w dobrym towarzystwie”).

● logo klientów

● Case studies poparte wynikami

● Press featuring and awards

trendy w projektowaniu, nadmorscy kreatywni ludzie zrobili wspaniałą infografikę na ten temat.

wnioski

możemy to nazwać zawijaniem, nie sądzisz?

chcieliśmy iść krótką drogą, aby nie przytłoczyć Cię informacjami. Ale w końcu diabeł tkwi w szczegółach. Właśnie daliśmy ci widok z helikoptera.

chodzi o to, że możesz uruchomić swoją stronę w mniej niż 2 godziny. Ale im więcej funkcji, stron, treści chcesz dodać, tym dłużej to potrwa. I nigdy nie zaniedbuj najnowszych trendów w projektowaniu stron internetowych.

ostatnia rzecz, jeśli jesteś typem MAJSTERKOWICZA, zdecydowanie musisz wziąć nasz Colibri builder na przejażdżkę!

oto film o tym, jak zbudować stronę internetową WordPress przy użyciu mnóstwa funkcji.

teraz, Jeśli podoba Ci się ten artykuł i chcesz dowiedzieć się więcej o tym, jak zaprojektować stronę WordPress, zapisz się na nasz kanał Youtube i śledź nas na Twitterze i Facebooku!