W górnej części każdej witryny i na wszystkich stronach i widokach dołączonych do witryny znajduje się nagłówek (pod globalnym paskiem nawigacyjnym). Zawiera on nazwę, logotyp i łącza w menu witryny. Nie można usunąć nagłówka, ale można zmienić jego wygląd.
Nagłówek
Aby wybrać wygląd nagłówka, wykonaj następujące czynności:
- Otwórz witrynę w trybie edycji.
- Otwórz panel boczny, klikając przełącznik
. W razie potrzeby kliknij strzałkę wstecz znajdującą się obok opcji Dostosuj u góry panelu, aby wrócić do menu głównego, dopóki nie zobaczysz opcji Nagłówek. - Kliknij menu Wygląd i wybierz jeden z następujących stylów Nagłówka:
- Standardowy — ten domyślny dla każdej nowej witryny projekt zawiera cienki, kompaktowy pasek, na którym znajduje się miejsce na logotyp (60 pikseli), łącza mediów społecznościowych i łącza menu.
- Dobrze widoczny — ten projekt udostępnia więcej miejsca na większe logotypy (120 pikseli) i dodatkowe łącza menu.
- Niestandardowy CSS/HTML — użyj edytora kodu z obsługą składni, aby skonfigurować nagłówek z użyciem kodu niestandardowego.
Notatka:
Nagłówki niestandardowe są zachowywane na stronach witryny, ale nie są wyświetlane w widokach zasobów. Więcej informacji można znaleźć w sekcji Dlaczego widok Eksploruj zasoby wygląda inaczej?
- Kliknij menu Znakowanie i zastosuj następujące opcje:
- Nazwa — wprowadź nazwę, która zostanie wyświetlona w nagłówku witryny. Nazwa podana w tym polu jest widoczna tylko w nagłówku i nie ma odzwierciedlenia w adresie URL witryny ani na liście witryn.
- Nazwa skrócona — wprowadź skróconą wersję nazwy dodanej w nagłówku. Nazwa skrócona jest stosowana w nagłówku tylko wtedy, gdy nazwa standardowa jest zbyt długa i nie mieści się na mniejszych ekranach, na przykład ekranach telefonów komórkowych.
Wskazówka:
Coraz więcej osób korzysta z internetu na urządzeniach przenośnych. Nazwę skróconą warto dodać, by zapewnić właściwe wyświetlanie witryny na wszystkich urządzeniach.
- Wybierz opcję Kompozycja: Prostokąt lub Szerokie.
- Aby oznakować nagłówek witryny przy użyciu niestandardowego kodu HTML lub CSS, wybierz opcję Niestandardowy kod HTML/CSS i wprowadź kod w polach HTML i CSS.
Notatka:
W kodzie HTML nagłówka nie jest obsługiwany wbudowany kod JavaScript. Znaczniki skryptu zostaną zignorowane.
- Kliknij przycisk Zapisz.
Dodawanie logotypu do nagłówka
Rozmiar i pozycjonowanie logotypu witryny zależą od wybranego stylu nagłówka.
- Kliknij, aby rozwinąć menu Znakowanie w obszarze Nagłówek na panelu bocznym.
- Kliknij przełącznik Logotyp, aby go włączyć.
- Dodaj obraz, wybierając opcję Adres URL obrazu lub przesyłając obraz z pliku.
Wskazówka:
Jeśli obraz jest przesyłany z pliku, najlepiej aby został on zapisany jako plik PNG. Obraz można przyciąć i powiększyć w sekcji Ustawienia obrazu danej karty na panelu Dostosuj. - Jeśli używasz nagłówka Dobrze widoczny, możesz wybrać ustawienie Wyrównanie obrazu.
- Podaj wartość Tekst alternatywny logotypu, aby spełnić standardy ułatwień dostępu.
Wskazówka:
Jeśli na logotypie znajduje się tekst, tekst alternatywny może być nazwą firmy. Jeśli logotyp jest znakiem graficznym, możesz uznać go za element dekoracyjny i w tekście alternatywnym wpisać wartość “”. - Kliknij przycisk Zapisz.
Dodawanie ikon mediów społecznościowych
Do nagłówka można dodać ikony mediów społecznościowych.
- Otwórz witrynę w trybie edycji.
- Kliknij, aby rozwinąć menu Znakowanie w obszarze Nagłówek na panelu bocznym.
- Kliknij menu Ikony społecznościowe.
- Kliknij przełącznik, aby dodać ikonę serwisu społecznościowego Facebook, Twitter, Instagram lub YouTube.
- Podaj adres URL swojego konta na danej platformie.
- Kliknij przycisk Zapisz.
Tworzenie motywu
Opracuj motyw witryny, wybierając kolory nagłówka, tekstu i przycisków w witrynie. Kolory wybrane w menu Motyw witryny zostaną zastosowane do całej witryny. Wybrane opcje można zastąpić, konfigurując kolory dla konkretnych wierszy. Więcej informacji na ten temat można znaleźć w sekcji Kolory i czcionki.
Wskazówka:
Gdy wybierasz kolor, przejrzyj wytyczne na temat znakowania dla instytucji. Wiele wytycznych na temat znakowania podaje dokładne kody kolorów dla zasobów, takich jak witryny internetowe i logotypy. Jeśli nie masz wytycznych na temat znakowania, skonsultuj motyw witryny z zespołem lub partnerami biznesowymi, aby zapewnić, że będzie on odpowiednio reprezentować instytucję.
- Otwórz witrynę w trybie edycji.
- Otwórz panel boczny, klikając przełącznik . W razie potrzeby kliknij strzałkę wstecz znajdującą się obok opcji Dostosuj u góry panelu, aby wrócić do menu głównego, dopóki nie zobaczysz opcji Motyw.
- Aby podać kolor dowolnej z poniższych opcji, wpisz szesnastkowy kod koloru lub wybierz kolor w oknie wyboru koloru obok pola kodu koloru.
- Opcja Kolor tła nawigacji globalnej określa kolor paska nawigacji globalnej witryny.
- Opcja Kolor tekstu nawigacji globalnej określa kolor tekstu na pasku nawigacji globalnej.
Notatka:
Więcej informacji na temat nawigacji globalnej zawiera sekcja Czym jest nawigacja globalna?
- Pole Kolor tła nagłówka określa kolor nagłówka witryny.
- Pole Kolor tekstu w nagłówku określa kolor tekstu w nagłówku.
- Pole Kolor tła treści określa kolor wierszy witryny. Kolor wiersza i kolor tekstu można również skonfigurować dla poszczególnych wierszy, wykonując czynności przedstawione w sekcji Kolory i czcionki.
- Pole Kolor tekstu treści określa kolor tekstu w całej witrynie.
- Pole Kolor łączy w treści określa kolor wszystkich łączy i przycisków, w przypadku których w polu Styl przycisku jest ustawiona wartość Z obrysem.
Notatka:
Karty pionowe, w tym przycisk udostępniania, korzystają z wartości pola Kolor łączy w treści przy ustalaniu wypełnienia tła i wartości pola Kolor tła treści w przypadku ikon lub tekstu.
- Pole Kolor tła przycisków określa kolor przycisków w witrynie, w przypadku których w polu Styl przycisku ustawiono opcję Pełne tło. Dotyczy to także ikon znajdujących się na kartach panelu bocznego.
- Pole Kolor tekstu przycisków określa kolor tekstu wszystkich przycisków dostępnych w witrynie.
- Po skonfigurowaniu kolorów kliknij opcję Zastosuj zmiany.
- Do tekstu w nagłówku i treści witryny można również zastosować czcionkę.
- Aby wybrać czcionkę dla treści witryny, kliknij przycisk ustawień Czcionka podstawowa.
- Aby zmienić czcionkę w nagłówku witryny, kliknij przycisk ustawień Czcionka nagłówka.
Notatka:
Aby zacząć jeszcze raz lub przywrócić kolory domyślne, należy wybrać opcję Przywróć wartości domyślne w dolnej części menu Motyw.
Tworzenie stopki
Przy użyciu niestandardowego kodu HTML można dodać do witryny stopkę, która będzie widoczna na wszystkich stronach podłączonych do witryny.
- Otwórz witrynę w trybie edycji.
- Rozwiń menu Stopka na panelu bocznym.
- Kliknij przełącznik obok opcji Dostosuj.
- Zmodyfikuj pola arkusza CSS i kodu HTML w panelu bocznym i kliknij opcję Zastosuj zmiany, aby zobaczyć efekty w kodzie HTML.
Notatka:
W kodzie HTML stopki nie jest obsługiwany wbudowany kod JavaScript. Znaczniki skryptu zostaną zignorowane.
Powiązane zasoby
Aby wyraźniej podkreślić znakowanie witryny, możesz wykonać następujące czynności:
- Dodać łącza menu i włączyć nawigację globalną. Więcej informacji zawiera temat Konfigurowanie łączy menu i nawigacji globalnej.
- Każda witryna zawiera adres URL (adres internetowy). Jeśli instytucja ma domenę niestandardową, możesz skonfigurować ten adres URL, aby wyraźnie oznaczyć marką daną witrynę. Więcej informacji na ten temat można znaleźć w sekcji Często zadawane pytania na temat domeny.