Elementor 4 i Atomic Editor – kompletny przewodnik po nowym środowisku

Jeśli pracujesz z Elementorem od jakiegoś czasu, wiesz, że każda większa aktualizacja potrafi wywrócić do góry nogami to, co znałeś na pamięć. Wersja 4 z Atomic Editorem to właśnie taka zmiana – i żeby nie tracić czasu na szukanie podstawowych funkcji, zebrałem wszystko w jednym miejscu.

Spis treści do poniższego filmu (kliknięcie na czasie przesyła do filmu):

0:31 Uruchomienie Edytora Atomic w Elementorze wersji 4

2:01 Uruchomienie Elementowa, rozpoczęcie pracy

4:14 Dodawanie sekcji, kontenerów

6:20 Dodawanie Tła

8:55 Obramowanie

9:34 Zaokrąglenie sekcji / obramowanie kontenera/sekcji

12:46 Dodanie obrazka i zaokrąglenie narożników

14:20 Pozycjonowanie elementów (np. Grafiki, kontenerów)

16:05 Dodawanie i edycja tekstu/ nagłówka

18:25 Zmiana koloru tekstu

19:40 Tworzenie kolumn z elementów strony

25:01 Dodawanie hiperłącza do sekcji, w tekście

Jak uruchomić Atomic Editor w Elementorze 4?

Zanim zaczniesz projektować, musisz upewnić się, że Atomic Editor jest aktywny. W Elementorze 4 znajdziesz tę opcję w ustawieniach wtyczki – to nowy tryb pracy, który zmienia sposób zarządzania kontenerami i strukturą strony. Po jego włączeniu interfejs edytora wygląda nieco inaczej niż dotychczas, ale szybko się przyzwyczaisz.

Samo uruchomienie edytora przebiega standardowo – wchodzisz na stronę lub wpis, klikasz „Edytuj z Elementorem” i od razu ląduje w nowym środowisku.

Struktura strony – sekcje i kontenery

W Atomic Editorze zapomnij o starym podziale na sekcje → kolumny → widgety. Teraz wszystko opiera się na kontenerach (Flexbox). Dodając nową sekcję, tak naprawdę dodajesz kontener, który możesz swobodnie zagnieżdżać.

Praktyczna wskazówka: klikając „+” na stronie, wybierasz, czy chcesz dodać kontener w układzie wierszowym czy kolumnowym. To daje dużo większą elastyczność przy budowaniu siatek.

Tło, obramowanie i zaokrąglenia

Tło sekcji

Opcje tła znajdziesz w panelu po lewej stronie, w zakładce Styl → Tło. Możesz ustawić kolor, gradient, obraz lub wideo – bez zmian w stosunku do tego, co znałeś wcześniej.

Obramowanie i zaokrąglenie kontenerów

Tu pojawia się jedna z ważniejszych nowości. Obramowanie i zaokrąglenie narożników kontenera ustawiasz w zakładce Styl → Obramowanie. Zaokrąglenia możesz kontrolować osobno dla każdego narożnika – wystarczy odblokować ikonę łańcuszka obok wartości.

Efekt zaokrąglonych kart, który teraz dominuje w nowoczesnym web designie, osiągniesz ustawiając border-radius na poziomie 12–24px dla większości sekcji treściowych.

Obrazki – dodawanie i zaokrąglanie narożników

Widget obrazka działa tak samo jak wcześniej, ale zaokrąglenie narożników znajdziesz teraz w Styl → Obramowanie (nie w zakładce „Obrazek”, jak mogłoby się wydawać). To częsty punkt, który dezorientuje na początku.

Pozycjonowanie elementów

W kontenerach Flexbox pozycjonowanie odbywa się przez właściwości Justify Content i Align Items – czyli dokładnie tak, jak w czystym CSS. Jeśli pracujesz z grafikami lub zagnieżdżonymi kontenerami, ustawienia te znajdziesz w zakładce Układ wybranego kontenera.

Dla bardziej zaawansowanego pozycjonowania (np. nakładania elementów na siebie) możesz przełączyć kontener w tryb Position: Absolute – opcja dostępna w zakładce Zaawansowane.

Tekst i nagłówki – edycja i kolory

Dodawanie tekstu i nagłówków nie zmieniło się znacząco. Klikasz dwukrotnie na widget, żeby edytować treść. Kolor tekstu ustawisz w Styl → Kolor tekstu – pamiętaj jednak, żeby najpierw sprawdzić, czy nie masz narzuconych globalnych stylów z Global Colors, bo to tam powinna siedzieć Twoja paleta kolorów.

Jeśli chcesz zmienić kolor tylko fragmentu tekstu, zaznacz go i skorzystaj z mini-paska formatowania, który pojawia się nad zaznaczeniem.

Tworzenie kolumn

W Atomic Editorze kolumny budujesz przez zagnieżdżanie kontenerów. Schemat wygląda tak:

  1. Dodaj kontener zewnętrzny w układzie wierszowym (Row)

  2. Wewnątrz niego dodaj tyle kontenerów-dzieci, ile chcesz kolumn

  3. Każdemu dziecku ustaw Width: 1/2, 1/3 itd. lub zostaw flex: 1 dla równomiernego podziału

To podejście jest elastyczniejsze niż stary system kolumn, ale wymaga chwili przyzwyczajenia.

Hiperłącza – w tekście i na sekcji

Dodanie linku do tekstu to standardowe zaznaczenie + ikona łańcuszka w pasku formatowania.

Natomiast żeby podlinkować całą sekcję lub kontener, wejdź w ustawienia kontenera → zakładka Zaawansowane → Atrybut HTML i dodaj własny atrybut onclick lub skorzystaj z opcji Link dostępnej bezpośrednio w zakładce Układ (dla niektórych widgetów). Najczystsze rozwiązanie to jednak użycie widgetu Button lub owinięcie sekcji linkiem przez własny CSS/JS, jeśli zależy Ci na semantyce.

Spis treści

Zobacz również

Usługi