{"id":2351,"date":"2015-04-18T08:17:19","date_gmt":"2015-04-18T08:17:19","guid":{"rendered":"http:\/\/musilda.cz\/?p=2351"},"modified":"2015-04-18T08:17:19","modified_gmt":"2015-04-18T08:17:19","slug":"visual-composer-a-tvorba-stranky-bez-nutnosti-kodovani","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/visual-composer-a-tvorba-stranky-bez-nutnosti-kodovani\/","title":{"rendered":"Visual Composer a tvorba str\u00e1nky bez nutnosti k\u00f3dov\u00e1n\u00ed"},"content":{"rendered":"

Pokud jste se ji\u017e setkali s v\u00fdrazem „page builder“ a nev\u00edte, co si pod t\u00edm p\u0159edstavit, je tento \u010dl\u00e1nek ur\u010den\u00fd pr\u00e1v\u011b v\u00e1m. P\u0159edstav\u00edme si nejroz\u0161\u00ed\u0159en\u011bj\u0161\u00ed a nejzn\u00e1m\u011bj\u0161\u00ed plugin pro tvorbu str\u00e1nek, bez nutnosti k\u00f3dov\u00e1n\u00ed – Visual Composer.<\/p>\n

V p\u0159\u00edpad\u011b, \u017ee v\u00e1m jeho jm\u00e9no nic ne\u0159\u00edk\u00e1, jde o nejprod\u00e1van\u011bj\u0161\u00ed WordPress plugin na CodeCanyon, co\u017e je online tr\u017ei\u0161t\u011b s pluginy. K datu publikace \u010dl\u00e1nku m\u00e1 ji\u017e 66 350 prodej\u016f a proto\u017ee je velmi \u010dasto p\u0159id\u00e1v\u00e1n do pr\u00e9miov\u00fdch \u0161ablon, jako jejich sou\u010d\u00e1ts, bude po\u010det nainstalovan\u00fdch plugin\u016f p\u0159esahovat 100 tis\u00edc. Visual Composer m\u016f\u017eete naj\u00edt zde.<\/a><\/p>\n

Co Visual Composer um\u00ed?<\/h3>\n

Jak ji\u017e n\u00e1zev napov\u00edd\u00e1, plugin umo\u017e\u0148uje vizu\u00e1ln\u00ed uspo\u0159\u00e1d\u00e1n\u00ed str\u00e1nky a to bez nutnosti k\u00f3dov\u00e1n\u00ed. Je to pravda jen \u010d\u00e1ste\u010dn\u011b, proto\u017ee jste v\u017edy odk\u00e1z\u00e1ni na ji\u017e p\u0159eddefinovan\u00e9 prvky, ale na\u0161t\u011bst\u00ed je tolik roz\u0161\u00ed\u0159en\u00ed, \u017ee si za p\u00e1r dolar\u016f po\u0159\u00edd\u00edte v\u0161e co pot\u0159bujete. A pokud ne, lze pom\u011brn\u011b jednodu\u0161e dopl\u0148ky doprogramovat.<\/p>\n

Pou\u017eit\u00ed Visual Composeru<\/h3>\n

Po instalaci pluginu a vytvo\u0159en\u00ed str\u00e1nky, na kter\u00e9 budete plugin zkou\u0161et, se v\u00e1m zobraz\u00ed str\u00e1nka, pouze s jednoduch\u00fdm obsahem. M\u016f\u017ee vypadat t\u0159eba takto:<\/p>\n

\"blankpage\"<\/a><\/p>\n

V adminstraci str\u00e1nky, nad klasick\u00fdm editorem se zobraz\u00ed dv\u011b tla\u010d\u00edtka, jen\u017e v\u00e1m umo\u017en\u00ed p\u0159epnout editor do Visual m\u00f3du. V tuto chv\u00edli se budeme zab\u00fdvat Backend editorem.<\/p>\n

\"buttons\"<\/a><\/p>\n

Po p\u0159ekliknut\u00ed se skryje klasick\u00fd editor a zobraz\u00ed se n\u00e1m plocha, na kter\u00e9 budeme str\u00e1nku „skl\u00e1dat“.<\/p>\n

\"visual-editor\"<\/a><\/p>\n

Jak m\u016f\u017eete vid\u011bt, m\u00e1te ji\u017e p\u0159ipravenou \u0161edou plochu, v kter\u00e9 jsou ikonky, jejich\u017e \u00fa\u010del je z\u0159ejm\u00fd. Tu\u017eka slou\u017e\u00ed k \u00faprav\u011b elementu, ko\u0161, k jeho odstran\u011bn\u00ed. V tuto chv\u00edli \u0161ediv\u00fd box prezentuje oblast \u0161irokou 100%, do kter\u00e9 m\u016f\u017eete vkl\u00e1dat dal\u0161\u00ed elementy. Tak m\u016f\u017eete u\u010dinit pomoc\u00ed velk\u00e9ho plus, vedle loga Visual Composeru, nebo pomoc\u00ed pluska urost\u0159ed \u0161ediv\u00e9 plochy. Tu budeme ozna\u010dovat jako row. Po kliknut\u00ed na plus se n\u00e1m zobraz\u00ed tato nab\u00eddka:<\/p>\n

\"visual-elements\"<\/a><\/p>\n

Je zde k dispozici cel\u00e1 \u0159ada element\u016f a jsou rozd\u011bleny do n\u011bkolika kategori\u00ed, pro lep\u0161\u00ed orientaci. Dle toho, jakou \u0161ablonu, \u010di pluginy roz\u0161i\u0159uj\u00edc\u00ed Visual Composer pou\u017e\u00edv\u00e1te, m\u016f\u017ee se nab\u00eddka li\u0161it. Na \u0161ablon\u011b, kde si tento plugin p\u0159edstavujeme, vypad\u00e1 nab\u00eddka takto:<\/p>\n

\"visual-elements-x\"<\/a><\/p>\n

V podstat\u011b jde o stejnou nab\u00eddku, ale nap\u0159\u00edklad ROW, je zde p\u0159ejmenov\u00e1no na CONTENT BAND.<\/p>\n

Vlo\u017een\u00ed obsahu<\/h2>\n

Pokud klikneme na p\u0159id\u00e1n\u00ed row, zobraz\u00ed se n\u00e1m v editoru dal\u0161\u00ed \u0161ediv\u00fd box, pro um\u00edst\u011bn\u00ed obsahu, ale str\u00e1nka zat\u00edm nic neobsahuje.<\/p>\n

\"empty-rows\"<\/a><\/p>\n

Klikneme tedy na plus uprost\u0159ed row, do kter\u00e9ho chceme p\u0159idat obsah a vybereme z nab\u00eddky text. Zobraz\u00ed se n\u00e1m n\u00e1sleduj\u00edc\u00ed popup dialog:<\/p>\n

\"text-element\"<\/a><\/p>\n

Vlo\u017e\u00edme t\u0159eba lorem ipsum, klasickou kod\u00e9rskou berli\u010dku a v editoru se\u00a0dopln\u00ed box s textem:<\/p>\n

\"row-with-text\"<\/a><\/p>\n

 <\/p>\n

A jak to vypad\u00e1 na str\u00e1nce samotn\u00e9?<\/p>\n

\"page-with-text\"<\/a><\/p>\n

\u0158\u00edk\u00e1te si asi, \u017ee zat\u00edm nic moc, toto dok\u00e1\u017ei ud\u011blat pomoc\u00ed textov\u00e9ho editoru a nepot\u0159ebuji k tomu plugin. My v\u0161ak d\u00edky Visual Composeru, m\u016f\u017eeme s obsahem pracovat daleko v\u00edce. V druh\u00e9m boxu najedem kurzorem nad tuto z\u00e1lo\u017eku:<\/p>\n

\"edit-rows\"<\/a><\/p>\n

a vybereme z\u00e1lo\u017eku, rozd\u011blenou na dv\u011b poloviny. Row se n\u00e1m rozd\u011bl\u00ed na dva polovi\u010dn\u00ed box, do kter\u00fdch si zkop\u00edrujeme box s textem.<\/p>\n

V\u017edy, kdy\u017e najedete kurzorem nad obsahov\u00fd box, zobraz\u00ed se nab\u00eddka s mo\u017enost\u00ed drag and drop p\u0159esunu (tahem my\u0161i), editace prvku, mo\u017enost klonov\u00e1n\u00ed a ko\u0161. Zkop\u00edrujte tedy text dvakr\u00e1t a p\u0159et\u00e1hn\u011bte jej do dvou polovi\u010dn\u00edch box\u016f. V\u00fdsledek by m\u011bl vypadat n\u011bjak takto:<\/p>\n

\"full-and-half-rows\"<\/a><\/p>\n

A na str\u00e1nce samotn\u00e9 se n\u00e1m vytvo\u0159ily dva sloupce textu:<\/p>\n

\"page-with-rows\"<\/a><\/p>\n

\u00a0Vyu\u017eit\u00ed v\u00edce prvk\u016f<\/h3>\n

Proto\u017ee tento \u010dl\u00e1nek m\u00e1 p\u0159edstavit co se s Visual Composerem d\u00e1 vytvo\u0159it, nebudu zde popisovat v\u0161echny elementy, ostatn\u011b si v\u0161e m\u016f\u017eete vyzkou\u0161et.<\/p>\n

Velmi jednodu\u0161e lze skl\u00e1dat str\u00e1nku z r\u016fzn\u00fdch prvk\u016f. nap\u0159\u00edklad \u010dty\u0159i boxy s ikonou a nadpisem mohou vypadat takto:<\/p>\n

\"boxes-admin\"<\/a><\/p>\n

\"boxes-front\"<\/a><\/p>\n

Celkov\u011b je pr\u00e1ce s Visual Composerem velmi intuitivn\u00ed.<\/p>\n

Frontend editor<\/h3>\n

Na za\u010d\u00e1tku \u010dl\u00e1nku jsem zmi\u0148oval, \u017ee nad editorem m\u00e1te k dispozici dv\u011b tla\u010d\u00edtka. Jedno je pro backend editor a druh\u00e9 je pro frontend editor. Osobn\u011b jsem si nikdy moc na frontend editor nezvykl, ale je to velmi zaj\u00edmav\u00fd prvek.<\/p>\n

Po kliknut\u00ed na tla\u010d\u00edtko se v\u00e1m str\u00e1nka na\u010dte tak jak se zobrazuje p\u0159\u00edmo na webu a p\u0159i najet\u00ed my\u0161\u00ed na prvek, se v\u00e1m zobraz\u00ed mo\u017enost editace. V n\u00e1sleduj\u00edc\u00edch obr\u00e1zc\u00edch je vid\u011bt postup rozd\u011blen\u00ed textu na dva sloupce, p\u0159\u00edmo na frontendu webu:<\/p>\n

\"front-edit\"<\/a><\/p>\n

\"edit-rows-front\"<\/a><\/p>\n

\"edited\"<\/a><\/p>\n

Jak v\u00edd\u00edte, je mo\u017en\u00e9 upravovat ka\u017ed\u00fd prvek, jen\u017e byl pomoc\u00ed frontend editoru vytvo\u0159en. Pokud si pr\u00e1ci s Visual Composerem zvyknete, bude to siln\u00fd pomocn\u00edk.<\/p>\n

Z\u00e1pory Visual Composeru<\/h2>\n

Z cel\u00e9ho \u010dl\u00e1nku vyzn\u00edv\u00e1, \u017ee plugin je skoro dokonal\u00fd, ale ka\u017ed\u00e1 v\u011bc m\u00e1 svou odvr\u00e1cenou str\u00e1nku. I Visual Composeru to jsou podle mne dv\u011b v\u011bci:<\/p>\n

1. Omezen\u00fd po\u010det prvk\u016f, kter\u00e9 mus\u00ed b\u00fdt nastylov\u00e1ny. Sice je mnoho dopl\u0148k\u016f, ale st\u00e1le jste omezeni jen na ur\u010ditou mno\u017einu shortc\u00f3d\u016f.<\/p>\n

2. Zm\u011b\u0165 shortcod\u016f, kter\u00e9 z\u016fstanou v obsahu po odinstalov\u00e1n\u00ed pluginu – v podstat\u011b to znamen\u00e1, \u017ee jste na pluginu z\u00e1visl\u00ed. Pokud jej odinstalujete, z\u016fstane v\u00e1m v editoru toto:<\/p>\n

\"shortcodes\"<\/a><\/p>\n

Z\u00e1v\u011br<\/h3>\n

Plugin Visual Composer je skv\u011bl\u00fd. J\u00e1 osobn\u011b jsem si ho obl\u00edbil, ale je ot\u00e1zka, zda s pokra\u010duj\u00edc\u00edm v\u00fdvojem dal\u0161\u00edch visual plugin\u016f neztrat\u00ed pod\u00edl na trhu. Za\u010d\u00ednaj\u00ed se objevovat dal\u0161\u00ed page buildery a trend je takov\u00fd, \u017ee \u010d\u00e1st jich bude zcela zdarma.<\/p>\n

V\u00fdhodou je v\u0161ak mo\u017enost Visual Composer roz\u0161i\u0159ovat a vkl\u00e1dat si do nab\u00eddky element\u016f sv\u00e9 vlastn\u00ed prvky.<\/p>\n

V n\u011bkter\u00e9m z dal\u0161\u00edch \u010dl\u00e1nk\u016f se pod\u00edv\u00e1me na dal\u0161\u00ed z page builder\u016f, tentokr\u00e1t na free plugin.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Pokud jste se ji\u017e setkali s v\u00fdrazem „page builder“ a nev\u00edte, co si pod t\u00edm p\u0159edstavit, je tento \u010dl\u00e1nek ur\u010den\u00fd pr\u00e1v\u011b v\u00e1m. P\u0159edstav\u00edme si nejroz\u0161\u00ed\u0159en\u011bj\u0161\u00ed a nejzn\u00e1m\u011bj\u0161\u00ed plugin pro tvorbu str\u00e1nek, bez nutnosti k\u00f3dov\u00e1n\u00ed – Visual Composer. V p\u0159\u00edpad\u011b, \u017ee v\u00e1m jeho jm\u00e9no nic ne\u0159\u00edk\u00e1, jde o nejprod\u00e1van\u011bj\u0161\u00ed WordPress plugin na CodeCanyon, co\u017e je online<\/p>\n","protected":false},"author":1,"featured_media":2353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,31],"tags":[398],"class_list":["post-2351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-wordpress-pluginy","tag-visual-composer"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2351"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=2351"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2353"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}