Tel:515-366-505 Tworzenie stron internetowych CMS-Wordpress admin@ssv.pl

Divi Builder pozwala mieć do czterech kolumn dla układów stron. W przypadku większości stron internetowych potrzebujesz tylko czterech kolumn. Ale czasami trzeba dodać więcej kolumn. Oczywiście istnieją wtyczki, które umożliwiają osadzanie skrótów w celu dodania dodatkowych kolumn do układu. Ale może to być ograniczone w przypadku pracy z Divi Builder, ponieważ praca z modułami wymaga pracy w trybie shortcodes.

Dlatego w dzisiejszym poście pokażę ci jak dodać więcej kolumn do twoich wierszy za pomocą Divi Builder bez użycia wtyczki lub shortcodes. W ten sposób możesz dodać dowolną liczbę kolumn, aby uporządkować moduły Divi dowolnego typu. Czy potrzebujesz układu dziesięciokolumnowego do wyświetlania logo klienta lub elementów portfolio za pomocą modułu obrazu? Potrzebujesz sześcioramiennego układu, aby wyświetlić listę usług firmy za pomocą modułu Blurb? Cóż, możesz! A najlepsze jest to, że nadal możesz edytować moduły w tych kolumnach za pomocą Divi Builder.

Row module settings 300x190 - Jak dodać więcej kolumn w stron Divi

Najpierw rozmieść Divi Builder i pozostań przy przedstawionym układzie Sekcji Standardowej.

Wybierz ustawienia modułu rzędów. W obszarze Ustawienia ogólne wybierz opcję zwiększenia szerokości wiersza.

select row settings 300x156 - Jak dodać więcej kolumn w stron DiviNa karcie Custom CSS wpisz „six-columns” w polu tekstowym Class CSS. Będziemy dodawać CSS do tej klasy później.

six columns 300x234 - Jak dodać więcej kolumn w stron Divi

Teraz musisz zduplikować moduł Blurb, który właśnie dostosowałeś, aby utworzyć pięć dodatkowych modułów, co daje w sumie sześć modułów blurb. Ważne jest, że masz tu sześć modułów, ponieważ pokrywa się to z klasą „sześciu kolumn”, którą utworzyłeś wcześniej.

six blurbs 275x300 - Jak dodać więcej kolumn w stron Divi

Zapisz lub opublikuj swoją stronę.

Teraz, gdy sześć modułów jest już gotowych, przejdź do Divi → Opcje motywu i dodaj następujący kod CSS w polu tekstowym Niestandardowy CSS:

.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}
.six-columns .et_pb_module {width: 16.66%; float: left;}
.five-columns .et_pb_module {width: 20%; float: left;}
Teraz przejrzyj swoją stronę. Powinieneś zobaczyć swoje blurb moduły w układzie sześcio-kolumnowym.

Potrzebujesz więcej układów kolumn?

Jeśli jesteś dobry w matematyce (kogo żartujemy? Po prostu użyj aplikacji kalkulatora), możesz dodać tyle kolumn, ile chcesz do swojego układu. Wystarczy obliczyć wymagany procent i utworzyć klasę dla tego procentu.

Na przykład, jeśli chcesz mieć układ z 12 kolumnami, oto, co robisz:

Podziel 1 na 12 i pomnóż to przez 100, aby uzyskać 8,33%. (To będzie szerokość jednej z twoich kolumn.)Dodaj niestandardową klasę CSS o nazwie „dwanaście kolumn” do modułu wiersza zawierającego 12 modułów.Wprowadź następujące niestandardowe css dla tego procenta:

.twelve-columns {width8.33%floatleft;}

Jeszcze bardziej twórcze dzięki układom kolumn

Aby utworzyć bardziej kreatywne układy kolumn, możesz włączyć tę funkcję w sekcji specjalności.

Na przykład, oto jak stworzyć układ pół-piątej piątej.

Wybierz sekcję Specjalność z Divi Builder.

one half five fifths 300x164 - Jak dodać więcej kolumn w stron Divi

final one half five fifths 300x137 - Jak dodać więcej kolumn w stron Divi

Dbanie o telefon komórkowy
Jeśli nie chcesz, aby niestandardowy układ kolumn był taki sam na wszystkich urządzeniach, możesz wprowadzić dodatkowe css, aby przeskalować kolumny do bardziej czytelnego rozmiaru na urządzeniach mobilnych. Możesz zmienić wartości procentowe, aby dopasować je do swoich potrzeb.

@media (max-width: 980px){
.ten-columns .et_pb_module {width: 20%;}
.nine-columns .et_pb_module {width: 33.3%;}
.eight-columns .et_pb_module {width: 25%;}
.seven-columns .et_pb_module {width: 25%;}
.six-columns .et_pb_module {width: 33.3%;}
.five-columns .et_pb_module {width: 33.3%;}
}

@media all and (max-width: 767px) {
.ten-columns .et_pb_module {width: 100%;}
.nine-columns .et_pb_module {width: 100%;}
.eight-columns .et_pb_module {width: 100%;}
.seven-columns .et_pb_module {width: 100%;}
.six-columns .et_pb_module {width: 100%;}
.five-columns .et_pb_module {width: 100%;}
}
to jest to! Teraz masz możliwość dodawania kolejnych kolumn do układów stron za pomocą Divi Builde

print