Review and Tutorial: Mobirise! A FREE WYSIWYG Responsive website editor is out!

Review and Tutorial: Mobirise! A FREE WYSIWYG Responsive website editor is out!

Designing a website requires an artist to be able to program in multiple languages. That person has to learn multiple languages and frameworks to be able to design like a boss!

Such nonsense! This is 2015 and all you need is the Mobirise software on your desktop and you will be ready to go! Now I should get back to what I do best! I mean writing a tutorial on how to make a webpage using Mobirise.

What this tool does is that it SAVES YOUR TIME by doing the hard work by itself. All you need to do is that after you are done, simply edit the HTML file as per your liking to fine tune it according to your need.

Follow this tutorial and you will get the following benefits:

  1. An HTML file.
  2. Properly written code.
  3. CSS Code.
  4. Plugins required in a seperate folder.
  5. Assets you used in their own respective folder.
  6. RESPONSIVEness
  7. A sweet web page.
  8. You will share 🙂

This is UPDATED for version 2.6 Now lets get started!


Download Mobirise From Here

Mobirise-installation

Now, install it and run.

You will see this.

Mobirise-Default-start-screen

Click the + button and see the sidebar like below.

885

As teh Catz has pointed out, when  you click the + button, a sidebar will EXPAND. Now, we add a MENU.

Mobirise - A WYSIWYG web designign tool

And the added menu will look like this.

Mobirise-menu-added-on-top

Now, lets add some more components, a header, and a footer.

Mobirise-header-footer-added

Now do the following.

  1. In MENU. click icon and then select ANY image. I will be updated in the interface.
  2. In HEADER, click image and change it the same way.
  3. In MENU, click any text, and its options will become visible, like font, size, color and HYPERLINK. you can delete and rename the text as you like.
  4. In Header, click text or BUTTONS and they will be editable.
  5. In footer, everything is editable as stated above.
  6. More components can be added to have a parallax effect. Let me know if I should tell you how to make a parallax effect in Mobirise 1.8.1.

Now, after editing, I got this in like 3 minutes.

116

Now, we publish and look at the files for the designed page. Simply click the “Publish” button and save to a folder in your folder/

Mobirise-publish-project

Done!


Tips

  • The backup files of your Mobirise project are saved in
    C:\Users\USERNAME\AppData\Local\Mobirise.com\Mobirise\projects\project-2015-10-29_232053\assets\images
  • Do not completely rely on Mobirise to do the job for you. I highly recommend making the structure of the website using Mobirise and then fine-tuning the features using your favourite code editor or an IDE.
  • Mobirise seems to have issues with parallax videos. I suggest you watch out and test not only on your local machine, but also on a real server and multiple browsers. Stupid IE5! x(
  • Mobirise can’t do everything, but you can :).

That’s it! You have just created a web page without writing a single line of code. My suggestion is to use this tool to make a template, then grow upon the template. For example, once you have made this, you can use the HTML code and assets in a CodeIgniter project. CodeIgniter is a PHP framework that makes PHP programming very quick and easy.

CodeIgniter 3 Tutorials are HERE

If you liked this tutorial and enjoyed it, then do like and share this page on Facebook, twitter and Reddit. Let me know if there are any problems. If you would like me to write a tutorial for you, then let me know about that. Take care and happy coding!


40 responses to “Review and Tutorial: Mobirise! A FREE WYSIWYG Responsive website editor is out!”

  1. hi, am getting trouble to create log in page and how can i create a e booking website using mobirise.
    Hope my problem will be solved coz i love mobilise for sure.
    thanks.

    • The way I personally use Mobirise, I simply use mobirise to design website. Then manually modify it to my liking. Finally I use CodeIgniter 3 to make server side code.

    • Simply find the location of your mobirise project. Look for index.php or index.html. This will be the root folder of your website. Use FTP or a web interface like CPANEL and upload just as usual. If there is a problem, then let me know, I will make a demonstration of this uploading process by CPANEL.

  2. Things are working now, but I got 2 Qs:

    How do I get the items on the menu blocks to reflect the actual page names on my site? Also, how can I get rid of or change Download button?

    I’ve downloaded the blog template, but exactly how am I supposed to use it?

  3. Hi, Onion
    Nice piece and nice app. Have you cracked how to upload pages to Gdrive WITHOUT having to log in each and every time and get a security code, etc? Takes something away from a great little piece of software for me.

  4. Well, persistence pays off. I figured out how to make the video embedded. Seems to work in preview mode. Won’t hold my breath until I have the pages up.

  5. Overhauling my website and decided to try Mobirise as I liked the ease of building, especially the ability to simultaneously switch between desktop and mobile/tablet. I am having some difficulty with the embed of video from my Youtube channel. It seems as if my choice is between no real embed and jumping right to the Youtube video page or nothing at all. I’ve tried various iterations of Youtube/Mobirise embed but either the page jumps to Youtube or there is no link at all. Any thoughts?

  6. After you have modified some code and published a site, do you still need to execute anything from Mobirise such as scripts etc or is it all self contained in your server so that you have full control of your site?

  7. I have a static classmates site that I’d like to upgrade and Mobirise looks like its the best and easiest way to do it.
    1. Is there a way to import a site created in Dreamweaver?
    2. Can Mobirise translate and takeover the maintenance of my site or will I have to add and re-link hundreds of pictures again in a separate Mobirise site?
    3. How would I handle a template I created for the heading, which appears in every page and also one personal page for each student?
    Thank you

    • Thanks for the comment.

      Mobirise can’t import from dreamweaver, nore it can “re-link” 100s of pics.

      I would recommend CodeIgniter 3 for your project as it is a highly modular MVC framework of PHP. Here, check it out 🙂 blog.codeonion.com/tutorials/codeigniter-3-tutorials/

      I would first make a template in MobiRise, then manually modify it according to your project.

      I hope it helps.

  8. I don’t know where else to turn. I’ve been trying to upload my Mobirise site to my host, but cannot. I put /home/stepancz/public_html into the Path field of Cyberduck, do the FTP, but project.mobirise and the folder of assets are _not_ delivered to public_html. Then I manually move them into public_html, hit the Refresh button, go to the browser, type in http://www.stepanczuk.com but still the “An awesome website is coming soon to this address!” error page comes up. Notice how Mobirise’s FTP lcient doesn’t work either.

    Note Mobilize does not make an index.com file per se.

    My host—siteground.com—has been trying to help me, but cannot.

    Can anyone help me with this FTP problem?

  9. Have you any idea where Mobirise auto saves files? I built a website but then had a computer crash. I had the site published so that part of it’s fine. Problem is, I now need to edit the site but can’t find out where the auto save is (I have backups from before the crash)

    • Thanks for the comment. I looked for hte location and guess what! I found it 😀

      All mobirise projects are located in the USER folder of your windows. Currently, I am using Mobirise 2.6. So the path to my projects is given below.

      C:\Users\codeonion\AppData\Local\Mobirise.com\Mobirise\projects\

      In this path, I have folders
      C:\Users\codeonion\AppData\Local\Mobirise.com\Mobirise\projects\project-2015-10-29_232053
      C:\Users\codeonion\AppData\Local\Mobirise.com\Mobirise\projects\project-2015-11-19_192035

      These are the two projects that I have created in the current instance of my Mobirise usage.

      Moreover, I uninstalled and reinstalled Mobirise multiple times and the projects were not deleted. So I am sure that you can retrieve your old projects from there. The reason is that I see all the assets that I have used in my projects available there.

      I hope this is what you were looking for.

  10. However the only problem now is the ‘contact us’ button does not send email directly to your email address but makes use of ‘formoid’ and the ‘code editor’ once provided in a previous version is no longer available with the latest version??? Makes no sense, now you have to ‘pay’ for an extension in order to manually change coding. I think this is the way this program is going, each version will probably progress until it’s completely a ‘pay to use’ program…..it’s all downhill from here. 🙁

    • See, on the LEFT sidebar, click on “Sites”. On the extended LEFT sidepanel, under the big “+” will be two options.

      1. “Create a new site”
      2. “Import Site”

      What you are looking for is “Import Site” :D. I hope this helps.

  11. this is the worst ever don’t waste your time, lost 2 days of work on this. It crashes and does not save

    • Ahhh…everything is working perfectly now with the use of the latest version 2.0! Sure saves lots of time then creating your own ‘responsive’ site!! I’ve created sites by coding, also from using template sites but MOBIRISE is by far the quickest and easiest way to go….unless you want to spend months, days and hours creating a site from scratch.

  12. Okay, deleted previous version, downloaded new v.9.1 … when opened all my previous layouts still there (shouldn’t they be gone)? Tried to ‘publish’ all the same now through v.9.1 but it appears to ‘hang’ during the exporting function? Does not get very far at all and hangs at ‘assets/images/img-#’ ?

    • This is so bad. MobiRise should communicate with its audience. In my attempts to export, it never hanged. even exported parallax scroll supporting pages with background videos. Even if it doesn’t work, it exports successfully. But I can’t say what is happening when you do it. Lack of support is shameful from the MobiRise devs.

      • All I ever get is a reply to ‘download the newest version’, which I’ve done and always the same messed up results yet ‘preview in browser’ work perfectly? Check it out and I’m sure you will readily see the errors (image misaligned, text misaligned, spacing drops out and google map section appears completely blank) … http://www.michaelwalkeradv.com/SITE/index.html

  13. Manual editing?…never looked into that since Mobirise is supposed to appear as it does in the pre-publish preview….but maybe I should in order to try and solve the issues I’m having. Sort of takes away from the ‘ease and convenience’ of using it though, might as well go back to creating a site from scratch? I’ll report back if I find anything. As mentioned the frustrating thing about Mobirise is complete lack of support and no resource such as help files or guide to resort too. so far.Thanks for the input!

  14. currently using mobirise on our website. only draw back i faced was that there is no server end for the email creation. How do we add the email in the contact form ? Really simple to use and manage otherwise.

    • There are some things which may not be possible with MobiRise. Like adding a form. But as for adding E-mail, when you select the e-mail text, a link button may appear (as in the footer sections). Then you can add an E-mail address which will work. Alternatively,

      Send Mail

      will do the trick. But That will have to be done manually.

  15. Have attempted Mobirise (latest version 1.8.1) and works great in ‘preview’ mode but everytime I upload and view in browser it does not appear correctly? Have emailed mobirise but they just keep telling me to try other browsers (same results!) or try newest version of mobirise (which I have). Great and easy to use program but no matter what I cannot get it to appear correctly when viewing online? Came across your site and wondering if you we’re aware of any specific solution or cause as to why Mobirise might not be appearing correctly when uploaded to web (yet ‘previews’ perfectly, once active x control is allowed)?

    • Thank you very much for the comment!

      How exactly is it not appearing correctly?
      Before reading your comment, my website http://www.codeonion.com did not exist. So to actually test Mobirise, I used the same “project” that I used in writing this tutorial and completed my website. Now if you visit, it seems to be working. I know the website looks like crap, but it is the same as in Mobirise application. Also, I am using Chrome browser and I didn’t install any active x control. To be honest, I simply downloaded, installed, and theoretically, made the project, published and uploaded on my server. And now you see the result.

      Let me know if it was helpful. If you think my tutorial was lacking, I can update it with more details. Just tell me what 😀
      Don’t forget to like my Facebook Page and Twitter

      Kind regards,
      Codeonion

      • Hi, thanks for reply….here is how it looks in a browser. This is a test site only that I created in trying out mobirise. I think you’ll notice what is not appearing correctly if you take a look? http://www.michaelwalkeradv.com/SITE/index.html

        I do get an ‘active x’ popup to select in order to ‘preview’ it and then appears looking perfect, but once loaded up to the actual web and viewed online then the site just messes up? ( i.e., Home page / image / navigation links messed up, elsewhere images drop out or do not appear complete and some bits of text not aligned or spaced incorrectly above and below paragraphs?)

        Thanks again
        Bill

        • I would delete the top two sections and remake them to see if the problem remains. Unless ofcourse if you have manually edited the index.html, then things may be different.

          I believe, you added a menu and then the header, which should work fine. I just tested, the map works fine on my browser. Videos seem to have some issue. I have been trying to run video from youtube and then vimeo. There are some issues. Hopefully they will resolve. Btw, have you tried their app? It might possibly fix something. Try to import the project file if possible.

        • Thanks for reply, I now see there’s yet another new version of Mobirise! Guess I’ll start all over again and see if I can finally get this thing working properly? Maybe the problem is with the images themselves. You mentioned an ‘app’ and also ‘importing’ the ‘project file’? I’m assuming that’s the .json file which I did include upon uploading or are you not supposed to? Appreciate your help.

        • If you use an android phone, then here is a link to the Mobirise app link.

          Also, I just checked, it is not possible to “import” the projects. So I was wrong above :P.

          I did not include the .json file to my server. My server has an index.html and /asset/ folder. Other than that, nothing has been touched by me. It can work without it. The .json file is meant to be usable with the mobirise application only.

        • Thanks! I removed the .json file thinking perhaps that was causing the problem but still the same results. I’ll just keep trying whatever to see if I can get it to work properly. Thanks for your help, hopefully Mobirise will provide a ‘support forum’ soon if they want to make a success of this program.

        • Okay deleted my mobirise v.1.8 and downloaded v.1.9 to see if this makes any difference … however the v.1.9. site opens up with all pre-existing layout pages created in v.1.8? Is this normal? How do I start with a completely blank slate? Have tried three various versions now and still the same problems of certain images or layout sections not appearing correctly …. and they have no online support available.

        • Well, I find it nice that it loads up the previous projects that you created. Some programs like Android Studio delete stuff like templates when you update (forcing users to reinstall templates).

          I can get an empty template by manually deleting the templates and then cloning it whenever I need it. It is awkward, but it has worked for me.

          Bill, have you done manual editing of the html/css files?

          As for online support, they should take interest in their product if they want it its audience to grow. MobiRise is an amazing tool. A little polish and it can do miracles for us designers and developers.

Leave a Reply to Ojua Barong Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: