Utwórz własną stronę internetową z wykorzystaniem oprogramowania Wordpress

Transkrypt

1 Utwórz własną stronę internetową z wykorzystaniem oprogramowania Nota Materiał powstał w ramach realizacji projektu e-kompetencje bez barier dofinansowanego z Programu Operacyjnego Polska Cyfrowa działanie 3.1 Działania szkoleniowe na rzecz rozwoju kompetencji cyfrowych oś priorytetowa III. Cyfrowe kompetencje społeczeństwa

2 [1/45] Do czego służy oprogramowanie? jest to bezpłatny system zarządzania treścią, który służy przede wszystkim do tworzenia blogów i stron internetowych. Za pomocą a możemy w łatwy sposób stworzyć prostą stronę. Możemy korzystać z darmowych motywów (czyli układu i stylu strony), jak i płatnych (zazwyczaj bardziej rozbudowanych), które wystarczy spersonalizować na potrzeby naszej strony. W tym materiale pokażę jak można w łatwy sposób stworzyć prostą stronę np. naszej firmy. Warto wcześniej zastanowić się i przygotować sobie teksty i zdjęcia, które będziemy chcieli wykorzystać na naszej stronie. Zakładam, że jest już zainstalowany na serwerze. Jeśli ktoś z Państwa nie wie, jak wykupić domenę i hosting oraz jak na nim zainstalować a zapraszam do zapoznania się z oddzielnym materiałem Jak zamieścić moją stronę w Internecie. Aby wejść do panelu administracyjnego WordPress a należy w pasku adresu przeglądarki wpisać nazwę naszej domeny z dopiskiem wp-admin. W moim przypadku będzie to Podczas ładowania strony zostaniemy przekierowani na stronę (1), gdzie musimy podać nazwę użytkownika i hasło do naszego konta (2). Rysunek 1. Panel logowania do a zainstalowanego na naszej stronie

3 [2/45] Po zalogowaniu się pojawia się panel administracyjny. Klikając na odpowiednie przyciski mamy możliwość zarządzania naszą witryną. o Ustawienia profilu (1), o Szybkie zarządzanie (2), o Menu (3), o Obszar roboczy (4). Rysunek 2. Panel administracyjny widok kokpitu 1.Ustawianie profilu (1) Klikając na link w prawym górnym rogu Witaj, admin (1) mamy możliwość edycji swojego profilu lub możemy się wylogować z naszego profilu (2). Rysunek 3. Panel administracyjny wylogowanie z profilu

4 [3/45] 2.Szybkie zarządzanie (2) Klikając w przyciski znajdujące się na pasku górnym mamy możliwość: - Przejść do strony (1), zobaczyć podgląd naszej strony. - Przejść do zakładki aktualizacje (2), gdzie mamy możliwość zaktualizowania wersji a, wtyczek czy motywów. - Przejść do zakładki komentarze (3), gdzie mamy możliwość zarządzania komentarzami. - W szybki sposób przejść do odpowiedniej zakładki, gdzie możemy dodać nowy wpis, media, stronę czy użytkownika (4). Rysunek 4. Panel administracyjny przejście do strony Najeżdżamy na przycisk z nazwą naszej witryny (w moim przypadku jest to e- kompetencje) i naciskamy przycisk Przejdź do strony (1). o Widok strony Nasza witryna otwiera nam się w nowym oknie przeglądarki. Na obecną chwilę mamy zainstalowany domyślny szablon WordPress a. Teraz powinniśmy się zastanowić nad układem naszej strony. Jest to najważniejszy moment, bo od niego będzie zależało jak będzie wyglądała nasza strona. Czy chcemy stworzyć stronę one page czyli opierającą się na jednej stronie czy też standardową z zakładkami. Jeśli domyślny szablon nam odpowiada możemy go spersonalizować, a jeśli nie to musimy poszukać i zainstalować

