HI, WELCOME TO PALERMO TEMPLATE PAGE.
If you follow the instructions, you’ll end up with a design that resembles the demo. I recommend having the demo you want to install opened in a different tab and use it as a reference.
Please, use the support form here to get priority over my regular email.
Version 2.1.0 (03/04/2020)
– Removed old Instagram gadget support, added Snapwidget Instagram feed.
Version 2.0.0 (01/2020)
– Fix for the responsive menu.
– Removal of the third layout due to JS conflicts.
Version 1.0.5 (05/30/2018)
– Fix for the duplicated image inside single post.
– Release date: April 2018
RECOMMENDED IMAGE SIZE
PALERMO #1: 1040px wide.
PALERMO #2: 1040px wide.
PALERMO #3: 1280px wide.
IMPORTANT! Before doing the installation please delete the FEATURED POST gadget from the LAYOUT section (if you have one installed).
Go to THEME > Click on the three dots > Restore > Upload the .xml file.
2. MENU SETUP
Go to LAYOUT > MENU > EDIT.
In the NEW SITE NAME field, add the title that will appear on the menu (ie. HOME). In the NEW SITE URL field, add the page URL, don’t forget to add the HTTP:// or HTTPS:// 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:
You can also add grandchildren items by adding two underscores before the link title (ie. __Fashion), and placing this item below a children link.
When you’re happy with the end result, SAVE changes.
3. SLIDER SETUP (#1 and #3 only)
The slider code will be probably added during the installation but if that’s not the case, copy the code below:
<div class='cycle-slideshow' data-cycle-manual-speed='700' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1400' data-cycle-swipe=true data-cycle-swipe-fx=scrollhorz> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=6'></script> <div class='cycle-prev'></div> <div class='cycle-next'></div> <div class="cycle-pager"></div> </div>
Open the SLIDER gadget and paste the code, SAVE.
3.1 SLIDER SETUP (#2 only)
The carousel slider will be added automatically. You can select up to 9 posts to be displayed there using the Featured label.
4. WELCOME TEXT GADGET
Open the WELCOME TEXT gadget, click on EDIT HTML, write your welcome text and SAVE.
5. IMAGE BANNERS AREA
Open each Image gadget and add an image (the size will be adjusted automatically), you can also add a link and the button text in the Caption area.
6. 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 and SAVE.
7.CATEGORIES MENU (#1 and #2 only)
Open the LABEL gadgets and select the categories you want to display, try to keep the same quantity in each gadget to get better results.
8.MAILCHIMP FORM SETUP
The MailChimp form code will be probably added during the installation but if that’s not the case, copy the code below:
<div id="mc_embed_signup"> <form action="ADD-YOUR-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"> <div class="newsletter-text"> <h3>EDIT FORM TITLE</h3> <!-- Remove this line in the sidebar and footer forms --> <p>Receive all posts on your email.</p> <!-- Edit this text --> </div> <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 class="mc-field-group"><input type="submit" value="Sign me up" name="subscribe" id="mc-embedded-subscribe" class="button" /> </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> </form> </div>
Open the NEWSLETTER gadgets placed in different areas, paste the form code, add your form action and edit the title and text as needed. SAVE.
9. 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 8 columns x 1 row, 0 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.
Open the MOST READ gadget > Select the time frame (7 days = frequent updates), tick the image thumbnail checkbox and up to 5 posts.
Open the ARCHIVES gadget, select the option “Flat list” and SAVE.
In these demos, I’ve used widgets from ShopStyle Collective, using the Product Widget. The Shop page widget has 4 rows, 3 columns and an image width of 275px for better results.
11. RECOMMENDED BLOG SETTINGS
#1 and #2
12. CUSTOM 404 PAGE
Go to SETTINGS > SEARCH PREFERENCES > CUSTOM PAGE NOT FOUND. Add the following content and edit the text as you wish:
<h2>404</h2> <br/> <h4>Oops! That page can’t be found.</h4>
13. CUSTOM COLORS + FONTS
Go to THEME > 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 THEME > Click on the Mobile options.
Select “No. Show desktop template on mobile devices.” and SAVE.
I CAN’T UPLOAD THE TEMPLATE, BLOGGER SHOWS AN ERROR
This is most likely caused by the Featured Post gadget. Blogger allows one of these gadgets per blog and since the new template will install its own gadget you will see an error message.
The solution is to delete the Featured Post gadget in the Layout section before uploading the new template.
THE POST IS SHOWING THE MAIN IMAGE TWICE
Make sure there’s no space above the image, you can switch to the HTML mode to corroborate this and delete the space if necessary. I recommend uploading the first image and then adding the rest of the content.
THE HEADER IMAGE IS BLURRY
The header image supports retina display so to prevent blurriness create your header at 600px wide and 250px high, if possible, make the content reach both sides so no empty space is left. Once uploaded it will display at half the size and perfectly sharp.