Jak zrobić stronę internetową firmy za pomocą WordPress & Elementor

Dowiedz się, jak stworzyć witrynę internetową dla swojej firmy za pomocą WordPress, Elementor i Astra. To są w 100% darmowe narzędzia, z których osobiście korzystam.


W tym poradniku na temat tworzenia strony internetowej 2019 pokażę więcej niż tylko sposób tworzenia strony internetowej, nauczę Cię również, jak optymalizować SEO swojej witryny i jak generować z niej potencjalnych klientów.

Ten samouczek jest obszerny, najdłużej jak zbudować samouczek witryny. Mam nadzieję, że ci się spodoba.

Rzeczy, których potrzebujesz:

  • Hosting. Polecam SiteGround.
  • ZA Nazwa domeny.
  • Motyw WordPress. W tym samouczku korzystamy z bezpłatnego motywu Astra.
  • Kreator stron WordPress. W tym celu korzystamy z bezpłatnego narzędzia do tworzenia stron Elementor.

Zacznijmy!

Krok 1: Kup hosting i nazwę domeny.

Najważniejszą częścią witryny firmy jest hosting. Hosting określi, jak szybko ładuje się Twoja strona internetowa, co jest bardzo ważnym czynnikiem wpływającym na generowanie i konwersję potencjalnych klientów. Google preferuje także szybsze witryny o niskim współczynniku odrzuceń, więc szybsza witryna zwiększa szanse na ranking w Google.

Jedną z rzeczy, na które chciałbym zwrócić uwagę, jest jak największe unikanie firm EIG i GoDaddy. EIG oznacza Endurance International Group i kontroluje ponad 60 firm hostingowych. Zwalnia ich wewnętrznych pracowników pomocniczych i konsoliduje wszystko pod jednym parasolem. Cierpi na tym obsługa klienta, jakość hostingu i ogólna jakość usług.

Oto niektóre ze znanych firm EIG:

  • Hostgator
  • BlueHost
  • iPage
  • Arvixe
  • Gruba krowa
  • HostMonster Small Orange

GoDaddy ma również wiele złych opinii dotyczących jakości i obsługi klienta, a witryny, które hostują, ładują się bardzo wolno.

Będziesz także chciał unikać hostów typu „mama i pop”, ponieważ brakuje im zasobów do korzystania z zaawansowanych technologii hostingowych, które zapewnią Twojej stronie przewagę.

Chcesz również wybrać hosting, który zapewnia bezpłatne certyfikaty SSL. Bez certyfikatu SSL u góry strony będzie znajdować się ta brzydka etykieta „Niezabezpieczona”:

nie zabezpieczone

Jeśli prowadzisz firmę, możesz praktycznie pożegnać się z potencjalnymi klientami dzięki tej etykiecie. Jeśli Twój hosting nie zapewnia certyfikatów SSL za darmo, jeden certyfikat SSL może kosztować od 50 do 100 USD rocznie na stronę internetową.

Potrzebujesz także usługi, która pozwoli ci na aktualizację do PHP7, co znacznie przyspieszy twoją stronę.

Siteground, My Preferred Web Hosting Service

Usługa hostingowa, którą znalazłem, która spełnia wszystkie te kryteria, to SiteGround. SiteGround oferuje bezpłatny certyfikat SSL, pozwala na aktualizację do PHP7, ma wysokiej jakości hosting i niesamowitą obsługę klienta. To jest naprawdę najlepsze.

Oto kluczowe funkcje SiteGround:

  • Darmowy certyfikat SSL
  • SZYBKA pomoc w zakresie wiedzy
  • WordPress Staging Environment
  • Darmowe migracje stron internetowych
  • 30 dni kopii zapasowych

Zawarłem z nimi niesamowitą umowę, aby dać 70% zniżki każdemu, kto zarejestruje się za pomocą ten link. Więc jeśli chcesz zaoszczędzić pieniądze na swoim hostingu, kliknij ten link i kup teraz swój hosting.

Aby kupić hosting w SiteGround, kliknij ten link. Po przejściu na ich stronę główną zobaczysz cztery różne typy hostingu:

wybierz plan siteground

Wybierz hosting WordPress i kliknij Zaczynaj. Zobaczysz trzy plany cenowe:

siteground wordpress hosting cennik

Wybierz jeden według swoich potrzeb i budżetu. Możesz także sprawdzić ich porównanie każdego planu hostingowego aby móc zdecydować, który odpowiada Twoim potrzebom biznesowym.

Po wybraniu planu kliknij Uzyskaj plan. Nastąpi przejście do następnego kroku, czyli wybór domeny. Jeśli masz już nazwę domeny, wybierz „Mam już domenę”. Ale jeśli go nie masz, wybierz „Zarejestruj nową domenę” dzięki czemu możesz kupić domenę bezpośrednio w SiteGround. Kosztuje to 15,95 USD rocznie.

wybierz domenę

Pamiętaj, że jeśli nazwa domeny, którą chcesz kupić, nie jest już dostępna, SiteGround poinformuje Cię i będziesz musiał wybrać inną. Po uzyskaniu nazwy domeny kliknij Kontynuować.

Następnym krokiem do sfinalizowania zakupu jest podanie dokładnych danych osobowych i fakturowania. Po zakończeniu kliknij Zapłać teraz. Masz teraz niezawodny hosting i nazwę domeny.

Krok 2: Zainstaluj WordPress.

WordPress to narzędzie do tworzenia stron internetowych, którego użyjemy do stworzenia Twojej witryny biznesowej. Jest całkowicie darmowy, bardzo łatwy w użyciu, a jednocześnie bardzo wydajny. Zawiera tysiące wtyczek i motywów, które pozwolą Ci robić, co chcesz z witryną.

SiteGround faktycznie jest wyposażony w instalację WordPress za pomocą jednego kliknięcia, która szybko zainstaluje WordPress dla Ciebie.

Po zakończeniu zakupu hostingu zobaczysz ekran z linkiem „Przejdź do strefy klienta”. Kliknij to, aby przejść do strony, na której możesz skonfigurować nowe konto hostingowe. Pod Skonfiguruj swoją witrynę, Wybierz Uruchom nową stronę internetową.

Zobaczysz listę oprogramowania, które możesz zainstalować. Wybierz WordPress.

zainstaluj wordpress

Aby ukończyć proces, musisz podać dane logowania administratora (adres e-mail, nazwę użytkownika i hasło) dla swojej witryny. Są to dane, których użyjesz, aby uzyskać dostęp do zaplecza swojej witryny, więc upewnij się, że są bezpieczne.

Po zakończeniu kliknij Potwierdzać > Zakończ konfigurację. Masz teraz własną, obsługiwaną przez siebie witrynę WordPress.

Krok 3: Zainstaluj certyfikat SSL.

Przed zrobieniem czegokolwiek innego chcę najpierw pokazać, jak zainstalować certyfikat SSL, aby pozbyć się etykietki Niezabezpieczone, którą wcześniej pokazałem. Pod Moje konta, Kliknij Przejdź do cPanel.

idź do cpanel

CPanel to miejsce, w którym możesz zainstalować różne oprogramowanie i narzędzia do swojej witryny. Jeśli przewiniesz do końca, zobaczysz sekcję o nazwie Bezpieczeństwo. W tej sekcji kliknij Szyfrujmy.

pozwala szyfrować

Wybierz domenę, na której chcesz zainstalować certyfikat SSL, wybierz Zaszyfrujmy SSL, i kliknij zainstalować.

Teraz nadszedł czas, aby zalogować się do nowej witryny. Kliknij Moje konta ponownie u góry i kliknij Instalacje patka. Tutaj zobaczysz zarejestrowaną nazwę domeny. Po drugiej stronie jest zieleń Przejdź do portalu administracyjnego przycisk. Kliknij ten przycisk, aby przejść do strony logowania WordPress.

przejdź do pulpitu administratora wordpress

Strony logowania WordPress zwykle mają następujące formaty: twojadomena.com/wp-admin i twojadomena.com/wp-login. Twój może być inny. Musisz jednak zapamiętać adres URL strony logowania lub zanotować go, aby następnym razem móc uzyskać do niego dostęp, wpisując adres URL bezpośrednio w pasku adresu i bez konieczności logowania się do Siteground.

Strona logowania do WordPress wygląda następująco:

strona logowania do wordpress

Wprowadź swoją nazwę użytkownika i hasło, aby zalogować się na swojej stronie po raz pierwszy.

Gdy znajdziesz się w środku, pierwszą rzeczą, którą musisz zrobić, to powiedzieć WordPress, że masz certyfikat SSL. Jest to dość proste do zrobienia.

Na lewym pasku bocznym przejdź do Ustawienia > Generał. Na ekranie zobaczysz dwa pola z nazwą domeny: Adres WordPress (URL) i Adres witryny (URL). Musisz wpisać literę „s” po „http” i przed dwukropkiem „:” dla obu pól.

dodanie certyfikatu ssl w wordpress

Po zakończeniu kliknij Zapisz zmiany. Twoja witryna powinna teraz mieć ikonę kłódki obok nazwy domeny:

zabezpieczona strona z https

Teraz ostatnią rzeczą, którą musimy zrobić, aby uzyskać certyfikat SSL, jest upewnienie się, że osoby wpisujące „http” w adresie zostaną przekierowane na Twój adres URL „https”. Potrzebujemy do tego wtyczki.

Aby zainstalować wtyczkę, przejdź do Wtyczki > Dodaj nowe. Na pasku wyszukiwania w prawym górnym rogu wyszukaj wtyczkę Naprawdę proste SSL. Zainstaluj i aktywuj.

zainstaluj naprawdę prosty ssl

Następnie zobaczysz ten wyskakujący komunikat na pulpicie nawigacyjnym:

aktywuj naprawdę prosty ssl

Kliknij niebieski Śmiało, aktywuj SSL! przycisk. Zostaniesz wylogowany, a gdy się zalogujesz, wtyczka Really Simple SSL jest w pełni skuteczna.

Krok 4: Zainstaluj motyw Astra i witryny Astra.

W przypadku witryny biznesowej potrzebujesz motywu z czystym kodem i elastycznymi funkcjami, aby dostosowanie było jak najłatwiejsze i najszybsze. Istnieje wiele wysokiej jakości motywów WordPress, ale motyw, którego będziemy tutaj używać, to motyw Astra.

Astra Theme to darmowy motyw WordPress, który ma doskonałą szybkość i prostotę. Najbardziej podoba mi się to, że konfiguruje się w oparciu o narzędzia, których potrzebujesz, a to ułatwia twoje zadanie. Dostępna jest również wersja Pro, jeśli chcesz uzyskać dostęp do funkcji premium.

motyw astra

Oto funkcje, które najbardziej lubię w Astrze:

  • Jeden z najszybszych dostępnych motywów
  • Ponad 100 stron startowych (większość jest w 100% darmowa)
  • Elastyczna funkcja Mega Menu
  • Potężny pakiet dodatków
  • Rozbudowane wsparcie WooCommerce

Aby zainstalować Astrę, przejdź do Wygląd > Motyw > Dodaj nowe. Wyszukaj Astra, kliknij zainstalować, i Aktywuj.

instalowanie Astry

Kolejną niesamowitą rzeczą w Astrze jest to, że ma wtyczkę o nazwie Witryny startowe Astra. Ta wtyczka ma bibliotekę gotowych szablonów bezpłatnych i premium, których można używać we własnej witrynie za pomocą kilku kliknięć. Użyjemy szablonu witryny Astra, aby skrócić czas tworzenia naszej witryny o połowę.

Po zainstalowaniu Astry zobaczysz ten komunikat na pulpicie nawigacyjnym:

zacznij od strony Astra

Kliknij Zaczynaj. Spowoduje to zainstalowanie stron startowych Astra. Możesz także zainstalować Witryny Astra, przechodząc do Wtyczki > Dodaj nowe. Szukaj Witryny Astra oraz zainstaluj i aktywuj. Aby uzyskać dostęp do Witryn Astra, przejdź do Wyglądy >Witryny startowe Astra.

Wybór programu budującego strony

Po zainstalowaniu Astra Sites zostaniesz zapytany, który program do tworzenia stron preferujesz: Gutenberg, Elementor, Beaver Builder lub Brizy. W tym samouczku zamierzam użyć Elementora.

Elementor to konstruktor stron WordPress, który wzniósł tworzenie stron na nowy poziom. Ma bogaty zestaw funkcji, ale jest bardzo łatwy w użyciu i opanowaniu. Darmowa wersja wystarczy, aby zbudować przyzwoitą stronę internetową, ale jeśli chcesz bardziej zaawansowanych funkcji, takich jak możliwość dodawania formularzy kontaktowych, suwaków, tabel cen i innych, możesz uaktualnić do wersji Pro.

Wybór motywu witryny Astra

Po wybraniu narzędzia do tworzenia stron przejdziesz do biblioteki szablonów Witryn Astra. Istnieje mnóstwo eleganckich, profesjonalnie wyglądających szablonów – zarówno darmowych, jak i premium – do wyboru. Szablony są uporządkowane według następujących kategorii: Blog, Biznes, eCommerce, Bezpłatny i Inne. Ponieważ tworzysz witrynę firmy, najlepiej przeglądać w Biznes Sekcja.

Nie spiesz się, wybierając szablon, który Twoim zdaniem będzie najbardziej pasował do Twojej marki. Te szablony są w pełni edytowalne za pomocą wybranego przez Ciebie programu budującego strony, co oznacza, że ​​możesz łatwo zmieniać tekst, obrazy, układ, przyciski i zasadniczo wszystko na stronie.

W tym samouczku zamierzam użyć Księgowa szablon, ponieważ wygląda niesamowicie i łatwo dla oczu.

Aby zainstalować motyw, wystarczy kliknąć go, aby przejść do podglądu. Jeśli podoba Ci się to, co widzisz, kliknij Importuj motyw i upewnij się, że wszystkie pola są zaznaczone.

zawiera motyw stron Astra

Jeśli zauważysz, pojawi się pole z napisem “Zainstaluj potrzebne wtyczki”. Zaznaczenie tego pola spowoduje zainstalowanie wszystkich wymaganych wtyczek, aby motyw wyglądał dokładnie tak, jak jest. W przypadku tego motywu zainstalowano WPForms Lite, wtyczkę, która pozwala tworzyć proste formularze kontaktowe, oraz Elementor, program do tworzenia stron, którego będę używać. Możesz kliknąć mały znak zapytania obok niego, aby zobaczyć, które wtyczki zostaną zainstalowane.

WPForms to wtyczka, która może pomóc w uzyskaniu wysokiej jakości potencjalnych klientów dzięki skutecznym formularzom. Możesz sprawdzić moją recenzję WPForms, aby dowiedzieć się więcej na ten temat. jeśli chcesz użyć innej wtyczki formularzy, możesz po prostu dezaktywować / usunąć WPForms w Wtyczki > Zainstalowane wtyczki i zainstaluj preferowany konstruktor formularzy.

instalowanie motywu strony Astra

Importowanie motywu może chwilę potrwać. Nie zamykaj przeglądarki ani nie odświeżaj. Poczekaj, a kiedy to się skończy, zobaczysz niebieski Zobacz stronę przycisk. Kliknij ten przycisk, aby przejść do witryny, która ma właśnie zaimportowany motyw.

Krok 5. Wybór elementów projektu.

Twoja witryna wygląda teraz oszałamiająco, ale będziesz chciał stworzyć własną. Aby to zrobić, potrzebujesz własnej kolorystyki, typografii i logo.

Zacznijmy od twojej palety kolorów. Jeśli masz już kolor marki, będzie to łatwiejsze.

Wybór palety kolorów

Witryna zwykle ma zestaw 2-3 kolorów: podstawowy, akcentujący i popowy. The kolor podstawowy to dominujący kolor Twojej witryny i najprawdopodobniej kolor Twojej marki. To kolor, w którym chcesz, aby ludzie pamiętali Twoją markę.

Wybierając swój podstawowy kolor, musisz zbadać psychologię koloru lub jak kolory wpływają na postrzeganie lub zachowanie ludzi. Niektóre kolory sprawiają, że ludzie coś czują, np. czerwony sprawia, że ​​czują się zaniepokojeni, dlatego przy wyborze podstawowego koloru należy wziąć to pod uwagę.

The kolor akcentu służy zwykle do wyróżnienia niektórych elementów niż inne, takie jak nagłówki lub tytuły postów.

Wreszcie, kolor pop kontrastuje z resztą kolorów, aby wyróżnić ważne elementy witryny, takie jak przyciski wezwania do działania lub formularze generowania potencjalnych klientów.

Są dwa narzędzia, które lubię używać przy wyborze palety kolorów. Pierwszy to Coolors.co, strona internetowa, na której możesz przeglądać różne palety kolorów, aby uzyskać pomysły lub inspiracje. Jeśli zobaczysz coś, co lubisz, możesz szybko skopiować kod szesnastkowy, aby użyć go w WordPress.

Jeśli klikniesz Badać w nagłówku zobaczysz tę ogromną kolekcję palet:

palety kolorów coolerów

Jeśli zobaczysz paletę, którą lubisz, najedź na nią myszą, kliknij Widok, i zostaniesz przeniesiony do nowego okna, w którym zobaczysz kody szesnastkowe każdego koloru.

kody szesnastkowe palet kolorów

Te kody szesnastkowe są tym, czego potrzebujesz, aby używać tych kolorów w swojej witrynie. Później pokażę ci, jak korzystać z tych kodów Hex na backendie WordPress.

Kolejnym fajnym narzędziem jest Colorzilla. Jest to rozszerzenie Google Chrome, które pozwala uzyskać kod szesnastkowy dowolnego koloru, który widzisz na dowolnej stronie internetowej, klikając go.

Jeśli chcesz uzyskać rozszerzenie Colorzilla, Kliknij tutaj. Następnie kliknij Dodaj do Chrome.

colorzilla

Zobaczysz tę ikonę na pasku narzędzi:

ikona colorzilla

Więc teraz, jeśli chcesz poznać kod szesnastkowy koloru, który widziałeś na stronie internetowej, po prostu kliknij tę ikonę, a następnie kliknij kolor, który chcesz skopiować. Kod szesnastkowy zostanie wówczas automatycznie skopiowany. Możesz wkleić ten kod szesnastkowy w określonych obszarach w WordPress.

Dostosowywanie typografii

Chcesz także użyć własnej typografii, która pasuje do Twojej marki i pomaga wyróżnić Twoją witrynę. Strony internetowe zwykle mają 2-3 czcionki. Podobnie jak w przypadku kolorów, będziesz mieć podstawowa czcionka które są czcionkami dla nagłówków lub menu. Potrzebujesz również czcionka do akapitów tekstów i dodatkowo „czcionka pop”, Aby wyróżnić niektóre teksty.

Podobnie jak kolory, potrzebujesz typografii, która pozostanie wierna Twojej marce, będzie przyjemna dla oczu i wyśle ​​odpowiedni komunikat o Twojej marce.

Jednym z moich ulubionych narzędzi przy wyborze typografii jest Fontpair.co. To strona pokazująca, jak wyglądają dwie różne czcionki.

fontpair.co

Jeśli widzisz coś, co lubisz, zwróć uwagę na to, jak się nazywa, abyś mógł go wyszukać w WordPress i użyć go w swojej witrynie.

Lubię też używać WhatFont, rozszerzenia Google Chrome, które informuje o czcionce używanej w dowolnej witrynie, po najechaniu na nią myszką.

Aby zainstalować WhatFont, Kliknij tutaj następnie kliknij Dodaj do Chrome. Następnie zobaczysz tę ikonę na pasku narzędzi:

co?

Aby poznać nazwę czcionki, kliknij tę ikonę i umieść kursor myszy nad tekstem. WhatFont poda ci nazwę tej czcionki, a jeśli ją klikniesz, zobaczysz również rozmiar czcionki, kolor, rodzinę, styl, wagę i inne.

używając whatfont

Wreszcie, Twoja firma potrzebuje pięknego logo, które mówi o tym, o co chodzi w Twojej marce. Możesz wybrać trzy różne trasy tutaj. Możesz samodzielnie stworzyć swoje logo, korzystając z bezpłatnego narzędzia o nazwie Canva, popularne narzędzie do projektowania, które sprawia, że ​​projektowanie jest naprawdę łatwe nawet dla początkujących.

Zdziwisz się, ile szablonów logo ma Canva i wszystkie wyglądają niesamowicie. Możesz zmodyfikować te szablony, aby były własne.

Powinieneś jednak wiedzieć, że musisz uaktualnić do wersji Pro, jeśli chcesz wyeksportować logo z przezroczystym tłem. Jest miesięczny bezpłatny okres próbny, więc możesz uaktualnić do wersji Pro, wyeksportować przezroczyste logo i anulować przed końcem okresu próbnego.

logo Canva

Możesz również zatrudnić projektanta logo, aby zrobił to za Ciebie. Możesz wypróbować witryny takie jak Fiverr.com lub 99design, ale musisz być ostrożny przy wyborze wykonawcy na podstawie jego stylu, historii, recenzji, ocen i innych.

Trzecią drogą i prawdopodobnie dobrym pomysłem, jeśli chcesz silnego logo marki, jest zatrudnienie stratega / konsultanta ds. Projektowania. Tacy ludzie to profesjonaliści, którzy poświęcają czas, aby zrozumieć, na czym polega Twoja marka, dokąd zmierza Twoja firma i jakie są Twoje podstawowe wartości, aby mogli to uwzględnić w logo.

Krok 6. Dostosuj swoją stronę internetową.

Gdy masz już paletę kolorów, czcionki i logo swojej witryny, nadszedł czas, aby użyć ich w swojej witrynie. Jeśli jesteś w panelu zaplecza WordPress, przejdź do Wygląd > Dostosuj aby otworzyć dostosowywanie motywu.

dostosuj motyw

Możesz także przejść tutaj, jeśli jesteś na froncie swojej witryny. U góry ekranu powinien znajdować się czarny pasek, który jest widoczny tylko dla osób zalogowanych do Twojej witryny. Kliknij Dostosuj aby otworzyć dostosowywanie motywu.

dostosuj nakładkę motywu

Po dostosowaniu motywu będziesz mógł dodać swoje logo, zmienić kolory, zmienić układ witryny i wiele więcej.

dostosowywanie motywu

Na lewym pasku bocznym zobaczysz różne opcje modyfikacji swojej witryny. Każdy motyw ma inne opcje dostosowywania, więc jeśli używasz innego motywu, to, co tu widzisz, może być nieco inne niż moje. Wszystkie wprowadzone tutaj zmiany są wyświetlane w czasie rzeczywistym na Twojej stronie internetowej.

W tym temacie, aby zmienić kolory witryny, przejdź do Kolory i tło. Możesz zmienić kolory podstawowe, bułkę tartą, nagłówek i stopkę.

kolorowy edytor tła

Kolory podstawowe to kolor motywu, kolor linku, kolor tekstu i kolor aktywacji linku w Twojej witrynie. Aby zmienić kolory podstawowe, kliknij Kolory podstawowe. Wewnątrz zobaczysz przyciski z napisem Wybierz kolor. Kliknij te przyciski, aby zmienić konkretny kolor.

Na przykład, aby zmienić kolor motywu, kliknij Wybierz kolor poza tym. Zobaczysz dwa sposoby wyboru koloru. Najpierw możesz wkleić kod Hex w polu. Jeśli pamiętasz, o czym rozmawialiśmy na temat kodów szesnastkowych w poprzednim kroku, to w polach takich jak te możesz wprowadzić te kody szesnastkowe.

Jeśli więc znalazłeś kolor w Coolors.co lub w innym miejscu, możesz wkleić tutaj kod Hex. Możesz także wybrać kolor we wbudowanym narzędziu do wyboru kolorów.

podstawowy edytor kolorów

Następnie zmień typografię. Wróć do dostosowania, klikając strzałkę wstecz u góry paska bocznego i klikając Typografia. Będziesz mógł zmieniać typ podstawowy, bułkę tartą, treść i blog.

typografia

Na koniec, aby przesłać swoje logo, przejdź do Układ > nagłówek > Tożsamość witryny. W sekcji Logo kliknij Zmień logo przycisk i prześlij swoje logo.

zmień logo

Astra pozwala również używać innego logo dla urządzeń siatkówki lub urządzeń o wysokiej rozdzielczości, a także urządzeń mobilnych. Możesz także dostosować szerokość logo. Jeśli przewiniesz w dół, możesz także zmienić tytuł witryny, dodać slogan witryny oraz ikonę witryny lub ikonę favicon.

Proponuję zapoznać się z dostosowaniem motywu, aby zobaczyć różne rzeczy, które możesz tutaj zrobić. Astra Theme pozwala zrobić więcej, np. Zmienić układ nagłówka i stopki, zmienić strukturę postów na blogu, zmienić szerokość witryny i wiele więcej.

Po zakończeniu dostosowywania nie zapomnij kliknąć Publikować aby wprowadzić zmiany w witrynie.

Krok 7. Dostosowywanie witryny za pomocą Elementor.

Teraz, gdy kolory, typografia i logo Twojej witryny są ustawione, nadszedł czas, aby przejść do Elementor i całkowicie zmienić wygląd witryny, aby dopasować ją do Twojej marki. Zamierzamy zmienić obrazy, teksty, przyciski, układ i wiele więcej.

Istnieją dwa sposoby edycji strony za pomocą Elementora. Po pierwsze, jeśli jesteś w backendu, przejdź do Strony i powinieneś zobaczyć listę wszystkich stron swojej witryny. Dotyczy to stron automatycznie utworzonych przez Astra Site. Strony utworzone za pomocą konkretnego narzędzia do tworzenia stron (np. Elementor) będą oznaczone jako takie:

strony

Najedź kursorem myszy na stronę, którą chcesz edytować za pomocą Elementora, i kliknij Edytuj za pomocą Elementora.

edytuj za pomocą elementu lub backendu

To zabierze cię do Elementora.

Jeśli znajdujesz się na froncie swojej witryny, możesz wprowadzić elementor, przechodząc do strony, którą chcesz edytować, i kliknij Edytuj za pomocą Elementora na czarnym pasku u góry:

edytuj za pomocą elementu frontend

Interfejs Elementor jest prosty do zrozumienia i przyzwyczaić się, ponieważ jest bardzo podobny do dostosowywania motywu. Większość ekranu pokazuje stronę, którą edytujesz, a po lewej stronie jest pasek boczny z elementami sterującymi i opcjami.

elementor

Jeśli zauważyłeś, nagłówka nie widać wewnątrz Elementora. Powodem jest to, że bezpłatna wersja Elementora nie może edytować nagłówków i stopek. Ta funkcja jest dostępna tylko dla Elementor Pro.

Lewy pasek boczny to miejsce, w którym możesz znaleźć elementy które możesz dodać do swojej strony. Jak widać, możesz dodać nagłówek, obraz, wideo, przycisk, dzielnik i wiele innych. Możesz dodać te elementy, przeciągając i upuszczając je w wybranym obszarze.