5 [4/45] inny. Ja na razie go zostawię i przechodzę do panelu administracyjnego klikając w przycisk z nazwą naszej witryny e-kompetencje (1). Rysunek 5. Widok strony

6 [5/45] 3.Menu Po wybraniu zakładki Kokpit (1) a następnie Aktualizacje (2) w obszarze roboczym pojawiają nam się ustawienia związane z aktualizacjami wersji WordPress a i wtyczek. Naciskając przycisk Sprawdź ponownie (3) możemy sprawdzić czy jest dostępna nowa wersja WordPress a. Moja wersja jest aktualna więc jedynie mam możliwość jej przeinstalowania lub ukrycia informacji o aktualizacji. Mogę to zrobić klikając w odpowiedni przycisk (4). Poniżej mamy listę wtyczek dla których jest dostępna aktualizacja (5). Wybieramy wtyczki do zaktualizowania. Jeżeli jest ich więcej to najlepiej jest zaznaczyć wszystkie, a następnie kliknąć przycisk Zainstaluj wtyczki (6). Pamiętajmy jeśli pojawi się nowa wersja WordPress a lub wtyczki żeby ją zaktualizować. Każda aktualizacja poprawia błędy poprzedniej wersji a tym samym bezpieczeństwo, ponieważ błędy mogą wykorzystać hakerzy, aby włamać się na naszą stronę. Rysunek 6. Zakładka aktualizacje Poszukiwanie szablonu Jeśli przemyśleliśmy już układ naszej witryny teraz należy zaleźć odpowiedni szablon, który będzie nam odpowiadał. W tym celu otwieramy nową zakładkę w przeglądarce (1), następnie w pasku adresu przeglądarki wpisujemy adres wyszukiwarki. Ja wybrałem Google i wpisałem adres (2). Następnie wybieramy co chcemy wyszukać. Ja będę chciał wyszukać darmowego szablonu do WordPress a. Oczywiście są też płatne szablony. Wszystko zależy od Nas czy chcemy skorzystać z darmowego szablonu czy też płatnego, który będzie miał więcej możliwości do skonfigurowania. Wpisałem w wyszukiwarce darmowe szablony wordpress i wyszukało mi około wyników (3). Wybieramy stronę i ją otwieramy. Ja zdecydowałem się na pierwszy link 220 darmowych szablonów do! DailyWeb.pl

7 [6/45] Rysunek 7. Poszukiwanie szablonu Wybór szablonu Oglądamy szablony. Pamiętamy, żeby szukać szablonu, który będzie układem bloków najbardziej przypominał nasz ustalony układ strony. Jeśli jakiś zwrócił naszą uwagę klikamy w zdjęcie szablonu (1). Przechodzimy do podstrony szablonu, gdzie mamy możliwość zobaczenia podglądu, sprawdzenia kiedy został ostatnio zaktualizowany czy zapoznania się z opiniami innych użytkowników. Jeśli już znaleźliśmy odpowiedni szablon to zapamiętujemy jego nazwę (2), aby wyszukać i zainstalować go w naszym WordPressie. Rysunek 8. Wybór szablonu

8 [7/45] Wracamy ponownie do zakładki panelu administracyjnego WordPress a (1). Wybieramy z menu Wygląd (2) a następnie klikamy Motywy (3). W oknie roboczym pojawiają nam się zainstalowane szablony (5). Jak widzimy nie ma tu wybranego przez nasz szablonu. Aby go zainstalować musimy kliknąć w przycisk Dodaj nowy (4). Rysunek 9. Zakładka motywy widok zainstalowanych szablonów Następnie w pasku wyszukiwania (1) wpisujemy nazwę szablonu i czekamy na wyniki wyszukiwania. Po znalezieniu motywu najeżdżamy myszką na wybrany szablon i naciskamy przycisk Zainstaluj (2). Rysunek 10. Zakładka motywy dodanie szablonu część 1

9 [8/45] W kolejnym kroku otrzymujemy komunikat, że nasz szablon został zainstalowany. Teraz wystarczy tylko włączyć motyw klikając na przycisk Włącz. Rysunek 11. Zakładka motywy dodanie szablonu część 2 Aby zobaczyć jak teraz wygląda nasza strona możemy na pasku szybkiego zarządzania najechać na e-kompetencje a następnie klikając Przejdź do strony lub otwieramy nową zakładkę w przeglądarce. Proponuję drugie rozwiązanie ze względu na wygodę. W jednej karcie będziemy zalogowani do panelu administracyjnego a drugiej karcie będziemy mieli otwartą naszą stronę, którą będziemy odświeżali (przyciskiem odśwież w przeglądarce lub przyciskiem z klawiatury F5 ) w celu zobaczenia kolejnych zmian.

10 [9/45] Rysunek 12. Widok strony

11 [10/45] Otwieramy nową zakładkę w przeglądarce (1) i wpisujemy adres naszej domeny (2). Po naciśnięciu ENTER na klawiaturze pojawi nam się nasza strona z zainstalowanym nowym motywem. Teraz powinniśmy zastanowić się nad tym, jakimi treściami zapełnimy poszczególne bloki strony. Czy nasza strona będzie stroną typu one page czy będziemy chcieli utworzyć dodatkowe podstrony. Jeśli już mamy koncepcję na wykonanie strony możemy przejść do personalizacji naszej witryny. Powracamy do zakładki panelu administracyjnego WordPress a naciskając na zakładkę (3). Przechodzimy do zakładki Personalizacja (1). Każdy szablon posiada swój panel konfiguracyjny. Jeśli wybiorą Państwo inny szablon będzie miał inne menu w zakładce Personalizacja. Rysunek 13. Zakładka wygląd przejście do Personalizacja Wybieramy Theme style setting (1) Rysunek 14. Zakładka personalizacja przejście do Theme style setting

12 [11/45] W zakładce Theme style setting możemy zdefiniować schemat kolorystyki. Rysunek 15. Zakładka Theme style setting Ustawiamy ciemny albo jasny kolor klikając w odpowiedni przycisk (1). Zmianę możemy zobaczyć w oknie roboczym, przesuwając szablon w dół. Następnie zatwierdzamy zmiany klikając Opublikuj (2). Po naciśnięciu przycisku Opublikuj zmianę możemy zobaczyć na naszej stronie. W tym celu klikamy zakładkę z naszą stroną w przeglądarce, odświeżamy ją i możemy zobaczyć jak wygląda nasza strona po zmianach. Wracamy do zakładki z panelem administracyjnym i klikamy w przycisk powrotny (3). Wybieramy Tożsamość witryny (1) Rysunek 16. Zakładka personalizacja przejście do Tożsamość witryny

13 [12/45] W zakładce Tożsamość witryny ustawiamy tytuł witryny i opis (1). Warto jeszcze wstawić ikonę witryny, która będzie wyświetlana na kartach przeglądarki. Aby ją ustawić klikamy przycisk Wybierz obrazek (2). Rysunek 17. Zakładka Tożsamość witryny Następnie wybieramy obrazek. Możemy go dodać z dysku naszego komputera lub wybrać z biblioteki mediów (1). Każde zdjęcie czy film, który dodajemy z dysku zapisuje się w naszej bibliotece mediów, dzięki czemu jeśli będziemy chcieli dodać kolejny raz to samo zdjęcie czy film na naszej stronie to nie musimy go ponownie dodawać z dysku. W związku z tym, że w mojej bibliotece mediów nie ma jeszcze żadnego zdjęcia wybrałem opcję Dodaj pliki i nacisnąłem przycisk Wybierz pliki (2). Rysunek 18. Dodanie ikony witryny część 1

