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.
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.
Na karcie Custom CSS wpisz „six-columns” w polu tekstowym Class CSS. Będziemy dodawać CSS do tej klasy później.
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.
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 {width: 8.33%; float: left;} |
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.
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