Mobirise návod - nástroj na rýchlu tvorbu webov

Mobirise je zaujímavý a z veľkej časti bezplatný softvér na tvorbu jednoduchých, no graficky príťažlivých webov. Je ideálny na tvorbu „Landing Page“, teda jednostránkových webov s obsahom na jednu dlhú stránku. Mobirise je vhodný aj na tvorbu menších webov, ktoré majú zhruba do 10 podstránok. Výhoda Mobirise spočíva najmä v tom, že exportuje stránku do HTML kódu a javascriptov. Tieto súbory potom stačí iba prekopírovať na hosting, nestaráte sa o databázu, inštaláciu servera, prihlasovacie mená atď. Preto často používam Mobirise na tvorbu webov namiesto Wordpressu.

Obsah článku

• O Mobirise - úvod článku
• Výhody a nevýhody Mobirise
• Ako začať s tvorbou webov v Mobirise
• Postup práce v Mobirise
• Download Mobirise

Výhody a nevýhody Mobirise

Zhrnutie Výhod Mobirise

• Jednoduchý a prehľadný softvér
• Softvér sa inštaluje priamo do PC (Windows, Mac)
• Výborný na tvorbu landing page a malých webov
• Weby sú ihneď responzívne, teda často dobre vyzerajú pri prehliadaní na PC, aj v smartfóne
• Vytvára HTML Export kódu, ktorý si iba nakopírujete na hosting
• Výsledný web má veľkosť iba zopár MB (Väčšinu veľkosti tvoria obrázky)
• Neriešite žiadne prihlasovačky administrátorov, heslá, databázy, či zložité inštalácie
• Mobirise web vytvoríte pomocou vzájomného kombinovania blokov, podobne ako v iných softvéroch
• Web v Mobirise urobíte aj bez platenej licencie Mobirise
• Neplatíte žiadne mesačné poplatky, platforma vás nevydiera, že ak nezaplatíte, zruší vám web
• Za už vyexportované weby neplatíte. Výsledný HTML kód iba prekopírujete na webhosting

Zhrnutie nevýhod Mobirise

• Nečakajte od neho nástroj na tvorbu blogu. Mobirise NIE JE blogová platforma
• Neponúka 100% flexibilitu
• Potrebujete vedieť, ako Mobirise nastaviť a používať
• Mobirise sa v posledných rokoch iba veľmi málo vyvíja

Základné tipy pre Mobirise

• Držte sa iba základnej šablóny MOBIRISE 5
• Platenú verziu obvykle nepotrebujete
• Prejdite si body v návode nižšie, aby ste nastavili všetko k vášmu webu

Výber témy Mobirise 5

• Mobirise ponúka dve základné šablóny, konkrétne
• MOBIRISE 5 a MOBIRISE AMP
• Tieto šablóny sú najviac flexibilné, aj najviac dokončené. Dokážete si v nich nájsť takmer všetky potrebné stavebné bloky pre grafiku
• V rámci platených verzií Mobirise ponúka aj iné šablóny. Nie sú však nejako zaujímavé. Najväčší rozdiel medzi platenými šablónami a základnou MOBIRISE 5 je vo farbe, veľkostí písiem, použitých fontoch (písmach). A všetky tieto časti si viete nastaviť aj v základnej Mobirise 5
• Platených tém ponúka Mobirise celé desiatky. Tieto témy obsahujú aj bloky s mierne iným layoutom. Ide však o zanedbateľnú výhodu. Zároveň veľa z platených tém je „nedokončených“, chýbajú im rôzne používané bloky, či nastavenia blokov známe zo základnej témy Mobirise 5
• Preto ak chcete používať platené témy, vždy nakoniec i tak narazíte na problém

Potrebujem Platený Mobirise?

• Obvykle Nie (Najmä ak tvoríte iba jednoduché weby)
• Platený Mobirise má iba dve významné výhody
• HTML code editor – editor vbudovaný v Mobirise, vďaka ktorému máte prístup k celému HTML kódu stránky
• HTML code block – blok, do ktorého môžete vložiť akýkoľvek, aj vlastný HTML kód

Ako začať s tvorbou webov v Mobirise?

Získajte predstavu aký web chcete

• Pozrite si rôzne iné weby a rozvrhnite si, čo na vašom webe chcete mať
• Rozdeľte si web na Grafickú časť (Farby, písmo, vzhľad) a Obsahovú časť (Stránky, podstránky, a obsah článkov)
• KRESLITE SI!!!
• VYUŽÍVAJTE PERO A PAPIER!!!
• Prečo navrhnúť prvé časti na papieri? Doteraz neexistuje nič flexibilnejšie ako pero a papier. Preto kreslením dokážete navrhnúť vzhľad, čo na webe chcete mať. Neskôr tieto papiere spoznámkujete a vytvoríte si z nich podklady pre ceký web.
  

Tipy pre obsahovú časť