14 [13/45] Z lewej strony wybieramy lokalizację zdjęcia (1). W moim przypadku zdjęcie znajduje się w folderze wordpress, a następnie wybieramy właściwe zdjęcie (2) i klikamy przycisk Otwórz (3). Ważne jest, aby przygotować wcześniej zdjęcie w odpowiednim rozmiarze w zależności od naszego motywu i projektu strony. Rysunek 19. Dodanie ikony witryny część 2

15 [14/45] Zdjęcie z dysku zostało pobrane i zapisane w bibliotece mediów. Wybieramy zdjęcie (1) i naciskamy przycisk Wybierz (2). Rysunek 20. Dodanie ikony witryny część 3 Nasz obrazek został dodany. W każdej chwili możemy go usunąć lub zmienić klikając odpowiedni przycisk (1). Następnie zatwierdzamy zmiany na naszej stronie klikając przycisk Opublikuj (2) i wracamy do zakładki personalizacja klikając w przycisk powrotny (3). Rysunek 21. Zakładka Tożsamość witryny

16 Wybieramy Kolory (1) [15/45] Rysunek 22. Zakładka personalizacja przejście do Kolory W zakładce Kolory możemy zdefiniować kolor tła wybierając z palety interesujący nas odcień (1). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki personalizacja klikając w przycisk powrotny (3). Rysunek 23. Zakładka Kolory

17 Wybieramy Obrazek tła (1) [16/45] Rysunek 24. Zakładka personalizacja przejście do Obrazek tła W zakładce Obrazek tła możemy ustawić zdjęcie, które będzie tłem naszej strony i sposób jego wyświetlania (1). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki personalizacja klikając w przycisk powrotny (3). Rysunek 25. Zakładka Obrazek tła

18 [17/45] Wybieramy Ustawienia strony głównej (1) Rysunek 26. Zakładka personalizacja przejście do Ustawienia strony głównej W zakładce Ustawienia strony głównej ustawiamy sposób wyświetlania strony głównej. Możemy wybrać najnowsze wpisy lub statyczną stronę (1). Jeśli wybierzemy pierwszą opcję to trzy najnowsze wpisy będą wyświetlane na stronie głównej. Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki personalizacja klikając w przycisk powrotny (3). Rysunek 27. Zakładka Ustawienia strony głównej

19 [18/45] Wybieramy Banner image settings (1) Rysunek 28. Zakładka personalizacja przejście do Banner image settings W zakładce Banner image settings ustawiamy tytuł i opis nagłówka strony (1). Jest to tekst, który będzie wyświetlony na zdjęciu zamieszczonym w nagłówku. Następnie przechodzimy do zmiany obrazka w nagłówku. Klikamy przycisk Zmień obrazek (2), a następnie wybieramy nowy obrazek z biblioteki mediów lub z dysku. Rysunek 29. Zakładka Banner image settings część 1

20 [19/45] Po załadowaniu zdjęcia w oknie roboczym widzimy podgląd naszej witryny. Jeśli wygląd spełnia nasze oczekiwania zatwierdzamy zmiany na naszej stronie klikając Opublikuj (1) i wracamy do zakładki personalizacja klikając w przycisk powrotny (2). Rysunek 30. Zakładka Banner image settings część 2 Wybieramy Header settings (1) Rysunek 31. Zakładka personalizacja przejście do Header settings

21 [20/45] W zakładce Header settings możemy wybrać zakładkę Custom CSS (1). Zakładka ta przeznaczona jest dla osób zaawansowanych, które znają specjalny język CSS i chcieliby wkleić swój kod. W zakładce Site favicon (2) możemy ustawić ikonę, która będzie się wyświetlała przed adresem naszej strony w pasku adresowym przeglądarki, czy na kartach zakładek. Ja nie będę jej ustawiał ponieważ wcześniej ustawiliśmy ikonę witryny, która spełnia tą samą funkcję. Przechodzimy do kolejnej zakładki klikając w przycisk Header logo settings (3). Rysunek 32. Zakładka Header settings przejście do Header logo setting W zakładce Header logo setting wybieramy czy chcemy dodać logo naszej firmy do strony czy zostawić napis w formie tekstu (1). Ja zdecydowałem się wyłączyć napis tekstowy a dodać zdjęcie. Po załadowaniu zdjęcia z naszym logo w oknie roboczym widzimy podgląd naszej witryny. Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Header settings klikając w przycisk powrotny (3). Rysunek 33. Zakładka Header logo setting

