Mobirise Develop Guide
Mobirise Cheat Sheet
A practical field guide for builders, designers, and anyone editing sites in Mobirise.
2026 © Rayova - All Rights Reserved - Privacy Policy
A practical field guide for builders, designers, and anyone editing sites in Mobirise.
This page collects the habits that keep Mobirise projects stable: how the builder thinks, where CSS belongs, Code Editor shortcuts, and the quirks that break sections when you least expect them. Use it as one long reference now. We can split it into shorter guides later.
Mobirise is a visual site builder with a real code layer underneath. The win is speed. The risk is editing the wrong layer, or editing the right layer in a way that strips Mobirise’s editing hooks. This cheat sheet is written for newcomers learning Mobirise and for experienced users who want sharper habits: marketers tweaking copy, designers adjusting layout, and developers pasting custom sections.
StartM5 has two different “folders” in practice: the working project Mobirise edits, and the published export that goes to the host. They are not the same shape. Empirical reference copy of a published StartM5 site (Mobirise 6.1.12): Mobirise GPT/startm5 fresh/.
A. Working project folder (right after create / while building) is intentionally lean. Theme CSS, Bootstrap, icon fonts, and plugins are not fully mirrored there yet — Mobirise injects them from the StartM5 theme package on Preview/Publish. Typical disk contents:
project.mobirise — source of truth (settings + pages + section HTML/CSS).assets/images/ — project images only at first (favicon / logos you add).history/ — automatic Mobirise backups of project.mobirise.publish-hashes.json — publish change-tracking helpers.screenshot.png — builder thumbnail for the project list.Inside project.mobirise settings you will usually see theme startm5, colour/font toggles, versionFirst / versionPublish (e.g. 6.1.12), publish/FTP switches, and one starter page (index.html) with main, title, meta_descr, header_custom, footer_custom, html_before.
B. Published export (what actually ships). From the StartM5 fresh publish snapshot, top level is index.html + assets/ (plus project.mobirise only if you copied the working file beside it). Observed assets/ tree:
assets/bootstrap/css/bootstrap.min.css + assets/bootstrap/js/bootstrap.bundle.min.jsassets/theme/css/style.css + assets/theme/js/script.jsassets/iconsMind/style.css + assets/iconsMind/fonts/ (icons-mind .eot .ttf .woff .svg) — native IconsMind pathassets/icon54-v4/style.css + assets/icon54-v4/fonts/ (same four formats) — ships when a block uses Icon54assets/popup-overlay-plugin/style.css — tiny overlay helper CSSassets/smoothscroll/smooth-scroll.js, assets/ytplayer/index.jsassets/mobirise/css/mbr-additional.css — compiled parameter/section CSS (often with a ?v= cache-bust query in HTML)assets/images/ — only media used by the site (e.g. favicon logo5.png)Head CSS order observed in published index.html:
assets/iconsMind/style.cssassets/icon54-v4/style.cssassets/bootstrap/css/bootstrap.min.cssassets/popup-overlay-plugin/style.cssassets/theme/css/style.cssassets/mobirise/css/mbr-additional.css?v=…Footer scripts observed:
assets/bootstrap/js/bootstrap.bundle.min.jsassets/smoothscroll/smooth-scroll.jsassets/ytplayer/index.jsassets/theme/js/script.jsIcon fonts matter
Publish writes IconsMind to assets/iconsMind/ (CSS and the fonts/ files). Linking a hand-copied pack at assets/web/assets/icons-mind/ from Global Head is fragile and has produced live 404s. Prefer the native path. Also: style.css alone is not enough — without the font files, icons fail silently.
Size note from the same snapshot: IconsMind fonts are large (about 7 MB including the SVG); Icon54 v4 fonts are about 4 MB. Expect that weight on first publish when those packs are in use.
StartM5 stock feature blocks also tend to use .item / .item-wrapper card shells (editor add/move/delete UI), padding in rem (@paddingTop * 1rem), Full Width toggles, richer background fieldsets (image/colour/video + overlay), and Icon54 or IconsMind via mbr-icon. Older StudioM4 / custom Rayova strips may still use fixed .card grids and 15px-era spacing — worth aligning over time when you refresh a section.
Treat Mobirise as two related worlds:
project.mobirise). This is the durable source of truth.Rule of thumb
If you only change exported HTML on the server, the next Publish from Mobirise can overwrite it. Make durable changes in the builder (or in a documented paste-ready section), then publish.
Most day-to-day work happens in these places:
about-us.html).Global items such as menus and footers are often marked as shared. Edit them carefully: one change can appear on every page.
A Mobirise “block” is one section on the page. Custom sections usually start with a real <section>, include an <mbr-parameters> panel, then the visible markup.
Keep these attributes whenever you redesign a block. They are how Mobirise keeps content editable:
mbr-theme-style, mbr-fonts-style, data-app-selectormbr-if for show/hide togglesmbr-buttons around button groupsmbr-icon on icon spansmbr-class for container width switchescontainer, row, col-*Visual editing tip
If text stops being clickable in the canvas after a Code Editor paste, you likely removed an mbr-* hook. Restore the attributes first, then restyle.
Projects stay cleaner when CSS ownership is deliberate:
| Layer | Use for | Avoid |
|---|---|---|
| Section CSS Editor | Padding, background, and styles that belong only to this block. Mobirise scopes rules to the block. | Targeting the section’s own class name as if it were global. |
| Dynamic Styles / Main CSS | Shared patterns reused across pages (features cards, footnotes, list chrome). | One-off experiments that belong to a single article. |
Inline <style> in HTML |
Rare emergencies only. | Normal custom section work. |
Section CSS often uses Mobirise LESS helpers such as @paddingTop, @bg-value, and & when (@gradientBg). That is expected. Do not wrap section CSS in a <style> tag when pasting into the CSS pane.
Comments in the Section CSS Editor are frequently stripped on save. Keep human notes in your library README, not as the only documentation inside the CSS pane.
Mobirise does not size text only with HTML tags such as h2 or p. When you click text on the canvas, a small style popup appears. Choosing Title 1, Title 2, Title 3, Text, or Menu applies a matching display-* class (and usually updates the tag as well).
In the Code Editor the same choice is stored as mbr-theme-style="display-X". After publish it becomes a normal class such as class="... display-7".
| Editor label | Theme style | Typical tag | Use for |
|---|---|---|---|
| Title 1 | display-1 |
H1 | Largest hero / page titles |
| Title 2 | display-2 |
H2 | Section titles |
| Title 3 | display-5 |
H3 / H4 | Subtitles and in-article headings |
| Text | display-7 |
P | Paragraphs and most article body copy |
| Menu | display-4 |
P / span / nav text | Menus, buttons, footnotes, compact UI text |
Article body rule
For article paragraphs and unordered lists, use display-7 (Text). Use display-5 (Title 3) only when that line should stand out as a heading or emphasised callout.
Recommended article paragraph and list markup:
<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text">Use this for paragraph text!</p>
<ul class="list mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".list, .list-item" data-multiline mbr-article>
<li class="list-item">First point</li>
<li class="list-item">Second point</li>
</ul>
Keep mbr-fonts-style on text elements so the canvas style popup and theme font controls keep working. Some sites add an extra list class for numbered or branded lists; the important part for size is still mbr-theme-style="display-7".
Common shell pairing. Article sections should include role="main" on the opening <section>:
<section data-bs-version="5.1" class="desktop-padding ray-article-section" group="Content"> <h2 class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-2">Article Title In Title Case</h2> <h3 class="mbr-section-subtitle mbr-fonts-style" mbr-theme-style="display-5">Supporting subtitle</h3> <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7">Body paragraph.</p> <p class="mbr-footnote mbr-fonts-style" mbr-theme-style="display-4">Footnote or menu-sized meta.</p> </section>
These are the everyday Mobirise classes people reach for in the Code Editor. Theme packs vary, but these show up constantly on Mobirise 5-style projects.
| Class | What it does |
|---|---|
mbr-white / white | Forces light/white text. Useful on dark backgrounds and coloured heroes. |
mbr-black / black | Forces dark text. |
mbr-bold / bold | Bold weight without wrapping content in <strong>. |
mbr-semibold / semibold | Semibold weight when the theme supports it. |
mbr-regular / regular | Normal weight. Handy after a parent forces bold. |
mbr-light / light | Lighter weight for soft headlines or captions. |
text-primary | Uses the theme primary colour for links and accents. |
text-white | Bootstrap white text. Often safer than inventing a custom colour class mid-edit. |
| Class / attribute | What it does |
|---|---|
mbr-fonts-style | Marks text as theme-font controllable. Keep it on titles, paragraphs, buttons, and footnotes. |
mbr-section-title | Main block title styling hook. |
mbr-section-subtitle | Subtitle under the title. |
mbr-text | Standard body text hook for inline editing. |
mbr-footnote | Footnote / meta line. Themes may style this for “last updated” notes and small print. |
mbr-section-btn | Button row wrapper styles. |
mbr-buttons (attribute) | Tells Mobirise the button group is editable/moveable. |
mbr-icon / mbr-iconfont | Icon font hooks. Keep these on icon spans. |
mbr-overlay | Colour overlay layer for image/video backgrounds. |
mbr-fullscreen | Makes a section fill the viewport when enabled. |
mbr-if (attribute) | Show/hide content from parameters, for example mbr-if="showTitle". |
mbr-class (attribute) | Switches classes from parameters, for example container vs container-fluid. |
mbr-theme-style (attribute) | Chooses the display-* size while editing. Publishes as a display class. |
data-app-selector (attribute) | Helps Mobirise know which node the gear/style UI should target. |
Example pinch fix on a dark band:
<h3 class="mbr-section-subtitle mbr-fonts-style mbr-bold mbr-white" mbr-theme-style="display-5"> Clear next step </h3> <p class="mbr-text mbr-fonts-style mbr-white" mbr-theme-style="display-7"> Short supporting line on the dark background. </p>
Mobirise ships Bootstrap. These utilities are safe emergency tools when you need spacing or alignment quickly without opening a long CSS pass.
| Class | Use |
|---|---|
mb-0 mb-2 mb-3 mb-4 | Bottom margin steps. mb-0 removes space under a paragraph or heading. |
mt-2 mt-3 mt-4 | Top margin steps. |
py-* px-* p-* | Padding shortcuts. Prefer block parameters for section padding when possible. |
text-center text-start text-end | Align text quickly. |
d-none | Hide an element. Pair with responsive variants such as d-md-block when needed. |
d-flex align-items-center justify-content-center gap-2 | Simple flex alignment for small local layouts. |
row col-12 col-md-6 col-lg-* | Bootstrap grid. Keep inside a container / container-fluid. |
img-fluid | Make an image scale within its column. |
w-100 | Force full width on an image or child block. |
btn btn-primary btn-info-outline btn-md | Button look. Keep buttons inside mbr-section-btn / mbr-buttons when you still want Mobirise editing. |
text-primary text-white bg-white | Fast colour nudges that match theme tokens better than one-off hex classes. |
Pinch vs pattern
Utilities are great for one-off fixes. If the same spacing or colour treatment repeats across pages, graduate it into section CSS or Dynamic Styles so the site stays consistent.
Open a block’s Code Editor when you need structure beyond the gear panel. The modal is usually two panes:
<mbr-parameters> and the visible content.Bottom controls typically include discard, undo, and apply/save. Always apply, then preview the page. Do not assume the canvas alone proves publish success.
When pasting a custom section, paste HTML first, then CSS. Confirm the opening line is a real <section ...>, not a comment.
These shortcuts come from Mobirise’s Code Editor Quick Help. On Windows they use Ctrl. On Mac, use Cmd in place of Ctrl for most of these.
| Shortcut | Action |
|---|---|
| Ctrl + X | Cut line |
| Ctrl + Enter | Insert line after |
| Ctrl + Shift + Enter | Insert line before |
| Ctrl + Shift + Up / Down | Move line or selection up / down |
| Ctrl + L | Select line |
| Ctrl + D | Select word; repeat to select next matches |
| Ctrl + Shift + K | Delete line |
| Ctrl + Shift + L | Split selection by line |
| Ctrl + Shift + D | Duplicate line(s) |
| Ctrl + J | Join line below onto current line |
| Ctrl + [ / ] | Indent / un-indent |
| Ctrl + / | Comment / un-comment current line |
| Shortcut | Action |
|---|---|
| Ctrl + M | Jump to matching brackets |
| Ctrl + Shift + M | Select between brackets |
| Ctrl + F / H | Find / Replace |
| F3 / Ctrl + F3 | Find next / previous |
| Alt + F3 | Select all occurrences of current word |
| Alt + Shift + Up / Down | Add cursor on previous / next line |
| Ctrl + K, U / L | Uppercase / lowercase |
| Ctrl + Shift + [ / ] | Fold / unfold code block |
| Ctrl + K, 0 | Unfold all |
| F9 / Ctrl + F9 | Sort lines / sort lines (case insensitive) |
| Shortcut | Action |
|---|---|
| Ctrl + F2 | Toggle bookmark |
| F2 / Shift + F2 | Next / previous bookmark |
| Ctrl + Shift + F2 | Clear bookmarks |
These quirks cause most “it looked fine in the editor, then broke” moments.
Never start the HTML pane with an HTML comment. A leading <!-- ... --> can error the section or confuse the parser.
A related failure mode looks like this in the Code Editor:
<!-- data-bs-version="5.1" class="my-custom-section" group="Content" -->
<mbr-parameters>
...
That usually means the opening <section ...> was turned into a comment. Fix it back to a real section tag:
<section data-bs-version="5.1" class="my-custom-section" group="Content">
<mbr-parameters>
...
Safe comments can live deeper inside the section if needed. Prefer none at the very top.
In Code Editor HTML, a raw & can break attributes, titles, or validation. Prefer & in markup, or rewrite the phrase with “and”.
Transportation & LogisticsIn the Section CSS Editor, writing the section’s own class (for example .my-custom-section { ... }) is unreliable because Mobirise already scopes the pane to that block. Prefer child selectors such as .ray-mcs-table or other inner classes.
After Apply, Mobirise can normalize tags, drop some attributes, or reshape wrappers. Always re-open the Code Editor and compare critical parts: IDs used by scripts, mbr-* attributes, and the opening <section>.
Custom tools (forms helpers, colour checkers, calculators) can live inside a section, but Mobirise is not a neutral HTML host.
<p> tags can be stripped. Prefer <div id="..."> for script targets, or query by class with null checks.$ in page scripts. Mobirise pages often load jQuery. Use a clear name such as byId.assets/..., that file must exist on the live host after Publish. Embedding small JSON in the section is safer for critical data.assets/images/ with stable filenames.background-image: url(@paramName) than as <img src="{{paramName}}">.<img> tags with meaningful alt text.fonts/ files appear under assets/ in the published export (see Mobirise GPT/startm5 fresh/). A lean working project folder without those folders is normal until Publish.Every block should survive this quick pass before publish:
project.mobirise directly: close Mobirise first, make a timestamped backup, then edit carefully.Publish warning
Local assets that were copied into the Mobirise project still need a successful Publish to appear on the live host. “It works on my machine” is not the same as “it is live.”
| Situation | Do this |
|---|---|
| Need durable content change | Edit in Mobirise, then Publish |
| Need a new custom layout | Paste section HTML + section CSS; preserve mbr-* |
| Shared look across pages | Dynamic Styles / Main CSS |
| One-block look only | Section CSS Editor |
Top of HTML shows <!-- data-bs-version |
Restore a real <section> opening tag |
| Ampersand issues | Use & or write “and” |
| Script target missing | Avoid IDs on <p>; use <div> + class fallbacks |
Direct project.mobirise edit |
Close Mobirise, backup first |
| IconsMind CSS 404 on live | Use assets/iconsMind/style.css (native), not a hand-copied web/assets/icons-mind path |
This cheat sheet is intentionally dense. When a topic grows (Code Editor only, publishing only, custom sections only), split it into its own article and leave this page as the index.
Last updated: 16 August 2026
2026 © Rayova - All Rights Reserved - Privacy Policy