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.

When working with Pixpa text editor, press ENTER (windows) or RETURN (mac) to create a new paragraph, to insert a new line without forcing a new paragraph, press and hold the SHIFT key, and then press enter or return.

Most of the editor’s functions will take effect the moment you click on the button/icon. In other cases, clicking on the icon will bring about a small drop down menu with additional options.

When adding styling to your text, you can either click the editor option and begin typing to get the selected result or type your text, highlight it and then click the editor option to have it added to the selected text.


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.


Note: ‘Code’ and ‘Quote’ have default styling.

  • Code: This is used to define a piece of computer code. The content inside is displayed in the browser’s default monospace font.
  • Quote: This is the same as H3 along with a 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.

Note: Font style, weight, and color will be visible on the website only, and NOT in the studio.


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.

Ideal image size for blog post text editor images is 1500px width x any height. This is the preferred size for all blog layouts. Supported website image file formats are JPG, JPEG, PNG, and GIF. If you upload images of a bigger size, we downsize them to 1500 pixels width. 


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.

Tip: You can also directly place the YouTube URL in the text editor. System would automatically pull the video screenshot.  


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.

 

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>

Please Note:

  • To link to an external website that is outside of your Pixpa site, enter http://followed by the web address, for example http://www.example.com.
  • To link to a gallery or store category or page within your site, enter the URL slug, for example /gallery
  • To create a link that opens an email desktop client, enter mailto: followed by the email address, for example mailto:example@example.com.
  • To create a link that makes a phone call, enter tel:, followed by the phone number with country code, for example tel:+0-123-456-7890
  • To create a link that open Whatsapp, enter https://wa.me/<number> where  the <number> is a full phone number in international format. Omit any zeroes, brackets or dashes when adding the phone number in international format. For example: Use https://wa.me/15551234567 instead https://wa.me/+001-(555)1234567Know more.
  • To link to your PDF or other file uploaded in files section, enter the copied link here. Know more.


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.

Tip: With the help of HTML code view, you can add any type of embed code in your blog post.  

Can't find what you're looking for?

Get in touch with a Pixpa Expert.