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:

  1. Nawigacja (Navbar)
  2. Nagłówek (Header) 
  3. Body
  4. Stopka (Footer) 
  5. Panele boczne (Side-Panels)
  6. 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:

  1. Nawigacja (Navbar)
  2. Stopka (Footer)
  3. Panele boczne (Side-Panels) 
  4. 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
Wybór layoutu strony w BOWWE

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.

Tworzenie strony bez navbara i footera w BOWWE

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

Nawigacja (Navbar) - służy do nawigacji i poruszania się po Twojej witrynie. W Navbarze należy umieścić Menu nawigacyjne strony.

2

Nagłówek (Header) - tutaj należy umieścić baner, którego celem jest zachęcenie odwiedzającego do zapoznania się z treściami podstrony. Często znajduje się tu też indywidualny dla każdej podstrony nagłówek H1.

3

Body - tutaj należy umieścić wszystkie główne treści, jakie znajdują się na podstronie: teksty, nagłówki H2-H5, wideo, przyciski.

4

Stopka (Footer) - tutaj należy umieścić: mapę strony (sitemap), logo, claim lub krótki opis, dane kontaktowe (mail, nr. telefonu, adres), ikony social media, contact form (opcjonalnie).

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.

Gratulacje!

Już wiesz, jak zmieniać i edytować przyciski na Twojej stronie.

Remember about:

 In addition to Portfolio, you can put on the Customer Reviews page. You will build even greater trust of potential customers in your company.
Use only high-quality photos in the Portfolio. Find out where to get them here!
Update Portfolio min. 1 a week. You will achieve higher rankings in search engines!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution