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

Mobirise - A WYSIWYG web designign tool

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 [edsanimate animation=”tada” infinite_animation=”yes” animate_on=”” ]HERE[/edsanimate]

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!

 

Learn how to get rid of the “You may use these HTML tags and attributes” from WordPress

 

WordPress is amazing and facilitates bloggers in every aspect. Everything can be adjusted to personal taste. But there is one thing and many people including myself would like to be removed from their pages.

If you look at the bottom of your wordpress pages, then just below the comments box, you will see this.

[edsanimate animation=”tada” delay=”12″ infinite_animation=”yes” animate_on=””]

The HTML suggestions concerning the comment text

[/edsanimate]

 

With or without the highlighter and regardless of the theme selected, this looks like the HTML code itself. It is just like handing over the engine and tires to the driver when he comes to buy a car. Lets get rid of that!

If we look at the code of my page, it is easy to spot the CLASS and ID of the HTML element responsible for that text.

[edsanimate animation=”bounceInUp” delay=”1″ duration=”3″ infinite_animation=”no” animate_on=”scroll”]

tags2

[/edsanimate]

Both the ID and the CLASS of that element is form-allowed-tags. In CSS, we can make an HTML element invisible using the following code.

Now, we will simply add our CSS to the wordpress using the following menu.

[edsanimate animation=”flip” delay=”2″ infinite_animation=”no” animate_on=”scroll”]

Click to enlarge!
Click to enlarge!

[/edsanimate]

Basically, click Appearance and then go to Edit CSS. Then paste your the following code and then click Save Stylesheet.

Now if you visit your page again, you will see that is is gone. The “You may use these HTML tags and attributes” message used to be at the highlighted section below.

[edsanimate animation=”zoomInRight” delay=”2″ infinite_animation=”no” animate_on=”scroll”]

You may use these HTML tags and attributes is gone as highlighted
You may use these HTML tags and attributes is gone as highlighted

[/edsanimate]

Congratulations! now your blog looks better and your comments section will be pleasant 🙂

[edsanimate animation=”shake” infinite_animation=”yes” animate_on=”scroll”]

And please, do SHARE! 😀

[/edsanimate]