HI, WELCOME TO FLOURISH TEMPLATE PAGE.
If you follow the instructions, you’ll end up with a design that resembles the demo. I recommend having the demo site opened in a different tab and use it as a reference.
CHANGELOG
Version: 1.0
Release date: April 2016
LET’S START!
1. INSTALLATION
IMPORTANT! Before doing the installation please delete the FEATURED POST gadget from the LAYOUT section (if you have one installed).
2. MAILCHIMP NEWSLETTER FORM SETUP
Copy the code below:
<a class="btn trigger" href="javascript:;"><i class="fa fa-envelope"></i> SUBSCRIBE TO MY NEWSLETTER</a>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
SUBSCRIBE TO MY NEWSLETTER
<a class="btn-close trigger" href="javascript:;">×</a>
</div>
<div class="content">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="ADD-YOUR-FORM-ACTION" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address*</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" />
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" />
</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;" aria-hidden="true">
<input type="text" name="b_0a398fdb62eeb3b2aa8486818_7dfc450147" tabindex="-1" value="" />
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
Open the NEWSLETTER gadget and paste the code, add your form action and SAVE. You can edit the SUBSCRIBE TO MY NEWSLETTER title.
To change the NEWSLETTER background image, find this line in the HTML template using CTRL+F or CMD+F:
background: $(accent) url(http://i.imgur.com/yE0zYYW.jpg)bottom left;
Replace the image URL with your image DIRECT URL.
5. 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 icons order, remove the gadget title and SAVE.
4. MENU SETUP
Go to LAYOUT > MAIN 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 to start 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.
SEARCH BOX SETUP
Copy the code below:
<div class='buscador'> <form _lpchecked='1' action='/search' class='searchbox' id='searchbox' method='get'> <input class='searchbox-input' name='q' onkeyup="buttonUp();" onfocus='if(this.value=='Search')this.value='';' onwebkitspeechchange='transcribe(this.value)' placeholder='TYPE A KEYWORD' style='outline:none;' type='text' value='' x-webkit-speech=''/> <span class="searchbox-icon"><i class='fa fa-search'></i></span> </form> </div>
Open the SEARCH BOX gadget, paste the code and SAVE.
5. HERO IMAGE SETUP
IMAGE DIMENSIONS: Width: 1600px – Height: 700px
Open the HERO IMAGE gadget and upload your image, SAVE.
If you want a full-screen image, upload a 2000px wide image to an image hosting and use the DIRECT LINK instead.
6. ABOUT SECTION
Open the PROFILE PICTURE gadget and upload your photo (at least 700px wide), SAVE.
Open the WELCOME TEXT gadget, click on EDIT HTML, type your welcome text and SAVE. If you want to add a button, add the following code:
<br /> <br /> <a class="button" href="BUTTON-URL">BUTTON TEXT</a>
7. FEATURED POSTS SECTION
Open the FEATURED POST gadget at the left, tick the three checkboxes and select the post you want to display. SAVE.
Copy the code below:
<script>var mgall_thumbSize = 400; var mgall_showTitle = true; </script> <script src="/feeds/posts/summary/-/Featured?max-results=4&alt=json-in-script&callback=mgallGallery"></script>
Open the FEATURED POSTS gadget at the right, paste the code and SAVE. Add the label Featured to the 4 posts you want to display.
8. FULL-WIDTH SECTION
Open the CALL-TO-ACTION gadget, click on EDIT HTML, type your text and add the button (see code above), SAVE.
SIDEBAR GADGETS
9. PROFILE PICTURE + WELCOME TEXT GADGET
Open the WELCOME gadget, upload your photo (at least 700px wide) and write your welcome text in the Caption field. Edit the gadget title and SAVE.
10. OTHER GADGETS
FEEDBURNER EMAIL SUBSCRIPTION
Open the EMAIL SUBSCRIPTIONS gadget, edit the title and SAVE. If you use MailChimp form, remove this gadget.
POPULAR POSTS
Open the MOST READ gadget > Select the time frame (7 days = more frequent updates), tick the image thumbnail checkbox and up to 3 posts.
ARCHIVES
Open the ARCHIVES gadget, select the option “Flat list” and SAVE.
MOBILE SEARCH BOX
Copy the code below:
<div class='buscador-mobile'> <form _lpchecked='1' action='/search' class='search-form' id='searchform' method='get'> <fieldset> <input id='search' name='q' onfocus='if(this.value=='Search')this.value='';' onwebkitspeechchange='transcribe(this.value)' placeholder='KEYWORD + HIT ENTER' style='outline:none;' type='text' value='' x-webkit-speech=''/> </fieldset> </form> </div>
Open the SEARCH BOX gadget, paste the code and SAVE.
11. INSTAGRAM WIDGET SETUP
Copy the code below:
<script>
var feed = new Instafeed({
get:"user",
userId: USER-ID,
accessToken:"ACCESS-TOKEN",
limit: 8,
resolution:"standard_resolution",
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></li>'
});
feed.run();
//]]></script>
<div id='instafeed'></div>
<div class="igusername"><a href="INSTAGRAM-URL">@USERNAME</a></div>
Open the INSTAGRAM gadget and paste the code.
To get your USER ID and ACCESS TOKEN, go to this page while you are logged into your Instagram account (desktop version). Click on “Get Access Token”, carefully replace the ACCESS-TOKEN in the previous code with your own value and the USER-ID, which is the first set of numbers of the token, until the first dot(.) and SAVE.
12. RECOMMENDED BLOG SETTINGS
13. CUSTOM COLORS + FONTS
Go to TEMPLATE > CUSTOMIZE.
Select ADVANCED and change the colors and fonts in each option. Please, note that font changes can’t be reversed, make sure you’re happy with the end result before saving changes.
14. ENABLE RESPONSIVE DESIGN
Go to TEMPLATE> Click on the Mobile options.
Select “No. Show desktop template on mobile devices.” and SAVE.
