{"id":1327,"date":"2021-01-24T19:11:03","date_gmt":"2021-01-24T19:11:03","guid":{"rendered":"https:\/\/jakubforman.eu\/?p=1327"},"modified":"2024-10-22T11:35:58","modified_gmt":"2024-10-22T11:35:58","slug":"wordpress-column-booster-for-elementor","status":"publish","type":"post","link":"https:\/\/jakubforman.eu\/en\/plugin\/wordpress-column-booster-for-elementor\/","title":{"rendered":"Column booster pro Elementor"},"content":{"rendered":"

Section & Column Booster<\/strong> je plugin s otev\u0159en\u00fdm zdrojov\u00fdm k\u00f3dem pro WordPress<\/strong> Elementor<\/strong>, kter\u00fd umo\u017e\u0148uje nastavit sloupce v responzivn\u00edm designu a umo\u017e\u0148uje nastavit po\u017eadovanou \u0161\u00ed\u0159ku<\/strong> sloupce<\/strong> v px<\/strong>, em<\/strong>, calc()<\/strong>, auto<\/strong> a dal\u0161\u00edch CSS vlastnostech, nav\u00edc um\u00ed m\u011bnit po\u0159ad\u00ed sloupc\u016f<\/strong>, kter\u00e9 se m\u016f\u017ee hodit p\u0159edev\u0161\u00edm v responzivn\u00edm designu. Roz\u0161i\u0159uje tak\u00e9 mo\u017enosti se zarovn\u00e1n\u00ed sloupc\u016f<\/strong> v sekci podobn\u011b jako CSS Flex Box.<\/p>\n\n\n\n

Pro\u010d jsem plugin vytvo\u0159il?<\/h2>\n\n\n\n

Elementor<\/strong> pro WordPress<\/strong> je skv\u011bl\u00fd n\u00e1stroj webdesign\u00e9ra, ale ne v\u0161e v n\u011bm funguje podle p\u0159edstav samotn\u00fdch design\u00e9r\u016f. Tu a tam se ob\u010das stane, \u017ee se mus\u00ed pou\u017e\u00edt vlastn\u00ed CSS<\/strong> a proklik\u00e1vat se inspektorem HTML<\/strong>, hledat zano\u0159en\u00e9 prvky, jejich CSS t\u0159\u00edd, kter\u00e9 se ru\u010dn\u011b upravuj\u00ed, aby se dos\u00e1hlo pot\u0159ebn\u00fdch v\u00fdsledk\u016f. Proto\u017ee m\u011b p\u0159i tvorb\u011b \u0161ablon v Elementoru chyb\u011bla funkce vlastn\u00ed \u0161\u00ed\u0159ky sloupc\u016f s\u00a0mo\u017enost\u00ed zadat ji v pevn\u00e9 \u0161\u00ed\u0159ce<\/strong> nebo mo\u017enost dopo\u010d\u00edt\u00e1n\u00ed pomoc\u00ed calc()<\/strong>, tak jsem tuto mo\u017enost p\u0159idal a r\u00e1d se o ni pod\u011bl\u00edm s dal\u0161\u00edmi webdesign\u00e9ry, nav\u00edc jsem funkci roz\u0161\u00ed\u0159il o mo\u017enost vlo\u017een\u00ed v\u0161ech CSS width validn\u00edch hodnot, co\u017e se m\u016f\u017ee hodit p\u0159i pou\u017eit\u00ed vlastn\u00edch prom\u011bnn\u00fdch a nebo ji\u017e zmi\u0148ovan\u00e9ho calc()<\/strong>. Plugin je implementac\u00ed CSS Flex<\/strong>, kter\u00fd plugin Elementor<\/strong> v z\u00e1kladn\u00edm sestaven\u00ed u sloupc\u016f nenab\u00edz\u00ed a design\u00e9r by si ho musel u ka\u017ed\u00e9ho sloupce a sekce ps\u00e1t vlastn\u00edm CSS<\/strong>, a to zna\u010dn\u011b prodlu\u017euje \u010das realizace designu.<\/p>\n\n\n\n

Co plugin nab\u00edz\u00ed?<\/h2>\n\n\n\n

Alternativu flex\/grid designu<\/strong><\/p>\n\n\n\n

Plugin roz\u0161i\u0159uje mo\u017enosti sekc\u00ed a sloupc\u016f. P\u0159i n\u00e1vrhu se \u010dasto setk\u00e1v\u00e1 design\u00e9r s grid designem. Bohu\u017eel Elementor<\/strong> nem\u00e1 \u017e\u00e1dnou p\u0159\u00edmou implemntaci gridu a mo\u017enosti p\u0159ichyt\u00e1v\u00e1n\u00ed prvk\u016f stejn\u011b jako v grafick\u00fdch programech. Pomoc\u00ed CSS funkce calc()<\/strong> lze doc\u00edlit grid designu relativn\u011b jednodu\u0161e za pomoc\u00ed odpo\u010d\u00edt\u00e1n\u00ed \u0161\u00ed\u0159ek a sou\u010dtu ostatn\u00edch „sloupc\u016f“.<\/p>\n\n\n\n

Nastaven\u00ed vlastn\u00ed \u0161\u00ed\u0159ky sloupce<\/strong><\/p>\n\n\n\n

\u0160\u00ed\u0159ku sloupce nen\u00ed nutn\u00e9 nastavovat jen za pomoc\u00ed calc()<\/strong>, ale v\u0161eobecn\u011b plat\u00ed pro v\u0161echny p\u0159\u00edpustn\u00e9 hodnoty v CSS width<\/strong>. Tedy, em<\/strong>, px<\/strong>, %<\/strong>, auto<\/strong>, fit-content<\/strong> a dal\u0161\u00ed.<\/p>\n\n\n\n

\"\"
Uk\u00e1zka pou\u017eit\u00ed \u0161\u00ed\u0159ky sloupce za pomoc\u00ed CSS calc()<\/figcaption><\/figure><\/div>\n\n\n\n

\u0158azen\u00ed sloupc\u016f<\/strong><\/p>\n\n\n\n

Skv\u011bl\u00e1 funkce hlavn\u011b v tabletov\u00e9m a mobiln\u00edm designu. Ur\u010dit\u011b to zn\u00e1te, kdy\u017e m\u00e1te 3 a v\u00edce sloupc\u016f v jedn\u00e9 sekci, ale na tabletu nebo telefonu pot\u0159ebujete p\u0159eskl\u00e1dat jejich po\u0159ad\u00ed. Elementor v z\u00e1kladu zvl\u00e1dne oto\u010dit v\u0161echny sloupce (prvn\u00ed bude posledn\u00ed a posledn\u00ed prvn\u00edm), ale u\u017e je neum\u00ed konkr\u00e9tn\u00edm sloupc\u016fm p\u0159idat po\u0159ad\u00ed na kter\u00e9 se maj\u00ed um\u00edstit tak jak design\u00e9r zam\u00fd\u0161l\u00ed a je nutn\u00e9 pak tuto mo\u017enost \u0159e\u0161it skr\u00fdv\u00e1n\u00edm n\u011bkter\u00fdch sloupc\u016f a ps\u00e1t sloupce duplicitn\u011b. Tuto mo\u017enost p\u0159id\u00e1v\u00e1 pr\u00e1v\u011b tento plugin do elemntoru.<\/p>\n\n\n\n

\"\"
Uk\u00e1zka zarovn\u00e1n\u00ed sloupce na pozici 1<\/figcaption><\/figure><\/div>\n\n\n\n

V\u0161e je responzivn\u00ed<\/strong><\/p>\n\n\n\n

P\u0159esn\u011b tak, v\u0161echny funkce lze nastavit zvl\u00e1\u0161\u0165 pro jednotliv\u00e1 za\u0159\u00edzen\u00ed a \u0161\u00ed\u0159ky obrazovky. Usnadn\u00ed to nejeden probl\u00e9m a nahrad\u00ed velkou \u010d\u00e1st vlastn\u00edho CSS<\/strong>.<\/p>\n\n\n\n

Sekce a vnit\u0159n\u00ed sekce<\/strong><\/p>\n\n\n\n

Plugin funguje jak na sloupce v sekc\u00edch tak i ve vnit\u0159n\u00edch sekc\u00edch. Sekc\u00edm p\u0159id\u00e1v\u00e1 mo\u017enosti \u0159azen\u00ed sloupc\u016f, mezery mezi sloupci a zarovn\u00e1n\u00ed t\u011bchto sloupc\u016f. Podobn\u011b jako CSS Flex<\/strong>. V budoucnu budou v\u0161echny funkce pluginu roz\u0161i\u0159ov\u00e1ny aby se plugin p\u0159ibl\u00ed\u017eil co nejv\u00edce specifikac\u00edm kompletn\u00edho CSS Flexboxu<\/a><\/strong>.<\/p>\n\n\n\n

\"\"
Uk\u00e1zka horizont\u00e1ln\u00edho zarovn\u00e1n\u00ed sloupc\u016f v sekci<\/figcaption><\/figure><\/div>\n\n\n\n

Uk\u00e1zka pluginu<\/h2>\n\n\n\n
\"\"
Uk\u00e1zka mo\u017en\u00e9 implementace sloupc\u016f, \u0159azen\u00ed a zarovn\u00e1n\u00ed<\/figcaption><\/figure>\n\n\n\n

Pou\u017eit\u00ed pluginu<\/h3>\n\n\n\n

Plugin jsem vyu\u017eil i p\u0159i tvorb\u011b hlavn\u00ed str\u00e1nky m\u00e9ho webu jakubforman.eu<\/a>, plugin mi umo\u017enil vytvo\u0159it Pixel Perfect design d\u00edky tomu, \u017ee jsem dok\u00e1zal zarovnat sloupce do jednotliv\u00fdch stran a to bez vlastn\u00edho CSS.<\/p>\n\n\n\n

\"Instagram<\/figure>\n\n\n\n

Sta\u017een\u00ed pluginu<\/h2>\n\n\n\n

Plugin moment\u00e1ln\u011b nen\u00ed dostupn\u00fd na ofici\u00e1ln\u00ed str\u00e1nce WordPress plugin\u016f, ale \u010dasem se objev\u00ed i tam. Moment\u00e1ln\u011b ho lze z\u00edskat z m\u00e9ho GITu na tomto odkazu https:\/\/github.com\/JayJay666\/section-column-booster\/releases<\/a>, ps: stahujte v\u017edy verzi a aktualizaci prov\u00e1d\u011bjte ru\u010dn\u011b.<\/p>","protected":false},"excerpt":{"rendered":"

Jednoduch\u00fd, ale u\u017eite\u010dn\u00fd plugin pro roz\u0161\u00ed\u0159en\u00ed a lep\u0161\u00ed spr\u00e1vu sloupc\u016f ve WordPress Elementor. P\u0159id\u00e1v\u00e1 funkce vlastn\u00ed \u0161\u00ed\u0159ky sloupc\u016f, \u0159azen\u00ed nebo po\u0159ad\u00ed sloupc\u016f s responzivn\u00edm n\u00e1vrhem.<\/p>","protected":false},"author":1,"featured_media":1363,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,10,24,28,9],"tags":[16,22,21,14,18,19,17,15,20,23,13,12],"_links":{"self":[{"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/posts\/1327"}],"collection":[{"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/comments?post=1327"}],"version-history":[{"count":33,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/posts\/1327\/revisions"}],"predecessor-version":[{"id":1629,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/posts\/1327\/revisions\/1629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/media\/1363"}],"wp:attachment":[{"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/media?parent=1327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/categories?post=1327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakubforman.eu\/en\/wp-json\/wp\/v2\/tags?post=1327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}