How to Use HTML in Our Text Fields
You can use HTML tags and attributes to further customise your CEP Public Page section under Credentials, About, Contact Form Greetings, Disclaimer, or the Reviews section.
Jump to section:
HTML Tags, Attributes - How to Use Them
You have the flexibility to customize your text with various HTML tags and attributes. This section will help you understand which HTML tags (the building blocks of web pages) you can use and how to apply them, even if you're new to HTML. Let's dive into the basics to enhance your text.
HTML Tags
Web pages are made of HTML elements, which are created using tags. Here are some common ones you can use within our page:
Text Formatting Tags
Paragraph <p> ...</p> : Creates a paragraph. |
Bold <b>text</b> : Makes text bold. |
Italic <i>text</i> : Makes text italic. |
Underline <u>text</u> : Underlines text. |
Headings <h1>...</h1> , <h2> , ..., <h6> : Define headings. |
List Tags
Ordered List <ol> ...</ol> : Creates a numbered list. |
Unordered List <ul> ...</ul> : Creates a bullet list. |
List Item <li> ...</li> : Specifies items in a list. |
Additional Tags
Image <img> : Embeds an image. |
Link <a href="url_address">link_name</a> : Creates a hyperlink. |
Horizontal Rule <hr> : Inserts a horizontal line. |
Div <div> ...</div> : Create a container to group content together. |
The following is the full list of HTML tags that you can use in our page:
a, p, b, strong, i, em, u, a, img, br, li, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, thead, th, tbody, tr, td, sup, sub, div, span, small, hr, iframe
The script tag <script> is not allowed
HTML Attributes
These are additional values that are provided within the HTML tags to style or adjust their behavior. Here are the attributes you can add to each of the HTML tags within our page:
| HTML Tags | Allowed Attributes |
|---|---|
| Any tags |
|
<a> |
href , target (_self or _blank for new tab) |
<img> |
src , alt , width , height |
<iframe> |
src , width , height |
The style attribute lets you further customise the look of your content e.g. color, border, background, padding, margin, display etc
Our page automatically insert a linebreak <br> each time you hit enter. This could make your content space far apart vertically especially if you are keying in HTML code. To avoid this, you can add the class="no-break" attributes to the outermost HTML tag or simply wrap those content within a div e.g. <div class="no-break">...your html code...</div>
Basic Examples
Adding a Paragraph with Style
<p style="color: blue;">This is a <b>BLUE</b> paragraph.</p>
Result:
This is a BLUE paragraph.
Creating a Link
<a href="https://google.com" target="_blank">Visit this link</a>
Result:
Making a List
<ul class="no-break"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Result:
- First item
- Second item
- Third item
Inserting a horizontal line within a div that has style
<div class="no-break" style="border:1px solid blue;border-radius:8px;padding:16px;"> <b>hey there</b> <hr> <i>be right back</i> </div>
Result:
be right back
Embedding an Image
To add an image, provide the image link to the src attribute within<img> tag.
<img src="__IMAGE_LINK__ " style="width:100%;">
<img src="https://drive.google.com/thumbnail?id=1NeotBnUkOdGCBTCzAZXUvoD2LErwcv7b&sz=w1000" style="width:100%;">
Results:
You will have to first upload your image to your Dropbox or Google Drive to store those images. You can then retrieve the image link to be pasted into the image src attribute.
Google Drive - How to get your image src link
- In your Google Drive, right click on your uploaded image and click "Share". Click on "Copy link" to get the image link. Your copied link will be in the following format, where
___ID___is a very long unique text:
https://drive.google.com/file/d/___ID___/view?usp=sharing
- Copy the
__ID__and paste it within the following link, replacing__ID__portion with the id you have just copied:
https://drive.google.com/thumbnail?id=___ID___&sz=w1000
This step is required so the image link from Google Drive can be embedded externally. Ensure that your uploaded image in Google Drive is set to allow anyone with the link to view it. You can right click on the image and click "Share" to check this.
Dropbox - How to get your image src link
- In your Dropbox, right click on your uploaded image and click "Copy link". The copied link will be in the following format:
https://www.dropbox.com/scl/fi/__xxx__/__image_name__?rlkey=__somekey___&dl=0
- Edit the link to delete the final part "
dl=0" and replace it with "raw=1" so the link becomes:
https://www.dropbox.com/scl/fi/__xxx__/__image_name__?rlkey=__somekey___&raw=1
This step is required so the image link from from Dropbox can be embedded externally. Ensure that your uploaded image in Dropbox is set to allow anyone with the link to view it. You can right click on the image and click "Manage Permission" > "Links" > "Settings" to check this.
Templates
Here's a sample HTML code you can use to format your reviews:
In the template code below, you will find each review content is wrap within <div class="review-block">...</div> followed by <hr> horizontal line. You can replace the following with your own text:
__SUMMARY_HEADER__ __IMAGE_LINK__ __REVIEW_CONTENT_PARAGRAPH_1__ __REVIEW_CONTENT_PARAGRAPH_2__ __REVIEWER_NAME__ __REVIEWER_TITLE__
The second <div class="review-block">...</div> in the code is a sample of what it could look like after you have filled in your content.
<div class="review-block no-break"> <h5>__SUMMARY_HEADER__</h5> <img src="__IMAGE_LINK__"> <p>__REVIEW_CONTENT_PARAGRAPH_1__</p> <p>__REVIEW_CONTENT_PARAGRAPH_2__</p> <div><b>__REVIEWER_NAME__, __REVIEWER_TITLE__</b></div> </div> <hr> <div class="review-block no-break"> <h5>EXCEPTIONAL ESTATE PLANNER</h5> <img src="https://drive.google.com/thumbnail?id=1NeotBnUkOdGCBTCzAZXUvoD2LErwcv7b&sz=w1000"> <p>I recently had the pleasure of working with ... I would highly recommend him to anyone in need of estate planning!</p> <div><b>Joe Doe, Manager in ABC company</b></div> </div> <hr>
Results:
