Poradnik jak tworzy się prawidłowo kolumny na WordPress
Problem wynikający z źle utworzonych bloków tekstowych
Tworzenie stron internetowych, szczególnie na popularnej platformie jak WordPress, wiąże się z wieloma wyzwaniami. Jednym z najczęstszych problemów, z którym borykają się twórcy, jest złe ułożenie bloków z kontentem na różnych rozmiarach monitorów. Problem ten występuje przy różnym ułożeniu przeglądarki internetowej na monitorze.
Aby lepiej zrozumieć tę kwestię, warto przyjrzeć się, czym jest ten problem i dlaczego w ogóle występuje. Poniżej przygotowałem dla Ciebie czytelny przykład tego problemu. Znajdziesz tam dwie przykładowe kolumny z zawartym przykładowym tekstem. Pierwsza kolumna jest wykonana w nieprawidłowy sposób, druga znowu jest poprawna. Chwyć swój bok przeglądarki internetowej (Chrome, Firefox, Edge, Safari, itp) i poruszaj nią w lewo i prawo, skracając tym samym jej pole widoku. Obserwuj co się dzieje z kolumnami i tekstem w środku. Prawidłowa budowa kolumn w wordpress to podstawa i świadczy o profesjonalność powierzonego zadania na stworzenie strony interentowej.
Kolumny zbudowane w prawidłowy sposób
Add a descriptive title for the column.
Nullam quis risus urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra . Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Add a descriptive title for the column.
Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl et.
Add a descriptive title for the column.
Nullam quis risus eget urna ornare vel eu leo. Fusce dapibus, tellus ac cursus ucommodo, tortor mauris condimentum, ut fermentum justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra. Praesent commodo cursus magna, vel scelerisque nisluuu consectetur et. Nullam quis risus eget.
Kolumny zbudowane w nieprawidłowy sposób
Add a descriptive title for the column.
Nullam quis risus urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra . Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Add a descriptive title for the column.
Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl et.
Add a descriptive title for the column.
Nullam quis risus eget urna ornare vel eu leo. Fusce dapibus, tellus ac cursus ucommodo, tortor mauris condimentum, ut fermentum justo sit amet risus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra. Praesent commodo cursus magna, vel scelerisque nisluuu consectetur et. Nullam quis risus eget.
Co to jest problem złego ułożenia kolumn z jej zawartością?
Nieprawidłowa budowa kolumn w WordPress
W skrócie, chodzi o to, że elementy strony internetowej – zwane boksami lub blokami z kontentem – nie wyglądają tak, jak powinny, gdy strona jest przeglądana na urządzeniach o różnej wielkości ekranu. Może to oznaczać, że teksty wychodzą poza swoje bloki, obrazy są niewłaściwie przeskalowane, a cała kompozycja strony traci na estetyce i funkcjonalności. Dzieje się tak, gdy strona nie jest odpowiednio zaprojektowana z myślą o responsywności, czyli zdolności do dostosowania się do różnych rozmiarów i proporcji ekranu.
Dlaczego występuje problem z różnym rozmiarem kolumn na różnych rozmiarach monitorów?
Jak temu zaradzić?
Kluczem do rozwiązania problemu jest projektowanie z myślą o responsywności od samego początku. Prawidłowa budowa kolumn w wordpress oznacza to stosowanie technik i praktyk, takich jak elastyczne siatki layoutów, elastyczne obrazy i media, a także media queries w CSS, które pozwalają na stosowanie różnych stylów w zależności od rozmiaru ekranu. Dodatkowo, warto testować strony na różnych urządzeniach i w różnych przeglądarkach, aby upewnić się, że wyglądają i funkcjonują zgodnie z oczekiwaniami.
Dzięki wtyczce Kadence Block można szybko naprawić niepoprawność kolumn.
Po ich utworzeniu, dodaniu tekstu, ikon, grafik, oraz obramowaniu, wystarczy, ze włączy się jedną opcje w ustawieniu całego bloku (Row Layout) znajdująca się po prawej stronie ekranu w sekcji Advanced i Structure Settings. Ta opcja to Minimum Height.
W tym momencie wszystkie nasze kolumny zostają zrównane z rozmiarem tej, którra była najdłuższa.
Zapraszam do formularza kontaktowego jeżeli chcesz dowiedzieć się więcej, lub na mój Blog.
Kod CSS na poprawne ułożenie przycisku w kolumnach.
selector .wp-block-kadence-column .kt-inside-inner-col {
display: flex;
flex-direction: column;
flex: 1;
}
selector .wp-block-kadence-column .kt-inside-inner-col .wp-block-kadence-advancedbtn {
margin-top: auto;
}Jak poprawnie zbudować kolumny w WordPress
Zapraszam również do mojego poradnika Budowa kolumn w WordPress. Naucz się poprawnie wyrównywać kolumny, oraz przycisk CTA na stronie w WordPress.
