BOWWE University
Podstawy budowania stron: Kontenery i Common Regions. Co musisz o nich wiedzieć?
Tworzenie stron internetowych rządzi się kilkoma niezmiennymi zasadami. Ich znajomość jest niezbędna do rozwijania swojej wiedzy i umiejętności oraz budowania wysokiej jakości stron internetowych.
Jedną z tych zasad jest znajomość działania kluczowych elementów strony: Nawigacji, Nagłówka, Body, Stopki, Paneli bocznych oraz Fixed-Panels. W tym tutorialu dowiesz się, jak korzystać z nich do budowania niezawodnych stron, sklepów e-commerce i landing page’y w BOWWE.
Z jakich kluczowych elementów składa się strona internetowa?
Większość stron internetowych składa się z kilku kluczowych elementów:
- Nawigacja (Navbar)
- Nagłówek (Header)
- Body
- Stopka (Footer)
- Panele boczne (Side-Panels)
- Fixed-Panel (opcjonalnie)
Te główne części strony nazywane są kontenerami, ponieważ zbierają w sobie wszystkie inne elementy strony.
Kontenery służą do łatwego i szybkiego zarządzania i edytowania treści na stronie. Do każdego z kontenerów możesz umieścić konkretne elementy, a następnie szybko i wygodnie zarządzać nimi wszystkimi, zmieniając jedynie ustawienia kontenera.
Common Region - szczególny przypadek kontenera
Common Region to kontener wspólny dla całej Twojej strony internetowej i jej wszystkich podstron. Na każdej podstronie wygląda i działa tak samo. Edytując go raz na jednej podstronie, zmienisz jego działanie i wygląd na wszystkich innych podstronach.
W Common Regionie, tak samo jak w kontenerze, możesz umieścić wiele widgetów i elementów Twojej strony, a by następnie łatwo nimi zarządzać. Korzystanie z kontenerów i Common Regions to standard w tworzeniu nowoczesnych stron internetowych, którego nie powinni łamać zwłaszcza początkujący projektanci stron i web developerzy.
Ważne!
Musisz pamiętać i rozumieć najważniejszą różnicę pomiędzy kontenerami a Common Regionami:
Każdy Common Region jest kontenerem. Ale nie każdy kontener jest Common Regionem.
Common Regions dostępne w BOWWE
Podczas tworzenia strony w BOWWE możesz korzystać ze wszystkich rodzai kontenerów. Cztery z nich to Common Regions i są to:
- Nawigacja (Navbar)
- Stopka (Footer)
- Panele boczne (Side-Panels)
- Fixed-panel (opcjonalnie)
Zapamiętaj!
Kontenery Header i Body nie są Common Regionami!
Każda podstrona Twojej witryny powinna posiadać unikalne treści w Header i Body!
Czym są Panele boczne (Side-Panels)?
Side-Panele/Panele boczne to opcjonalne Common Regions (nie wszystkie strony internetowe je mają). Możesz je w każdej chwili szybko włączyć i wyłączyć na każdej z podstron swojej witryny. W tym celu wystarczy, że wejdziesz w ustawienia podstrony i w zakładce Układ wybierzesz jeden z układów zawierający prawą lub lewą kolumnę boczną. Są to:
- Panel górny i lewa kolumna
- Panel górny i prawa kolumna
- Lewa kolumna
- Prawa kolumna
- Lewa kolumna nagłówek z prawej
- Lewa kolumna nagłówek z lewej
Jak zmienić szerokość panelu bocznego w BOWWE?
Pod panelem wyboru układu strony znajdziesz suwak, za pomocą którego możesz określić szerokość panelu bocznego.
Czym są Fixed-Panels?
Fixed-Panel to common region, którego zawartość zawsze wyświetla się odwiedzającym stronę na środku ekranu, niezależnie od rozdzielczości urządzenia z jakiego korzystają.
W Fixed-Panel najczęściej umieszcza się wtyczki mediów społecznościowych, które po kliknięciu przekierowują odwiedzających na odpowiedni profil.
Fixed-panel to opcjonalny common region, co znaczy że nie musisz z niego korzystać na swojej stronie internetowej.
Wraz z przewijaniem strony, elementy znajdujące się w Fixed-Panels “poruszają się razem z użytkownikiem”, ale nie zmieniają miejsca gdzie są wyświetlane. By lepiej to zrozumieć, zerknij na przykład na poniższym wideo. Zwróć uwagę, że znajdująca sie po prawej ikonka Facebooka nie zmienia swojego położenia wraz z przewijaniem strony.
Jak stworzyć stronę bez Nawigacji (Navbar) i Stopki (Footer)?
Jeśli nie potrzebujesz tych dwóch Common Regions, możesz bardzo łatwo je wyłączyć. Wystarczy, że w Kompozycja strony wybierzesz CUSTOMIZED, wówczas Twoja strona nie będzie zawierała Nawigacji i Stopki.
Najpowszechniejsze błędy w pracy z kontenerami
Błąd 1: Brak podzielenia <body> na sekcje
Bardzo dobrą praktyką przy tworzeniu strony internetowej jest podział treści na wiele sekcji.
Jeśli na jakiejkolwiek z podstron Twojej witryny chcesz zamieścić wiele różnych treści (np. obrazki, teksty, mapy Google, banery reklamowe, wideo) to nie umieszczaj ich bezpośrednio w kontenerze <body>. Zamiast tego, najpierw umieść w <body> wiele sekcji i dopiero wówczas umieszczaj w nich kolejne rodzaje treści.
Stosuj zasadę, że jedna sekcja powinna odpowiadać jednemu elementowi na stronie i (ewentualnie) powiązanym z nim podelementom.
Przykład:
Na podstronie twojadomena/xyz.com posiadasz następujące rodzaje treści:
- Wideo o Twojej firmie
- Tekst opisujący wideo
- Nagłówek “Skontaktuj się z nami!”
- Formularz kontaktowy, służacy do nawiązania kontaktu z Tobą
W takiej sytuacji powinieneś następująco podzielić treści na sekcje:
- Sekcja 1: Wideo + Tekst opisujący wideo
- Sekcja 2: Nagłówek “Skontaktuj się z nami!” + Formularz kontaktowy
To bardzo ważne, ponieważ umieszczenie zbyt wielu elementów w jednej sekcji, sprawi że strona stanie się “niezrozumiała” zarówno dla robotów indeksujących wyszukiwarki, jak i dla odwiedzających. Bardzo prawdopodobne, że poważnie zaszkodzi to Twojej stronie i obniży jej pozycjonowanie w wyszukiwarkach typu Google.
Bład 2: Umieszczanie wszystkich treści w tylko jednym kontenerze
Początkującym twórcom stron często zdarza się umieścić całą zawartość podstrony w tylko jednym kontenerze np. <header> lub <body>. Jest to błąd, ponieważ przez to strona staje się niezrozumiała zarówno dla robotów wyszukiwarek, jak i odwiedzających.
Każdy kontener pełni inną funkcję na stronie. Najlepiej, jeśli będziesz umieszczać w każdym z nich następujące elementy:
1
2
3
4
5
Prawy/Lewy Panel boczny - tutaj możesz umieścić elementy dodatkowe np.: formularz newslettera, reklamy lub odnośniki do artykułów Twojego bloga.
6
Fixed-Panel - tutaj możesz umieścić ikony, przekierowujące do Twoich mediów społecznościowych.
x600.png)