How To Create A Code Free Web Page in Mobirise

of 08

How To Create A Code Free Web Page in Mobirise

The final project is shown in the browser
Mobrise is a rather robust web design tool that reduces site creation to a drag and drop process.

Over the past few years a new genre of web tool has appeared. These tools assume you have rudimentary web design skills and attempt to provide you with a “code free” approach to building web sites that look just as good on the desktop as they do on a mobile device. One of the key issues for me has always been the sites produced using these tools have a sort of “generic” look to them. Even using the templates that come packaged with these applications present one with the temptation to simply fill in the boxes and the result is these projects all wind up looking like the template. There is very little opportunity or incentive for a more personal look. Which brings me to Mobirise.

Mobirise, which I reviewed here a couple of months ago, is a drag and drop visual editor available for the  OS X, Windows, and Android platforms. Best of all, Mobirise is based on a Retina ready, drag and drop development model. Built on Bootstrap 3, one of the most popular responsive HTML, CSS, and JavaScript frameworks available, the application’s user interface lets you select various types of “blocks”, place them on pages, and then customize them. Best of all it is visual.

Let’s get started.

of 08

How To Use The Mobirise Interface

The three main areas of the interface- management Panel, Views and Preview/Publish- are highlighted.
The whole point of Mobirise is to keep complexity to a minimum and this is evident in the minimalist interface.

Once you install the application and launch it you are, essentially, presented with a blank page. On the left is a Management panel (It opens by clicking the Hamburger menu icon) that let’s you add pages, new sites and extras to the application. Across the top are three buttons that allow you to switch the canvas to Mobile, Tablet and Desktop views to see how the project looks in those devices. The two icons at the left a are the Preview and Publish buttons. Click Preview to launch your default browser and click Publish when you are finished.  To add content to your page, click the red Add Block button in the bottom right hand corner. This will open the Blocks panel.

of 08

How To Use The Mobirise Blocks Panel

The Blocks panel is shown.
A Mobirise page is constructed from Content Blocks. It is a good idea to plan out those blocks before opening Mobirise.

A word of advice before you jump into the Blocks panel: Plan your design before adding blocks of content. You need a solid plan rather than opening up the panel and adding blocks you think you might need. The other thing to keep in mind with the Blocks is they are stacked under each other and fill the page width. With that in mind let’s start.

The plan is to have the following blocks of content:

  • A menu
  • A header
  • An article
  • Social media links
  • Footer

To add the menu I scrolled to the menu area and clicked the menu that best fit the design. I repeated this step for the remaining blocks. If you want to add a block to the page, you can also drag and drop it into position from the Blocks panel.

of 08

How To Edit The Menu Block In Mobirise

The Menu Block Paramters panel is opem
Paramters not only apply to the block but are also available to selections made in the block.

Each block can be edited using the block’s parameters. The Parameters become visible when you roll over the block to be changed. Click the Gear icon to open the Parameters panel. In the parameters I made the following changes:

  • Turned off the logo
  • Turned off the Download button
  • Set the menu background colour to Transparent.

I also clicked on the text in the menu. When you do this the Font properties appear. In this area you can:

  • Add a link
  • Change the font to a Google font
  • Change the font size
  • Change the font color
  • Add, Move or Delete text
  • Add an icon
of 08

How To Edit The Mobirise Header Block

The image in the Headre block is changed to the one selected in the Headers Parameter panel shown.
Adding your own content is dead simple in Mobirise.

Editing the header requires a single click on the header to open the Properties. This panel has a lot under the hood:

  • Show Title: Deselect this and the headline disappears
  • Show Text: Click this and the text is hidden.
  • Show Buttons: Turn the buttons on and off.
  • Show Arrow: Selecting this adds a down arrow at the bottom of the header to indicate there is more content. This is not a live arrow that is clickable.
  • Content Align: Selecting one of the three options in this pop moves the text and buttons to conform to the alignment option chosen.
  • Background Image: Click this to replace the placeholder image with one of your own.
  • Parallax: Select this and parallax scrolling is added to this block.
of 08

How To Edit The Article Block In Mobirise

The text parameters are shown.
Styling and formatting text in Mobirise is all handled in the paramters.

You have a couple of choices here. You can either manually enter the text to be added into this block or copy and paste the text from a text document.

The parameters are all based around HTML text formatting. They are:

  • Style: Select this and you can change the style to Quote, Code, Normal or H1 to H6.
  • Alignment: There is no pop up. Click the icon to change the text alignment.
  • Unordered List: Select the list text and click this to add bullets.
  • Ordered List: Select the list text and click this to add numbers to the list.
  • Link: Click this to open the Link dialog box where you can add hyperlinks and navigation anchors to the selected text.
  • Font: The fonts in this list are all from the Google Fonts collection.
  • Size: Set the text size from this pop up menu.
  • Colour: click this to open the Colour Picker. You can choose from the swatches or click the More button to open a Colour Picker or to add a custom Hexadecimal color.

You may think that only using the Google Fonts and sizes is a bit too restrictive. In fact, Mobirise offers a Code Editor Extension which let’s you dig into and modify the code generated by Mobirise. Conversely, if you have a Code editor such as Adobe’s Brackets or Coda, you can poke around the code found in the assets folder when you publish the site.

of 08

How To Edit The Mobirise Social Block

The Social Icon parameters are shown.
Social Icons can be added or deleted as needed.

This final block is dead simple to change.  Click once on an icon and the Properties appear. They are:

  • Link: Click this and the Link dialog box appears letting you enter the URL of you account.
  • Color: Click this to change the background color of the icon.
  • Remove: Click this to remove the selected object.
  • Insert Icon: Click this to add a different icon.

The Block parameters allow you to add a background image or to change the background colour for the entire block. There is also an Extension you can purchase ( Index>Extensions and Themes>Icons) which will add a full SVG icon set to Mobirise.

of 08

How To Preview And Publish Your Mobirise Project

The Publish Options panel is shown.
There is a surprising flexibility when it comes to publishing the project.

As you move through the design process, clicking the Preview button will open the project in a browser.

When it is time to publish the project, click the Publish button and you will have three choices:

  • Local: The files are published to a folder on your computer.
  • FTP Server: This is the location of the web server where the site will be hosted.
  • Google Drive: You can publish the project to the cloud by selecting this and saving to your Google Drive account.