Case study: budowa strony internetowej WordPress

Case study: budowa strony internetowej WordPress

Agnieszka, właścicielka strony internetowej Scrubmehoney, ma niecodzienne zainteresowania. Korzystając  z dobrodziejstw natury, robi własne kosmetyki — mydła i scruby do ciała oraz środki czystości. Poza tym uczy jogi twarzy.  Od jakiegoś czasu prowadzi profile na Instagramie i Facebooku, na których systematycznie gromadzi zwolenników naturalnych metod pielęgnacji urody. W planach ma również przygotowanie kursu oraz założenie sklepu internetowego i w związku z tym zdecydowała, że do dalszego rozwoju jej działalności, niezbędna będzie strona internetowa. 

Już jakiś czas temu Agnieszka sama zaczęła budować stronę na platformie WordPress, jednak z powodu braku czasu nigdy nie dokończyła projektu. Jednocześnie przypatrywała się moim działaniom na Instagramie i w sieci. W końcu zdecydowała się mi zaufać i zlecić wykonanie strony, która miała być wizytówką i zarazem główną platformą internetową jej działalności.

Budowa strony internetowej WordPress etap 1  – Rozmowa i rozpoznanie potrzeb klientki

Oczekiwania odnośnie strony

Strona z założenia miała być jasna, przejrzysta i intuicyjna w użyciu. Agnieszka dała mi wolną rękę w doborze motywu oraz wtyczek. Te zainstalowane wcześniej usunęłam. 

Budowa strony internetowej WordPress etap 2 – Baza i struktura strony

Klientka miała już opłacony hosting i wykupiona domenę, co było zgodne z moją praktyką – zawsze proponuję, aby klienci wykupywali hosting i domenę sami –  domena jest na ich dane, mogą otrzymać fakturę, w przypadku problemów klient sam kontaktuje się z hostingiem, chyba że umówisz się z klientem również na opiekę nad stroną. 

Budowę strony zaczynam od podstaw. To etap planowania i zbierania danych oraz wsadu.

Na tym etapie w pierwszej kolejności określam:

1. Design / styl

Po wspólnych konsultacjach razem z Agnieszkę zdecydowałyśmy się na witrynę osobistą z blogiem. Klientka zamiast typowych wpisów blogowych planuje tam zamieszczać przepisy na kosmetyki i środki czystości własnej roboty.

2. Paleta kolorystyczna, logo, fonty

Agnieszka dostała do wyboru kilkanaście palet kolorystycznych. Po dokonaniu przez nią wyboru przygotowałam moodboard. Zawierał on wybraną paletę kolorystyczną wraz z kodami kolorów, fonty  – szeryfowy i bezszeryfowy, które pasują do siebie i dobrze wyglądają razem na stronie. 

Zaproponowałam jej również wstępny wzór logo i przykładowy favicon (Favicon jest małą ikoną, która wyświetla się obok tytułu witryny w przeglądarce. Służy jako element rozpoznawczy, budujący zaufanie wśród odbiorców, ponieważ pomaga im wizualnie zidentyfikować witrynę internetową.). Zarówno logo, jak i favicon zostały ostatecznie zmienione.

budowa strony internetowej WordPress moodboard

3. Kontent

Agnieszka dostała ode mnie “zadanie domowe” – przygotowanie treści, czyli receptur na bloga i zdjęć na stronę. 

Poza zdjęciami klientki użyłam również grafik z licencją umożliwiającą użycie na stronie internetowej. 

4. Zakładki

Wspólnie zdecydowałyśmy się na sześć zakładek:

HOME, O MNIE, PIELĘGNACJA, RECEPTURY, JOGA TWARZY i KONTAKT

  • HOME – strona główna
  • O MNIE – kotwica (anchor – przenosi do danej części strony głównej, nie do osobnej podstrony)
  • PIELĘGNACJA – kotwica na stronie głównej
  • JOGA TWARZY – osobna podstrona z linkami do filmików na youtube
  • KONTAKT – osobna podstrona z formularzem kontaktowym i adresem email

Dodatkowo w dolnym pasku znajduje się zakładka Polityka prywatności i plików cookies strony – nie możesz o niej zapomnieć.

Budowa strony internetowej WordPress etap 3 – Sposób wykonania

1. Platforma, motyw i edytor blokowy

Strona powstała w WordPress – bezpłatnej platformie do tworzenia witryn internetowych typu open source. Na bardziej technicznym poziomie WordPress to system zarządzania treścią (CMS) napisany w języku PHP, który wykorzystuje bazę danych MySQL. 

