How to use the Pixpa text editor

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.

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:

  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. HTML code view
  13. 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.

Note – Font style, weight, and Color will be visible on the website only 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 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:

  1. Image title – This would be Alt tag of that particular image
  2. Image caption – To show the text along with the image on live site
  3. Image position – Left, center, right
  4. Link to the image
  5. Link visibility – Open in new tab or same tab
  6. Save the changes
  7. 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

 

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

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


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.