fbpx

Jak wyśrodkować kolumny w Divi?

Kiedy buduję strony dla swoich klientów, często zależy mi, żeby zawartość kolumn była wyśrodkowana w stosunku do siebie. Często jest to lepsze rozwiązanie, niż – na przykład – ustawianie przycisków pod tekstem na tej samej wysokości w każdej kolumnie. Dobrze też sprawdza się przy kilku obrazkach lub przy połączeniu obrazek+tekst. Wyśrodkowanie zawartości kolumn dobrze wygląda i sprawia, że strona jest estetyczna. Dlatego dzisiaj pokażę Wam jak wyśrodkować kolumny w Divi.

Zacznijmy od tego, że musimy mieć stworzony wiersz z minimum dwiema kolumnami. Bez tego efektu nie będzie 😉 Na filmie pokazałam Ci etap od gotowych kolumn, ale możesz też zacząć od zera. Po prostu stwórz najpierw treści, a potem je środkuj. Od razu zauważysz, jeśli Twój kod nie będzie działał.

Ustawienia wiersza

W pierwszej kolejności musimy ustawić wysokość kolumn na tę samą wysokość. Domyślnie wysokość poszczególnych kolumn w Divi jest ustawiana poprzez ich zawartość – to oznacza, że jeśli w jednej kolumnie masz więcej elementów, a w drugiej mniej – będą one miały różną wysokość. Możesz to łatwo zauważyć, ustawiając tła dla poszczególnych kolumn osobno.

Jednak jeśli chcemy wyśrodkować zawartość kolumn, musimy im nadać równą wysokość. Żeby to zrobić, musimy wejść w Ustawienia wiersza -> Design -> Wymiarowanie -> Wyrównaj wysokość kolumny -> Tak.

Gdy już mamy to zrobione, skorzystajmy z okazji i przełączmy się na zakładkę Zaawansowane, żeby ustawić klasę CSS.

zrób to sama w divi!

Masz stronę zrobioną w Divi, ale wprowadzanie każdej pojedynczej zmiany przyprawia Cię o ból głowy? A może opiekujesz się stronami zrobionymi w Divi, ale czasem sprostanie życzeniom klientów Cię przerasta?

Ten kurs to podstawowe narzędzie wiedzy dla wszystkich, którzy pracują w Divi – kobiet biznesu, Wirtualnych Asystentek i deweloperów. Dzięki moim materiałom Divi w końcu zacznie spełniać swoją funkcję – tworzenie stron w nim stanie się bajecznie proste ❤️

Klasa CSS

Zanim powiem Ci co i jak, zrobię krótki wstęp na temat klas CSS. Mówiąc o tym w prosty sposób – klasa CSS (a także ID) to nazwy identyfikacyjne poszczególnych elementów. Każdy element w kodzie Divi ma swoją nazwę. Dzięki temu w CSS możemy odwołać się do tej nazwy i ustawić inne parametry wyglądu. Niestety – w większości te klasy mają taką samą nazwę dla całej grupy elementów. Na przykład przyciski mają klasę et_pb_button a kolumny mają klasę et_pb_column. Gdybyś chciała ustawić środkowanie elementów tylko dla jednego wiersza i użyła do tego ogólnego kodu kolumny – wyśrodkowałabyś wszystkie kolumny na swojej stronie internetowej. Oczywiście pod warunkiem, że miałabyś w nich ustawione wyrównanie wysokości kolumny.

Właśnie dlatego chcemy nadać swoim kolumnom dodatkowe klasy CSS. Żeby to zrobić, musimy wejść w Ustawienia wiersza -> Zaawansowane -> Identyfikator i klasy CSS. Następnie znajdujemy identyfikację CSS poszczególnych kolumn i wpisujemy własne nazwy klas. Najwygodniej będzie, jeśli te nazwy będą takie same. W moim przypadku jest to nazwa srod. Pamiętaj, żeby w nazwie klasy podawać tylko litery i cyfry, możesz też użyć dolnych podkreślników.

Kod CSS

Na koniec – żeby zawartość naszych kolumn środkowała się prawidłowo – musimy dodać kod do naszego CSSa. Możemy to zrobić na dwa sposoby.

Pierwszy – wchodzimy w swoje menu WordPressa -> Wygląd -> Dostosuj -> Dodatkowy CSS i tam wklejamy kod.

Drugi – wchodzimy w menu WordPressa -> Divi -> Opcje szablonów graficznych -> General -> Niestandardowe CSS.

Z technicznego punktu widzenia nie ma znaczenia w którym miejscu to zrobisz.

Następnie musimy wkleić swój kod CSS. W tym celu oznaczamy najpierw naszą klasę (w moim przypadku jest to klasa srod, więc w CSS muszę wpisać .srod), a następnie między nawiasami klamrowymi umieszczam poniższy kod:

.srod { 
display: flex; 
flex-direction: column; 
justify-content: center;
}

Następnie musimy zapisać kod CSS i odświeżyć (po zapisaniu) stronę w Divi, na której chciałyśmy wyśrodkować zawartość kolumn. Teraz wszystko powinno wyświetlać się tak jak chciałyśmy.

Jak wyśrodkować kolumny w Divi?

Jak widzicie – sposób jest bardzo prosty i szybki. Nie wymaga dużo zachodu, a bardzo dobrze wpływa na estetykę naszych stron w Divi.

Daj znać w komentarzu – wolisz jak elementy kolumn są wyśrodkowane, czy preferujesz wyrównanie do góry?