This article contains the following sections:
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, select your desired code snippet and copy the entire HTML and (if applicable) CSS 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, and add any CSS code to the CSS section at the bottom.
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 HTML code into the HTML section at the top, and add any CSS code to the CSS section at the bottom 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.