While creating your custom proposal in PVsell, within the page visual composer, you can edit each element as you need. You can choose among the following options allowing you to include different types of information in your proposal:
- Content Editor
- Image Upload (How do I insert an image onto a proposal page?)
- System Chart (How do I insert a chart/graph onto a proposal page?)
- System Infographic (How do I insert an infographic onto a proposal page?)
This article will cover the Content Editor, which is the most versatile element editor configuration.
WYSIWYG just refers to the editor type which is "What You See Is What You Get". This means that the text edited in this editor looks as similar as possible to the results end users will see after the document gets published. When you format your text using the WYSIWYG editor features, the formatting can be immediately seen in the editing area.
1. Follow the steps to opening up the Content Editor
These are described here: How do I insert my text into a proposal page?
2. Remove the demo content from the content editing window
The editing area section shows you what the current content you are working with will be. It starts off with dummy Latin text which you should delete before entering your content.
3. Enter and edit your content
If you want true flexibility (and know how to code HTML/CSS) you can click the "source" button to edit the underlying code.
The toolbar just above the editing area shows you the options available for editing your content. This is what it looks like:
The toolbar contains menu buttons that give you access to various functions of the WYSIWYG editor. All buttons are grouped according to their function.
The toolbar buttons are illustrated with meaningful icons. However, if you are not sure what functions they perform, just hover the cursor over the buttons to see a tooltip with the name of the function or see our short descriptions of the editing options below.
3.1. Cut, Copy and Paste; Undo and Redo
- Cut (to cut a text fragment, select it first, then press the Cut button on the toolbar or use the Ctrl/Cmd+X combination on your keyboard)
- Copy (to copy a text fragment, select it first, then press the Copy button on the toolbar or use the Ctrl/Cmd+C combination on your keyboard)
- Paste (to paste a text fragment, cut or copy it from another source first, then press the Paste button on the toolbar or use the Ctrl/Cmd+V combination on your keyboard)
- Paste as plain text allows you to paste an already formatted text, but without preserving the formatting
- Paste from Word allows you to preserve basic formatting when you paste a text fragment from Microsoft Word
- Undo (or Ctrl/Cmd+Z combination on your keyboard) – a quick way to cancel the recently introduced change
- Redo (or Ctrl/Cmd+Y combination on your keyboard) lets you revert the last undo operation
Depending on the security settings of your browser, the toolbar's access to the clipboard may be blocked, in which case you will be asked to paste the text into the Paste dialog window using the Ctrl/Cmd+V keyboard shortcut. Thus, using this combination is the most reliable way of pasting the text.
With the "Undo"/"Redo" buttons, you can go back/forward as many steps as required (20 levels by default).
3.2. Find and Replace; Select All and Check Spelling
- Find allows you to quickly find a word or a phrase among the text entered in the editing window:
- after you enter the search term in the "Find what" field of the "Find and Replace" dialog window, press the "Find" button, and the first occurrence of the term will be highlighted in the text;
- if you want to jump to the next occurrence, just press the "Find" button again)
- Replace allows you to quickly find a word or phrase in your text and replace it:
- after you enter the search term as well as the replace term and select the options, press the "Replace" button, and the first occurrence if the term will be highlighted in the text;
- if you want to replace the highlighted term, click the "Replace" button once more; then, if you want to jump to the next occurrence of the term in the text, press the "Replace" button again;
- you can also replace all occurrences in one go by pressing the "Replace All" button; all occurrences will be replaced at once, and a pop-up window will inform you about the result of the operation
- Select all allows you to select all contents in the editing window, including text, images, or tables; you can apply whatever action you wish to the selected content
- Spell Checker makes it easier to keep the language of the text clean and helps to eliminate typos
3.3. Links
- Link lets you add clickable hyperlinks or e-mail addresses to your content (as well as control the way they look and work)
- Unlink allows you to remove a link (when the cursor is placed in a link this button becomes active; pressing the button removes the link and leaves plain text)
- Anchor allows placing anchors in your text:
- to insert an anchor, press the "Anchor" button on the toolbar, the "Anchor Properties" window will appear
- to create an anchor, enter its name in the "Anchor Name" field
- once you click "OK", the anchor marker icon will appear in the document
- you can now create a link to your anchor with the "Link" button on the toolbar; the link will take the reader of your document to the section marked with the anchor
The anchor may either lead to a point in a document (when nothing was selected while creating it) or to some content that was selected in the document. In the latter case this selection will be displayed with a blue dotted border around (as it is shown in the image above, where the 'up' link will take the reader of the document to the 'Lorem' section marked with the anchor).
To remove an anchor:
- place the cursor in an anchor,
- then press the right mouse button,
- and then click "Remove Anchor" in the menu that appears.
This option removes the anchor from your document and leaves plain text.
3.4. Insert Images, Flash files, Special Characters, Project Output Fields, and other elements
- Image allows you to insert an image; this button opens the Image Properties menu with the following tabs:
- the "Image Info" tab allows you to set the image URL (the image may be located on an external server) and configure the way it will appear in the document
- the "Link" tab lets you assign a link to an image, effectively converting the image into a clickable link (for example, if you want to add a company logo and point to its website)
- the "Upload" tab allows you to upload your own image files to the server
- Flash allows you to add Adobe Flash files to your documents in an easy and intuitive way
- Table lets you add and edit a table quickly and easily, and offers advanced customization options for this document element
- Insert Horizontal Line allows you to add a horizontal divider (the horizontal line is inserted into the document on the location of the cursor)
- Smiley lets you insert emoticon icons representing your mood or other frequently expressed concepts (once added, the smiley will appear on the position of the cursor in your document)
- Insert Special Character lets you insert characters that are not a part of the standard keyboard (for example, during the creation of documents in foreign languages or when writing mathematical expressions)
- Insert Page Break for Printing:
- note that the text entered in the WYSIWYG editor is not divided into physical pages; if you need to have control over the paging of the printed version, use the "Insert Page Break for Printing" button
- once inserted, the page break will be visible in the editing area as two dotted lines with a page break symbol; when you print the document, it will be printed on two separate pages
- IFrame makes it possible to insert inline frames to a document (i.e., a frame containing another document in the middle of your document); the "IFrame Properties" dialog window will let you set configuration options that define the inline frame URL, its size, display properties, or advanced styling settings
- Project Output Fields (learn more here: How do I insert merge fields (text relating to the customer, project, and results)?)
You don't have to worry about resizing your image. If the image is too big, you can alter its dimensions by entering new values into the "Width" and "Height" fields.
By default the image ratio is locked, which you can see thanks to a lock button (you will notice the lock button right next to the "Width" field). This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
If you want to freely modify both dimensions, click the lock button in order to unlock the ratio, and the modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the lock button once more.
You can easily return to original image size by pressing the reset button. This will reset the image size, and the original width and height will now appear in the appropriate fields.
3.5. Create Forms
- Form is a container for all form contents
- this button lets you configure basic form settings that control the form's interaction with the server
- once inserted, the form will be visible in the editing area as a frame with a red dotted border
- to make it usable you need to add some form controls by placing the cursor inside the form and using further form toolbar buttons
- Checkbox
- a checkbox is a form element that lets you select an item and send your selection to the server when you are submitting the form
- multiple checkboxes may be combined in a logical group, wherein more than one item of the group can be selected at a time
- once added, the checkbox will be visible in the editing area, and you will be able to add some text that describes the checkbox option
- Radio Button
- a radio button is a form element that lets you select one item from the list
- radio buttons are usually used in groups, and unlike with the checkbox, here only one item can be selected at a time
- once added, the radio button will be visible in the editing area, and you will be able to add some text that describes the radio button option
- Text Field
- a text field lets you enter text into a single-line field and send your input to the server when you are submitting the from
- unlike the textarea, text fields are single-line and thus are meant for shorter entries
- a text field can either be a Text type (lets you enter the text and see it as you type), or a Password type (obscures the typed characters with an asterisk (*), a bullet (•), or another symbol in case it is used for entering passwords)
- once added, the text field will be visible with the default value shown either as plain text. or a series of asterisks/bullets
- Textarea lets you enter text into a multiline, scrollable field, and send your input to the server when you are submitting the form; textareas are meant for longer entries; once configured and added, it will be visible in the editing area as an empty rectangle
- Selection Field lets you select one or more items from the scrollable list, and send you selection to the server when submitting the form; usually contains numerous options and can either limit the selection to one item or allow selecting multiple items (by holding the Ctrl/Cmd key while selecting them with a mouse or with an Arrow key on your keyboard)
- Button gives the user a visual cue for completing a form action; it can be either of the following types:
- a standard button with arbitrary text,
- or a submit button that submits the form data to the server,
- or a reset button that resets the form elements to their default values
- Image Button gives the user a visual cue for completing a form action and is a clickable image that functions just like a standard button but has a customized appearance (please refer to the Inserting Images section above for more information on the configuration options)
- Hidden Field
- a hidden field is a special form element that does not allow any interaction with the user and is hidden from view, at the same time its value is sent to the server when the form is being submitted
- once you configure the hidden field and click "OK", the hidden field will be visible in the WYSIWYG editing area as a small icon; note, however, that it will be hidden while in preview mode
A form cannot be nested in another form or overlap with it, so you cannot start a new form inside the previous one.
3.6. Maximize, Show Blocks
- Maximize lets you maximize the WYSIWYG editor's window, clicking the same button once more will minimize the window
- Show Blocks
- some formatting settings can only be applied to block-level elements that may contain other elements, both block and inline in type; when some types of (block-level) styling are applied to one element within them (one letter, one word), this styling is automatically taken over by the whole block (a paragraph, a list, etc.)
- inline elements are minor blocks that are contained within block-level elements and are embedded due to stylistic distinctiveness, like italics, bold, or fixed-width font
- some users may not be sure why a given formatting feature works on a whole paragraph and another just on a selected fragment
- when you use the "Show Blocks" feature, the editor will display a grid of dotted frames around the block-level elements of the document along with their HTML tag, for your better understanding of the structure of your document
3.7. Source, Save, New Page, Preview, Print, and Templates
- Source allows users with knowledge of the HTML markup language to check the HTML code of the document and edit the document in this mode
- Save (when the editor is placed inside the HTML form, you can use this button to submit the data to the server; by default this button is inactive; it becomes active when the content editor is embedded in a form)
- New Page
- if you want to blank out the editing area and start anew, you can create a new document by pressing this button
- NOTE that this is a destructive operation and all information entered in the editing area so far will be lost
- if you unintentionally cleared your document by using the "New Page" function, you can revert the change with the "Undo" function
- Preview allows you to check the appearance of the document at any time during the creation process (this way you will be able to see the end result without editor chrome and toolbars)
- Print allows you to print the document along with all its formatting and contents (the printed material will not contain the editor window or its toolbars)
- Templates lets you control the structure of the document and preserve consistency across multiple documents
- templates are pre-defined, ready-made document forms with page layout, text formatting and styling as well as other elements
- each template in the templates list contains an image presenting the schematic outline of the template to give you an idea of what your document will look like if you apply any of the templates
- there is only one configuration option: "Replace actual contents"
- if you leave the configuration option checked, the inserted template will also replace the content entered previously, deleting it in the process; this is a potentially destructive operation, so if you unintentionally remove the text using this option, you can always revert this operation by using the "Undo" function
- if you leave the "Replace actual contents" option unchecked, the template will be inserted in the current position of the cursor in the document
3.8. Use Bold, Italic, Strikethrough, or Remove Format
- Bold lets you write in bold
- Italic lets you write in italics
- Strikethrough lets you strike the text through
- Remove Format makes it easy to remove the above mentioned styles
3.9. Lists, Indentation, Alignment, and other options
- Insert/Remove Numbered List
- numbered lists are useful when you want to group a number of items that need to appear in a particular order
- to add further list items, press Enter on your keyboard
- to create a nested numbered list, use the "Increase Indent" feature
- if you want to end the nested list and return to the previous indentation level, use the "Decrease Indent" feature
- if you want to suppress list creation, press Enter in an empty line or click the "Insert/Remove Numbered List" button again
- Insert/Remove Bulleted List
- insert a bulleted list if you want to group a number of items that do not need to appear in any particular order
- to add further list items, press Enter on your keyboard
- to create a nested bulleted list, use the "Increase Indent" feature
- if you want to end the nested list and return to the previous indentation level, use the "Decrease Indent" feature
- if you want to remove list formatting, select the list in the document and click the "Insert/Remove Bulleted List" button on the toolbar
- Decrease Indent (the indentation of a block-level element containing the cursor will decrease by one tabulator length)
- Increase Indent (the block-level element containing the cursor will be indented with one tabulator length; to indent an element even further, press the "Increase Indent" toolbar button as many times as necessary)
- Block Quote is used for longer quotations that are distinguished from the main text by left and right indentation (recommended when the quoted text consists of several lines or at least 100 words)
- Create Div Container allows users with knowledge of the HTML markup language and CSS styling to use div containers to be able to apply formatting to a document fragment that extends beyond the block
- Align Left (when you align your text left, the paragraph is aligned with the left margin and the text is ragged on the right side)
- Center (the text will align symmetrically and there will be some space left on both sides; this setting is often used in titles and table cells)
- Align Right (the paragraph is aligned with the right margin and the text is ragged on the left side; this is usually the default text alignment setting for the languages with right to left direction)
- Justify (the text will stretch from one side to the other and there will be no space left on either of the sides)
- Text direction from left to right
- Text direction from right to left
- Set language allows setting the Arabic, French, or Spanish language for creating your content
3.10. Formatting Styles
Paragraph formats and styles are pre-defined block-level combinations of various formatting options that make it easier to keep the presentation of the text uniform. What is more, since a format and a style often contains a number of features at once, when you want to customize the way a text fragment looks, you do not need to change a font, its size, or text and background color separately.
A style, a font, a font size and a color can be applied to the whole document, a paragraph, or a text fragment of arbitrary length — even a single letter.
For aesthetic and readability reasons it is recommended not to combine too many different styles, formats, fonts, font sizes, and colors in one document and to keep the styling consistent.
To choose a style, select a text fragment and press the "Styles" toolbar button, then, from the drop-down list select any of the pre-defined block and inline styles you wish to use.
3.11. Paragraph Format
A paragraph format can only be applied to a block-level element, like a paragraph or a div element.
To choose a paragraph format, place the cursor inside the block-level element and press the format toolbar button, then, from the drop-down list, select the format you wish to use.
3.12. Font
Using this toolbar button, you can select the typeface that will be applied to the document text. To change a font for a text fragment, click the "Font" toolbar button and select the desired font from the drop-down list.
3.13. Font Size
This button allows to determine how big or small a font used in the document text will be. To change a font size for a text fragment, click the "Size" toolbar button and select the size you wish to use.
3.14. Text and Background Color
- Text Color allows you to change the color of text in your documents by using a color palette
- to choose a color, select a text fragment and press the "Text Color" button, then select a color from a basic palette
- to select from an extended palette, click "More Colors" in the drop-down menu
- Background Color allows you to change the color of text background in your documents by using a color palette
- to choose a color, select a text fragment and press the "Background Color" button, then select a color from a basic palette
- to select from an extended palette, click "More Colors" in the drop-down menu
3.15. About Editor
For even more details about the Content Editor, click the "About Editor" button on the toolbar.
4. When you finish entering and editing your content, click "Submit"
5. Make other adjustments to the page, if necessary, then click "Save and Close"
Or click "Save and Continue" to perform a progressive update of the saved version, or click "Close without Saving" to cancel changes and revert to the most recently saved version.
Learn more about making adjustments to the proposal pages:
0 Comments