* Article from our customer *
My name is Filip and I run a small design business in a small country at the end of Europe. It all started with graphic design tasks – logos, banners flyers – that kind of stuff. It happened that way that one of my regular clients required a mobile friendly website for their business. She had already bought a WordPress bootstrap 4 themes and needed somebody setting things up. So in order to provide I had to learn the CMS in no time. Didn’t know almost anything at first, but with a great dose of stubborn and some logical thinking managed to set the first site in I might say, very decent way.
Didn’t like the WordPress environment though – being used to Photoshop and Illustrator I would have preferred something with more freedom in designing – filling out tons of forms just wasn’t good for me. But as it usually happens after the finished project came another, a graphic design one, and then another – the WordPress struggles were set aside and maybe a bit forgotten until the next client requiring a website and the wheel turned on again. Each time I got better and each time I felt like something was missing – like there should be something easier, faster and better.
Related Topics
- How to Create a Website Using HTML/CSS Code Editor
- How to turn off the references of website builder with html?
- Html code website builder gallery: portraits as the images
- FaceBook image in website builder html code
- Import the bootstrap theme into the html website builder free?
Ease of creating one page sites with Mobirise
I’m constantly googling about design trends, resources and charts – especially the "Best 10 Wordpress Alternative", "WordPress vs HTML", "Wordpress vs Bootstrap".. kind of articles. This way I got to know of Mobirise’s existence – it got my attention and I was quite fascinated by the overall interface and the ease of creating fancy and clean totally responsible webpages. I really liked the idea of this software. I just had to use this. And the opportunity soon came – I got an order for a simple web store. The question was – Is it possible building it with Mobirise HTML Website Builder? I had some doubts, and wrote the support team. The answer was no, you can’t build a web store, at least not for now. So I turned to the good old CMS again. But kept the idea of utilizing Mobirise at some point somewhere.
The nice surprise came in the middle of the project when suddenly the client required including a nice stack of general and legal terms, delivery and payment instructions and so on... Since this was a low budget project, the free theme chosen had no such capabilities. At his point without knowing of the top website builder existence I probably would have chosen another free theme (after 4-5 hours googling for something suitable of course ;) and start over from the scratch hopefully till the successful finish – 3 days’ work wasted away, but what to do – such things happen sometimes.
Mobirise Builder took me out of this situation flawlessly! With just an hour and a half work I managed to create a great looking one page site containing all the required legal information. Matching the WordPress theme style was very easy, since all the modules are fully customizable. Another pleasant surprise came when I started linking the navigation responsive menu to the sections of the site. My initial plan was to set up the site, than open the HTML file, add ids to the sections and then link the menu items - Mobirise had already done this for me – I just had to pick the sections from a dropdown. Great thinking you guys!
Publishing one page website to Wordpress
SO far so good – the next step was to make the mini website I just created work along with the WordPress one. What I did was to publish (with ease) my Mobirise site to a subfolder of my WordPress distribution and set custom menu links pointing to the sections of the page containing the corresponding information.
An example – let’s say my site was www.mystore.com. In the root directory I have “wp-content”, “wp-admin”, “wp-includes” and maybe some other “wp-…“ folders – we don’t care about them. Next to them we make a new folder for the additional pages we need for the site – let’s say “addpages” – that’s at the same level as wp- folders. Again for the example let’s say we did and published with Mobirise to this “addpages” folder the webpage “something.html” The browser will read this location as “/addpages/something.html” This way it will load the page from the start. The way making it load at certain position is adding the corresponding anchors separated by the # sign from the page name – something like “/addpages/something.html#anchor1” Next thing is to find the anchor names in the Mobirise built website – the software already made them for you.
Two ways to set menu anchors in Mobirise
First, and easier way is editing the link for one of the navigation menu items – it will show a dialog box asking for a caption and a target URL for the menu item. On the URL row there is a drop down field called Page Anchors. In there are listed the anchor names for all the sections from the page in the order they appear on it. Just select the one you need, right click on it and select Copy to get the anchor name to clipboard. Then paste it next to the page name in the address. At the end you should get something like this “/addpages/something.html#content5-12”
The other way is to open the published something.html page in a simple text editor – Notepad, or Notepad++ - I personally use Notepad++ - it has cool code highlighting, nice search and replace and many more, and search for something like this:
<section class="mbr-section mbr-section--relative mbr-section--fixed-size" id="content5-8" style="background-color: rgb(255, 255, 255);">
<div class="mbr-section__container container mbr-section__container--first">
<div class="mbr-header mbr-header--wysiwyg row">
<div class="col-sm-8 col-sm-offset-2">
<h3 class="mbr-header__text">General Return Policies</h3>The
<h3 class="mbr-header__text">General Return Policies</h3>will give you a hint about which is this particular section and the
" id="content5-8" in the section class row is the name of the anchor you need for your custom link. For this particular case to make the page load at General return policies section the link should look like this:
“/addpages/something.html#content5-8”Now all that’s left is to define menus in WordPress, set the bootstrap menu items to custom links and type in the addresses the way we just talked about.
That’s the way I managed to add everything that was requested from me, still keeping the free and limited of functionality theme of the low cost. Mobirise proved to be a perfect side by side solution for giving a simple WordPress theme professional and expanded look. And all of this – without a single line of code.
Versatile color palette of Mobirise
Another situation in the same project proved Mobirise’s power once more. The client wanted a change of the color scheme. Since, as I said the theme utilized in the project was a free one – no such functionality at all I had to walk through the entire style.css and woocommerce.css , find every single entry concerning the color scheme and replacing the color codes manually. It took me about a day and a slight headache to accomplish this task. When it came to recoloring the Mobirise created additional site it was a child’s play due to the built in palette for every module I didn’t even noticed how fast the corrections were done. Again – when it comes to versatility – Mobirise is the tool!
Now let’s take a step back and look at the bigger picture. For the time being Mobirise really proves to be a rising star. As every child it has still a long way to go toward becoming one of the big web design players but the direction is set and the way I see it the only way is up!
Meanwhile I’m already planning my next projects being organized the way they can be accomplished entirely using the Mobirise software. Modern design modules, entirely responsive layout and lightning speed are only some of the options which allow us, the designers to set our minds to what’s important – creating an appealing vision, not bothering with numbers and codes.
Mobirise: great alternative to Wordpress
In our work as designers we face challenges either on the appearance of the projects or the deadlines or cost. Finding the sweet line for meeting these challenges goes through selecting the right tools and means for every single assignment. Since time is the most valuable resource every tool giving freedom and ease in creating should be considered most valuable resource.
Mobirise as a fresh starting software gives me all the sings of a great potential becoming a leading web page creation tool in the nearest future and great alternative to Wordpress. Meanwhile it proved to be the perfect solution for express building of fast and awesome totally responsive HTML websites. And it’s free! Even when the task is not completely accomplishable by this software it might serve as an addition for improving and adding a great touch to any limited in functionality CMS free theme.
The way I see it and most surely hope so in the nearest future this program will evolve even further and will get a deserved place among the leading web design applications. For all of us – the not writing code designers this will be a most pleasant thing to see. And of course – to use.
From now on every new website project I undertake shall be structured the way it can be accomplished via Mobirise – clear professional and swift. Thank you guys!