Logotyp
Każdy użytkownik odwiedzający Twoją stronę powinien być w stanie z łatwością zidentyfikować Twoją firmę. Do tego celu służy nazwa firmy i jej logo, które najczęściej zawiera również nazwę.
Logo lub nazwę firmy umieszczamy w nagłówku strony mobilnej. Będą one widoczne na każdej podstronie, a ich dotknięcie na ekranie smartfona lub tabletu, spowoduje przeniesienie do strony głównej. Dzięki temu użytkownicy będą mogli z łatwością przejść do strony głównej z każdego miejsca.
Aby dodać logo lub nazwę firmy na swojej stronie mobilnej, wejdź na stronę http://activemobi.pl, a następnie kliknij przycisk Zaloguj się. Podaj swój e-mail i hasło, które ustawiłeś zapisując swoją stronę w poprzedniej lekcji. Po zalogowaniu do Twojego panelu kliknij przycisk Edytuj obok strony, a ponownie znajdziesz się w kreatorze ActiveMobi.
- Upewnij się, że jesteś na zakładce "Edytor" i "Zawartość".
- W sekcji "Moje strony" po lewej stronie wybierz stronę główną.
- W obszarze roboczym kliknij na "Nagłówek".
Jeśli wybrałeś "Obrazek", najedź kursorem myszy na miniaturkę grafiki zastosowanej w szablonie i kliknij przycisk Zmień. W nowym oknie kliknij przycisk Prześlij obrazek, a następnie wybierz grafikę znajdującą się na Twoim komputerze. Logo zostanie automatycznie dodane do strony.
Teraz możesz ustawić jego rozmiar za pomocą suwaka, lub wpisując wartość w polu oraz wybrać czy ma być wyrównane do lewej strony, do środka, czy do prawej strony.
Jeśli wybrałeś "Tekst", wpisz w odpowiednim polu nazwę swojej firmy, a następnie wybierz, czy ma przylegać do lewej lub krawędzi strony, czy ma być wyśrodkowana.
Właśnie dodałeś swoje logo do nagłówka strony głównej. Wygląd nagłówka na stronie głównej i podstronach ustawiasz oddzielnie. Dlatego aby Twoje logo było widoczne na każdej podstronie, musisz skonfigurować nagłówek wspólny dla wszystkich podstron. W tym celu wybierz dowolną z nich w polu "Moje strony", w obszarze roboczym ponownie kliknij na "Nagłówek", a następnie ustaw swoje logo.
Tło strony
Na swojej tradycyjnej witrynie firmowej, jak również w materiałach handlowych, zapewne stosujesz elementy graficzne o określonej kolorystyce. Dla Twoich klientów jest ona elementem Twojej marki, dlatego warto, aby była spójna wszędzie tam, gdzie komunikujesz się z nimi. Szablon, na bazie którego tworzysz stronę mobilną swojej firmy to gotowy projekt graficzny. Teraz dowiesz się, jak dostosować jego wygląd do Twoich potrzeb. Przejdź na zakładkę "Projekt", gdzie znajdziesz globalne ustawienia szaty graficznej strony – tło stron, styl czcionek i przycisków oraz widok strony na tabletach.
Zaczniemy od ustawienia tła strony głównej i podstron. Będziesz potrzebował cyfrowej nazwy koloru zapisanej w notacji heksadecymalnej (w skrócie "HEX"), np. kolor biały to #ffffff. W tym celu możesz użyć darmowych dodatków do przeglądarek internetowych, typu "color picker". Znajdziesz je bez problemu za pomocą wyszukiwarki, wpisując wyrażenie "color picker" oraz nazwę swojej przeglądarki. Pobierz taki dodatek i zainstaluj go zgodnie ze wskazówkami. Ich obsługa jest naprawdę prosta i polega na kopiowaniu kodów HEX kolorów do schowka. Kod ten wklejasz następnie używając skrótu klawiszowego Ctrl+V w polach "Kolor tła" w kreatorze ActiveMobi i gotowe! Po kliknięciu na ikonkę
możesz też wybrać dowolny kolor z palety. Zaawansowani użytkownicy mogą ustawić gradient dla tego samego, albo dwóch różnych kolorów. Tło będzie wtedy zmieniać swoją intensywność lub przechodzić od jednego do drugiego koloru wzdłuż jednego z 360° kierunków.
Jako tło strony głównej i podstron możesz też ustawić obraz. Do swojej dyspozycji masz naszą "Bibliotekę obrazków", zawierającą tła oparte na prostych wzorach, ale możesz również wgrać swoje własne grafiki. Następnie możesz wybrać jedną z dziewięciu pozycji, na jakich grafika będzie widoczna na ekranie, a w zależności od rozmiaru tła możesz też dopasować go do szerokości i wysokości ekranu oraz zadecydować, czy grafika ma się powtarzać w kierunku poziomym i pionowym. To pozwoli Ci zapełnić całe tło i uniknąć pustych miejsc.
Czcionki
Kolejnym elementem szablonu, który możesz zmodyfikować są czcionki. Zarówno tekst dodawany za pomocą komponentu "Treść (tekst)", jak i wszelkie nagłówki możesz zdefiniować globalnie. To oznacza, że tekst w każdym komponencie, który go zawiera, będzie sformatowany tak, jak ustawisz na zakładce "Projekt", na której się znajdujemy. Do wyboru masz aż 43 nowoczesne i ciekawe czcionki Google. Tak jak w każdym edytorze tekstu, możesz używać pogrubienia, kursywy i podkreślenia, zmieniać wielkość czcionki i jej kolor. W tym celu, tak jak w przypadku ustawiania tła strony, albo wklej wcześniej skopiowany do schowka kolor, albo wybierz go z palety.
Przyciski
Przyciski pełnią bardzo ważną rolę na stronie mobilnej. Za ich pomocą użytkownicy przechodzą do kolejnych podstron i wykonują akcje, takie jak wysłanie zapytania przez formularz, czy wyświetlenie wskazówek dojazdu do siedziby firmy. Dlatego ważne, aby przyciski te były czytelne, estetyczne i odpowiednio duże. O ostatni aspekt zadbaliśmy my, dwa pierwsze zależą od Ciebie.
Możesz zmienić kolor ikony widocznej na przycisku ("Kolor ikony"), napisów ("Etykieta") jak i samego przycisku (“Kolor wypełnienia”). Napisy możesz dodatkowo sformatować, dokładnie tak jak tekst i nagłówki. Kolejna opcja umożliwia ustawienie obramowania, które oddzieli przycisk od tła strony linią. Do wyboru masz trzy style linii – ciągłą, przerywaną i kropkowaną. Możesz także zmienić jej grubość oraz kolor. Obramowanie definiujesz dla całego przycisku, lub jedynie wybranych krawędzi. Klikając na kolejne ikonki:
(góra), 
(prawo), 
(dół), 
(lewo), wybierasz krawędź, której obramowanie chcesz zmodyfikować. Gdy wybierzesz środkową ikonkę 
, modyfikujesz wszystkie krawędzie jednocześnie. Tylko wtedy również możesz ustawić "Promień", czyli zaokrąglenie rogów przycisku. Na koniec możesz zmienić pozycję przycisków względem innych komponentów na stronie oraz margines między etykietą przycisku, czyli napisem, a jego krawędziami.Tak wiele możliwości edycji pozwala na zaprojektowanie naprawdę profesjonalnych przycisków, bez umiejętności programowania. Oto przykłady przycisków stworzonych w kreatorze ActiveMobi:
Tło widoku dla tabletu
Ostatnim elementem projektu graficznego, który możesz zmodyfikować z poziomu ustawień globalnych na zakładce “Projekt” jest tło widoku dla tabletu, które pojawia się po bokach strony mobilnej, oglądanej na tablecie lub komputerze. Twoja strona jest wtedy zwężana do szerokości 640 pikseli oraz pozycjonowana na środku ekranu.
Możesz wybrać kolor tła, które będzie wyświetlane po bokach Twojej strony mobilnej. Tło może być statyczne, lub gdy ustawisz gradient dla tego samego, albo dwóch różnych kolorów, może zmieniać swoją intensywność, lub przechodzić od jednego do drugiego koloru wzdłuż jednego z 360° kierunków, który wybierzesz. Możesz również ustawić obramowanie, które oddzieli Twoją stronę od jej tła linią. Do wyboru masz trzy style linii – ciągłą, przerywaną i kropkowaną. Możesz także zmienić jej grubość oraz kolor. Ostatnia opcja pozwala na ustawienie obrazu jako tła strony. Do swojej dyspozycji masz naszą “Bibliotekę obrazków”, zawierającą tła oparte na prostych wzorach, ale możesz również wgrać swoje własne grafiki.
Takie rozwiązanie znacząco poprawia wrażenie płynące z oglądania strony na komputerze. Jeżeli Twoja tradycyjna strona internetowa została stworzona lata temu w oparciu o przestarzałe technologie i trendy w projektowaniu, Twoja mobilna strona może ją teraz z powodzeniem zastąpić.
Edycja komponentów
Wygląd poszczególnych komponentów służących do prezentacji treści i realizowania celów biznesowych Twojej firmy, które dodajesz do strony mobilnej zależy od wybranego szablonu. Aby dostosować je do Twojego własnego projektu graficznego, przejdź do zakładki "Edytor", a następnie kliknij na ikonkę
.jpg){kind=small}
"Dostosuj" umieszczoną na belce komponentu. W oknie dostosowywania możesz, między innymi, zmieniać tła komponentów, ustawiać ich obramowania, czy modyfikować pozycję, wybierać czcionki i kolory, nadając im własny styl.
Dzięki funkcji schowka tak przygotowany komponent możesz użyć ponownie na innych stronach. Nie musisz za każdym razem dostosowywać jego wyglądu. Aby dodać gotowy komponent do schowka, kliknij ikonę
"Kopiuj do schowka" umieszczoną na nagłówku komponentu. Na końcu kolumny po lewej stronie kreatora pojawi się nowa sekcja "Schowek", zawierająca dodany przez Ciebie komponent. Aby użyć komponentu ze schowka na stronie, po prostu przeciągnij komponent, który chcesz dodać z sekcji "Schowek", a następnie upuść go w obszarze roboczym.Zakres ustawień szablonu, które możesz edytować, pozwala na stworzenie naprawdę zaawansowanej strony, bez znajomości programowania. Wprowadzając zmiany i obserwując ich efekty na podglądzie na żywo, szybko poznasz możliwości kreatora i opanujesz jego działanie. Pamiętaj, że jeżeli nie będziesz zadowolony ze zmian, zawsze możesz powrócić do wyjściowego projektu graficznego szablonu, klikając w link "Przywróć domyślne".
Jeżeli nie masz czasu samodzielnie stworzyć swojej strony mobilnej, możesz zlecić wykonanie profesjonalnej strony specjalistom z ActiveMobi. Zamów teraz, a otrzymasz gotową stronę mobilną w 5 dni! Skorzystaj z limitowanej oferty dla czytelników Gazety MSP i Biznes2biznes.com – szczegóły na stronie: http://activemobi.pl/oferta-msp
ActiveMobiul. Filona 16, 02-658 Warszawa
kontakt@activemobi.com
tel. 22 101 72 00
