The Page text editor

Pages let you create any kind of information-based page using 100+ content blocks with Pixpa’s easy drag-and-drop page builder.

You can organize, edit and customize these content blocks to create unique pages to show your content.
Also check: Understanding sections and snippets.


In the page builder, you can easily add sections and drag-and-drop snippets from the left sidebar onto the page canvas area.

After placing a section on your page, you can edit individual snippet items (text, images, buttons) in it.

Simply move your cursor on the page canvas area, all individual snippets will be highlighted on mouse hover. Then, click on any snippet to edit the same.

See how to edit the content in action: 


Here’s what you can do in the page canvas area: 

  1. Sequence the snippets.
  2. Duplicate the snippets.
  3. Delete a specific snippet.
  4. Undo the recent changes.
  5. Apply bold/italic/underline and other formatting to the text.
  6. Change the text color and snippet background color.
  7. Apply the text formatting or change the font style.
  8. Change the text alignment.
  9. Create ordered and unordered lists.
  10. Apply a hyperlink to the text.
  11. Add a symbol.
  12. Remove pre-text formatting.
  13. Edit the HTML of an entire page.

Snippet Tool Box and Editing Tool Bar

On clicking on any snippet, you would see the Snippet Tool Box of the individual snippet on the right side and the Editing Tool Bar on the top.

There are 4 options in the snippet toolbar: 

  • Drag ( ) – Used to sequence the snippets by drag and drop.
  • Duplicate – Used to duplicate the snippet.
  • Element Tools – Used to view the add new snippet, duplicate a snippet, move snippet up/down, and delete option of an individual snippet.
  • Delete – Used to delete the snippet.

 


1. Sequencing the snippets

  • You can sequence your snippet by drag and drop. Just hold the drag icon and drag the snippet across all the blocks on a page and drop it at the desired position.
See sequencing snippets in action:

2. Duplicate your snippet

  • You can duplicate any existing snippet by clicking on the duplicate icon.
See duplicating snippets in action:

3. Delete your snippet

  • You can delete any snippet from your page by clicking on the delete icon.
See deleting snippets in action:

4. Undo the recent changes

  • You can undo the recent text-based changes by pressing Ctrl (windows) or ⌘ (mac) + Z. 

5. Bold / Italic / Underline / Strikethrough etc

  • You can easily edit your snippet text by clicking on it. Just select the text and click on the editing toolbar icon to Bold, Italic, Underline respectively.

 

See in action:

6. Text color / Text background and section background-color

  • Click on a particular snippet, select the text and click on the color icon. You would see a pop-up window where you can select FORECOLOR (text color) (1), BACKCOLOR (text background color) (2).
  • The section background color (3) can be changed from the Content styling tab.
  • You can also change or remove the applied color/styling. Just select the text and click on the clean icon (4) to remove the existing color scheme.

Text color (Forecolor) and the text background color (Backcolor): 

 


Section background-color: 

Also Check: Section background color and image.


Clean icon: 

 


See in action:

7. Text Font Style

  • You can use four different types of font styles on your pages (at a time) which would be specified in the Design section. This is a common design style that’s used across all the pages.
    • Header 1 Style → Headline font and style → <h1> tag
    • Header 2 Style → Title font and style → <h2> tag
    • Header 3 Style → Subtitle font and style → <h3> tag
    • Header 4 Style → Subtitle / Bylines font and style → <h4> tag
    • Paragraph text Style → Paragraph font and style → <p> tag

  • Once you specify the font style in the Design section, you can efficiently use them across the page. Just select the text and apply the formatting in the page editor.
    Also Check: Website Text style.
  • The system will automatically apply the font, color, size, and weight of that particular font style to the selected text. You can review the same on the live site and editor.

 


See in action:

When working with 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.


8. Alignment of the text

  • You can manage your snippet text alignment – Left / Center / Right and justify by clicking on the alignment icon in the editing toolbar.

 


See in action:

9. List – Ordered and Unordered / Indent / Outdent

  • You can easily convert your text into lists with indentation and organize them.
    • Indent – A highlighted text area will be indented.
    • Outdent – A highlighted text area will be un-indented. To outdent, click on the unordered/ordered list icon that you have applied before.
    • 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.

 


See in action:

Note: You can remove the indentation by clicking on same list/indentation icon again.

  • You can easily add a link to your text (hyperlink/anchor tag).
  • Highlight the text and hit the link button in the editing toolbar. You can connect your existing website pages or any other website/blog/PDFs etc.
  • On clicking, you would see a pop-up window where you can enter URL or slug (1), choose whether or not to open in a new window (2), link/button text (3), Title – used in case of images only (4).

 

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)1234567. Know more.
  • To link to your PDF or other file uploaded in the files section, enter the copied link here. Know more.

Also Check: Linking text/button.


11. Add a symbol
  • You can easily add or replace a symbol (social, art, number, etc) in the page editor.
  • Go to any snippet and click where you want to add your new symbol or click on an existing symbol to replace the same.
  • Then, click on the Emoji symbol and add the symbols from the right drawer.

 


See how to add different types of symbols to your page:

12. Remove pre-formatting from the pasted text

  • If you copy pre-formatted text directly from Word, Powerpoint, or any internet page, the page editor tends to mess up the text.
  • So, you need to remove pre-formatting from your text first so that you can apply the Pixpa font style which is set in the Design section.
  • Simply select the entire text of the snippet and hit the clean button.
  • It will remove the pre-formatting and apply the paragraph text style to all the text in most cases.
    Know more.

 


13. HTML code of all snippets

  • You can copy or edit the HTML code of all snippets of a page in one go.
  • It would help you to duplicate your existing block on a page.

 

Also Check: Edit Page HTML.


See how to view the HTML code of a page:

Can't find what you're looking for?

Get in touch with a Pixpa Expert.