22 [21/45] Aby powrócić do zakładki Personalizacja klikamy przycisk powrotny (1). Rysunek 34. Zakładka Header settings powrót do zakładki Personalizacja Wybieramy Social link settings (1). Rysunek 35. Zakładka personalizacja przejście do Social link settings W zakładce Social link settings mamy do wyboru jedną zakładkę. Aby do niej przejść klikamy w Social Links (1). Rysunek 36. Zakładka Social link settings przejście do Social links

23 [22/45] W zakładce Social Links mamy możliwość wyłączenia lub personalizacji mediów społecznościowych. W wybranym przeze mnie szablonie pasek z mediami społecznościowymi występuje w dwóch miejscach na górze strony nad nagłówkiem i na dole strony w stopce. o Jeśli zaznaczymy opcję Enable social media links on header section pasek z mediami społecznościowymi będzie widoczny na górze strony. Rysunek 37. Zakładka Social Links część 1 o Jeśli odznaczymy opcję Enable social media links on header section pasek z mediami społecznościowymi będzie ukryty na górze strony. W oknie roboczym widzimy podgląd naszego paska (1). Rysunek 38. Zakładka Social Links część 2 o Jeśli zaznaczymy opcję Enable social media links on footer section pasek z mediami społecznościowymi będzie widoczny na dole strony. Rysunek 39. Zakładka Social Links część 3 Aby zobaczyć pasek z mediami społecznościowymi na naszej stronie musimy w oknie roboczym przesunąć stronę na sam dół.

24 [23/45] o Jeśli odznaczymy opcję Enable social media links on footer section pasek z mediami społecznościowymi będzie ukryty na dole strony. W oknie roboczym widzimy podgląd naszego paska (1). Rysunek 40. Zakładka Social Links część 4 o Jeśli zdecydowaliśmy się, w którym miejscu będzie wyświetlał się pasek z mediami społecznościowymi to przechodzimy niżej i wpisujemy adresy stron przekierowujące do naszych mediów społecznościowych (1). Jeśli nie korzystamy z któregoś medium nic nie wpisujemy, a wtedy ikona nie wyświetli się na naszej stronie. Ja wyłączyłem górny pasek i podałem adresy do Facebook a i YouTube a. W oknie roboczym widzimy podgląd naszego paska (2). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (3) i wracamy do zakładki Social link settings klikając w przycisk powrotny (4). Rysunek 41. Zakładka Social Links część 5

25 [24/45] Aby powrócić do zakładki Personalizacja klikamy przycisk powrotny (1). Rysunek 42. Zakładka Social link settings powrót do zakładki personalizacja Wybieramy Section Heading (1) Rysunek 43. Zakładka personalizacja przejście do Section Heading W zakładce Section Heading mamy możliwość personalizacji danych kontaktowych, jak również ustalamy nagłówki poszczególnych boków strony. o Jeśli zaznaczymy opcję Enable contact information pasek z numerem telefonu i adresem będzie widoczny na górze strony. Rysunek 44. Zakładka Section Heading część 1

