Extending the functionality from Mobirise HTML website builder with the code editor
The other day I had created a simple HTML website for a friend who runs a construction company. On his branding page, he wanted all of his company's services to be listed. So we started with small and cosmetic repairs, continued with family homes and finished the list with residential and industrial complexes. After two days of playing around with the powerful tool, the HTML/CSS code editor of Mobirise HTML5 Website Builder, I thought about writing an article..
AAs you may have gathered from my previous articles, I'm more of a graphic designer or Photoshop person and creating web pages in some way became a necessity when supplying clients. I started with WordPress and only recently learned about the existence of this wonderful software – Mobirise HTML Builder. The way it allows you to create websites just seems very natural and right. So I decided to use this great tool for my daily work.
Ready-made HTML codes and tips to make life even easier
At the right time I could have my pleasure with the great capabilities of Mobirise HTML5 Builder, in the process I also noticed some small gaps that I could not fill and, by changing the view or making a compromise, had to overcome. Small gaps indeed, but as I follow the motto that if something is worth the work, it is worth to make it as it should be.
"This program is so cool", I thought. "You're bound to find a way to refine it." – Well, they did – it seems like the decision in advanced design cases is when editing the code. So if you want to create a really great and appealing HTML5 website, Mobirise is the right tool for you. Even with further refinements, the right choice – the Code Editor is the extension you are looking for. It's good to know that you don't need to spend a lot of time or read a lot of code to get great results with the code editor.
To what extent do you need coding knowledge to use this tutorial?
To use the ready made HTML codes given here – as good as none. All you need to do is copy/paste in the right places and change a few values to make the view match your page (mostly colors and fonts). The correct places where you should make changes are specifically described in the code so you can find them easily.
For the beginners, let's take a closer look at the code editor interface. Mobirise is pretty natural and intuitive. You drag it out and click the blue Icon that appears when you hover over an already inserted block in your Mobirise project. With the code editor, you get two options – just style the appearance with additional CSS specifications or add CSS and custom HTML at the expense of the block parameter editing feature.
My advice to you: take advantage of the powerful capabilities of the software, let it do most of the work. Choose a block that resembles your desired idea and customize it using the block parameters and CSS specifications. Then bring in the HTML editor and add custom code. All this may sound very general, so let me give you a few examples. As a "non-code" person, I always try to find the easiest ways to do this and will now share them with you.
However, something interesting to note. Moribises Code Editor helps you write by coloring the text as you type (you want to avoid red though) and on top of that: the program doesn't let you save and close until something is right in the HTML/CSS code and discovered. I z.B. often forgot the ">" at the end.
Add a little spice to the text
Some cool and impressive things can definitely be done with the appearance of the text if you add a few lines of code to the Custom CSS section of the Code Editor. Change the color of the brought out text and the color of the highlight itself – this is a handy trick to pull out of the sleeve. Use this code to do that:
I did it with semi-transparent highlight color but it works well with stable RGB or HEX (like z.B. the one in the bottom row)
Change the first letter or the first row of the paragraph like z.B. in a reader or magazine and use this custom CSS:
To apply the first complete row and not only the first letter, replace -letter with -row. Since we are creating responsive pages here, the length of the first line may differ on different screens. You should also consider the structure of your first line, so that the effect is achieved even with more or less words. It's best to look at the page in advance, change the width of the browser window, look at the appearance, and then edit the beginning of the text you want to style.
Change the way you quote – using cool quotes and text highlights instead of default quote styles is easy. To apply this effect to a text in a complete block, use this code:
And change the colors of the exclamation marks and the background if necessary.
Discard navbar and button
Opacity of the navbar background
I love semi-transparent backgrounds – they give you that subtle and light appearance that I often try to achieve too. To get this done, I experimented a bit and came up with this simple solution.
There are two common appearances that I, and probably many of you, consider appropriate:
- A completely transparent navbar on its initial position on the page and semi-transparent with some blended colors when you scroll down and the navbar becomes sticky.
- Semi-transparent navbar everywhere with the function to control the opacity of the color of the initial and sticky navbars.
To achieve something like this, you need these two simple lines of code, inserted into the custom CSS area of the navbar:
This way you get semi-transparent colors for the static and sticky navbars. If you want to leave the static navbar transparent, delete the second code (cut/paste the "*/" to the end of the last line – right after the ">"). This way it will be seen as a comment but will still remain in case you change your mind at some point.
As for the desired color itself – you've probably heard of "RGB", where the colors red, green and blue are mixed together. Well, RGBA is actually the same except for the last value in the brackets, which represents the color opacity – 1 stands for solid color and 0 stands for complete transparency. You should experiment with it a bit until you reach the desired transparency level.
You can easily set the desired RGB color values using your favorite image editing software or by using an online palette (I prefer the latter). It's simple and provides the values for copy/paste.
A few words about the importance – a website generally gets element styling information from multiple sources and in our case we have the Mobirise Builder Block parameter support for our custom CSS codes that need a little help in exceeding other styling requirements (if any).
To achieve this, we simply add "!important" to our custom CSS specifications. This is especially needed if we are styling elements that are already partially customizable through the Block Options fylout. However, you should still remember the subtle adjustments you made this way, as the corresponding settings in the block options are not visually applied – however, this is not possible due to the "!important" from before in order, because then they are also visually noticeable. Just keep this in mind whenever you create a design.
Styling the brand name and menu bars
Another thing on the navbar that is not directly customizable through the block options is the weight of the brand name. To change that, paste the following code into the Custom CSS area:
And change to "lighter" depending on what you prefer.
Designing the weight of the font for the menu bar works the same way, but you should use .mbr-buttons__link instead of .use mbr-brand__name.
Customize web page buttons
To get full control over the appearance of the buttons, I used a little trick – a ready-made code from an online button generator (here).
Here most of the button options are very easily customizable with the help of a visual interface. Just customize it to your liking, copy the code and paste it into the Custom CSS area. The only thing you need to edit is the font "family" and possibly also add a line that defines the weight of the font.
Have a little caution now – if you want to style all the buttons in one block, just paste the code and edit the font if necessary. But if you need styling for just one button in the block, you should do simple replacements of the color accordingly.
You should use ".Replace "btn" with the following:
- ".btn-default" to affect transparency with white borders;
- ".btn-primary" – gray, etc. to influence:
- ".btn-success" – green;
- ".btn-info" – blue;
- ".btn-warning" – yellow;
- ".btn-danger" – orange;
- ".btn-link" – transparent;
To style all buttons in the navbar area, replace ".btn" with ".mbr-button_btn".
Add drop-down menu with subitems/submenus
Now let's approach the code a bit further and do something really cool. The Mobirise HTML website builder gives us the ability to create great looking pages with little work. However, there is something that bothers me a bit – the lack of addable submenu items starting from the main menu. So when I started writing about the code editor and its features, this was one thing I made a note to explain. After a bit of googling, some trial and error, I had finally managed to get the code together that gives you a smooth foldout for the menu directly.
To do this, we need to unlock the HTML editor of Navbar. Therefore, a good idea is to set all the available block options to best suit your vision. Now unlock the HTML editor!
Scroll down until you find the tag in the HTML editor and then select the entire tag (starting with "" and ending with "").
Next, replace the code with the following:
Then insert into the Custom CSS area:
One last step: from the main Mobirise menu, you need to go to "Pages" and select the options of the active page (the green icon). Now enter the following code in the "Inside code:" area:
VOILA! – You now have a cool dropdown menu. And since we are on the semi-transparent "wave", background is also in the right state. Pay attention to the comments that give you tips on which rows to change for styling, according to the appearance of your page. The best part is that you can still edit the designs of the links and the targeting through the Mobirise Builder interface, just as you can with traditional menu items. Furthermore, you can also duplicate links, should you need more. Have fun!
Creating an editable Accordion block
With the help of the Mobirise Code Editor, you can easily add new blocks to your website, while still retaining the ability to edit them. You just have to paste the codes in their appropriate places and you are ready to go. Here you can see the codes that allow you to add an Accordion block to your Mobirise project:
In code (at the page settings dialog):
In a Custom HTML Block Editor:
In the CSS Editor section of the same block:
Check the view and correct the colors if necessary. The background is again set as semi-transparent but it runs well with solid RHB or HEX.
You are now strong-willed – the headings and content are editable using Mobirise's graphical interface – so only tweak the code if you want to add another Accordion element. To do this, you need to copy/paste into the HTML editor according to the instructions rounds in the comments.
Make it sustainable, make it editable!
You've probably noticed that the prepared solutions from this tutorial will allow you to edit content through Mobirise's visual interface while keeping the basic appearance of the predefined elements. Anyway, this is due to the great way this software was programmed.
Adding "Mobirise categories" to your own content will give you the ability to edit content from the visual interface. Such categories would be.B.:
Add them to the style=".." of your new elements and let the magic happen!
Also, to maintain the sustainability of the design/appearance, I used the mbr-article category.
It's a little tricky to get it right on the first try, however the results are worth the work. Once you have everything set up appropriately, custom blocks become flexible and easy to use. This will save you a lot of work in the long run. Don't be afraid to experiment. Have fun and enjoy your achievements!
On the topic of learning to code
Since we are undoubtedly talking about the code editor, you should know a little bit about codes in order to be able to use it. When I started writing this article, I really knew only a little bit about CSS but I was fascinated by the enormous possibilities I saw in the Mobirise extension. I started googling right away and also found complete and easy "step-by-step" guides and references to HTML, CSS and Bootstrap – all available on the W3C Schools site. You will also find there prepared code samples, so that you can have an easier start. With the help of this web library and my innate curiosity as well as my stubbornness, I successfully achieved the results I could present to you in this article.
So, my advice would be this: if you don't have time to learn codes (like I do), it's best to read the first few articles of this tutorial and keep the page in mind should you ever face a real problem. In any case, it will be helpful for you.
Mobirise Code Editor: Design websites – without borders
Mobirise HTML Website Builder is a powerful tool that gives you the ability to create great websites intuitively and easily. Still, the developers have tried to cover all the necessary areas, no matter what kind of content or designs are involved (the "designer's version" is sometimes limited due to the predefined options). That's why we have the Code Editor by our side.
The simple and intuitive interface brings the HTML codes and styling options together, giving designers the freedom to dive in as far as they like. The only limits here are our abilities and our imagination.
As designers we certainly have the vision and when it comes down to skills it turns out after all that you don't need too much time to know the code in the end. With Mobirise Builder Code Editor everything is possible.