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.
- includes/demo-import - folder with data import files
- margin-child.zip - archive with child theme
- margin-theme.zip - archive with installable WordPress theme
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:
- Create a new form in Contact Form 7.
- 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" />
-
Go to MailChimp for WordPress -> Integrations and choose Contact Form 7 integration.
-
Choose your Mailchimp newsletter list.
-
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.
2. Navigate to Layout tab.
3. Set the Content Width to 1320.
Credits
Support
3. Set the Content Width to 1320.
Credits
Support
If you have any question feel free to visit our Support Forum