26 [25/45] o Jeśli odznaczymy opcję Enable contact information pasek z numerem telefonu i adresem będzie ukryty na górze strony. W oknie roboczym widzimy podgląd naszego paska (1). Rysunek 45. Zakładka Section Heading część 2 o Jeśli zdecydowaliśmy się, czy chcemy aby informacje kontaktowe wyświetlały się na naszej stronie, to przechodzimy niżej i wpisujemy nazwy nagłówków dla poszczególnych bloków naszej strony (1). Aby wpisać nagłówki musimy wiedzieć jakie informacje chcemy zamieścić w poszczególnych blokach naszego szablonu. Warto się nad tym zastanowić wcześniej, ale jeżeli nie mamy jeszcze koncepcji na naszą stronę zawsze możemy przejść dalej i wrócić do tej zakładki później. Po uzupełnieniu nagłówków w oknie roboczym możemy zobaczyć podgląd naszej strony. Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Personalizacja klikając w przycisk powrotny (3). Rysunek 46. Zakładka Section Heading część 3 Ja nadałem nazwy nagłówków dla poszczególnych bloków: Services ma tytuł nagłówka Z kim działamy i opis Tutorzy, Rdzenni Inspiratorzy, Przewodnicy = TRIP dla uczestników do cyfrowego świata,

27 [26/45] Portfolio ma nazwę nagłówka CO OFERUJEMY, ale opisu nie ma, Homepage blog section ma tytuł nagłówka AKTUALNOŚCI i opisu nie ma. Wybieramy Service settings (1) Rysunek 47. Zakładka personalizacja przejście do Service settings W zakładce Service settings możemy wybrać 5 zakładek. Wybieramy pierwszą naciskając na przycisk Enable Service section (1). Rysunek 48. Zakładka Service settings przejście do Enable Service section

28 [27/45] W zakładce Enable Service section mamy możliwość włączenia lub wyłączenia bloku Service, którego nazwaliśmy Z kim działamy. Aby zobaczyć ten blok w oknie roboczym to musimy przesunąć widok naszej strony na ten blok. Ja zdecydowałem, że ten blok ma być widoczny na mojej stronie więc zaznaczyłem opcję Enable Service section (1). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Service settings klikając w przycisk powrotny (3). Rysunek 49. Zakładka Enable Service section Wybieramy zakładkę naciskając na przycisk Service one (1). Rysunek 54. Zakładka Service settings przejście do Service one

29 [28/45] W zakładce Service one mamy możliwość ustawienia zdjęcia, tytułu i opisu (1) dla pierwszej kolumny w bloku. Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Service settings klikając w przycisk powrotny (3). Rysunek 55. Zakładka Service one Tak samo postępujemy z zakładkami Service two i Service three. W zakładce Service settings mamy możliwość wybrania jeszcze jednej zakładki Add more services (1). Zakładka ta zawiera dodatkowe opcje, ale po wykupieniu wersji rozszerzonej szablonu. Wracamy do zakładki Personalizacja klikając w przycisk powrotny (2). Rysunek 56. Zakładka Service settings powrót do zakładki personalizacja

30 Wybieramy Project settings (1) [29/45] Rysunek 57. Zakładka personalizacja przejście do Project settings W zakładce Project settings możemy wybrać 6 zakładek. Wybieramy pierwszą naciskając na przycisk Project settings (1). Rysunek 58. Zakładka Project settings przejście do Project settings

31 [30/45] W zakładce Project settings mamy możliwość włączenia lub wyłączenia bloku Project, którego nazwaliśmy CO OFERUJEMY. Aby zobaczyć ten blok w oknie roboczym to musimy przesunąć widok naszej strony na ten blok. Ja zdecydowałem, że ten blok ma być widoczny na mojej stronie więc zaznaczyłem opcję Enable portfolio section on homepage (project section) (1). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Project settings klikając w przycisk powrotny (3). Rysunek 59. Zakładka Project settings Wybieramy zakładkę naciskając na przycisk Homepage portfolio one (1) Rysunek 60. Zakładka Project settings przejście do Homepage portfolio one

