MENU

web design
Tag Archive

2024

Przewodnik po kreatorze stron #3. Nazwa strony, logo, stopka, banner i wtyczka Twittera

Inne

15 stycznia 2016

W kreatorze Click web widzisz przykładowe rozwiązania. Twoim zadaniem jest edycja tych elementów, tak, aby Twoja strona nabrała indywidualnego rysu. W tym przewodniku dowiesz się, w jaki sposób stworzyć nowoczesną stronę główną w kreatorze Click Web. Poznasz zasady edycji bannera głównego, logotypu, nazwy i stopki strony, czyli wszystkich elementów, które powinna zawierać nowoczesna i wygodna do przeglądania strona główna. Dowiesz się również, jak dodawać własne elementy do projektu strony i zmieniać jej układ graficzny.

Staraliśmy się, aby poruszanie się po kreatorze było proste. W zaledwie trzech krokach naniesiesz zmiany na wybrany element na stronie:

kratf3v2

Kliknij na zdjęcie, aby je powiększyć.

Jeśli wolisz oglądać poradniki, zobacz wideo:

Czy logo i banner są konieczne?

Na większości witryn tak. Są jednak sytuacje, w których te elementy nie są potrzebne. Jeśli nie pasują do charakteru strony, lub gdy grafiki nie są jeszcze zaprojektowane, a już musisz wystartować ze stroną. Click web pozwala na całkowite lub tymczasowe usunięcie: logo, stopki i bannera głównego.

W tym celu kliknij wybrany element, który chcesz ukryć. Gdy po lewej stronie ekranu pojawi się pasek edycji, odszukaj na nim opcję „Ukryj” i zaznacz ją.

42v

Kliknij na zdjęcie, aby je powiększyć.

Gdy zechcesz przywrócić ukryte elementy, użyj przycisku „Pokaż” na górnym pasku narzędzi (przycisk pojawi się, gdy ukryjesz jakikolwiek element na stronie). Po jego kliknięciu ukryty element stanie się widoczny, ale tylko dla administratora strony.

Aby na stałe przywrócić ukryty element, kliknij go i odznacz opcję ukrycia elementu, wybierając jedną z dwóch alternatyw na pasku edycji. Zapisz zmiany po zakończeniu prac.

Ustawienie własnego logo

W miejsce standardowego logotypu lub możesz wstawić własne logo. Zmiany rozpocznij od kliknięcia logotypu strony. Uruchomi się pasek edycji.
Zaznacz na nim opcję „Użyj własnego logo” i kliknij przycisk „Wybierz obraz”. Na ekranie pojawi się okno z obrazami do wyboru. Wystarczy kliknąć wybraną grafikę, aby nowe logo automatycznie załadowało się na stronie. Następnie zamknij okno „Obrazy”.

W kolejnym kroku dostosuj wielkość logotypu, korzystając z suwaka „Powiększenie” na pasku edycji. Na koniec kliknij przycisk „Zapisz”, żeby zachować zmiany.

logo powiększ

Opcja: W każdej chwili możesz powrócić do standardowego logo strony. Wystarczy, że klikniesz w logo strony i na pasku edycji zaznacz opcję „Użyj logo szablonu”. Następnie zapisz zmiany.

Nazwij swoją stronę

Nazwa strony (widoczna po wejściu na stronę – nie mylić domeną) –  to kolejny element, który powinien znaleźć się na każdej dobrze
zaprojektowanej stronie. W polu „Nazwa  Firmy” wpisz własny tekst. W razie potrzeby użyj przycisku „Edytuj styl”, aby przejść do zaawansowanych opcji edycji nazwy strony. Tam znajdziesz przydatne narzędzia do zmiany kroju pisma, koloru liter czy do ustalania odstępów pomiędzy znakami.

3333

Click web pozwala na ukrycie nazwy strony. Jest to szczególnie przydatne, gdy nazwa firmy już występuje w jej logotypie. Dzięki temu górna część strony będzie estetyczna i łatwa w odbiorze. Wystarczy, że klikniesz nazwę strony i zaznaczysz opcję „Ukryj widżet szablonu”. Na koniec zapisz zmiany. W każdej chwili możesz przywrócić standardową nazwę strony – użyj przycisku „Pokaż widżet”.

Zaprojektuj banner główny

Wejdź na kilka swoich ulubionych stron www, serwisów i sprawdź, na co najpierw zwrócisz uwagę. Na główny duży banner, na dużo mniejsze menu czy może pola z tekstem? Raczej na wielki banner niż to co mniejsze i znajduje się niżej. Jak to wykorzystać? Przygotowując wyrazistą grafikę. Koniecznie zadbaj o treść. Tekst na bannerze musi być trafny i zachęcający do przejrzenia całej witryny. Nie pisz w nim, o czymś czego na stronie po prostu nie ma. Dlaczego? To oszukiwanie odbiorców. Zawiedziony użytkownik spędzi na stronie kilka sekund i już więcej do niej nie wróci.

Gdy przygotujesz już dobre hasło i staranną grafikę, kliknij na banner główny. Po lewej stronie ukaże się pasek edycji. Zaznacz na nim opcję „Użyj własnego obrazu” i kliknij przycisk „Wybierz obraz”. Na ekranie pojawi się okno ze zdjęciami do wyboru. Teraz, aby zmienić zdjęcie na bannerze wystarczy zaznaczyć wybrany obraz lewym przyciskiem myszki. banner

W kolejnym kroku wykadruj zdjęcie, przesuwając je w okienku na pasku edycji (pod napisem „Przeciągnij, aby zmienić położenie obrazu”). Gdy zdjęcie będzie odpowiednio rozmieszczone na stronie, kliknij „Zapisz”. W razie potrzeby możesz ukryć banner główny, choć nie polecamy takich rozwiązań. W tym celu kliknij banner i na pasku edycji zaznacz opcję „Ukryj opis”. Ukryty banner przywrócisz klikając przycisk „Pokaż” na górnym pasku narzędzi.

Hasło reklamowe i motto firmy

Te dwa elementy dodasz klikając na banner. Na pasku edycji pojawią się dwa pola tekstowe oznaczone jako „Tekst nagłówka” i „Tekst motta”. Możesz w nie wpisać dowolny krótki tekst, który powie coś tym, czym się zajmujesz, o ofercie Twojej firmy. Pamiętaj, że im bardziej hasło będzie chwytliwe,
a opis oryginalny, tym większe są szanse na zainteresowanie Twoją stroną.

Jeśli chcesz zmienić w haśle krój pisma, wielkość liter oraz odstęp między znakami – użyj  przycisku „Styl”.

Przycisk na bannerze

To kolejny element, który możesz modyfikować według swojego gustu. W polu „Tekst przycisku” wpisz krótki tekst, zachęcający do kliknięcia przycisku. O tym, jak podawać przyciski pisaliśmy w poprzedniej części.

jjj

Tekst przycisku „Sprawdź” jest za mało widoczny. Szybkie poprawki wprowadzisz klikając pole „Tekst przycisku”. Znajdziesz tam okno podręcznego edytora. Funkcje formatowania tekstu znajdziesz po rozwinięciu zakładki „Rozmiar”.  Standardowo, na koniec zapisz zmiany.

Przycisk na bannerze może pełnić kilka funkcji: odsyłanie do wewnętrznego lub zewnętrznego adresu www, otwieranie okna do wysyłki e-maila w programie pocztowym.

Możesz także skorzystać z opcji ukrywania przycisku na bannerze. Kliknij banner główny i na pasku edycji odznacz opcję „Pokaż przycisk”.Bannery będą z powrotem widoczne, gdy ponownie zaznaczysz opcję „Pokaż przycisk” i na koniec zapiszesz zmiany.

Stopka na stronie – przydatne informacje dla kontrahentów

W jej górnej części znajdują się elementy tekstowe, a w dolnej – miejsca, w których możesz zamieścić wybrane przez siebie widżety (tj. elementy na stronie). Wśród nich może znaleźć się skrócony formularz kontaktowy, numer telefonu, mapka dojazdu albo ikony serwisów społecznościowych.

Zaczniemy od edycji widżetów w stopce strony. Kliknij miejsce na widżet lewym przyciskiem myszki i przejdź do paska edycji. W zakładce „Wybierz typ” znajdziesz wszystkie elementy, które możesz umieścić w stopce strony. Wybierz z listy ten, który chcesz wstawić. Po zaznaczeniu elementu, opcje jego edycji automatycznie pojawią się na pasku po lewej stronie.

Stopka

