Using the Snippets section of the Custom Code & Snippets page in InstantPro, you can add chunks of custom HTML code in Snippets to individual pages.
Before you start the tutorial, you'll need to log in to the MyFreeola Control Panel and open the InstantPro Website builder
Step 1: Once you've logged into MyFreeola and opened the InstantPro Website Builder, from the Site Overview select Custom Code & Snippets.
Step 2: You should now find yourself on the page shown below. There are three options on this page, but for this guide, we'll just be using the first: Custom Code Snippets. To get started, click the Create a New Snippet link.
Step 3: You should now be able to assign a Snippet name and add the HTML code you want to use in the Snippet Content box.
We've chosen to use a Clock as an example in the image below, the HTML code in the Snippet Content box links to a digital clock plug in and also contains some styling.
Note: We recommend that you only use HTML when using Snippets, as using other code may cause your site to appear incorrectly, though you may still experiment with other languages if you wish.
Once you're happy with the name of your snippet and any content within it, click Save and then Finish to be taken back to the InstantPro Site Overview.
Step 4: from the Site Overview, click Page Manager and edit the page that you want to add a snippet to.
Note: You can only add snippets using the Text Editor, so if you want to add a snippet to any page which isn't a Standard Page, you will need to edit the Page Intro Text and include it there.
Now thet you're editing the page, click the Snippet Button in the Text Editor Toolbar as shown in the image above.
Step 5: You can now add you snippet to your page. As it's our first snippet, the Insert Snippet window has defaulted the drop down to our 'clock' snippet.
All you have to do to add a snippet to your page is select it from the drop down and click Insert.
Note: You may have noticed that there is a Create New Snippet button in this window. There are two ways to create a snippet, and by clicking this button you can create snippets while editing your page instead of using the Custom Code & Snippets page. Any Snippet you create from the text editor toolbar will also appear on the Custom Code & Snippets Page.
Step 6: Once inserted, your snippet will appear as it as shown below, with your Snippet Name in a box. You can place snippets anywhere within the text editor and this will be determined by where the Text Editor Cursor was when you clicked the Snippets Button.
Step 7: Done! As you can see from the image below, though the clock may not display in the text editor, on the live site, you can see the digital clock we've added to our page.