32 [31/45] W zakładce Homepage portfolio one mamy możliwość ustawienia tytułu, opisu i zdjęcia (1) dla pierwszej kolumny w bloku. Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Project settings klikając w przycisk powrotny (3). Rysunek 61. Zakładka Homepage portfolio one Tak samo postępujemy z zakładkami Homepage portfolio two, Homepage portfolio three i Homepage portfolio four. W zakładce Project settings mamy możliwość wybrania jeszcze jednej zakładki Add More Projects (1). Zakładka ta zawiera dodatkowe opcje, ale po wykupieniu wersji rozszerzonej szablonu. Wracamy do zakładki Personalizacja klikając w przycisk powrotny (2). Rysunek 68. Zakładka Project settings powrót do zakładki personalizacja

33 [32/45] Wybieramy Homepage blog settings (1) Rysunek 69. Zakładka personalizacja przejście do Homepage blog settings W zakładce Homepage blog settings mamy możliwość włączenia lub wyłączenia bloku widocznego w oknie roboczym na naszej stronie. Zadaniem tego bloku jest wyświetlanie trzech najnowszych wpisów. Ja zdecydowałem, że wykorzystam ten blok na wpisy z aktualnych wydarzeń więc zaznaczyłem opcję Enable Homepage Blog Section (1). Następnie zatwierdzamy zmiany na naszej stronie klikając Opublikuj (2) i wracamy do zakładki Personalizacja klikając w przycisk powrotny (3). Rysunek 70. Zakładka Homepage blog settings

34 [33/45] Wybieramy Footer copyright settings (1) Rysunek 74. Zakładka personalizacja przejście do Footer copyright settings W zakładce Footer copyright settings mamy możliwość zamieszczenia informacji o prawach autorskich (1), które zostaną wyświetlone w stopce strony. Następnie zatwierdzamy zmiany klikając Opublikuj (2) i wracamy do zakładki Personalizacja klikając w przycisk powrotny (3). Rysunek 75. Zakładka Footer copyright settings

35 [34/45] W zakładce Personalizacja mamy możliwość wybrania jeszcze kilku zakładek (1) z opcjami dodatkowymi, ale będą one dostępne dopiero po wykupieniu wersji rozszerzonej szablonu. Wracamy do głównego kokpitu panelu administracyjnego klikając w przycisk z krzyżykiem (2). Dodawanie wpisów Rysunek 76. Zakładka personalizacja dodatkowe opcje Z panelu menu wybieramy zakładkę Wpisy (1) i wybieramy Wszystkie wpisy (2). W oknie roboczym wyświetlone zostały wszystkie nasze wpisy (3). Mamy możliwość zarządzania wpisami. Możemy je edytować zmieniając np. treść wpisu czy kategorię, usunąć dany wpis lub zmienić stan opublikowania. Rysunek 71. Zakładka Wszystkie wpisy

36 [35/45] Następnie z zakładki Wpisy (1) wybieramy Dodaj nowy (2). W oknie roboczym pojawia nam się szablon, gdzie mamy możliwość dodania nowego wpisu. Rysunek 72. Zakładka Dodaj nowy W pierwszym oknie podajemy tytuł wpisu (3). Następnie zmieniamy sposób trybu pisania z Tekstowego na Wizualny (4). W największym oknie wpisujemy tekst wpisu (5). Jeśli chcemy dodać zdjęcia do wpisu klikamy przycisk Dodaj medium (6). Po prawej stronie mamy jeszcze możliwość wybrania kategorii wpisu. Nie musimy tego robić, ale jeśli zależy nam na pogrupowaniu naszych wpisów wg kategorii możemy ją wybrać z listy lub dodać nową kategorię (7). Powyżej mamy możliwość wyboru terminu publikacji naszego wpisu (8). Jest to przydatna funkcja jeśli chcemy zamieścić wpis z datą wcześniejszą np. jeśli jakieś wydarzenie się już wydarzyło lub zamieścić wpis, który zostanie opublikowany na stronie dopiero w dniu w którym ustawiliśmy że ma się pojawić. Jeśli chcemy dodać komentarz do wpisu klikamy przycisk Dodaj komentarz (9). Do każdego wpisu mamy możliwość dodania tagów (10), czyli słów kluczowych z którymi kojarzy nam się artykuł, aby można go było znaleźć np. poprzez opcję szukaj na naszej stronie. Mamy możliwość ustawienia jeszcze obrazka wyróżniającego (11), czyli zdjęcia głównego dla naszego wpisu. Pozostało nam tylko opublikować wpis. W tym celu klikamy Opublikuj (12).

