When editing content, it is important to learn how to use the text / WYSIWYG editor (what you see is what you get). Text editor allows you to edit, change, and add content to your web pages (Contact form, Calendar, Guestbook), Blog post and Cover Banners without having the knowledge of HTML.
The options explained:
- Format – Change the font style
- Align – Alignment of the text
- Bold / Italic / Strikethrough / Underline
- List – Ordered / Unordered
- Image – Add an image
- Video – Add a video
- Table – Add a table
- Link – Add a link to your text
- Text Color – Change the color of text
- Clips – Add CTA buttons
- Widget – Add a custom code
- HTML code view
- Fullscreen mode
1. Format – Change the font style
You can use four different type of font style in your website (at a time) which would be specified in the Design section. This is a common design style that’s used across the website.
All font style are specified in the design section only.
- Header 1 Style → Headline font and style → <h1> tag
- Header 2 Style → Title font and style → <h2> tag
- Header 3 Style → Sub title font and style → <h3> tag
- Normal text Style → Paragraph font and style → <p> tag
- Header 4 Style → Same as H1 only font size will be half of H1 → <h4> tag
- Header 5 Style → Same as H1 only font size will be half of H2 → <h5> tag
- Header 6 Style → Same as H1 only font size will be half of H3 → <h6> tag
- Quote Style → Same as sub title font and style i.e. H3 → <blockquote> tag
Once you specify the font style in the design section, You can efficiently use them across the website. Just select the text and apply the formatting. The system will automatically apply the fonts color, size, and weight of that particular style to the selected text. You can review the same on the website.
2. Align – Alignment of the text
You can align your text as left, right, center and justified. Select the text and choose the alignment from the drop-down.
3. Bold / Italic / Strikethrough / Underline
- Bold – Highlighted text will become bold when this is clicked. In HTML, this uses a <b> tag.
- Italic – Highlighted text will become italic when this is clicked. In HTML, this uses the <i> tag.
- Strikethrough – Highlighted text will mark deleted when this is clicked. In HTML, this uses the <del> tag.
- Underline – Highlighted text will become underlined when this is clicked. In HTML, this uses the <u> tag.
4. List – Ordered / Unordered
You can easily covert your text in lists with indentation to organise them.
- Unordered list – Highlighted text will be formatted like a bulleted list. In HTML, this uses a set of <ul> and <li> tags.
- Ordered list – Highlighted text will be formatted like a numbered list. In HTML, this uses a set of <ol> and <li> tags.
- Outdent – A highlighted text area will be un-indented
- Indent – A highlighted text area will be indented.
5. Image – Add an image
You can add your multiple images by clicking on it. Clicking this button will open a small modal window where you can either drag or select your image from your system. In HTML, the tag used is <img>.
You can also resize your image by drag and drop from the right bottom blue icon on that particular image.
The editor also allows you to add the image title, caption, and link to the uploaded image. Click on any image, and you would see the option of Edit and Delete.
After clicking on the edit icon, you would see a pop up window where you can specify:
- Image title – This would be Alt tag of that particular image
- Image caption – To show the text along with the image on live site
- Image position – Left, center, right
- Link to the image
- Link visibility – Open in new tab or same tab
- Save the changes
- Replace the image by dropping a new image on thumbnail itself.
6. Video – Add a video
You can add your YouTube/Vimeo videos here. Clicking this button will open a small modal window where you can enter your Youtube/Vimeo video URL or embed code.
7. Table – Add a table
The Editor allows you to add a table of N number of rows. You can structure your content in rows and columns.
8. Link – Add a link to your text
The Editor allows you to insert a link to any text. You can connect your existing website pages or any other website/blog/PDFs etc.
Highlighting text and clicking this button will open a small modal window where you can enter in the destination URL, choose whether or not to open in a new window, or choose to link to another page on their own site. In HTML, the tag used is <a href=”http://example.com”>Link Text</a>
9. Text Color – Change the color of text
By default system will apply the font style color specified in the design section. However, you can override global color with this tool. Select the text and click on the color icon, a standard palette of colors will appear for you to choose from.
Note: You can specify any other custom color which is not available in color palette from the HTML code view. Scroll down to point 12 know more.
10. Clips – Add CTA buttons
The editor also allows you to add CTA buttons – Square or Rounded to link any page/gallery/website/pdf etc. You can customize its size and color from HTML code view. Scroll down to point 12 know more.
Clicking this icon will open a small modal window where you can choose the CTA button.
11. Widget – Add a custom code
The Editor allows you to add any custom code as well like Google Map embed code, Soundcloud embed code, Tweet post embed code, etc. Essentially any embed code can be added in the editor with the help of widget icon.
Clicking this icon will open a small modal window where you can paste your embed code.
12. HTML code view
Editor window can function as a Visual Editor (WYSIWYG), or as an HTML editor. You can switch to HTML editor by clicking on it. You can change anything from code view if know how to do it or you may also ping Pixpa support team if you need any help.
13. Fullscreen mode
Editor allow you to switch to full screen mode. It would be very helpful if you are organising your long blog post or writing a long article.