Loading...

Margin WordPress Documentation

Thank you for purchasing our template. If you have any questions regarding our product feel free to visit our support forum


Getting Started

Unzip files from archive and you will find following folders and files.


Theme Installation and Demo Import Video Tutorial

Recommended Plugins

After theme installation you'll see a notification with recommended plugins that you should install if you want to get full functionality of a theme. The most important plugins are highlighted with Required label.

Demo Import

Go to Appearance -> Import Demo Data. Click Import Demo Data Button and wait until the process is finished.

Child Theme

We recommend you to use child theme. You can customize it how you want, add css styles, functions etc. This way, when you get theme update, all your changes will be in place in child theme. Simply install and activate it after main theme.

Theme Menu

Go to Appearance -> Menus. Make sure that Main Menu and Display location are set to Primary Menu

Getting Started with Elementor

If you've never worked with Elementor page builder before, it's super easy to start. First you can check official videos on their YouTube channel. Additionally they have awesome Facebook community

Elementor Section Templates

If you want to import only one section, we've prepared Section templates. Simply choose section and press insert.

Elementor Custom Widgets

We've created custom widgets for Elementor. You'll find them under the general widget section.

Theme Logo

You can upload your logo using customizer. Retina version should be twice bigger the original.

Image Resolutions

Minimum recommended image resolution is 1440x972. Select images that match the minimum width and height to avoid whitespace, bad alignment and other image related problems.

Regenerating Thumbnails

If you install theme on the existing blog with existing images we strictly recommend that you should regenerate your images. Please install and run Regenerate Thumbnail plugin

Colors

You can change theme colors using customizer. This will affect navigation, footer and blog pages. Other colors can be modified using Elementor. With Elementor you have control of every individual element.

Elementor button color

Video tutorial

Typography

You can change theme typography using customizer. Again, just like with colors, this will affect navigation, footer and blog pages. To change other elements and sections use Elementor.

Elementor typography

Video tutorial

GDPR

To activate cookies notification bar, go to Appearance -> Customize -> GDPR. Edit message and link url as you wish.

Social Profiles

Add you social profiles links or completely remove links from inputs if you don't want to use any social profiles. This option will effect Footer custom logo widget. To change team socials use Elementor.

Elementor socials widget

Layout

Page layout can be set individualy for blog, archives and regular pages. Got to Appearance -> Customize -> Layout. This will affect only regular pages. To change Elementor pages use Elementor Drag & Drop Feature

Navigation

Navigation options are located in Customizer. You can modify phone number here as well. If you don't want to show phone number, leave the phone inputs blank.

Footer

Choose how many widgets you need to show in footer. You can disable it as well. Edit copyright text.

Contact Form

First, make sure that you have installed Contact Form 7 plugin. After this go to Contact -> Contact Forms and select Contact form 1. Here is the code reference for the contact form


        <div class="row row-30">
          <div class="col-lg-6">
            <div class="form-group">
              <label for="your-name">Name:</label>
              [text* your-name id:your-name]
            </div></div>
          <div class="col-lg-6">
            <div class="form-group">
              <label for="your-email">Email:</label>
              [email* your-email id:your-email]
            </div></div>
        </div>
        <div class="contact-message">
          <label for="your-message">Message:</label>
          [textarea* your-message x6 id:your-message]
        </div>
        [submit class:btn class:btn--lg class:btn--color class:btn--button class:btn--wide "Send Message"]
      

Edit Contact form settings.

Make sure that you setup correct email address. Prepare a real “WordPress” email address. It is recommended you prepare a real wordpress@{your-site-domain} address on your host. Because the default mail template of Contact Form 7 (v4.0 and later) uses this address in its From field, someone might try to send mail to this address. Some hosts also block outgoing mail from this address if it doesn’t exist. Read more here

Mailchimp newsletter

First, make sure that you have installed MailChimp for WordPress plugin. After this go to MailChimp for WP and enter your API key from MailChimp, click on the Get Your API key link if you need to create new API key.

Setup newsletter forms.

There are 2 forms in Margin theme. The first one with a name and email. The second one with a email only for the blog newsletter. Since Mailchimp for WordPress allows you to use only one form, there is a simple trick how to make both forms work. Follow these steps:

  1. Create a new form in Contact Form 7.
  2. Use this code for the form:
    
                  <div class="newsletter__row">
                  <div class="form-group">[email* your-email placeholder "Your email"]</div>
                  <div class="newsletter__submit">[submit class:btn class:btn--lg class:btn--color class:btn--button "Subscribe Now"]</div>
                  </div>
                  <input type="hidden" name="mc4wp-subscribe" value="1" />
                
  3. Go to MailChimp for WordPress -> Integrations and choose Contact Form 7 integration.

  4. Choose your Mailchimp newsletter list.

  5. Add Contact Form 7 shortcode to your theme widget. If you used Demo Import, it should be imported already.

    
                  <div class="title-row title-row--boxed text-center">
                    <h3 class="section-title">Our Daily Newsletter</h3>
                    <p class="subtitle">Get the latest and our most important news</p>
                  </div>
    
                  [contact-form-7 id="407" title="Newsletter"]
                

Code reference for Optin form.

        <div class="optin__form-group form-group">                    
          <input type="text" name="NAME" class="form-input optin__input" id="optin-name" required />
          <label for="optin-name" class="optin__label">Your name</label>
          <span class="input-underline"></span>
        </div>
        <div class="optin__form-group form-group">
          <input type="email" name="EMAIL" class="form-input optin__input" id="optin-email" required />
          <label for="optin-email" class="optin__label">Your e-mail address</label>
          <span class="input-underline"></span>
        </div>

        <input type="submit" value="Download Free" aria-label="newsletter submit" class="optin__btn btn btn--md btn--color btn--button" />
      
      

Theme Translation

To translate the theme you can use translation software such as PoEdit or Easy Po.

Theme Update

There are 2 options of how to update your theme.

Option 1 (automatic):

Install recommended Envato Market plugin. Generate an Envato API Personal Token, paste the token and save changes. When the theme has new update, you will see the notification and can update it on the fly. Read more about how this process works at envato.com

Option 2 (manual):

Activate other WordPress theme (ex.: Twenty Seventeen). Delete Margin theme. Upload new version of Margin theme.

Here is the short video of how to do it.

Update 2.7

To update Elementor layout site settings follow these steps:

1. Navigate to Elementor Site Settings.

elementor site settings

2. Navigate to Layout tab.

elementor site settings

3. Set the Content Width to 1320.

elementor site settings

Credits

Support

If you have any question feel free to visit our Support Forum