Elementor kontenery – jak one działają?

Kontener jest podstawowym elementem budowy strony z wykorzystaniem Elementora. Kontener zastąpił niegdysiejsze sekcje i to w nim umieszcza się wszelkiego rodzaju widżety i modyfikuje layout strony.
obrazek wyróżniającym a na nim krzysztof kwaśniowski rysunek monitora oraz tytuły jak działa kontener oraz wordpress i elementor

Spis treści

zolty kwadrat

Co to jest kontener w Elementorze?

Kontener w Elementorze to podstawowy element budowy strony internetowej z wykorzystanie page buildera Elementor. Możemy go sobie wyobrazić jako pudełko, do którego wkładamy różne elementy strony, jak nagłówki, teksty, zdjęcia, grafiki, przyciski i wiele innych. W tym pudełku jest kilka możliwości ułożenia tych elementów w ten sposób, by nie były one rozmieszczone w dowolny sposób tylko w sposób zaplanowany. Co więcej, do tego pudełka można włożyć inne pudełka. Dzięki temu jest jeszcze większa kontrola nad treścią.

zolty kwadrat

W jaki sposób zarządzać treścią w kontenerze?

Aby zarządzać wyżej wspomnianymi tekstami, nagłówkami, zdjęciami w kontenerze – masz do dyspozycji wiele narzędzi. Skupię się w tym miejscu tylko na tych najważniejszych i najczęściej używanych.

Szerokość i wysokość treści

Jedną z pierwszych opcji możliwych do zdefiniowania jest ustalenie szerokości treści. Można tego dokonać używając następujących wartości: px, em, rem, vw, %. Tutaj ile osób, tyle opinii na temat tego, który model warto wybrać. Ja najczęściej używam px (pixele) i %. Ustawiając przykładowo 90% – treść kontenera będzie się mieściła w 90% szerokości ekranu komputera.

Drugą opcją jest ustalenie wysokości kontenera. Przy ustawieniach szerokości – sprawiaszmy, że wszelkie treści, zdjęcia, obrazy nie będą zajmowały więcej niż ta ustalona przestrzeń. W przypadku ustalenia wysokości – ustawiamy minimalną wysokość. To oznacza, że kontener będzie miał przynajmniej, np. 300px wysokości, ale jeżeli będzie zawierał większą ilość treści, to się po prostu wydłuży na wysokość. W praktyce rzadko używa się tych wartości. Zwykle, gdy chcemy, aby dany kontener był idealnie równy z innymi obok niego, lub gdy chcemy, aby kontener zajmował całą wysokość ekranu albo np 75%. Możesz spokojnie pozostawić tę wartość bez uzupełniania.

wycinek ekranu przedstawiający ustawienia szerokości i wysokości kontenera

Kierunek treści wewnątrz kontenera

Możesz ustawić, aby elementy wewnątrz kontenera układały się w poziomie od lewej do prawej lub od prawej do lewej. Analogicznie możesz ustawić kierunek treści w orientacji pionowej od góry do dołu lub od dołu do góry. Zwykle zmienia się to ułożenie w odniesieniu do układu treści na różnych urządzeniach mobilnych.

wycinek przedstawiający ustawienie kierunku treści wewnątrz kontenera

Wyrówannie treści

Treść wewnątrz kontenera może być wyrównana troszkę jak w Wordzie: do lewej, do prawej lub do środka. Można ją też ustawić w równych odstępacch od siebie względem krawędzi kontenera albo zrobić tak, że będą jak najbliżej krawędzi (elementy oddalone od siebie najbardziej, jak się da).

Istnieje także opcja wyrównania treści w pionie. Jest to szczególnie cżesto wykorzystywane w hero section (główa sekcja na górze strony). W tych przypadkach spotykamy zwykle duże zdjęcie z prawej strony, które zajmuje prawie całą wysokośc kontenera, a z lewej strony jest nagłówek z tekstem wyrównany do środka wysokości lub do dołu kontenera.

wycienk przedstawiający wyrównanie treści wewnątrz kontenera

Odstępy i zawijanie treści

Pomiędzy elementami kontenera, np. pomiędzy tekstem, a zdjęciem – występują odstępy. Domyślnie są one ustawione na 20 pikseli, ale nic nie stoi na przeszkodzie, aby to zmodyfikować. Wartość kolumna będzie odpowiadała za odstępy pomiedzy elementami w poziomie, a wartość row będzie odpowiadała za odstępy w pionie.

Ostatnim z ustaiweń jest „zawijanie” (wrap) lub „nie-zawijanie” (no-wrap). Gdy przykładowo masz obok siebie ustawione: nagłówek, tekst i zdjęcie, to mogą się one nie zmieścić w szerokości kontenera. W tym miejscu decydujesz co kontener zrobi w takiej sytuacji. Opcja „nie-zawijaj” spowoduje, że elementy zostaną ściśnięte i zmieszczą się w jednym rzędzie poziomym. Opcja „zawijaj” spowoduje przeniesienie nadmairaowych elementów do kolejnego rzędu. 

wycienk przedstawiający odstępy oraz zawijanie treści w kontenerze

zolty kwadrat

Jak działają kontenery - FILM

Część teoretycznej wiedzy z zakresu kontenerów ciężko jest wyjaśnić samym tekstem. W związku z tym cały materiał został przeze mnie przygotowany także w formie filmu. Tam też znajdziesz informacje, w jaki sposób wykorzystywać marginesy i odstępy.

rysunkowe chmurki jako symbol rozmowy

Potrzebujesz reklamy internetowej lub strony www?

Przeczytaj więcej...