Tutorial: różne tryby układu za pomocą wtyczki JetElements do kreatora stron Elementor

Mówią, że jeśli Twoje zdjęcia są piękne i ostre, nie musisz dodatkowo dostosowywać tryby układu strony. Nic nie może zepsuć wyglądu Twojej witryny, jeśli zrobisz naprawdę wspaniałe zdjęcia, prawda? Jeśli zgadzasz się z tym zdaniem, mam dla Ciebie złe wieści.

Nieatrakcyjne tryby układu galerii mogą zrujnować wygląd calej strony, psując tym samym pierwsze wrażenie odwiedzającego. Aby uniknąć takich problemów - zastanów się uważnie przy wyborze wyglądu galerii. Tryby układy zdjęć są jak ubranie kobiety - bez nich jest piękna, ale odpowiednia sukienka może sprawić, że będzie wyglądać jak celebrytka.

różne tryby układu za pomocą wtyczki JetElements 01

Najlepszym narzędziem do nie tylko tworzenia galerii z układem w trybie siatki, kafelkowym lub wyjustowanym, ale także do szybkiej zmiany tych trybów i decydowania, który z nich jest lepszy dla twojego projektu, jest kreator stron Elementor. Jeśli nie używałeś go wcześniej - powinieneś przejrzeć ten artykuł ze szczegółowym przeglądem kreatora stron Elementor. W skrócie, Elementor to ogromny zestaw narzędzi, który pozwala dostosować wygląd witryny w czasie rzeczywistym, monitorując zmiany w momencie ich wdrażania.

Wtyczka, która pomoże Ci dodać różne tryby układu elementów to JetElements. Jest to rozszerzenie stworzone specjalnie do kreatora Elementor i dodaje dużą liczbę instrumentów do menu dostosowywania.


Czas więc omówić najbardziej popularne tryby układu zdjęć. Widżet „Układ zdjęć” wtyczki JetElements ma intuicyjnie zrozumiały interfejs, więc nie będziesz miał żadnych problemów z jego używaniem.

Po pierwsze, przejdź do panelu administracyjnego WP, otwórz zakładkę „Strony” i kliknij w przycisk „Edytuj za pomocą Elementor” na stronie, na której chcesz umieścić świetny układ zdjęć. W menu Elementor wybierz sekcję JetElements i znajdź widżet „Układ zdjęć”.

różne tryby układu za pomocą wtyczki JetElements 02

Przeciągnij go i upuść na obszar roboczy. Zasadniczo ten element wygląda tak:

różne tryby układu za pomocą wtyczki JetElements 03

W zakładce „Zawartość” menu znajdują się dwie sekcje: „Ustawienia” i „Elementy”. W pierwszej możesz zmienić liczbę kolumn wyświetlanych na stronie. Tutaj również zmieniono typ układu. W sekcji „Elementy” możesz dodawać zdjęcia do układu.

różne tryby układu za pomocą wtyczki JetElements 04

różne tryby układu za pomocą wtyczki JetElements 05

Kliknij element i dodaj zdjęcie, ikonę, tytuł, opis i link. Możesz oglądać zmiany w układzie w tym samym momencie, w którym to robisz.

różne tryby układu za pomocą wtyczki JetElements 06

Po zakończeniu dodawania zdjęć nadszedł czas, aby trochę zmodyfikować tryby układu. Oto jak wygląda układ w trybie siatki. Wszystkie zdjęcia są przycinane do jednego rozmiaru i umieszczane w dokładnych rzędach. Siatka jest najsurowszym i najbardziej oficjalnym układem ze wszystkich.

różne tryby układu za pomocą wtyczki JetElements 07

Układ kafelkowy ma bardziej chaotyczny wygląd. Zdjęcia mają podobną szerokość, ale ich wysokość jest proporcjonalna do rzeczywistego rozmiaru zdjęcia.

różne tryby układu za pomocą wtyczki JetElements 08

Układ wyjustowany jest podobne do kafelkowego, tylko odwrotnie. Wszystkie zdjęcia mają tę samą wysokość, ale szerokość jest proporcjonalna do oryginalnego wariantu.

różne tryby układu za pomocą wtyczki JetElements 09


Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create an Attractive Image Grid, Masonry or Justify Layout with JetElements Images Layout Widget for Elementor?


Jeśli nadal masz pytania i nie wiesz jak dostosować tryby układu, oraz jaki z nich staie się idealnym wyborem dla Twojej witryny, obejrzyj poniższe wideo. Cały proces pokazujemy z najdrobniejszymi szczegółami, więc z pewnością będziesz mógł powtórzyć wszystkie czynności.

(to wideo w języku angielskim)

Jeśli są jakieś pytania - zostaw je w sekcji komentarzy poniżej!

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: