Baca blog SIRCLO untuk mendapatkan info terkini seputar bisnis e-commerce

Appearances: Text Editor

Here are some guidelines if you want to change various kinds of styling based on your preference.

1. Making a text bold, italic, or underline
Similar to editing a word document, you can make a text bolditalic, and underline through these icons:

2. Adjusting the alignment of the text, either left alignment, center, right or justify
You can align portions of your text to the left, center, right, or even justify through these icons:

(Note: in the web, it is advisable not to use justify alignment because it causes extra spacing which makes the page hard to read.)

3. Changing the style of the text, color, or event frot size

There are three types of text styles you can used in the web, namely:

  • Heading
    Heading is used for title or subtitle of an article. Using proper heading in your articles is beneficial to produce better SEO result.

  • Paragraph
    Paragraph is used for main content of the article

  • Block quote
    Block quote style is normally used for a text section which you want to highlight compared to others.

Here is example of text style may affect the look of the site:

And to change the text style of the font, color, and font size, you can use these icons:

4. Creating a list
To create a list, here are the icons used to create a list:

You can also create a nested list (a list inside a list). For example, to create an un-ordered list inside an ordered list, Please follow the following steps:
  • Click 'Insert/Remove Numbered List Icon'
  • When you want to create a nested list, click 'Increase Indent Icon'
  • A nested ordered list will be automatically created.
  • To change nested ordered list to nested un-ordered list, click 'Insert/Remove Bulleted List'
  • To end the nested list, click 'Decrease Indent Icon'
5. Creating Indentation
Indentation is used to create a nested list or to increase indentation of the text. Here is the set of icon to be used :   

6. Creating a Link 

To create a link on any text / image, please follow the following steps :

  • Highlight the text to be linked / click image to be linked.
  • Click 'Insert/Edit Link Icon'
  • Here are some fields that you can fill in to create a link:
    • Link URL
      Specify the URL you want the text / image to link to. Make sure you are inserting a full URL eg. http://www.sirclo.com instead of just www.sirclo.com
    • Target
      You can specify whether the linked URL will open in new window, or will replace the URL in your current window. When it is not specified, default value is 'Open Link in the same window'
    • Title
      Title field is optional. It is used to describe the link, and will appear when the linked text / image is hovered
  • Click Insert

To remove a link that which has been created, follow this instruction:

  • Highlight the text link or click image link
  • Click 'Unlink' icon

Here is the set of icons used to create / remove a link:

7. Creating in-page link

Besides external link, you can also create in-page link which brings to a different section of the same page. 

To create an in-page link , please follow the following steps :

  • Click anywhere inside the text editor where you want your link to point to.
  • Click 'Insert/Edit Anchor' Icon
  • Enter a name under 'Anchor Name' to identify that spot (It is advisable to create an easily understandable name)
  • Now highlight the text to be linked ,or click image to be linked to the anchor you just created
  • Click 'Insert/Edit Link' Icon
  • Specify Link URL as #<anchor_name> you have just created

Here is the set of icons used to create in-page link:

8. Creating a horizontal line

Horizontal line is normally used as a separator. To add a horizontal line, click 'Insert Horizontal Line' Icon

Here is the icon used to add a horizontal line:

9. Creating a table
Table is used a lot if you have multi-columned text, Here is the set of icons used to create and update a table:

Insert/Edit Table 

  • Click This icon to add a new table to the editor. Here are a few fields you can specify:
    • Columns
      It indicates number of columns to be created
    • Rows
      It indicates number of rows to be created
    • Ignore the other fields, as it is only used for advanced editing
  • Table Row Properties
    It is used to update a property of entire row in a table. Here are a few fields you can specify:
    • Row Type (optional)
      A row can be a header/body/footer. Different styling may apply for different row type
    • Alignment (optional)
      It is used to set the horizontal alignment of the row (center/left/right)
    • Vertical Alignment (optional)
      It is used to set the vertical alignment of the row (top/center/bottom)
    • Height (optional)
      It is used to set the height of the row
  • Table Cell Properties
    It is used to update a property of a cell only. Here are a few fields you can specify:
    • Alignment (optional)
      It is used to set the horizontal alignemnt of the row (center/left/right)
    • Vertical Alignment (optional)
      It is used to set the vertical alignment of the row (top/center/bottom)
  • Insert Row Before
    It is used to add a new row before a row where a cursor is located at.

  • Insert Row After
    It is used to add a new row after a row where a cursor is located at.

  • Delete Row
    It is used to delete a row where a cursor is located at.

  • Insert Column Before
    It is used to add a new column before a column where a cursor is located at.

  • Insert Column After
    It is used to add a new column after a column where a cursor is located at.

  • Delete Column
    It is used to delete a column where a cursor is located at.

  • Split Merged Table Cells
    It is used to split a cell that has been merged before (see below on how to merge cells)

  • Merge Table Cells
    Several adjacent table cells can be merged together into one cell. To do so, highlight several cells and click 'Merge Table Cells' icon
10. Inserting Special Characters
To insert a special character, click 'Insert Special Character' icon and choose a character. and here is the icon used:

11. Inserting a picture

To insert a picture, please follow the following steps :

  • Click where you want to add the picture
  • Click 'Insert/Edit Image' Icon

  • Copy the image URL from the image file if the image already exists.

  • Click insert
  • If the image doesn't exists, you must add picture to the file first, please follow the following steps :
    • Go to Files in the sidebar. And then, choose New Files > add file .

    • Select a picture that would be in insert
    • Click save, and follow the steps as above .  
  • To adjust the images position, click 'Insert/Edit Image' Icon > Appearance

12. Embedding a video

To embed videos from other video sources such as YouTube into your website, please follow the following steps :

  • Go to the website which provides videos
  • Open the video that you wish to embed
  • Right click on the video and copy the embed code
  • Click the HTML icon to open the HTML Source Code dialogue box

  • Paste the embed code in the HTML Source Code 

  • click Update 

Build your online store in just 1 minute Create Store