website templates

TIPS and TRICS for MOBIRISE 

How to modify any blocks,
add useful code to the page of the site
and much more

To modify the blocks and add usefull code, the code editor is required.

How to Increase Accordions Count

Accordion FAQ

Mobirise is an offline app for Window and Mac to easily create small/medium websites, landing pages, online resumes and portfolios, promo sites for apps, events, services and products.

Mobirise is perfect for non-techies who are not familiar with the intricacies of web development and for designers who prefer to work as visually as possible, without fighting with code. Also great for pro-coders for fast prototyping and small customers' projects.

Key differences from traditional builders:
* Minimalistic, extremely easy-to-use interface
* Mobile-friendliness, latest website blocks and techniques "out-the-box"
* Free for commercial and non-profit use

4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

Modified Source HTML Code of Accordion Block

<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
<!-- skip any parameters -->
    <select title="Accordions Count" name="bootstrapAccordion">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <!-- repeat "<option ... </option>" how much you need -->
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10" selected>10</option>
    </select>
<!-- skip any parameters -->
<!-- End block parameters -->
</mbr-parameters>

<!-- skip any html code -->

<!-- copy <div class="card"> ... </div> -->
<div class="card">
    <div class="card-header" role="tab" id="headingOne">
        <a role="button" class="panel-title collapsed text-black" data-toggle="collapse" data-core href="#collapse1" aria-expanded="false" aria-controls="collapse1">
            <h4 class=" mbr-fonts-style" mbr-theme-style="display-5">
                <span class="sign mbr-iconfont mbri-arrow-down inactive"></span>
                    What is Mobirise?
            </h4>
        </a>
    </div>
    <div id="collapse1" class="panel-collapse noScroll collapse " role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="panel-body p-4">
            <p class="mbr-fonts-style panel-text" mbr-theme-style="display-7" data-app-selector=".panel-text">
                Mobirise is an offline app for Window and Mac to easily create small/medium websites, landing pages, online resumes and portfolios, promo sites for apps, events, services and products.
            </p>
        </div>
    </div>
</div>

<!-- skip any html code -->

<!-- insert copy after last <div class="card"> ... </div> -->
<!-- and modify bold id and href -->

<div class="card" mbr-if="bootstrapAccordion > 6">
    <div class="card-header" role="tab" id="headingSeven">
        <a role="button" class="panel-title collapsed text-black" data-toggle="collapse" data-core href="#collapse7" aria-expanded="false" aria-controls="collapse7">
            <h4 class=" mbr-fonts-style" mbr-theme-style="display-5">
                <span class="sign mbr-iconfont mbri-arrow-down inactive"></span>
                What is Mobirise?
            </h4>
        </a>
    </div>
    <div id="collapse7" class="panel-collapse noScroll collapse " role="tabpanel" aria-labelledby="headingSeven" data-parent="#accordion">
        <div class="panel-body p-4">
            <p class="mbr-fonts-style panel-text" mbr-theme-style="display-7" data-app-selector=".panel-text">
                Mobirise is an offline app for Window and Mac to easily create small/medium websites, landing pages, online resumes and portfolios, promo sites for apps, events, services and products.
            </p>
        </div>
    </div>
</div>

Sharing pages in social networks
using Open Graph

For Facebook, Vk Ok and Google+:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
<meta property="og:title" content="Title">
<meta property="og:description" content="Description...">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:locale" content="en_EU">
<meta property="og:image" content="http://example.com/img.jpg">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

For Twitter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description...">
<meta name="twitter:image:src" content="http://example.com/img.jpg">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:domain" content="example.com">
<meta name="twitter:site" content="@">
<meta name="twitter:creator" content="@...">

Edit parameter content and Insert code to the inside <head> code

Block of Images with "link image to"

Computer
Computer
Computer
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise
Mobirise

Source HTML Code:

<section class="features17" group="Features" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
  <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="6">
  <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6">
  <input type="checkbox" title="Show Title" name="showTitle">
  <input type="checkbox" title="Show Text" name="showText">
  <input type="checkbox" title="Card Background" name="crdBg">
  <input type="color" title="Card Color" name="crdColor" value="#ffffff" condition="crdBg">
  <select title="Rows" name="rowsAmount">
    <option value="1">1</option>
    <option value="2" selected>2</option>
  </select>    
  <select title="Cards" name="cardsAmount">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6" selected>6</option>
  </select>
  <fieldset type="background" name="bg" parallax>
    <input type="image" title="Background Image" value="../_images/background2.jpg" parallax selected>
    <input type="color" title="Background Color" value="#ffffff">
    <input type="video" title="Background Video" value="http://www.youtube.com/watch?v=uNCr7NdOJgw">
  </fieldset>
  <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
  <input type="color" title="Overlay Color" name="overlayColor" value="#232323" condition="overlay && bg.type !== 'color'">
  <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.5" condition="overlay && bg.type !== 'color'">
<!-- End block parameters -->
</mbr-parameters>

<div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}"></div>

<div class="container-fluid">

<div class="media-container-row" mbr-cards="bootstrap">

<div class="card p-3 col-12 col-md-6" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <a href="https://mobirise.com"><img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-1-560x420.jpg" alt="Computer" title="Computer"></a>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 1" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <a href="https://mobirise.com"><img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-1-560x560.jpg" alt="Computer" title="Computer"></a>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 2" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-1-560x354.jpg" alt="Computer" title="Computer">
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 3" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-560x849.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 4" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-560x373.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 5" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-1-560x373.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>
</div>

<div class="media-container-row" mbr-cards="bootstrap" mbr-if="rowsAmount > 1">

<div class="card p-3 col-12 col-md-6" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-2-560x373.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 1" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-560x394.jpg" alt="Mobirise" title>
        lt;/div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 2" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-3-560x373.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 3" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-560x650.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 4" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-2-560x560.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

<div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 5" mbr-class="{
        'col-lg-3': cardsAmount == '4',
        'col-lg-4': cardsAmount == '3',
        'col-lg-2': cardsAmount == '6',
        'my-col': cardsAmount=='5'}">
    <div class="card-wrapper">
        <div class="card-img">
            <img src="file:///C:/Work/Projects/mobirise4/Igor%20Kapustin%20Portfolio//assets/images/mbr-560x377.jpg" alt="Mobirise" title>
        </div>
    </div>
</div>

</div>        
</div>
</section>

SHARE THIS PAGE!

Address

105, 10 Years of October,
Omsk, 644070, Russia