HI, WELCOME TO HARPER TEMPLATE PAGE.
If you follow the instructions, you’ll end up with a design that resembles the demo. I recommend having the demo opened in a different tab and use it as a reference.
CHANGELOG
Version: 1.0.0
Release date: August 2017
LET’S START!
1. INSTALLATION
Go to THEME > Click on the three dots at the right > Restore > Upload the .xml file.
2. MENU SETUP
Go to LAYOUT > MENU > EDIT.
In the NEW SITE NAME field, add the title you want to appear on the menu (e.g. HOME). In the NEW SITE URL field, add the page URL, don’t forget to add the HTTP:// prefix. Click on ADD LINK.
To create a drop-down menu, add the parent item name, in the URL field add a hashtag (#). To create the child item, add an underscore (_) before the title name and add the page URL, make sure the child items are placed under the parent item, see example below:
I recommend starting backward so you don’t have to move all items once you’re done, otherwise, you’ll have to use the arrows to rearrange them.
When you’re happy with the end result, SAVE changes.
3. SLIDER CAROUSEL
The slider carousel will show six selected featured posts, to select these posts you have to add the Featured label to each one of them. Labels are case sensitive, make sure only the F is upper case.
4. SOCIAL ICONS SETUP
Open the SOCIAL ICONS gadget, add your social network name and link, click the ADD LINK button and repeat with each social icon you need. Use the arrows to rearrange the order of the icons.
5. MAILCHIMP FORM SETUP
Copy the code below:
<div id="mc_embed_signup">
<form action="FORM-ACTION-HERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p>Receive all posts on your email.</p>
<div class="mc-field-group">
<input type="email" value="" placeholder="TYPE YOUR EMAIL" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<div class="mc-field-group">
<input type="text" value="" placeholder="TYPE YOUR NAME" name="FNAME" class="" id="mce-FNAME" />
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none">
</div>
</div><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_0a398fdb62eeb3b2aa8486818_2c2c97b1d9" tabindex="-1" value="" />
</div>
<div class="mc-field-group"><input type="submit" value="Sign me up" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div></form>
</div>
Open the NEWSLETTER gadget and paste the code, add your form action and SAVE.
6. INSTAGRAM WIDGET SETUP
Go to Snapwidget > Widgets > Create an account and select the FREE Instagram Grid widget.
In the Username area, you’ll be prompted to log in to your account to get the permissions required to display the feed.
Then, select 2 columns x 3 rows, 5px photo padding, Fade Out hover effect and YES to Responsive (this is very important).
Click on GET WIDGET. Click on COPY TO CLIPBOARD.
Paste the code in the Instagram HTML widget and SAVE.
7. ARCHIVES
Open the ARCHIVES gadget, check the FLAT LIST option and select the month display. SAVE.
8. ABOUT AUTHOR
Open the ABOUT gadget, add a short bio and SAVE.
9. CUSTOM COLORS + FONTS
Go to THEME > CUSTOMIZE > ADVANCED. Use the dropdown arrow to navigate the different options.
10. ENABLE RESPONSIVE DESIGN
Go to THEME > Click on the arrow next to CUSTOMIZE > Mobile settings > Choose DESKTOP.