Co to jest kontener w Elementorze?
Kontener w Elementorze to podstawowy element budowy strony internetowej z wykorzystaniem 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ą.
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.
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.
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.
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.
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. Tworzenie stron internetowych to fascynujący proces, który jest połączeniem wiedzy technicznej oraz praktycznej. Wyczucie estetyczne jest też ważnym składnikiem, ale nawet jeżeli go nie posiadasz – nie przejmuj się – można je w sobie wyrobić.
