HI, WELCOME TO ALMOND 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 using it as a reference.
NEED HELP?
Please, check the TROUBLESHOOTING section at the end of this page. If your problem is not solved there, use the support form here to get priority over my regular email.
WANT TO CUSTOMIZE IT?
I can help you to customize this template, add or remove sections, change fonts, colors and more. Just send me an email to support@mairagstudio.com and I’ll be in touch as soon as possible.
CUSTOMIZATIONS START AT US$15.
CHANGELOG
Version: 1.0.0
– Release date: January 23, 2022
RECOMMENDED IMAGE SIZES
HEADER: 500px wide (PNG, transparent background, no blank space around the text).
POSTS: At least 800px wide.
LET’S START!
1. INSTALLATION
Go to THEME > Click on the arrow next to CUSTOMIZE > Restore > Upload the almond.xml file.
IMPORTANT! If you can’t restore the file, open the XML file with a notepad, copy all the code and paste it in THEME > CUSTOMIZE > EDIT HTML (remove the previous code first).
2. TOP MENU SETUP
Go to LAYOUT > TOP MENU > EDIT > ADD NEW ITEM (or edit the existing ones).
In the SITE NAME field, add the title that will appear on the menu (ie. HOME, ABOUT ). In the SITE URL field, add the page URL, don’t forget to add the HTTPS:// prefix. Click on SAVE.
To create a drop-down menu, add the PARENT SITE NAME, in the URL field add a hashtag (#). To create the child item, add an underscore (_) before the CHILD SITE NAME and add the page URL, make sure the child items are placed under the parent item, see example below:
When you’re happy with the end result, SAVE changes.
3. HEADER MENU SETUP
Similar to the top menu, open the gadget and add your custom links. This menu only supports one-level items so the dropdown setup won’t work here. SAVE changes.
TIP: Categories URLs have this format: https://yourblogurl.com/search/label/Category Name
4. LATEST POST SECTION
Open the LATEST POST gadget and activate all the options. SAVE
The column on the right will be populated automatically with the 2nd, 3rd and 4th posts published by date.
5. BROWSE BY SECTION
Open the BROWSE BY gadget, select the labels you want to display, choose List format and uncheck the “Show number of posts per label” option. SAVE changes.
6. FEATURED POSTS SECTION
To activate this section, apply the label Favorites (please note that only the F must be uppercase) to at least 4 of your selected posts.
You can customize the section title by editing the ALL TIME FAVORITES gadget title.
7. ABOUT SECTION
Open the ABOUT IMAGE gadget and upload your picture (at least 800px wide). Don’t activate the “Shrink to fit” option. SAVE.
Open the ABOUT TEXT gadget and add your own text. For the button use:
<a class="button" href="YOUR ABOUT PAGE LINK HERE">GET TO KNOW ME →</a>
You should do the same in the sidebars ABOUT gadgets.
8. CALENDAR DATE SETUP
Go to SETTINGS > FORMATTING > DATE HEADER FORMAT > Select this format: day month, year (ie. 20 October, 2022) and SAVE.
9. SOCIAL ICONS SETUP
Open the SOCIAL ICONS gadget > ADD NEW LINK (or just edit the existing ones) > Add your social media name and link, click SAVE and repeat with each social icon you need. Use the arrows to rearrange the order of the icons and SAVE.
10. TRENDING POSTS
Open the TRENDING POSTS gadget, select the timeframe you want to use (for new blogs I would recommend ALL TIME, for blogs with more content I would recommend LAST 30 DAYS). Activate the “Show thumbnail image” option and display 3 posts (don’t show snippet).
11. ARCHIVES
Open the BROWSE THE ARCHIVES gadget, select the option “Flat list” and SAVE.
12. INSTAGRAM GADGET 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 1 row x 6 or 8 columns, 0 photo padding, Fade Out hover effect and YES to Responsive.
Click on GET WIDGET. Click on COPY TO CLIPBOARD.
Paste the code in the Instagram Feed HTML widget and SAVE.
13. SHOP SECTION
Open the LATEST FINDS gadget and carefully edit the text as you wish. You can also add a link to a shop page inside your blog (with more affiliate widgets as shown in the demo).
Open the AFFILIATE WIDGET gadget and paste your widget from LTK, Shop Collective or similar. Make sure your widget only has one row.
IMPORTANT: Both options mentioned here require you are a member so you need to be approved or invited first. If you don’t want to use this section you can remove both gadgets, add this in CUSTOMIZE > ADVANCED > ADD CSS:
.shop.section {
display: none;
}
14. MAILCHIMP FORM SETUP
Open the NEWSLETTER gadget, edit the title and replace your FORM ACTION in the form code and SAVE.
IMPORTANT: You need a MailChimp account and an Audience created to use this form. If you need to use a different service you can contact me for help.
How to get the MailChimp form action. (follow until step 6, copy that link into your browser and then copy the new link from the browser into the FORM ACTION area of the code I provide).
15. CUSTOM 404 PAGE
Go to SETTINGS > ERRORS AND REDIRECTS > CUSTOM 404. Add the following content and edit the text as you wish:
<h2>404</h2> <br/> <h4>Oops! That page can’t be found.</h4>
16. CUSTOM COLORS + FONTS
Go to THEME > CUSTOMIZE > ADVANCED.
Use the dropdown arrow to navigate the different options.
17. ENABLE RESPONSIVE DESIGN
Go to THEME > Click on the arrow next to CUSTOMIZE > MOBILE SETTINGS > Choose DESKTOP.
18. OPTIONAL RECIPE STYLING INSIDE POSTS (see example)
You can add this recipe template to SETTINGS > POSTS > POST TEMPLATE and it will be added to each new post you create, just replace the texts as you need, I recommend working in HTML mode.
<div class="recipe">
<h2>RECIPE TITLE</h2>
<div class="recipe-meta">
<span><i class="far fa-clock"></i> PREP TIME: 15 mins</span>
<span><i class="far fa-clock"></i> COOK TIME: 15 mins</span>
<span><i class="far fa-clock"></i> TOTAL TIME: 30 mins</span>
<span><i class="fas fa-chart-pie"></i> SERVINGS: 7</span>
</div>
<div class="recipe-ingredients">
<h3>INGREDIENTS</h3>
<ul>
<li>Ingredient 1</li>
<li>Ingredient 2</li>
<li>Ingredient 3</li>
</ul>
</div>
<div class="recipe-instructions">
<h3>STEP BY STEP</h3>
- Step 1<br/>
- Step 2<br/>
- Step 3<br/>
- Step 4<br/>
- Step 5<br/>
- Step 6<br/>
- Step 7.<br/>
- Step 8.<br/>
</div>
</div>
TROUBLESHOOTING
THE HEADER IMAGE IS BLURRY
The header image supports the retina display. To prevent blurriness create your header at 500px wide, make the content reach both sides so no empty space is left. Once uploaded it will display at half the size and perfectly sharp. If you need a bigger logo please contact me so I can help you.
THE FAVORITES SECTION IS EMPTY
Make sure you’ve added the Favorite label to at least 4 posts.
THE RELATED POSTS DON’T SHOW UP
The related posts or “YOU MAY ALSO LIKE” section will work if you have at least 4 posts with the same label.
HOW CAN I DELETE THE ICONS NEXT TO THE TITLES?
Add this to the CSS box in THEME > CUSTOMIZE > ADVANCED:
h2 > .far,
h2 > .fas {
display: none;
}
I NEED TO TRANSLATE SOME TEXTS
You can open the HTML template in THEME > CUSTOMIZE > EDIT HTML. Place the mouse cursor inside it and press CTRL+F or CMD+F, type the word you want to translate and press ENTER. The word will show up highlighted so you can CAREFULLY replace it.
I’d recommend doing a backup of the template before changing anything.
If you need help with this please contact me.