How to use code snippet templates

This article contains the following sections:

• What are code snippet templates
• How to use code snippet templates
• Customising the templates

What are code snippet templates

We offer our clients code snippet templates that can be used in many different locations within your Zapnito site.

The templates will adhere to your brand colours and are designed to be responsive all the way down to mobile devices. You will be able to edit and customise any text, images and links that are contained within the code.

How to use code snippet templates

First, visit the Code Snippet Library and copy the entire HTML code from your chosen template.

If you are using a homepage code snippet template, head to your Homepage Settings page and select a 'Custom' widget.

Once you have added the Custom widget and decided where you would like to place it on your homepage, paste the HTML code into the HTML section at the top.

For non-homepage code snippet templates, head to the Code Snippets Settings page and create a new code snippet. Make sure that you select the correct position in the dropdown menu provided and paste the entire HTML code into the HTML section of the code snippet.

Customising the templates

Once you have pasted the template code, you can customise any text, images and links that are contained within the code. You will find instructions within the code that let you know how to do this.

To edit text within a snippet, simply delete the placeholder text we have added and insert your own in its place.

When inserting links, you should add the URL after href= between the "".

To obtain a URL for an image in order to add it to the snippet, head to 'My Posts' and upload the image you would like to use as a poster image. Once you have done this, right-click on the image and select 'Open Image in New Tab'.

At the top of your screen, you will find an image URL that you can use in your code snippet. Make sure to remove _thumb before copying the URL, as this will ensure that the image is displayed in the snippet with the best resolution possible.

Paste the image URL where indicated after src= between the "", or between the quote marks in background-image: url(''). Make sure to also add some alt text to ensure that the image can be read by screen readers.

Once you have finished editing, for homepage snippets click either 'Save as Draft and Preview' or 'Save and Publish' at the top of the Homepage Settings page; for non-homepage snippets, remember to hit save at the bottom of the code snippet editor.

Any questions? Let us know at support@zapnito.com or drop a comment below this article.