Sprawdź, jakie z dostępnych opcji będą przydatne dla Twojej strony:  np. mapkę dojazdu lub okno z ostatnimi wpisami z Twittera (jeśli Twoja firma ma profil na tym serwisie społecznościowym). Każdy z tych elementów szybko poprawisz. Mapka dojazdu bardzo często występuje na stronach www – wizytówkach, więc od niej zacznijmy:

Mapkę wstawisz, zaznaczając opcję „Mapa” z zakładki „Wybierz typ”. Następnie wpisz adres pocztowy w polu tekstowym na pasku edycji (po lewej stronie). Teraz ustal skalę mapki i dobierz wielkość okna, korzystając z suwaków „Powiększenie” i „Wysokość”. Na koniec zapisz zmiany.

Obok mapki przyda się formularz kontaktowy, dzięki któremu klienci będą mogli zadać Ci pytanie dotyczące produktu lub usługi. W zakładce„Wybierz typ” i kliknij opcję „Formularz z jednym adresem e-mail”. W polu „Tytuł e-maila” wpisz tytuł wiadomości, które będą przychodziły z formularza. W polu „Tekst na przycisku” wpisz rozkaz, który pojawi się na przycisku, a w okienku „E-mail”wstaw adres e-mail, na który będą przychodziły wiadomości z formularza.

eee

Na koniec ustal, co stanie się po naciśnięciu przycisku „wyślij” czy „prześlij” (wpisujesz dowolną nazwę). Tutaj przydatna będzie opcja „Strona sukcesu” (na zdj. powyżej). Naciśnięcie przycisku może przekierowywać na inną podstronę albo zewnętrzny adres WWW. – W obu wypadkach może to być np. strona z podziękowaniami za kontakt albo strona ze specjalną akcją konkursową albo wyprzedaż wą.  Zakończ edycję, klikając przycisk „Zapisz”.

Twitter

Coraz więcej firm prowadzi swoje profile w mediach społecznościowych. Dzięki temu mają szanse na zbudowanie relacji z entuzjastami swojej marki, poznania opinii na temat swojego produktu oraz docieranie do większej grupy niż poprzez skromną stronę www. To, co jest w tym najlepsze to właśnie dwutorowy charakter komunikacji. Niemal natychmiast można sprawdzić reakcję klientów.

Swoją stronę przygotowaną w kreatorze Click web bez problemu połączysz z Twitterem – coraz popularniejszym medium wśród przedsiębiorców z Polski. W stopce strony ustawisz okno z najnowszymi wpisami z profilu firmy. Zaznacz opcję „Ostatni Tweet” z zakładki „Wybierz typ”. W oknie tekstowym „Ostatni Tweet” wpisz adres Twojego konta na Twitterze. Później wybierz częstotliwość aktualizowania wpisów z zakładki „Czas na odświeżenie”. Wpisy mogą być aktualizowane codziennie, co pół godziny, co kwadrans, a nawet co minutę. Kliknij przycisk „Zapisz”.

rrrrrrrr

W stopce strony możesz również zamieścić ikony społecznościowe odsyłające do Twoich kont na Facebooku, Twitterze, LinkedIn, RSS , Google+ i YouTube.

Oprócz formularza kontaktowego, potrzebne jest także wypisanie podstawowych danych w stopce, np. adresu e-mail. Rozpocznij od zakładki„Wybierz typ”, zaznacz opcję „E-mail”. Następnie wpisz adres Twojej skrzynki w polu tekstowym. Kliknięcie adresu e-mail w stopce strony spowoduje uruchomienie okna nowej wiadomości w programie pocztowym (np. Microsoft Outlook). Na koniec zapisz zmiany.

Do kontaktu potrzebny będzie także numer telefonu. Wstawisz go otwierając zakładkę „Wybierz typ”, a następnie klikając opcję „Telefon”
Wpisz numer telefonu w polu tekstowym i zapisz naniesione poprawki.

Strona www przed publikacją musi mieć gotowe menu górne z zakładkami: oferta, o nas czy godziny otwarcia. Trzeba znaleźć także czas na wprowadzenie poprawek do układu graficznego. O tych dwóch aspektach przeczytasz w kolejnej części poradnika Click Web.

W ostatnim wpisie pokazaliśmy jak wstawiać i upiększać zdjęcia oraz tworzyć przyciski call to action. Kliknij TUTAJ jeśli, chcesz poznać te kilka sztuczek.

Przeczytaj artykuł

3555

Przewodnik po kreatorze stron #2. Wstawianie obrazów i dodawanie przycisków.

Inne

23 grudnia 2015

Stworzenie strony internetowej za pomocą gotowego narzędzia nie jest trudne, a daje dużo satysfakcji. Czas na kolejną część przewodnika po kreatorze www – Click web. Na tym etapie pokażemy Ci jak: dodawać własne zdjęcia na stronie i jak je upiększać, załączać albumy oraz przyciski, które odsyłają do innych stron.

Jeśli wolisz oglądać poradniki, zobacz wideo:

Dodawanie własnych zdjęć na stronę

Rozpocznij od zalogowania się do panelu klienta home.pl, wybierz przycisk „zarządzaj stroną www”. Otwórz zakładkę „Dodaj element” i wybierz ikonkę „obraz” i teraz przeciągnij ją na wybrane miejsce na stronie. Teraz najedź kursorem na okno zdjęcia i kliknij ikonę obrazka na pasku, w górnej części okna. Kliknij na wybrane zdjęcie, a ono pojawi się na stronie.

Bez tytułu

Obróbka zdjęć

Po załadowaniu zdjęcia, czas na poprawki. Dopasowanie wymiarów zdjęcia do strony poprawi jej przejrzystość i wpłynie na wygodę przeglądania. A dopasowanie kolorystyczne poprawi estetykę strony – dzięki temu na dłużej uda się zatrzymać odbiorcę na stronie.

Tutaj musisz zwrócić uwagę, aby nie narzucać tylko swoich upodobań kolorystycznych czy dotyczących rozmieszczenia elementów na stronie. Staraj się stworzyć stronę, która czymś się wyróżni, ale jednocześnie będzie na tyle uniwersalna, że zachęci do ponownego odwiedzenia. Jak wyglądają najlepsze strony? Co roku magazyn „Time” publikuje zestawienie 50 najlepszych witryn na świecie. Potraktuj to zestawienie jako inspirację – zwróć uwagę na wielkość napisów i zdjęć, ich ułożenie, kolory użyte na stronach i tematykę.

Wróćmy do obróbki zdjęć. Kliknij lewym przyciskiem myszki na wybrane zdjęcie, a pojawi się rozsuwane menu. Wybierz opcję, której potrzebujesz:

  • zakładka „Skaluj” do zmiany rozmiaru obrazka (wielkość 25-100%);
  • narzędzia do wyrównywania pozycji obrazka (lewa, środek, prawa);
  • narzędzia do wstawiania hiperłączy pod zdjęciami (kliknięcie powoduje przejście do wybranego adresu www lub otworzenie okna nowej wiadomości w programie pocztowym);
  • okno „Atrybut Alt” do wpisywania tekstu, który pojawi się przed załadowaniem zdjęć na stronie;
  • okno „Tag tytułu” oraz „Opis” do wpisania tytułu zdjęcia lub jego opisu (oba teksty pojawią się pod zdjęciem).

sd

Click web w wersji Premium i Unlimited pozwala na edycję obrazów online. Uruchomisz ten edytor klikając przycisk „Edytuj obraz” na pasku edycji albo klikając ikonę pędzelka w górnej części okna ze zdjęciem.

rrrrrrrrrrrrr

Kliknij na zdjęcie, aby powiększyć menu.

Takie opcje pozwalają m.in. na kadrowanie zdjęć, rozjaśnianie, dodawanie ostrości lub wstawienie tekstu do zdjęcia. Obróbka zdjęć to bardzo przyjemny element podczas przygotowywania własnej strony. Dlatego korzystaj z dostępnych narzędzi, aby osiągnąć wymarzony efekt.

Tworzenie albumów

Jak wgrać zdjęcia z dysku do kreatora? To proste: otwierasz zakładkę „Obrazy” na bocznym pasku narzędzi i klikasz przycisk „Dodaj obrazy” w lewym górnym rogu ekranu. Na ekranie pojawi się nowe okno. Z zakładki „Przeznaczenie obrazu” wybierasz miejsce, do którego trafią dodawane obrazy. Może być to folder ogólny albo jeden z uprzednio utworzonych albumów.

Aby załadować grafiki, otwórz zwykły folder ze zdjęciami na swoim komputerze. Następnie zaznacz wybrane pliki i przeciągnij je w obręb okna „Dodaj obrazy”. Na koniec upuść zdjęcia. Nowe obrazy pojawią się w oknie na pasku edycji.

dsfd

Zdjęcia dodasz także zwyczajnie poprzez kliknięcie „Wybierz pliki” w dolnej części okna”Dodaj obrazy”. Następnie zaznacz zdjęcia w nowootwartym oknie i kliknij przycisk „Otwórz”. Zdjęcia automatycznie załadują się do kreatora.

Gdy wybrane zdjęcia znajdują się już w kreatorze może dowolnie tworzyć z nich albumy. Wystarczy otworzyć zakładkę „Obrazy” w bocznym pasku opcji i kliknij przycisk „Dodaj obrazy”. Następnie rozwiń zakładkę „Przeznaczenie obrazu”. Potem wybierz zakładkę „Dodaj albumy” i nadaj nazwę albumowi. Kliknij zapisz, aby utworzyć nowy album.

fgggggggggggggg

 Dodawanie przycisków – odsyłaczy

Przyciski na stronie mają zachęcać do działania np. przechodzenia do kolejnej strony. Zacznij od kliknięcia okna „Przycisk” po lewej stronie rozwinięcia zakładki „Link do…”. Wybierz funkcję przycisku – tak jak wspomnieliśmy wcześniej – może on odsyłać do innej strony internetowej, do wewnętrznej podstrony lub otwierać okno nowej wiadomości e-mail.

ww

Odsyłanie do wewnętrznych podstron ustawisz, wybierając opcję „Wewnętrzny” z zakładki „Link do”. Gdy pojawi się nowe okno, rozwiń zakładkę i wybierz z listy podstronę, do której przycisk będzie odsyłał. Na koniec zapisz zmiany.

Ustawienie zewnętrznego linku rozpocznij od wybrania opcji „Zewnętrzny” z zakładki „Link do…”.Gdy pojawi się okno edycji, wpisz adres WWW w polu tekstowym i wybierz sposób otwierania się linku z zakładki „Docelowe okno”. Strona może otwierać się w nowym lub w bieżącym oknie. Na koniec zachowaj zmiany, klikając przycisk „Zapisz” w lewym górnym rogu paska edycji.

Hasła do przycisku

Tekst na przycisku powinien zachęcać do jego kliknięcia i stanowić naturalne uzupełnienie do tekstu, który poprzedzał przycisk. Hasło powinno mieć także formę rozkazu, który z jednej strony zachęca internautę do kliknięcia przycisku, a z drugiej informuje go o tym, co stanie się, gdy przycisk zostanie użyty.

Na przykład, gdy przycisk odsyła do wewnętrznej strony, na której znajdują się szczegółowe informacje na temat oferty, hasło powinno brzmieć „Sprawdź szczegóły”, „Dowiedz się więcej”. Z kolei gdy przycisk aktywuje okno nowej wiadomości w programie pocztowym (np. Microsoft Outlook) wówczas hasło może brzmieć „Napisz do nas”, „Zarezerwuj online” itd.

Aby ustawić własny tekst na przycisku, kliknij go i wpisz własne hasło w polu tekstowym na pasku edycji. Hasło zmieni się automatycznie po wpisaniu nowego tekstu w okienku. Na koniec kliknij przycisk zapisz, aby utrwalić zmiany.

def3

Przycisk szybko przesuniesz na prawą lub lewą stronę, bądź na środek. Wystarczy, że klikniesz dany przycisk i wybierzesz jedną z opcji w rubryce „Wybieranie przycisku”. Teraz zapisz zmiany.

Po przycięciu zdjęć, dodaniu i rozmieszczeniu przycisków Twoja strona ma większe szanse na przyciągnięcie odbiorców. Jeśli chcesz jeszcze bardziej zainteresować swoją ofertą i stroną – śledź kolejne części przewodnika po kreatorze stron Click web. W następnej części pokażemy Ci, jakie zmiany warto wprowadzić na stronie głównej. To bardzo ważne – ponieważ to pierwsze co, widzi po wyświetleniu Twojej strony. Poprawimy pasek głównego menu, zaprojektujemy główny banner i logo, a także poprawimy stopkę i nazwę strony.

Przeczytaj I część przewodnika, w której pokazaliśmy, jak dodawać własne teksty do kreatora stron Click web.

Przeczytaj artykuł