gomymobi.com: Knowledge Base

Quick sample about creating a website theme

Example 1: simple basic theme with 1 file HTML only

Example 2: set root container to inner element

<!DOCTYPE html>
<html class="no-js" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Product">
  <head>
    <meta charset="utf-8">
    <title>Blue Display Theme from www.gomymobi.com</title>

<section class="GMM_editable_sortable" data-gmm-toolbar-position="bottom">
          <div class="container" data-parent-bg="//www.gomymobi.com/app/uploads/media/public/social-sharing/work-place-decorations.jpg">
            <div class="row">
              <div class="col-md-8 col-md-offset-2">
                <div class="wrap">
                  <div class="intro GMM_sortable_custom" data-gmm-sortable-handle=".GMM_sortable_handler">
                    <h2 class="GMM_sortable_handler">We Are Creative People<span></span></h2>
                    <h1 class="GMM_sortable_handler">Blue Display Studio</h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

<section class="GMM_editable_sortable" id="testimonial">
          <div class="container" data-parent-bg="//www.gomymobi.com/app/uploads/media/public/social-sharing/girl-at-the-library-with-hp-desktop.jpg">
            <div class="row">
              <div class="col-md-12 text-center">
                <h2>Testimony</h2>
                <div class="owl-carousel-fullwidth owl-carousel-2">
                  <div class="item">
                    <blockquote>
                      <p>“Design is not just what it looks like and feels like. Design is how it works.”</p>
                      <p><cite>— Steve Jobs</cite></p>
                    </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        <footer class="GMM_editable_sortable">
          <div class="container GMM_sortable_custom" data-gmm-sortable-handle=".GMM_sortable_handler">
            
            <ul class="social-icons GMM_sortable_handler">
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-github"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <p class="text-center GMM_sortable_handler"><small>
              Copyright 2016 © Blue Display Theme<br/>
              from <a href="http://www.gomymobi.com/">www.gomymobi.com</a>
            </small></p>

</div>
        </footer>
      
    
      </div>
      
      <script id="GMM-Editable-HTML-Builder" type="text/javascript" src="//www.gomymobi.com/app/GMM-Editable-HTML-Builder/core.init.min.js"></script>
  </body>
</html>

Example 3: sortable element with inner drag-n-drop sortable elements

<!DOCTYPE html>
<html class="no-js" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Product">
  <head>
    <title>Green Homepage Theme from www.gomymobi.com</title>

<body>
    <div id="hero" class="GMM_editable_sortable" data-gmm-toolbar-position="bottom">
      <a href="#main" class="smoothscroll animated bounce arrow"><i class="fa fa-chevron-down"></i></a>
      <div class="overlay"></div>
      <div class="container">
        <div class="col-md-8 col-md-offset-2">
          <div class="text">
            <h1> <strong >Green Responsive Homepage</strong> <em>from</em> <strong>gomymobi.com</strong></h1>
          </div>
        </div>
      </div>
    </div>

<main role="main" class="GMM_editable_sortable">
      <section class="feature">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <h2 class="section-heading">Responsive Pricing Table</h2>
            </div>
          </div>
          
          <div class="row pricing-table-1 GMM_sortable_custom" data-gmm-sortable-handle=".GMM_sortable_handler">
            <div class="col-md-4 col-sm-6 pricing-table-item GMM_clonable_object GMM_sortable_handler">
              <div class="pricing-table-item-heading">
                <p>Starter</p>
                <h3><sup>$</sup>19<span>/month</span></h3>
              </div>
              <div class="pricing-table-item-body">
                <ul>
                  <li><strong>5</strong> users</li>
                  <li><strong>10</strong> projects</li>
                  <li><strong>10GB</strong> amount of space</li>
                  <li><strong>5</strong> e-mail accounts</li>
                </ul>
                <div class="spacer  spacer-xxs"></div>
                <p><a href="#" class="btn btn-outline btn-block no-margin-botton">Sign Up</a></p>
              </div>
            </div>

<div class="col-md-4 col-sm-6 pricing-table-item GMM_clonable_object GMM_sortable_handler">
              <div class="pricing-table-item-heading">
                <p>Basic</p>
                <h3><sup>$</sup>29<span>/month</span></h3>
              </div>
              <div class="pricing-table-item-body">
                <ul>
                  <li><strong>10</strong> users</li>
                  <li><strong>50</strong> projects</li>
                  <li><strong>50GB</strong> amount of space</li>
                  <li><strong>10</strong> e-mail accounts</li>
                </ul>
                <div class="spacer  spacer-xxs"></div>
                <p><a href="#" class="btn btn-outline btn-block no-margin-botton">Sign Up</a></p>
              </div>
            </div>