WordPress to stosunkowo proste w użyciu narzędzie do tworzenia blogów i witryn internetowych.

Użyłam motywu Ocean WP – przyznam, że na chwile obecną jest to mój ulubiony motyw. Pozwala stworzyć niemal każdy rodzaj strony, jest kompatybilny z WooCommerce, a strony na nim zbudowane wyglądają profesjonalnie i estetycznie. Motyw jest szybki i responsywny (czyli wygląda dobrze również na telefonie).

Nie lubię motywów, które dają małe pole manewru i na których budowa strony ogranicza się właściwie do zmian kosmetycznych. Lubię budować stronę od zera – a w Ocean WP zaczynasz pracę z czystą i pustą wirtualną kartą 😉

Motyw potrzebuje jednak page buildera, czyli edytora blokowego do budowania kolejnych sekcji. Ja zdecydowałam się na Gutenberga z dodatkiem wtyczki Kadence.

Dlaczego akurat taki wybór? Gutenberg to edytor blokowy opracowany przez specjalistów od WordPress. Został on wydany w 2018 roku wraz z WordPress 5.0 i jest domyślnym edytorem treści podczas korzystania z najpopularniejszego CMS na świecie.

Powodem, dla którego WordPress stworzył Gutenberga, było usprawnienie projektowania, budowania i publikowania stron internetowych. Wprowadzono w nim system bloków modułowych, nieco podobnych w założeniu do Elementora. 

Więcej o tym, dlaczego przerzuciłam się na Gutenberga i porzuciłam Elementora, piszę w moim poście: Strona-wizytówka w Elementorze czy w Gutenbergu?

Wtyczka Kadence jest przysłowiową wisienką na torcie, ponieważ posiada możliwości niedostępne dla czystego Gutenberga, jak modyfikowanie wyglądu na telefon dla poszczególnych elementów.

2. Wtyczki

Jestem zwolennikiem używania minimalnej ilości wtyczek.  Na stronie Scrubmehoney jest ich 11.

Użyłam między innymi:

  • Wspomnianą już wyżej Kadence Blocks – czyli dodatkowe bloki do Gutenberga.
  • Wtyczkę do formularza kontaktowego – użyłam Contact Form 7.
  • Informację o ciasteczkach – Cookie Notice & Compliance dla RODO / CCPA.
  • Yoast SEO – wtyczka ułatwiająca pozycjonowanie treści.
  • I ważna dla mnie z osobistych względów wtyczka UpdraftPlus czyli kopie zapasowe strony (wtyczka ta uratowała kiedyś moją stronę, kiedy przegapiłam wygaśnięcie hostingu w amerykańskim Bluehost).

Pozostałe wtyczki to już dodatki typu Instagram Feed, czyli wtyczka do pokazania Twoich postów na Instagramie.

3. Treści

Większość treści napisałam sama lub edytowałam korzystając z materiałów przygotowanych przez klientkę.

Dodatkowo umieściłam przykładowe wpisy na blogu (Receptury) i nagrałam filmik instruktażowy jak to robić wraz z użyciem wtyczki Yoast SEO.

Budowa strony internetowej WordPress etap 4 – Testy

Po wykonaniu strony aktywowałam ją i sprawdziłam działanie, linki, formularz kontaktowy i wygląd na telefonie. 

Budowa strony internetowej WordPress etap 5 – Finał i oddanie gotowej strony klientce

Następnie, z racji tego, że nie mogłyśmy się spotkać żeby omówić wykonane na stronie prace, nagrałam krótki filmik z omówieniem poszczególnych elementów strony.

Po ostatecznej akceptacji klientki strona została zgłoszona do Google – adres URL został dodany do indeksu, a także podłączyłam narzędzie Google umożliwiające analizę odwiedzin strony – Google Search Console.

Klientka jest zadowolona i w niedługim czasie planuje zlecenie mi podpięcia do strony platformy kursowej i założenie sklepu. 

Stronę możesz zobaczyć tu – SCRUBMEHONEY

Jeśli potrzebujesz strony internetowej ale nie wiesz jak się za to zabrać – skontaktuj się ze mną. Doradzę w kwestii wyboru hostingu i po poznaniu Twoich potrzeb zbuduję stronę internetową dopasowaną do Twojego biznesu.

Umów bezpłatną konsultację, w trakcie której odpowiem na Twoje pytania i ustalimy, jak mogę pomóc.  Skorzystaj z kalendarza lub z podanego adresu e-mail. KONTAKT