Elementor pozwala również na edycję tekstu w tekście, co oznacza, że ​​możesz zmienić tekst w samym obszarze zawartości. Oto niektóre rzeczy, które możesz zrobić z tekstami w Elementor:

edycja tekstu w elementorze

Jak widać, możesz edytować lub usuwać tekst bezpośrednio w obszarze zawartości, co znacznie ułatwia. Na pasku bocznym znajdziesz więcej opcji dostosowywania, takich jak zmiana rozmiaru, koloru, wagi, rodziny typografii i cienia. Możesz także dodawać animacje, takie jak proste wygaszanie, powiększanie, odbijanie i inne.

Możesz także użyć własnych zdjęć, aby w pełni dostosować tę stronę do swoich potrzeb. Możesz łatwo zastąpić lub usunąć obraz, jeśli tego chcesz. Aby dostosować obraz, kliknij go, a opcje pojawią się na lewym pasku bocznym. Możesz przesłać nowy obraz, zmienić jego rozmiar, dodać ramkę lub cień, dodać animację i wiele więcej.

edycja obrazu w elementorze

Na mojej stronie chcę całkowicie usunąć ten obraz i po prostu użyć innego obrazu tła. Aby usunąć obraz, najedź na niego myszą i kliknij prawym przyciskiem myszy niebieska ikona pióra w prawym górnym rogu. Pojawi się menu podręczne. Kliknij Usunąć aby usunąć obraz.

usuwanie obrazu w elementorze

Aby dostosować nagłówek, najedź na niego myszką i kliknij ikonę kropki u góry:

dostosowywanie nagłówka w elementorze

Opcje dostosowywania nagłówka pojawią się na lewym pasku bocznym. Aby zmienić obraz tła nagłówka, kliknij Styl i idź do tło. Tutaj możesz przesłać nowe tło.

dostosowywanie nagłówka

Jak widać, po przesłaniu obrazu dostosowałem nakładkę tła, aby obraz był dobrze widoczny. Zrobiłem to, przechodząc do Nakładka w tle i dostosowanie krycia.

Dostosowałem także kolor tekstu, aby był widoczny, i dostosowałem szerokość tekstu, aby nie nakładał się na obraz. Zrobiłem to, przechodząc do zaawansowane > Niestandardowe pozycjonowanie i wybierając Zwyczaj dla szerokości.

Z Elementorem zbudowanie oszałamiającej strony internetowej jest takie proste. Dostępnych jest tak wiele opcji, więc wystarczy zbadać każdy zakątek. Możesz to odkrywać we własnym tempie, a jeśli jest coś, czego nie rozumiesz, możesz skontaktować się ze mną za pośrednictwem sekcji komentarzy poniżej, a nawet przeszukać obszerne wyszukiwanie Elementora baza wiedzy.

Mam również samouczek Elementor, w którym pokazuję, jak szybko zacząć korzystać z Elementora. Możesz to obejrzeć tutaj.

Krok 8. Zabezpiecz swoją stronę.

Ważne jest również, aby strona internetowa firmy była jak najbardziej zabezpieczona przed ewentualnymi atakami hakerów i kradzieży tożsamości. Faktem jest, że niektórzy z was mogą być podatni na ataki cybernetyczne ze względu na słabe hasła, luki w wtyczkach i nieaktualne oprogramowanie. Te rzeczy pozostawiają dziurę w Twojej witrynie i musisz znaleźć sposób, aby je zablokować.

Najlepsza wtyczka WordPress, jaką do tej pory znalazłem, to właśnie iThemes Security. Darmowa wersja tej wtyczki oferuje już silne funkcje bezpieczeństwa i możesz ją aktywować jednym kliknięciem.

Aby zainstalować iThemes Security, przejdź do Wtyczki > Dodaj nowe następnie wyszukaj iThemes Security.

zainstaluj ithemes

Po aktywacji zobaczysz nową opcję na pasku bocznym o nazwie Bezpieczeństwo. Iść do Bezpieczeństwo > Ustawienia powinieneś zobaczyć komunikat o różnych funkcjach, które iThemes może dla Ciebie zrobić.

bezpieczne witryny

Włączenie wszystkich tych funkcji zajmuje tylko jedno kliknięcie niebieskiego Bezpieczna strona przycisk. Po kliknięciu tego przycisku zobaczysz następujący komunikat:

aktywować ochronę sieci przed brutalną siłą

Network Brute Force Protection to funkcja, w której użytkownicy, którzy próbowali włamać się na inne witryny należące do tej sieci, są automatycznie blokowani przed włamaniem do Twojej witryny. Jest to całkiem dobra funkcja, którą ma tylko iThemes, więc aby ją aktywować, podaj swój adres e-mail i kliknij Aktywuj Network Brute Force Protection.

Wystarczy kilka kliknięć, aby Twoja witryna była bezpieczna. Dzięki tej wtyczce możesz zrobić znacznie więcej, a jeśli chcesz dowiedzieć się więcej na ten temat, możesz obejrzeć mój przegląd iThemes Security i samouczek konfiguracji tutaj.

Krok 9. Utwórz kopię zapasową witryny.

Musisz także wykonać kopię zapasową witryny, aby uchronić się przed możliwym niefortunnym zdarzeniem utraty jakichkolwiek danych. W tym celu wykorzystamy Kopia zapasowa UpdraftPlus.

Aby zainstalować tę wtyczkę, przejdź do Wtyczki > Dodaj nowe i wyszukaj Kopia zapasowa UpdraftPlus. Zainstaluj i aktywuj.

zainstaluj updraftplus

Po aktywacji utworzy nową opcję w obszarze Ustawienia nazywa Kopie zapasowe UpdraftPlus. Kliknij go, aby rozpocząć konfigurowanie ustawień kopii zapasowej.

kopie zapasowe updraftplus w ustawieniach

Gdy znajdziesz się w środku, kliknij Ustawienia. Tutaj skonfigurujemy go, aby regularne automatyczne kopie zapasowe były tworzone poza miejscem instalacji. Dla Harmonogram tworzenia kopii zapasowych plików, Polecam ustawienie na co tydzień i zachowując jeden utworzyć kopię zapasową. Pliki nie zmieniają się często, więc to wystarczy.

Co do Harmonogram tworzenia kopii zapasowych bazy danych, ponieważ często się to zmienia, ustaw na codziennie i zachowaj 7 kopii zapasowych.

Po ustawieniu harmonogramów przewiń w dół i naciśnij Zapisz zmiany. Następnie przewiń ponownie w górę, aby wybrać miejsce przechowywania kopii zapasowych. Zwykle polecam Dropbox, ponieważ jest bardzo łatwy w użyciu, ale możesz używać wszystkiego i tyle, ile chcesz.

konfigurowanie kopii zapasowych updraftplus

Kliknij preferowany magazyn zdalny i kliknij Zapisz zmiany jeszcze raz. Zobaczysz wtedy ten komunikat:

zdalne uwierzytelnianie magazynu

Musisz kliknąć ten link, aby autoryzować kopie zapasowe UpdraftPlus do przechowywania kopii zapasowych w wybranej pamięci. W tym przykładzie, ponieważ wybrałem Dropbox, kliknięcie tego linku doprowadzi mnie do strony logowania Dropbox. Gdy się zaloguję, zobaczę tę wiadomość:

pełna konfiguracja kopii zapasowych updraftsplus

Muszę tylko kliknąć Zakończ konfigurację, i wrócę do backendu UpdraftsPlus w WordPress z tym komunikatem potwierdzającym u góry:

Uwierzytelnianie zakończone updraftplus

Jeśli chcę zrobić kopię zapasową, wystarczy kliknąć niebieski Utwórz kopię zapasową teraz przycisk. UpdraftPlus utworzy również kopie zapasowe zgodnie z wcześniej ustalonym harmonogramem i wrzuci je do DropBox.

Jeśli chcesz przywrócić kopię zapasową, po prostu kliknij Istniejące kopie zapasowe i kliknij Przywracać.

Krok 10. Zoptymalizuj swoją witrynę.

Przechodzimy do ostatniego kroku i na tym etapie zobaczymy, jak zoptymalizować witrynę pod kątem wyszukiwarek takich jak Google. Jestem pewien, że większość z was słyszała już o SEO lub optymalizacji pod kątem wyszukiwarek. W skrócie, jest to praktyka polegająca na upewnieniu się, że witryna jest zoptymalizowana we właściwy sposób, aby ułatwić wyszukiwarkom znalezienie stron i wyświetlenie ich na stronach wyników..

SEO ma aspekt zwany SEO na stronie, i są to praktyki, które możesz wdrożyć na swojej stronie internetowej bezpośrednio w WordPressie, aby jasno przekazać wyszukiwarkom, o czym jest twoja strona i treść.

Oto niektóre najlepsze praktyki SEO na stronie, które należy wdrożyć:

  • Napisz tytuł i opis dla każdej strony i postu.
  • Dodaj słowa kluczowe lub frazy kluczowe i używaj ich w całej treści.
  • Dodaj ALT TXT do każdego obrazu na stronie / postie.

Teraz, jeśli nie wiesz, co to za rzeczy, nie ma sprawy. Są dość łatwe do nauczenia się. Tytuł meta to tytuł, który pojawia się w wynikach Google, a opis meta to krótki opis pod tytułem. Oto przykład:

przykład wyniku wyszukiwania google

Słowo kluczowe jest tym, co użytkownicy wpisują w wyszukiwarce, aby coś wyszukać. Meta-tytuł jest tytułem wyniku, a opis meta to krótki opis poniżej. Są to ważne szczegóły, ponieważ informują Google o tym, o czym jest strona i że jest ona związana z kluczowym wyrażeniem „salon nowy Jork”.

To krótka lista technik SEO na stronie, ponieważ dosłownie tyle tu robisz. Ale na razie skupimy się na nich.

Aby to zrobić, potrzebujemy wtyczki. Jedną z najlepszych wtyczek SEO WordPress na stronie jest Yoast SEO i wykorzystamy to w tym samouczku. Aby zainstalować tę wtyczkę, po prostu przejdź do Wtyczki > Dodaj nowe i wyszukaj Yoast SEO. Kliknij Zainstaluj teraz i Aktywuj.

zainstaluj yoast seo

Teraz, gdy przejdziesz na dowolną stronę lub post, zobaczysz to nowe pole pod obszarem edytora:

Yoast seo box

Tutaj możesz dodać swój tytuł, opis i słowa kluczowe. Aby dodać słowo kluczowe, wpisz je w polu poniżej Hasło fokusowe:

dodaj słowo kluczowe

Aby dodać tytuł i opis meta, kliknij Edytuj fragment kodu przycisk.

edytuj fragment kodu

Pod pozycją SEO należy dodać swój tytuł. Dobrą praktyką jest umieszczenie tutaj słowa kluczowego. W polu opisu meta powinieneś dać jasny obraz tego, o czym jest strona, a także podać tutaj hasło.

Gdy wpiszesz coś w polu SEO i polu opisu, zobaczysz pomarańczowy pasek postępu. Oznacza to, że tekst jest nadal zbyt krótki. Gdy zmieni kolor na zielony, oznacza to, że długość tekstu jest odpowiednia. Jeśli zmieni kolor na czerwony, jest za długi i należy go skrócić. Długie tytuły i opisy są odcinane w wynikach, więc lepiej pozostać w zielonym obszarze.

Inną rzeczą, którą chcesz zrobić, jest upewnić się, że mapa witryny jest włączona i faktycznie działa. Aby to zrobić, przejdź do Yoast SEO > Generał > funkcje. Przewiń w dół, aż zobaczysz Mapy witryn XML. Upewnij się, że jest to włączone, a następnie kliknij niebieski ikona znaku zapytania. Zobaczysz link, który mówi Zobacz mapę witryny XML. Kliknij na to, aby wyświetlić mapę witryny.

włączanie map witryn

Dla wielu z was może to prowadzić do strony 404. Ale nie martw się. Poprawka jest dość prosta. Wszystko, co musisz zrobić, to iść do Ustawienia > Permalinks. Wybierz Nazwa postu i uderzył Zapisz zmiany.

link do nazwy posta

Teraz, gdy spróbujesz ponownie uzyskać dostęp do mapy witryny XML, zobaczysz coś takiego:

mapa witryny XML

Podsumowanie

I to kończy ten samouczek na temat tworzenia firmowej witryny internetowej za pomocą WordPress. Chciałbym dotknąć Cię ramionami, ponieważ tyle zrobiłeś i tyle osiągnąłeś, wykonując ten samouczek. Jeśli masz jakieś pytania, po prostu upuść je poniżej w sekcji komentarzy, a chętnie Ci pomogę.

SiteGround

SiteGround jest wysoce polecanym hostem internetowym, ponieważ zaspokajają potrzeby użytkowników WordPress, a jednocześnie mają przystępne ceny. Są najbardziej znane z szybkiej wydajności i równie szybkiego wsparcia.

Kluczowe cechy strony:

  • Darmowy certyfikat SSL
  • SZYBKA pomoc w zakresie wiedzy
  • WordPress Staging Enviroment
  • Darmowe migracje stron internetowych
  • Codzienne kopie zapasowe

SiteGround to solidny wybór dla Twoich potrzeb hostingowych. Obsługują witryny WordPress i oferują mniej zasobów niż ich konkurenci, ale większą niezawodność.

Sprawdź SiteGround

Motyw Astra

Astra to darmowy motyw WordPress, który koncentruje się na szybkości. Opcjonalnie możesz kupić wersję Pro za 59 USD, która dodaje dodatkowe ustawienia i opcje.

Najważniejsze cechy Astra:

  • Nie temat Fastes, ale to nie garbić się
  • Wiele bezpłatnych stron demonstracyjnych
  • Elastyczna funkcja Mega Menu
  • Opcje układów niestandardowych
  • Wsparcie WooCommerce
  • Wsparcie LearnDash

Astra Theme to dobry wybór dla każdego projektu internetowego WordPress. Przypuszczam, że największym pytaniem jest, czy w dzisiejszych czasach trzeba kupić motyw, ponieważ twórcy stron robią te same rzeczy, do których potrzebny byłby motyw. Na przykład Elementor ma darmowy motyw Hello, który pozwala kreatorowi stron wykonać całą pracę.

Nadal istnieje kilka dobrych powodów, aby kupić profesjonalny motyw, ale dla większości osób najprawdopodobniej będzie w porządku z darmowym motywem.

Dla mnie jednak myślę, że Astra Theme nie nadąża za aktualnymi trendami i już go nie polecam.

Dostępne są znacznie lepsze nowoczesne motywy, które oferują wbudowane konstruktory nagłówków i stopek w porównaniu do 3 układów, a także bardziej elastyczne układy stron i postów.

Sprawdź motyw Astra

Elementor

Elementor to narzędzie do tworzenia stron WordPress, które szturmem podbiło projektowanie stron internetowych WordPress. Ma najgłębszy zestaw funkcji, ale jest bardzo łatwy w obsłudze i opanowaniu. Elementor to najbardziej wszechstronny darmowy program do tworzenia stron. Istnieje również dodatek Pro, aby dodać dodatkowe funkcje programistyczne.

Kluczowe cechy elementu:

  • Live Front End Editor strony
  • Funkcje personalizacji strony internetowej
  • Biblioteka szablonów i bloków
  • Rozbudowane mobilne opcje responsywne
  • Najpotężniejszy kreator wyskakujących okienek
  • PRO Utwórz niestandardowe nagłówki / stopki
  • PRO Utwórz układy typu postu

Elementor jest najsilniejszym obecnie dostępnym narzędziem do budowania stron. Konsekwentnie wypuszczają nowe funkcje zgodne z aktualnymi trendami projektowymi. Oznacza to, że będziesz w stanie utrzymać aktualność swojej witryny.

Elementor Pro to niesamowita wartość, biorąc pod uwagę wszystkie dodatkowe moduły i funkcje zasilania, które obejmuje.

Gdybym dzisiaj rozpoczynał nowy projekt strony internetowej, Elementor byłby twórcą stron, który wybrałbym. Uważam, że to musi mieć narzędzie do budowania stron WordPress, które jest przyjemnością w użyciu.

Sprawdź elementor

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map