<div class="col-md-4 col-sm-6 pricing-table-item best-offer GMM_clonable_object GMM_sortable_handler">
              <div class="pricing-table-item-heading">
                <p>Pro</p>
                <h3><sup>$</sup>49<span>/month</span></h3>
              </div>
              <div class="pricing-table-item-body">
                <ul>
                  <li><strong>100</strong> users</li>
                  <li><strong>Unlimitted</strong> projects</li>
                  <li><strong>1TB</strong> amount of space</li>
                  <li><strong>100</strong> e-mail accounts</li>
                </ul>
                <div class="spacer  spacer-xxs"></div>
                <p><a href="#" class="btn btn-primary btn-block no-margin-botton">Sign Up</a></p>
              </div>
            </div>
          </div>
        </div>
      </section>

Example 4: make price blocks clonable & editable custom tags

pricing.html

<!DOCTYPE html>
<html class="no-js">
  <head>
    <title>Guide Theme from www.gomymobi.com</title>
    <script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>
  </head>

<body>
    <section id="subscribe" class="GMM_editable_sortable">
      <div class="container">
        <h3 class="animate-box"><label for="email">Subscribe to our newsletter</label></h3>
        <form action="#" method="post" class="animate-box">
          <i class="icon fa fa-paper-plane"></i>
          <input type="email" class="form-control" placeholder="Enter your email" id="email" name="email">
          <input type="submit" value="Send" class="btn btn-primary"/>
        </form>
      </div>
    </section>

<custom_tag>www.gomymobi.com<</custom_tag>

<section id="pricing" class="GMM_editable_sortable">
      <div class="container">
        <div class="row GMM_sortable_custom" data-gmm-sortable-handle=".GMM_sortable_handler">
          <div class="col-md-3 col-sm-6 animate-box GMM_clonable_object GMM_sortable_handler">
            <div class="price-box">
              <h2 class="pricing-plan">Starter</h2>
              <div class="price"><sup class="currency">$</sup>7<small>/mo</small></div>
              <p>Basic customer support for small business</p>
              <hr>
              <ul class="pricing-info">
                <li>10 projects</li>
                <li>20 Pages</li>
                <li>20 Emails</li>
                <li>100 Images</li>
              </ul>
              <a href="#" class="btn btn-default btn-sm">Get started</a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 animate-box GMM_clonable_object GMM_sortable_handler">
            <div class="price-box">
              <h2 class="pricing-plan">Regular</h2>
              <div class="price"><sup class="currency">$</sup>19<small>/mo</small></div>
              <p>Basic customer support for small business</p>
              <hr>
              <ul class="pricing-info">
                <li>15 projects</li>
                <li>40 Pages</li>
                <li>40 Emails</li>
                <li>200 Images</li>
              </ul>
              <a href="#" class="btn btn-default btn-sm">Get started</a>
            </div>
          </div>
          <div class="clearfix visible-sm-block"></div>
          <div class="col-md-3 col-sm-6 animate-box GMM_clonable_object GMM_sortable_handler">
            <div class="price-box popular">
              <div class="popular-text">Best value</div>
              <h2 class="pricing-plan">Plus</h2>
              <div class="price"><sup class="currency">$</sup>79<small>/mo</small></div>
              <p>Basic customer support for small business</p>
              <hr>
              <ul class="pricing-info">
                <li>Unlimitted projects</li>
                <li>100 Pages</li>
                <li>100 Emails</li>
                <li>700 Images</li>
              </ul>
              <a href="#" class="btn btn-primary btn-sm">Get started</a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 animate-box GMM_clonable_object GMM_sortable_handler">
            <div class="price-box">
              <h2 class="pricing-plan">Enterprise</h2>
              <div class="price"><sup class="currency">$</sup>125<small>/mo</small></div>
              <p>Basic customer support for small business</p>
              <hr>
              <ul class="pricing-info">
                <li>Unlimitted projects</li>
                <li>Unlimitted Pages</li>
                <li>Unlimitted Emails</li>
                <li>Unlimitted Images</li>
              </ul>
              <a href="#" class="btn btn-default btn-sm">Get started</a>
            </div>
          </div>
        
        </div>
      </div>
    </section>

theme-settings.php

$theme_settings = array(
  ...
  
  'Editable_Tags' => '#subscribe label, custom_tag, .pricing-info li',

  ...
);

don't hesitate to contact us if your thing is outside of this section
by using contact button above or send directly to hello@gomymobi.com with subject: [contactgmm]
if could not receive our reply within 24 hours, please resend ticket again