• Ujasnite si, či chcete jednostránkový web (One-Page), alebo viacstránkový (s podstránkami)
• Navrhnite si, na ktorej stránke by mal byť aký obsah
• Neskôr si podklady pre web, najmä štruktúru článkov aj obsah článkov, prepíšete do wordu
• Zamerajte sa na hlavné časti, a to:
• Zoznam článkov / stránok
• Hlavná myšlienka a hlavné body každého článku
• Text článku
• Takýto podklad už viete poslať webovému vývojárovi, alebo vytvoriť si web sami

Tipy pre grafickú časť

• Pozrite si na internete, aké weby sa vám páčia a inšpirujte sa ich dizajnom
• Farby si vyberajte už pri prvom návrhu vašej prvej stránky
• Pri fontoch a textoch sa držte tých základných a otvorených fontov. Skontrolujte si, či vami použitý font má aj Slovenskú / Českú diakritiku!!!
• Jednotlivé grafické bloky aj s textami budete často meniť - pôjde o hravú prácu
• Na konci si vyberiete vizuál stránky, ktorý sa vám najviac páči
• Pre kontrolu grafickej časti si vašu stránku pozrite aj na počítači, aj na mobile

Ako má vyzerať názov a link stránky

• Pri názve máte flexibilitu a môžete používať diakritiku
• Vytvorte názov stránky, aby zaujal (Ako použiť xy), alebo bol jasný (Kontakt)
• Pri názvoch linkov sa držte základného webového štandardu
• Konkrétne pravidlá:
• Vždy používajte iba malé písmená v názve samotného webu
• Namiesto medzier použite iba pomlčky (tento znak: - )
• Vyhnite sa iným znakom, napríklad podtržník (tento znak: _ )
• Nepoužite diakritiku. Držte sa iba základných anglických písmen
• Váš link bude vyzerať napríklad:
• mobirise-navod.html
• ako-vytvorit-web-v-mobirise.html
• Následne tento článok nájdete na webe ako
• vasweb.sk/mobirise-navod.html
• www.bluenumbers.sk/mobirise-navod.html
• Určite sa vyhnite generickým názvom linkov, ako napríklad page1
  

Tipy pre prerábanie webov z inej platformy

• Ak už máte web v inej platforme (Napr. Wix, Wordpress), uložte si jednotlivé stránky do počítača a využite ich ako podklad k tvorbe nového webu
• Vypýtajte si spätnú väzbu na váš pôvodný web. Rýchlejšie tak nájdete, čo môžete v druhej „Mobirise verzii“ vylepšiť
• Viete ušetriť čas pri tvorbe webu napríklad tým, že viete využiť farebnosť, rozloženie, aj typy písma starého webu. Veľa času ušetríte aj tým, že texty vášho starého webu nepotrebujete prepisovať. Budete ich iba kopírovať

Zlaté tipy:

• Vždy si pýtajte spätnú väzbu na váš web - ideálne od viacerých používateľov
• Váš web má PREDÁVAŤ!!!
• Preto predáva ten web, ktorý sa páči iným - iba málokedy predáva web, ktorý sa páči (iba) vám
  

Postup práce v MOBIRISE

Prvé kroky

• Nainštalujte si Mobirise softvér
• Pre prvý web si vyberte tému MOBIRISE 5
• Ako základný vizuál stránky si viete vybrať buď úplne prázdnu stránku, alebo prednastavené rozloženia na Mobirise 5 téme, ako Finance, Fotography, a iné rozloženia
• Začnite tvorbou prvej stránky – Hlavnej stránky – HomePage
• Keď využijete jedno z prednastavených nastavení, pozrite si, ktoré z blokov využijete

Výstavba prvej stránky

• Predpokladám, že už máte predstavu, ako má vyzerať vaša prvá stránka
• Pozrite si možnosti, ako prehadzovať poradie blokov medzi sebou
• Bloky z prednastavených tém si preusporiadajte
• Rozdeľte si bloky na
• Prvé budú bloky, ktoré použijete na začiatok vašej stránky
• Nižšie budú bloky, ktoré použijete na neskorších častiach vašej stránky
• Úplne naspodku budú bloky, ktoré ste našli ako použiteľné, a radi by ste ich využili na iných stránkach vášho webu
• Nechajte si na stránke aj bloky, ktoré sú dostatočne flexibilné, viete na nich vypnúť rôzne prvky (Napr. Nadpisy, Podnadpisy, Buttons, Ikony) a preto viete ich použiť aj v iných častiach webu
• Najpoužívanejšie bloky si uložte ako custom user block (Vaše obľúbené bloky), aby ste si ich vedeli ľahko vložiť
• Pre zvyšné bloky je tu DELETE

Tip z praxe:

• Vytvorte si aj jednu stránku ALL BLOCKS, kde si vložíte všetky zaujímavé bloky vášho webu
• Táto stránka môže byť kópia vašej prvej HomePage, kedy si vašu HomePage vytvoríte na ostrú verziu bez zbytočných blokov, a stránku ALL BLOCKS
  

Zoznamy najpoužívanejších blokov sú:

• ÚVOD STRÁNKY (Má obrázok, nadpis, a obvykle dve tlačidlá)
• NADPIS (Blok iba s nadpisom a podnadpisom)
• TEXT S NADPISOM (Základný textový blok, do ktorého budete dávať články)
• TLAČIDLÁ (použiteľné aj zvlášť mimo iných blokov)
• STĹPCE S IKONAMI (ideálne aby ste vedeli zmeniť počet stĺpcov a vizuál ikon)
• OBRÁZKOVÉ BLOKY
• BLOKY S ODKAZMI na iné stránky (Aby sa váš návštevník vedel ľahko prekliknúť na iné časti webu)
• MENU (Menu ako obsah stránky, je rovnaké na každej stránke, nahadzujete iba raz)
• FOOTER (Úplný spodok stránky, je rovnaký na každej stránke, nahadzujete iba raz ideálne ako poslednú časť webu)

Export prvej stránky

• Celú stránku si vyexportujte na disk (IBA VÁŠ VLASTNÝ DISK), vyhnite sa exportu na Mobirise server, či na FTP.
• Otvorte si vašu stránku z vášho disku cez prehliadač
• Pozrite si, ako vaša stránka vyzerá pri rôznej veľkosti okna prehliadača
• Na FTP budete exportovať stránku až vtedy, keď bude buď úplne, alebo celkom hotová, a budete potrebovať spätnú väzbu

Grafika prvej stránky

• Výber farieb – nájdete v Settings celej stránky
• Výber fontov – tiež nájdete v Settings celej stránky
• Úprava medzier medzi blokmi – Nájdete ju v nastaveniach každého bloku

Tvorba ďalších stránok

Postupne si podľa plánu vášho webu vytvoríte aj ďalšie stránky

• Pre urýchlenie tvorby využite možnosť ukladania user blocks, teda vašich vlastných blokov
• Nepoužívané user blocks zmažte
• Menu sa vám vždy nakopíruje ako prvý blok na každej stránke
• Footer (päta stránky) sa vám tiež nakopíruje na každú stránku, ale často nie ako posledný blok stránky. Preto ho budete musieť pravidelne prehadzovať ako posledný blok. Môžete sa tomu vyhnúť tak, že časť Footer stránky urobíte ako úplne poslednú časť webu

Dokončenie stránky

Posledné časti pred odovzdaním stránky sú:

• Skontrolovanie a prepísanie všetkých názvov stránok do dobre znejúceho formátu (aby daný človek chcel na článok kliknúť
• Skontrolovanie a prepísanie všetkých názvov linkov stránok do webového formátu – teda všetky písmená malé, a namiesto medzier pomlčky (napr. navod-mobirise, ako-vytvorit-web-v-mobirise)
• Skontrolovanie prelinkovania
• všetkých linkov a názvov v Menu
• odkazov na stránky v článkoch
• odkazoch v časti FOOTER (Päta stránky)
• Pridanie FAVICON (malá ikona stránky, ktorá sa vám v prehliadači objaví v riadku úplne naľavo od adresy článku)
• Pridanie GOOGLE ANALYTICS kódu (aby ste vedeli sledovať návštevnosť webu. Kód pridáte v nastaveniach)
• Pridanie COOKIE BAR (Že využívate cookies, opäť v nastaveniach)
• Pridanie GDPR BAR (Ak potrebujete)

Export dokončenej stránky

• Aby ste mohli stránku meniť, využite export stránky cez MOBIRISE nastavenia s názvom EXPORT PAGE
• Takýto export obsahuje iba súbor s príponou .mobirise a priečinok assets, kde sa nachádzajú najmä obrázky
• Tento export stránky následne viete prekopírovať a upravovať aj v iných počítačoch

Upload na web

Export Mobirise vytvorí súbory

• HTML kódy stránok aj s názvami stránok podľa linkov
• Priečinok ASSETS so skriptami, obrázkami, a inými nastaveniami stránky

Následné kroky:

• Všetky tieto súbory si viete prekopírovať z disku na váš webhosting, často cez grafické menu správy súborov od vášho webhosting poskytovateľa
• Tieto súbory si viete prekopírovať aj priamo použítím FTP pripojenia. Vtedy potrebujete nastaviť vaše FTP propojenie na hosting
• Pre kontrolu webu môžete ale nemusíte vložiť váš web aj na mobirise server
• Skontrolujte si grafiku webu, ako vyzerá na počítači aj mobile

Download Mobirise

Základnú aktualizovanú verziu si môžete stiahnuť z oficiálnej stránky:

• https://mobirise.com/

Niekedy môžete potrebovať stiahnuť si staršľie verzie Mobirise.

• https://mobirise.freedownloadscenter.com/windows/old-versions/

Autor: Róbert Ďurec

Editácia: Tím BlueNumbers

Späť na hlavnú stránku BlueNumbers