37 [36/45] Przechodzimy do zakładki Wygląd (1) i wybieramy Personalizacja (2) Rysunek 73. Zakładka Wygląd wybór zakładki Personalizacja Aby zobaczyć jak teraz wygląda nasza strona naciskamy na zakładkę w przeglądarce z adresem naszej domeny (1) i naciskamy przycisk odśwież (2) lub po najechaniu na e-kompetencje na pasku szybkiego zarządzania klikamy Przejdź do strony.

38 [37/45] Rysunek 77. Widok strony

39 [38/45] Nasza strona mimo wybranego szablonu one page pozwala na stworzenie podstron. Domyślnie mamy utworzoną podstronę Przykładowa strona (3). Możemy ją usunąć, lub utworzyć swoje podstrony. Aby zobaczyć co znajduje się na niej klikamy w odnośnik Przykładowa strona. Przykładowa strona podzielona jest na dwie kolumny. W pierwszej znajduje się opis a w drugiej znajdują się widgety(1). Widgety są to niezależne elementy interfejsu służące do wykonywania konkretnych funkcji. Na naszej podstronie mamy widget pozwalający np. na wyszukiwanie tekstu na stronie, czy wyświetlający najnowsze komentarze. Ja podstronę Przykładowa strona zamienię na stronę Kontakt, gdzie zamieszczę informacje kontaktowe. W tym celu powracamy do panelu administracyjnego klikając w przycisk e-kompetencje (2).

40 [39/45] Rysunek 78. Widok podstrony Przykładowa strona

41 [40/45] Wybieramy zakładkę Wygląd (1), a następnie Widgety (2). Rysunek 79. Zakładka Wygląd wybór zakładki Widgety W zakładce Widgety w oknie roboczym mamy trzy kolumny. W pierwszej widzimy dostępne widgety (1). W drugiej kolumnie widzimy widgety, które są widoczne na naszej podstronie Przykładowa strona (2). Moja podstrona Kontakt nie będzie korzystała z widgetów, dlatego je usuwam przeciągając widget i puszczając w dowolnym miejscu w pierwszej kolumnie. A w trzeciej kolumnie możemy dodać widgety, które będą widoczne w stopce (3). Rysunek 80. Zakładka Widgety

42 [41/45] Przechodzimy do zakładki Strony, gdzie widzimy wszystkie strony. W moim przypadku jest tylko jedna Przykładowa strona, którą chcę zamienić w stronę Kontakt. W tym celu klikamy przycisk Edytuj (1). Rysunek 81. Zakładka Strony

43 [42/45] W oknie roboczym pojawia nam się szablon, gdzie mamy możliwość personalizacji naszej strony. W pierwszym oknie podajemy tytuł strony. Następnie zmieniamy odnośnik strony klikając przycisk Edytuj. W największym oknie wpisujemy tekst, który ma być na naszej stronie. W moim przypadku będą to dane kontaktowe. Jeśli zamieściliśmy już wszystkie informacje pozostało nam tylko zaktualizować stronę. W tym celu klikamy przycisk Zaktualizuj (2). Nasza strona została ukończona. Jeśli chcemy zobaczyć naszą stroną klikamy przycisk e-kompetencje (3). Rysunek 82. Zakładka Strony

44 Widok strony głównej [43/45] Rysunek 83. Strona główna witryny

45 Widok podstrony Kontakt [44/45] Rysunek 84. Podstrona Kontakt