Support > Designing and Building Your Website > Adding Your Content
The Text Box editor is used to enter, edit and format limited sections on your website. You will see this toolbar when editing Product Descriptions or the Custom Footer, for example.
The diagram below shows the toolbar that appears whenever you are in a section that uses the Text Box editor.
When you are using the Editor you will be able to hold your mouse pointer over any of these icons and a description of what it does will appear in the yellow "Tool Tips" box in the left corner of your screen.
Here is a list of the icon functions:
Find | -Search for and/or replace a keyword | |
Cut | -Remove selected text from a page and place it onto the "Clipboard" so that it can be used elsewhere using the Paste option | |
Copy | -Place a copy of the selected text onto the "Clipboard" so that it can be used elsewhere using the Paste option | |
Paste | -Take the content of the "Clipboard" and insert it into the page at the current cursor position | |
Paste as plain text | -Paste as plain text, removing any formatting that might have been copied | |
Paste from word | -Essential if you are pasting content from Microsoft Word. Removes any problematic hidden code | |
Undo | -Undo last action | |
Redo | -Redo last action | |
Insert Link | -Insert a link to an internal or external page | |
Remove Link | -Remove a link to an internal or external page | |
Anchor | -Insert an anchor | |
Insert/ edit Image | -Insert an already uploaded image onto the page or edit an existing image | |
Insert/ edit embedded media | -Insert or edit flash files | |
HTML Fragments | -Insert saved HTML fragments | |
Widgets | -Insert Widgets onto the page | |
Custom Form | -Insert saved custom forms | |
Insert custom character | -Insert non Latin characters | |
Create Table | -Link to table section of Article | |
Table Options | -Allows you to edit a table that you have inserted | |
Align Left | -Aligns text to the left of the page | |
Align Centre | -Aligns text to the centre of the page | |
Align Right | -Aligns text to the right of the page | |
Align Full | -Spaces text so that both ends of each line are aligned |
Edit CSS style |
- Use to edit the CSS for a page, for advanced users only |
|
Format |
- Sets the format of the text |
|
Font Family | - Choose the font of your text | |
Font Size |
- Choose the size of your text. |
|
Bold | - Makes text appear like this | |
Italic | - Makes text appear like this | |
Underline | - Makes text appear like this | |
Strike through | - Makes text appear like this | |
Select text colour | - Change the colour of the current text | |
Unordered List | - Create a bullet pointed list of items0 | |
Ordered List | - Create an automatically numbered list of items | |
Indent | - Add indentation or increase the indentation of the current paragraph | |
Outdent | - Decrease the indentation of the current paragraph | |
Insert Horizontal Ruler | – Inserts a horizontal line across your page | |
Remove Formatting | – Removes all formatting from highlighted text |
All images must be uploaded to the “Images” area before they can be inserted onto a page.
To insert an image onto a page you must first click into the part of your page where you would like to add the image. Next click onto the “Insert/Edit Image” icon from the Editor tool bar.
On the 'General' tab, from the drop-down 'Your Images' you will need to select the image that you wish to insert and then enter an Image title and description
On the 'Appearance' tab you can change the alignment, dimensions and border style for the image.
Click “Insert” when you are ready to insert the image onto your page.
If once you have inserted an image onto your page, you wish to go back and edit any of the settings you will need to click onto the image and then onto the “Insert/ Edit Image” button again in order to bring up the options for that image.
You can add text to your page by typing directly into the editor.
If you are copying your text content from somewhere such as Word, you will need to use the use “Paste From” icon. This will remove any unwanted formatting which could break the code on your page. To use this, you will need to highlight all of the text that you wish to copy – right click and select 'copy'.
You will then need to click onto the 'Paste from' icon from the Create editor toolbar, and a box will pop up. You will need to paste the text into this box and then click 'Insert'.
Using the options on the tool bar you can then edit the font, size, colour and formatting of the text.
Using the 'return' key will create a new paragraph which by default comes with padding which will create a space between lines. In order to have no spacing between your lines of text you will need to hold down the 'shift' key as you press 'return'.
You can add links to your pages, to internal pages on your website and to external pages on other websites.
- Internal
To set up a link type the text or insert the image onto the page where you wish for the link to appear.
Next highlight the text or image that you wish to act as your link, then click onto “Insert/edit link”.
For internal links, select a page from the drop down box. For a page such as your 'Shop' you are able to select a sub category from a second drop down list.
- External
To set up a link type the text or insert the image onto the page where you wish for the link to appear.
Next highlight the text or image that you wish to act as your link, then click onto “Insert/edit link”.
For external links, type in the full URL including http:// into the Link URL field.
The 'Target' field indicates whereabouts the link will open when clicked on.
The “Title” text will appear if a visitor to your site holds their mouse over the link. It is useful for providing additional information about the page being linked to, but it is also popular with the search engines as it gives them more information about the content of your page.
To edit an existing link simply click on it and click the link button on the Editor Toolbar to access the links settings.
- Anchors
You can use the Anchors feature to create 'back to top' links and other same page links.
To do this click “Insert/ edit Anchors” from the Editor Toolbar and name your anchor. Then click “Insert”.
This anchor will be the place on the page where your visitors will end up. For example, to create a 'back to top' anchor, you would place the anchor at the top of the page.
You will then need to create the link that will take you to the anchor that you have placed.
To do this highlight the text or image that you wish to use as the link and select “Add/ Edit Links” from the Editor Toolbar. You can select the anchor that you wish to link to from the drop down box labelled 'Anchors'.
Search And Replace allows you to search for a particular word or phrase on your page. Select “Search and Replace” from the Editor Toolbar and type the word you are looking for in the "Search:" box then click the "Find Next" button.
If found the word will be highlighted and the page will be scrolled automatically to where it first appears. Click the "Find Next" button to find the next occurrence(s) of the word.
The Replace feature allows you to replace all occurrences of a word or phrase with an alternative word or phrase. For example, if you wanted to replace every occurrence of the word "dog" on a page with the word "cat" then you would simply enter 'dog' into the "Search:" box and 'cat' into the "Replace" box, then click the "Replace" button to replace each occurrence of "dog" one by one or click the "Replace All" button to replace all occurrences in one go.
Below the "Search:" and "Replace:" boxes are two options to help narrow down your searches: "Match Case" makes sure that what you are searching for matches exactly, so searching for dog, for example, would not find Dog or DOG.
Use this icon to place a insert an HTML fragment that you have saved onto your page. For a complete guide on how to use this facility, please read our article "How To Use HTML Fragments".
You must save an HTML fragment in the “HTML fragments” area before you can insert it onto your page.
When inserted a grey image will appear in place of where the HTML fragment will appear on your live site. To see the HTML fragment in place you will need to preview your website.
Use this option to place a custom e-mail form that you have created (using the "Custom Forms" option at the top of your "Content" screen) onto your page. When inserted a grey image will appear in place of where the HTML fragment will appear on your live site. To see the custom form in place you will need to preview or publish your website.
If you have created Macromedia Flash animations then you can use this feature to place them onto your pages. Please Note that the Flash .SWF file must first be uploaded using the "Files" option at the top of your "Content" screen.
This allows you to insert any special text characters and symbols into your page that can not be typed directly with the keyboard. These include things such as the copyright symbol and fractions. Simply click on the symbol you require and it will be placed on your page at the current cursor position.
Spacing
When using the 'return' key a paragraph is created. Paragraphs come with padding which will create a space between the next line of text.
If you are looking to create a single line break which moves your cursor onto the next line then you will need to hold down the 'shift' button as you press 'return'.
Avoid using the space bar to align content on your pages. This can cause alignment and spacing issues when editing your content.
Copy & Paste
When copying and pasting from Microsoft Word you will need to use the 'Paste from Word' or 'Paste as plain text' buttons on the editor toolbar.
When copying and pasting from another program or website it is advisable that you first paste the text into a program such as Notepad to remove the formatting and then paste it into the editor.
Images
You can upload images directly to your page by going to 'Insert/edit Image' from the editor toolbar and then selecting 'Upload'.
If you have any further questions, please get in touch and we will be happy to help.
Get in Touch