How to use the Pixpa text editor?

While editing content, it is important to learn how to use the text / WYSIWYG editor (what you see is what you get). This text editor allows you to edit, change, and add content to your web pages (Contact form, Calendar, Guestbook), Blog posts, and Cover Banners without having the knowledge of HTML.

The options explained are: 

1. Format – Change the font style
2. Align – Alignment of the text
3. Bold / Italic / Strikethrough / Underline
4. List – Ordered / Unordered
5. Image – Add an image
6. Video – Add a video
7. Table – Add a table
8. Link – Add a link to your text
9. Text Color – Change the color of text
10. Clips – Add CTA buttons
11. Widget – Add a custom code
12. Line – Add a line
13. Fullscreen mode
14. HTML code view

1. Format – Change the font style

You can use four different types of font styles on 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. You can also click on Manage Fonts, which is the last option in the dropdown when you click on the Text button. You can now see and set the following fonts and edit font style, size, color, weight, line height and letter spacing:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Paragraph text (normal, small and large)

Here’s a screenshot of Heading 1 style. You can edit the other headings paragraph fonts here as well.

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 convert your text into lists with indentations to organize 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 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’ll see the option of Edit (1), Delete (2) and Resize (3).

After clicking on Edit, you’ll see a pop up window where you can specify:

1. Title – This would be the alt tag of that particular image.
2. Caption – To show the caption along with the image on live site.
3. Position – Select the alignment of the image (left, center, right or none).
4. Link – Add a link to the image.
5. Open in new tab – Tick this checkbox if you want to open the image link in a new tab.
6. Save – Save your changes
7. Delete – Delete the image
8. 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

Click on the table icon (7) 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, the system will apply the font 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 to 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 to 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, e.g. 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 the widget icon.

Clicking this icon will open a small modal window where you can paste your embed code.

12. Line – Add a line

The Editor allows you to add a horizontal line.

Clicking this icon will add a line where the cursor is placed.

13. Fullscreen mode

The Editor allows 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.

14. HTML code view

Editor window can function as a Visual Editor (WYSIWYG), or as an HTML editor.

However, 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.