Przejdźmy krok po kroku, od decyzji o współpracy, do frajdy z własnej strony i zarządzania treściami.
Jeśli jesteś już moim klientem przejdź bezpośrednio do sekcji Zarządzanie treścią.
Tworzenie strony 🏗️
- Z listy stron, dostępnych w ofercie wybierasz te, które Cię interesują. Każda strona ma swoje komponenty, więc wybierasz tylko te, które chcesz wykorzystać.
- Następnie potrzebujemy danych identyfikujących Twoją stronę. Należą do nich:
- Domena - wirtualny adres, pod jakim będzie można znaleźć stronę. Jest wiele witryn, na których można sprawdzić dostępność domeny i dokonać zakupu. Jedną z nich jest Home.pl. Podane ceny zazwyczaj są za pierwszy rok! Przedłużenie zawsze kosztuje więcej. Trzeba to sprawdzić.
- Favicon - mała ikona na pasku zakładek
- Tytuł strony - Będzie widoczny na pasku z faviconem, a także w wynikach wyszukiwania i linkach na social media.
- Opis strony - Będzie widoczny w wynikach wyszukiwania oraz w linkach na social media. Jego długość jest istotna, więc warto ją sprawdzić i dostosować np. na tej stronie.
- Share Image - obrazek widoczny w social mediach po udostępnieniu linku.
- Logo
- 3 kolory, na których będzie opierać się Twoja strona.
- Dominujący - zazwyczaj, najjaskrawszy i obecny w logo. Ma skupiać uwagę na najważniejszych elementach.
- Drugorzędny - urozmaica kolorystykę, najczęściej używany do niektórych przycisków i sekcji.
- Kolor tła - tego koloru będzie najwięcej. Dobrze by był ciemny (dbajmy o wzrok naszych klientów).
Potrzebne mi będą kody HEX kolorów, które można wziąć choćby ze strony HTML Color Codes.
W moim przypadku są to:
#E0A760#639DCD#10293D - Font, błędnie nazywany czcionką. Wybierz taki, który Ci się podoba ze strony Google Fonts. Istotne, aby język był ustawiony na Latin Extended, czyli posiadał polskie znaki.
- Polityka prywatności - zanim zaczniemy zapełniać stronę treścią, musimy zadbać o poprawną politykę prywatności, a w niej takie informacje jak:
- Nazwa firmy
- Adres siedziby
- NIP
- REGON
- E-mail kontaktowy firmy
- E-mail kontaktowy w kwestiach polityki prywatności (może być taki sam, jak firmy)
- Google Analytics - aby zbierać dane, potrzebne jest założenie darmowej usługi Google Analytics, przypisanej do konta Google. Możesz to zrobić samodzielnie przy pomocy instrukcji, lub z moją pomocą. Dla mnie najważniejszy jest identyfikator śledzenia, który umieszczam w kodzie.
- Treści do podstron - Najlepiej je dostarczyć w postaci dokumentu na Google Docs (udostępnić go dla maila: info.staticmike@gmail.com). Pierwsze zamieszczenie treści w panelu robię sam, aby mieć stuprocentową pewność, że strona została wydana w odpowiedni sposób.
- Oddanie projektu - Projekt kończy się przekazaniem linku oraz danych logowania do panelu. Dalsza edycja treści z pomocą poniższej instrukcji, nie powinna sprawiać problemów.
Zarządzanie treścią ✍🏻
Możesz już się chwalić znajomym swoją profesjonalną stroną. Teraz obgadajmy zarządzanie treścią. 😎
Aby wejść do panelu, wchodzisz we wcześniej wysłany przeze mnie link. Niech Cię nie zdziwi długi czas ładowania strony. Jest to zrobione celowo z myślą o Twojej kieszeni. Każda minuta działania instancji z panelem swoje kosztuje. Stworzyliśmy architekturę w ten sposób, że nie jest aktywna 24/7, tylko uruchamia się wejściem w link, a wyłącza o 3:00 w nocy. To pozwala zminimalizować Twoje koszty.
Po zalogowaniu do panelu po lewej stronie mamy kolumnę z dwoma głównymi sekcjami.
- Typy kolekcji - strony tworzone dynamicznie, aktualnie są tylko tylko artykuły.
- Pojedyncze typy - strony już istniejące np. Oferta, Kontakt.
Aktualnie część opcji jest w języku angielskim, dlatego będę pisał obok tłumaczenie. W przyszłości planuję wprowadzić całkowicie polskojęzyczny panel.
Typy Kolekcji
Articles (Artykuły)
Po wybraniu tego typu, pokazuje nam się lista artykułów. Klikając na artykuł, wchodzimy w jego tryb edycji. Musimy pamiętać, by po zmianach nacisnąć zielony przycisk “Zapisz” w prawym górnym rogu.
Gdy chcemy dodać nowy artykuł, będąc w widoku listy postów, klikamy przycisk +Articles, a otworzy nam się strona tworzenia nowego artykułu. Istotne jest pole “Status”. Gdy ustawimy go na “published” i zapiszemy, artykuł będzie dostępny. Zmiana statusu na “draft”, ukryje go na stronie.
Treść artykułów jest pisana w markdownie. Edytor tekstu pomaga w rozumieniu jego działania, jednak zdecydowanie polecam zapoznanie się z podstawami np. na tej stronie.
Cenne uwagi podczas pisania w markdownie 💡
- Gdy chcemy zacząć pisać od nowej linii, wciskamy 3 razy spację a następnie Enter.
- Chcąc umieścić listę w liście, również elementy wewnętrznej listy poprzedzamy trzema spacjami.
Linki mają następującą strukturę:
[Strona główna](/offer/sample-pages/homepage)
W nawiasie kwadratowym wpisujemy tekst, w okrągłym podajemy adres url. Podając ścieżkę zaczynającą się od “/”, tworzymy wewnętrzny link kierujący do naszej podstrony. Każdy inny link otworzy się w nowym oknie przeglądarki.
Sprawa ma się ciekawiej, gdy umieścimy obrazek w środku linka. Sam obrazek ma taką strukturę:
Obrazek otoczony linkiem taką:
[](link)
Zalecam nie wpisywanie tego “z palca”, a klikanie w odpowiednie przyciski w edytorze tekstowym. Obrazek dodajemy klikając w jego ikonę na górze edytora tekstowego. Jeśli chcemy, by był linkiem, zaznaczamy kursorem powstały tag i klikamy ikonę linku (pierwsza na prawo od ikony obrazka).
Jeśli nasz link pochodzi z serwisu Youtube, utworzy nam się na stronie element, wyglądający jak odtwarzacz wideo. Jeśli będzie to inna strona niż Youtube, nałoży się nam na obrazek nakładka sugerująca, że jest to link.
Warto dobrze zapoznać się z działaniem edytora i tym jak działa markdown, ponieważ opiera się na nim nie tylko treść artykułu, ale także wiele innych pól na stronie.
Pojedyncze typy
Praca ze wszystkimi pojedynczymi typami jest bardzo zbliżona, dlatego opiszę ich ogólne działanie, a następnie zapiszę uwagi do każdej ze stron.
Wybierając dowolną stronę np. Kontakt, Oferta, pokaże nam się ekran ze wszystkimi możliwymi polami do edycji, oraz przyciskiem “Zapisz” w prawym górnym rogu, który musimy wcisnąć po wprowadzeniu zmian. To tyle!
Przejdźmy przez niejasności, które mogą pojawić się na niektórych stronach.
Contact (kontakt)
Tu warto wspomnieć o ustawieniu mapy. Wchodzimy na stronę OpenStreetMap.
Klikamy prawym przyciskiem myszy na punkt, w którym chcemy mieć przypiętą pinezkę i wybieramy opcję Show address. Po lewej stronie pojawią się dwie wartości np. 52.09395, 21.11761. Pierwszą z nich wklejamy w pole Latitude, drugą w Longitude.
Jeśli chcemy zdobyć NavigationLink, wchodzimy na stronę Google Maps, wpisujemy interesujący nas adres, a następnie klikamy przycisk udostępnij. Pokaże się małe okienko i przycisk kopiuj link. Link ten wklejamy w pole NavigationLink.
Homepage (strona główna)
Tu istotnym polem jest topSection. Przełączając je z hero na slider, decydujesz, czy Twoja główna sekcja ma być sliderem, czy pojedynczym obrazkiem z tekstem. Pamiętaj, by przy przełączeniu, dane slidera, lub sekcji hero były wypełnione!