Adding HTML Code Using Snippets
Last updated on by Freeola Support
4 out of 8 people found this article useful.
Important Information
This guide is for the Freeola InstantPro Website Builder. This service has now been replaced by a more modern product, RQS, and therefore is no longer updated with new features.
To build your website in RQS for free, please click here or visit the RQS Builder section of your MyFreeola Control Panel.
HTML (Hypertext Markup Language) is a coding language, which is used to design Web Pages. InstantPro is designed so that users do not need a knowledge of how HTML coding works, the software adds it to your pages for you.
HTML works by opening a tag with < > and closing it with < / > with the relevant content contained in between. No matter what the tag is, whether it defines a new paragraph or a hyperlink, it will start and finish in this way.
There is a very comprehensive guide list including HTML and other programming language available on the w3schools website.
Step 1
Using the Page Elements Sidebar, select the Add Snippet box and drag it on to the page.
Step 2
Double Click the block. You can now select an Existing Snippet from the drop-down menu, Edit an Existing Snippet, or create a new one. To add a new piece of HTML code, click Create New Snippet.
Step 3
Step 4
The snippet should look similar to the image below in the Drag & Drop Editor. While it appears like this in the Editor, it should appear as a text on your live site. Once you are happy press Finish.
If you would like to check that the text is displaying correctly on your site, click Save in the bottom of the page and then click the View Website link in the InstantPro header and navigate to the page.
We're going to give an example of how to create the below introduction using HTML code.
You can see below the translation of the introduction into HTML code, the code represents the same thing as the introduction above.
The Information below outlines and explains the different HTML tags and that are used in the code to create the introduction. Read this carefully if you're not already familiar with HTML.
< p > & < / p >
The < p > tag signifies a new paragraph on the page. The < / p > codes the end of the paragraph.
& nbsp ;
This tag denotes a line spacing. This is why the heading in the first line displays slightly below the top of the page.
< p style="text-align: center;" >
The p style tag lets you denote a style for the paragraph, in this case we have aligned the text by using the "text-align: center" text align can be set in a few different ways, but we've chosen to use center; to display the text in the middle of the page.
< span style="xxxx: xxxx;" >
The span style tag allows you to input a number of different styles that change how the text inside span tags appears on your page.
The layout is very important here. First you use the style tag, followed by an equals sign followed by a command (such as colour) that must be in quotation marks.
Secondly, the command is followed by a value (such as colour number), the command will be followed by a : to separate it from the value. The value is followed by a ; to finish. Look at line 2 in the example to see this.
Secondly, if the command is followed by a value, then a ':' is used afterwards to separate the command from the value. The value is followed by a ';' to finish. All come together to make '< span style="command: value;" >'
Below the commands and values are explained:
The color: command simply changes the colour of your text. The value is the colour tag (in this case it's InstantPro Orange)
font-family: Arial;
The font-family: command denotes the font type, in this case Arial is the value.
text-decoration: underline;
text-decoration: is being used here with the underline; value in order to underline the text.
font-size: 15pt;
The font-size: command sets any text contained to the weight (pt) value specified.
<strong>
The < strong > & < / strong > tags will display any text contained inside them in bold type.
Remember
If you open a new tag, remember to close it. Otherwise you may find strange things happening to your pages. Also make sure that you follow the syntax of the code, making sure that speech marks and semi colons are included when necessary.
Most of the time you won't need to edit your pages with the HTML Editor, as InstantPro was created so that all the design work can be done in the Drag & Drop Editor. However, features such as Maps & YouTube videos are items that you will only be able to add by manipulating the HTML code on your pages.
You can follow the guides below to add specific items to your pages:
Live Chat is offline
Live Chat is available:
9:30am to 5:30pm Monday to Friday (excluding bank holidays).
It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.