Polish (Polski) translation by Pawel Barwikowski (you can also view the original English article)
Przygotowanie i prowadzenie swojej strony internetowej nie musi być skomplikowane. W rzeczywistości możesz stworzyć prostą a zarazem efektywną stronę firmową przy pomocy szablonu strony internetowej typu One-Page. Użycie szablonu typu One-Page pozwala Ci na zapewnienie Twojej firmie bardzo potrzebnej obecności w sieci i zaprezentowanie wszystkich informacji o usługach lub produktach, które oferujesz.
Dodatkową korzyścią jest to, że ludzie zainteresowani Twoją firmą mogą natychmiast zobaczyć wszystkie szczegóły, których potrzebują bez konieczności przeklikiwania się przez wiele stron. A ponieważ strony typu One-Page są często wyposażone w wiele przycisków, które zachęcają odbiorcę do kliknięcia (CTA) masz o wiele większą szansę na zamianę osób odwiedzających Twoją stronę w potencjalnych nabywców swoich usług.
W tym kursie pokażemy Ci po kolei jak stworzyć własną stronę internetową przy pomocy szablonu HTML typu One-Page. Wskażemy narzędzia, które będą Ci potrzebne, szczegóły techniczne związane z dostosowaniem szablonu oraz wgraniem go na serwer. Damy Ci również kilka ważnych wskazówek, jak zrobić strony internetowe typu One-Page, które są skuteczne. Zacznijmy!
Zanim zaczniesz
Zanim stworzysz swoją stronę typu one-page, jest kilka rzeczy, których będziesz potrzebował. Przyjrzyjmy się im poniżej.
1. Nazwa domeny
Najbardziej oczywistym wyborem jest użycie nazwy swojej firmy jako domeny. W przypadku, gdyby ta nazwa była zajęta możesz spróbować dodać takie słowa jak firma, agencja lub studio i wtedy nabyć nazwę domeny
Zaleca się również, by używać rozszerzenia .com ponieważ jest to jedno z najstarszych i najbardziej wiarygodnych rozszerzeń. Jakkolwiek, jeśli nie możesz dostać pasującej Ci nazwy z rozszerzeniem .com warto rozważyć rozszerzenie .net
2. Firma hostingowa
Znalezienie dobrej firmy hostingowej może wydawać się niemożliwe na początku. Ogólnie rzecz biorąc powinieneś znaleźć hosta, który ma dobre opinie na stronach internetowych osób trzecich, ponieważ jest bardziej prawdopodobne, że są one bezstronne. Zwrócić uwagę na to, co ludzie mówią o ich czasie nieprzerwanego działania, obsłudze klienta i łatwości użytkowania.
3. Szablon HTML
Następnym krokiem jest znalezienie szablonu witryny. Dobrym miejscem na rynku, aby rozpocząć wyszukiwanie jest ThemeForest. Można wybierać z setek profesjonalnych szablonów witryn typu One-Page, które skierowane są do różnych nisz, lub przeglądać je poprzez nasz odpowiednio dopasowany wybór najlepszych:
4. Edytor kodu i klient FTP
Ponieważ trzeba będzie edytować szablon, aby wymienić zawarte w nim informacje na własne, potrzebujesz edytora kodu. Edytor będzie podświetlał składnię kodu i umożliwiał łatwiejsze znalezienie części kodu, które muszą zostać zmodyfikowane.
Na potrzeby tego kursu będę używać Sublime Text , którego można używać na Macu, Windowsie i Linuxie i który jest dostępny z darmową wersją próbną.
Będziesz ponadto potrzebował klienta FTP takiego jak FileZilla, żeby połączyć się ze swoim serwerem i przesyłać pliki swojej strony internetowej bez konieczności przesyłania ich pojedyńczo. FileZilla jest darmowa i dostępna na wszystkie systemy operacyjne.
A teraz przyjrzyjmy się szczegółom, w jaki sposób stworzyć stronę internetową typu One-Page począwszy od ściągnięcia i ustawienia swojego szablonu strony.
Jak edytować zawartość swojego szablonu strony internetowej
Po tym jak zgromadziłeś wszystkie pliki i narzędzia, których potrzebujesz, nadszedł czas, aby zmodyfikować szablon HTML. Na potrzeby tego kursu będę używać szablonu witryny Wander. Rozpocznij pobierając pliki szablonu ze strony do pobrania na ThemeForest. Rozpakuj zawartość spakowanego folderu i otwórz folder. Zauważysz, że zawiera folder dokumentacji, jak również wszystkie pliki szablonu witryny.
Ponieważ jest to szablon uniwersalny, ma sporo plików wewnątrz. Twój szablon może składać się wyłącznie z jednego pliku HTML i folderów, które zawierają arkusze stylów, pliki skryptów i obrazy.
Aby dostosować szablon do swoich potrzeb, musisz zmodyfikować plik HTML, który jest zwykle nazywany index.html. W przypadku szablonu Wander będę edytować plik o nazwie home-one-page.html, ponieważ robimy witrynę typu One-Page.
Praca z HTML
Jeśli nigdy wcześniej nie pracowałeś z szablonem HTML, pliki w nim zawarte będą prawdopodobnie wyglądały odstraszająco, jeśli otworzysz je w Sublime Text lub w innym edytorze kodu. Ponieważ kompletny kurs HTML wykracza poza zakres tego artykułu, przyjrzyjmy się tylko podstawom tego czym jest HTML i jak wygląda.
HTML jest językiem znaczników, który składa się z tagów takich jak <h1>, <p>, <li> i innych. Tagi zasadniczo występują w parach, każdy z nich posiada tag otwierający i zamykający. Pomagają one przeglądarce zrozumieć, jak należy wyświetlić, to co znajduje się pomiędzy tymi tagami.
Akapit w dokumencie HTML będzie wyglądać tak: <p>To jest mój akapit.</p>. Nagłówek będzie otoczony tagiem h wraz z liczbą od 1-6, co oznacza poziom nagłówka od 1 aż do poziomu 6.
Podczas edycji szablonu HTML, nie musisz edytować tagów, tylko tekst pomiędzy nimi. Jednakże jeśli chcesz, aby skopiować część kodu lub go usunąć, musisz wybrać całą część od tagu otwierającego do tagu zamknięcia, a następnie skopiować go lub go usunąć.
Najprostszy sposób, aby edytować szablon to otworzyć go w przeglądarce, a następnie sprawdzić kod. Po pierwsze kliknij dwukrotnie plik HTML, aby go otworzyć w domyślnie ustawionej przeglądarce internetowej. Bez dłuższego namysłu, zauważysz, że trzeba edytować tekst w sekcji nagłówek (header). Kliknij prawym przyciskiem myszy na zdanie, które brzmi We Make BRANDS Shine i wybierz Inspect (Zbadaj).
Na dole pojawi się panel, który pokaże Ci kod HTML naszego szablonu. Wiersz, który ma zaznaczone zdanie będzie w panelu inspekcyjnym po lewej stronie. Zobaczysz, że zdanie jest umieszczone w tagu <h1> z klasą large mt20.
Teraz otwórz szablon w edytorze kodu, klikając prawym przyciskiem myszy na nazwę szablonu i wybierz Open with Sublime Text. Znajdź ten sam wiersz kodu, który widziałeś w panelu inspekcyjnym, zaznacz tekst między znacznikami i zastąpić go mottem Twojej firmy.
Aby edytować paragraf/akapit bezpośrednio poniżej nagłówka, który przed chwilą usunąłeś, przejdź do przeglądarki, kliknij prawym przyciskiem myszy na paragraf/akapit i wybierz opcję Inspect. Tym razem zdanie jest umieszczone pomiędzy tagami <p> z klasą white. Przejdź do edytora kodu, znaleźć odpowiednią linię kodu, kliknij pomiędzy znacznikami i dodać swoje informacje.
Wykonuj kolejne zamiany w ten sam sposób, do chwili aż zastąpisz wszystkie treści demo zawarte w szablonie swoimi własnymi informacjami. Usuń niechciane sekcje wybierając wszystko od otwierającego aż do zamykającego tagu danej sekcji kodu.
W podobny sposób, jeśli chcesz skopiować tylko część szablonu, znajdź kod, który przechowuje tę sekcję i wybierz wszystko łącznie z otwierającym i zamykającym tagiem, a następnie skopiuj i wklej go tam, gdzie chcesz, aby wyświetlała się zawartość.
Na zrzucie z ekranu poniżej chciałam dodać kolejne Referencje, więc wybrałam kod dla trzeciej referencji i skopiowałam go bezpośrednio poniżej.
Należy zauważyć, że w większości przypadków, sekcje kodu będą umieszczone w tagach <div> zanim umieścisz w nich jakikolwiek nagłówek i paragaf/akapit. Jeśli chcesz zduplikować lub usunąć taką sekcję, należy wybrać również tagi <div>; w przeciwnym razie zawartość, którą chcesz umieścić na stronie nie będzie wyświetlała się poprawnie.
Po zakończeniu edycji zawartości szablonu, należy zastąpić pliki graficzne (obrazy). Najbardziej wygodny sposób, aby przełączyć je to wzięcie pod uwagę nazw plików graficznych/obrazów w folderze szablonu, a następnie nazwanie swoich plików graficznych/obrazów w taki sam sposób. Gdy Twoje pliki graficzne/obrazy są odpowiednio nazwane, należy je skopiować do folderu plików graficznych/obrazów.
Jak modelować szablon swojej witryny One-Page
Istnieje jeszcze jedna rzecz do zrobienia przed przesłaniem plików na serwer, i jest to stylizacja/modelowanie szablonu tak aby pasował do twojej firmy. Style witryny znajdują się w folderze CSS. W przypadku szablonu Wander istnieje kilka arkuszy stylów w ramach folderu o nazwie Colors.
Aby rozpocząć edytowanie pliku CSS, możesz podążać tymi samymi krokami, których użyliśmy do edycji plików HTML. Aby dowiedzieć się, jak dany element jest stylizowany, kliknij na niego prawym przyciskiem myszy w przeglądarce a następnie kliknij przycisk Inspect (Zbadaj). Tym razem, spójrz na to co znajduje się na prawej stronie, a zauważysz, odpowiedni styl dla tego elementu. Ten sam panel będzie mieć nazwę pliku ze stylami, które są potrzebne do edycji wraz z wierszami gdzie znajduje się kod.
Otwórz plik w edytorze kodu. W tym przypadku jest to plik theme.css. Ponieważ chcę edytować kolor tła drugiej sekcji, który ma wszystkie funkcje, muszę znaleźć wiersz 5378 w pliku theme.css. Zmieńmy go na czarny:
Wyszukaj wiersz kodu, który mówi:
<link href="css/colors/blue.css" id="color-scheme" rel="stylesheet" type="text/css">
Zmiana nazwy na green.css zmieni kolory przycisków, linków i ikon:
Aby zmienić czcionki, zbadaj przy pomocy Inspect dowolny tekst i spójrz na prawą część panelu inspekcyjnego. Zobaczysz nazwę czcionki użytej w tekście, a także linie kodu, gdzie można zmienić czcionkę na tę, która wolisz.
Jak przesłać na serwer swój szablon witryny.
Teraz, kiedy zmodyfikowałeś i wystylizowałeś szablon swojej witryny One-Page, możesz go przesłać na serwer hostingowy. Twój dostawca hostingu dostarczył Ci nazwę użytkownika i hasło potrzebne do połączenia FTP.
Aby rozpocząć proces przesyłania, otwórz FileZilla i wprowadź nazwę serwera, nazwę użytkownika i hasło w pasku u góry, a następnie kliknij przycisk QuickConnect.
Umieść folder z szablonem na komputerze po lewej stronie ekranu i kliknij go, aby go rozwinąć. W lewym dolnym rogu wybierz opcję wszystkie pliki i foldery i przeciągnij je do prawej strony ekranu w folderze głównym serwera hostingowego znajdującym się w folderze public_html.
5 ważnych wskazówek aby ulepszyć strony typu One-Page
Teraz, kiedy Twoja witryna już funkcjonuje, skorzystaj z kilku kluczowych wskazówek, o których warto pamiętać.
1. Przedstawiaj swoje komunikaty i wiadomości w sposób zwięzły.
W przeciwieństwie do tradycyjnych stron internetowych, szablon witryny One-Page ma ograniczone miejsce, oznacza to więc, że dysponujesz mniejszą ilością miejsca do przekazywania swoich informacji poprzez stronę internetową. Dlatego ważne jest, by wyeliminować wszelki żargon i zbędne szczegóły, pozostawiając tylko najbardziej istotne informacje. Wyraźnie wyjaśnij, co masz do zaoferowania i korzyści, jakie zapewnia Twój produkt lub usługa.
2. Używaj wyraźnych przycisków typu CTA zachęcających osobę odwiedzającą twoją witrynę do działania
Ze względu na ograniczoną przestrzeń, twoje przyciski zachęcające do skorzystania z usług (CTA) muszą być wyraźne i przekonujące. Dla maksymalnego efektu powinieneś uwzględnić je na swojej stronie kilka razy. Domyślnie większość szablonów witryn typu One-Page, składa się już z wielu sekcji, które uwzględniają przyciski zachęcające użytkownika do działania. Skieruj użytkowników do sekcji, która ma cennik Twoich usług lub towarów lub formularza kontaktowego, w którym można się z Tobą w łatwy sposób skontaktować.
3. Staraj się by nawigacja na Twojej stronie była intuicyjna i prosta
Ustaw nawigację swojej witryny w taki sposób, by łatwo było przechodzić do jej różnych sekcji. Będziesz o krok przed konkurencją, jeśli zdecydujesz się na szablon, który ma już przyczepiony na sztywno pasek nawigacji, taki który pozostaje w miejscu, kiedy użytkownik Twojej witryny przewija ją w dół. Uwzględniaj tylko linki do sekcji na Twojej własnej stronie i unikaj umieszczania linków zewnętrznych, które będą zniechęcać osoby odwiedzające Twoją stronę.
4. Używaj efektów wizualnych
Użycie obrazów lub wideo pomoże ci opowiedzieć o sobie i dodać więcej informacji o tym, co masz do zaoferowania bez zajmowania zbyt dużej ilości miejsca. W przypadku witryny typu One-Page wizualizacje są Twoim najlepszym przyjacielem.
5. Utrzymuj hierarchię
Umieść najważniejsze informacje w górnej części witryny, a następnie powoli prowadź użytkownika w dół strony do bardziej szczegółowych informacji, które uzupełniają twój podstawowy przekaz dla klienta. To pomoże Ci utrzymać hierarchię i przedstawić informacje w sposób logiczny.
Rozpocznij pracę ze swoją własną witryną typu One-Page
Jeśli ukończyłeś ten kurs, to dysponujesz teraz wiedzą niezbędną do tego, aby szybko utworzyć witrynę typu One-Page za pomocą responsywnego szablonu. Zacznij swoją podróż z właściwym szablonem strony i zaglądaj do tego kursu, aby pomóc sobie skonfigurować go jak najszybciej.
