The Text Widget allows you to add multi-line text blocks to your website pages. You can add text directly on the page or add text using a WYSIWYG HTML Editor. The text can be formatted with various styles and attributes using text formatting tools. The Text Widget is one of the most important widgets you can add to your website as it allows you to inform your website visitors of what you do, which will have a positive effect on your organic search ranking.
To add a text widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Text Widget in the BASICS section.
- Click and drag the Text Widget into a container on your website page.
Allowable areas the widget can be inserted into include:
- Within blank columns
- Above or below existing widgets
- Between existing widgets
Placeholder text will appear for you to edit.
- Edit the text.
You can edit the text directly in the widget or by using the Rich Text Editor in the Text Settings popup.
Click here for instructions on how to edit the text directly in the widget.
Click here for instructions on how to edit the text using the WYSIWYG HTML Editor.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
To edit the text directly in the widget:
- Double-click on the Text Widget container.
The placeholder text will be highlighted and the Text Formatting Toolbar will be displayed.
- Enter text as required.
- Configure the style of the text as required, using the Text Formatting Toolbar.
- Font: select a font family from the dropdown list.
- Size: select a preset font size from the dropdown list.
- Color: Select a font color using the Color popup. Click here for instructions.
- Line Height: sets the height of the text by adding space above and below the text. The height is specified as a factor of the current font size. Select a height option from the dropdown list. Options are displayed with the line height applied to give you an indication of the spacing that will be applied.
- Format: Select a text format.
- Bold: formats the text with thicker lines.
- Italic: formats the text with a slant to the right.
- Underline: displays a line underneath the text.
- Alignment: Select an alignment option.
- Align Left
- Center
- Align Right
- Justify
- Insert placeholder: lets you insert your company details into the text block using the data fields in the dropdown list. Details for the data fields are taken from your account information.
To edit the text using the WYSIWYG HTML Editor:
- Click on the down arrow beside the Text Widget icon.
- Choose the Text Settings item from the drop-down menu.
The Text Settings popup will be displayed with the Text Properties tab selected. A WYSIWYG HTML Editor is contained in the tab.
- Click on the input box.
- Enter text as required.
- Configure the style of the text as required, using the Text Formatting toolbars.
- Source: lets you toggle between the WYSIWYG rich text editor and the source code.
- Clipboard/Undo Toolbar:
- Cut: removes the selected control or text and places it on the Clipboard.
- Copy: copies the selected text onto the Clipboard.
- Paste: inserts the contents of the Clipboard at the current location.
- Paste as plain text: pastes text as unformatted text.
- Paste from Word: pastes text while preserving the formatting of the original text.
- Undo: lets you undo one change each time you click it.
- Redo: lets you redo one change each time you click it.
- Font: select a font family from the dropdown list.
- Size: select a preset font size from the dropdown list.
- Text Color: Select a font color using the Color popup. Click here for instructions.
- Basic Styles Toolbar: lets you format the style of the text.
- Bold: formats the text with thicker lines.
- Italic: formats the text with a slant to the right.
- Underline: displays a line underneath the text.
- Strikethrough: displays a horizontal line through the middle of the text.
- Subscript: formats the text as small letters below the text baseline.
- Superscript: formats the text as small letters above the normal line of type.
- Remove format: removes all formatting applied to the text.
- Paragraph Toolbar: lets you set the formatting of the paragraph.
- Insert/Remove Numbered List: starts a numbered list at the cursor position and applies a numbered list to selected text/removes a number point from the current cursor position and removes a numbered list from selected text if a numbered list is applied.
- Insert/Remove Bulleted List: starts a bulleted list at the cursor position and applies a bulleted list to selected text/removes a bullet point from the current cursor position and removes a bulleted list from selected text if a bulleted list is applied.
- Decrease Indent: decreases the distance between the start of the paragraph and the left margin.
- Increase Indent: increases the distance between the start of the paragraph and the left margin.
- Block Quote: creates a block element to enclose text as an extended quotation. The block is rendered visually by the display of a grey line down the left of the quote container and italicized text that is indented from the left margin.
- Create Div Container: creates an HTML div container to encapsulate a group of content.
- Align Left: aligns text to the left margin.
- Center: centers text horizontally between the left and right margins.
- Align Right: aligns text to the right margin.
- Justify: aligns text to both left and right margins.
- Text direction from left to right: sets the text to start from the left margin and move towards the right margin as you type.
- Text direction from right to left: sets the text to start from the right margin and move towards the left margin as you type.
- Links Toolbar: lets you configure hyperlinks on your text.
- Link: lets you specify a URL to an arbitrary web address.
- Unlink: removes a previously configured hyperlink.
- Anchor: lets you specify a name for an anchor point that you wish to link to from elsewhere on the page.
- Insert Toolbar: lets you insert other elements into the text box.
- Image: lets you insert an image and configure its appearance.
- Flash: lets you insert a flash animation.
- Table: lets you insert a table and specify its properties.
- Insert Horizontal Line: lets you insert a horizontal line and specify its appearance.
- Maximize/Minimize: lets you toggle the size of the HTML Editor. Maximize makes the editor the full size of the screen. Minimize reduces it back to its original size.
- Placeholder: lets you insert your company and store details into the text block using the data field variables in the dropdown list. Details for the data fields are taken from the information specified under Admin > Settings > Contact Details and Admin > Account > DecoNetwork Account Settings.
You can use the following placeholders to output your company and store information:
- NAME: will output the company specified under the DecoNetwork account settings.
- EMAIL: will output the email address specified for the company details under the DecoNetwork account settings.
- COMPANY_NAME: will output the company specified for the company details under the DecoNetwork account settings.
- COMPANY_NUMBER: will output the company identification number specified under the company contact details.
- SUPPORT_EMAIL: will output the email for the company details under the DecoNetwork account settings.
- PHONE: will output the phone number specified for the company details under the DecoNetwork account settings.
- SUPPORT_PHONE: will output the customer support phone specified under the company contact details.
- ADDRESS_STREET: will output the address specified for the contact address under the company contact details.
- ADDRESS_ZIP: will output the post code specified for the contact address under the company contact details.
- ADDRESS_CITY: will output the city specified for the contact address under the company contact details.
- ADDRESS_STATE: will output the state specified for the contact address under the company contact details.
- ADDRESS_COUNTRY: will output the country specified for the contact address under the company contact details.
- CURRENT YEAR: will output the current year.
- FC.NAME: will output the site name specified under Design > Logo & Title in the Website Editor.
- FC.EMAIL: will output the general order enquiry email address specified under the company contact details.
- FC.COMPANY_NAME: will output the company name specified under the company contact details.
- FC.COMPANY_NUMBER: will output the company identification number specified under the company contact details.
- FC.SUPPORT_EMAIL: will output the customer support email specified under the company contact details.
- FC.PHONE: will output the general phone specified under the company contact details.
- FC.SUPPORT_PHONE: will output the customer support phone specified under the company contact details.
- FC.ADDRESS_STREET: will output the address for the contact address specified under the company contact details.
- FC.ADDRESS_ZIP: will output the postcode for the contact address specified under the company contact details.
- FC.ADDRESS_CITY: will output the city for the contact address specified under the company contact details.
- FC.ADDRESS_STATE: will output the state for the contact address specified under the company contact details.
- FC.ADDRESS_COUNTRY: will output the country for the contact address specified under the company contact details.
- FC.PROCESSES: will output the decoration processes enabled by the Fulfillment Center.
- FC.PRIMARY_DOMAIN: will output the primary domain name of the Fulfillment Center.
- STORE.NAME: will output the site name specified under Design > Logo & Title in the Website Editor.
- STORE.EMAIL: will output the email address specified for the account details under the store administration.
- STORE.COMPANY_NAME: will output the company specified for the account details under the store administration.
- STORE.COMPANY_NUMBER: will output the company number allocated to the store.
- STORE.SUPPORT_EMAIL: will output the email specified for the account details under the store administration.
- STORE.PHONE: will output the phone number specified for the account details under the store administration.
- STORE.SUPPORT_PHONE: will output the phone number specified for the account details under the store administration.
- STORE.ADDRESS_STREET: will output the street address specified for the account details under the store administration.
- STORE.ADDRESS_ZIP: will output the post code specified for the account details under the store administration.
- STORE.ADDRESS_CITY: will output the city specified for the account details under the store administration.
- STORE.ADDRESS_STATE: will output the state specified for the account details under the store administration.
- STORE.ADDRESS_COUNTRY: will output the country specified for the account details under the store administration.
- STORE.CREATE_YEAR: will output the year the store was created.
- STORE.PRIMARY_DOMAIN: will output the primary domain name of the store.
- Click OK to save the changes.
Comments
0 comments
Please sign in to leave a comment.