Content Areas

Using Content Areas

Within Content areas there are many useful features that may be of interest to you when adding content to your website. Content areas within StayTech allow you to format your text, paste from Word, add links, add images, videos and much more.

Within the toolbar at the top of the editor you have many functions available for you to use - they are grouped according to their functionality.

Cut Text

The scissors icon allows you to cut text - to do this you will need to select the text you wish to cut and click this icon to cut the highlighted text.

Copy Text

To copy the text to your clipboard you will need to highlight the text you wish to copy and select the copy icon located next to the scissors within your toolbar.

Paste Text

Depending on where you are pasting this content from depends on what pasting functionality you use.

Paste - To paste your copied or cut text you will need to click the Paste icon
Paste plain text - If you want to paste text that has already been formatted, but you don't want to keep the formatting, you can paste it as plain text. Copy / cut the desired text and paste it within the window once you have selected the Plain Text icon.
Paste from Word - Content areas within StayTech allow you to paste text from word. This functionality allows you to preserve the basic format within your word document. Copy the text from Word and select the clipboard icon with the letter W.

Undo

You can undo any of your changes by clicking the back arrow within the toolbar.

Re-do

You can re-do any of your changes by clicking the back arrow within the toolbar.

Text Styling

It is very easy to alter the style of the text within content areas. If you want to change the alignment of the text within the editor you can use the Left, Centre and Right aligning icons. Select the paragraph you want to align and click either of the aligning icons depending on where you want your text to sit.

Bold, Italic, Strike-through

To bolden text you can either select the B icon and start typing or you can highlight / select the text once written to make it bold. To write content in italics press the I toolbar icon or the same as before highlight the text and select this icon. To strike the text through you will again need to select the icon within the toolbar and start typing your content or highlight this and click the icon to add this formatting - please note that the strike-through will be applied to white spaces.

Undo Formatting

To undo all of your recent formatting you will need to click the T icon.

To add images to your content area please see the following link: https://help.staytech.co.uk/article/49-adding-a-photo-to-a-content-area

Adding Tables

To create a table you will need to click on the Table icon within your toolbar, once selected you will see a Table Properties window as displayed below:

This allows you to set the tables dimensions and configure how it will be displayed on your page.

Insert Horizontal Line

To add a line to your content area where you feel the paragraphs need to be separated you will need to place you cursor where this text should be split. Once you have your cursor in the correct place you click on the lined icon.

Inserting YouTube, Vimeo, Dailymotion URL or embed code

To insert a video from any of the above sources you will need to click on the play icon located within the toolbar - you will then be able to paste the URL within here. Click OK and you will be able to see your video within the editor.

Inserting an IFrame

To insert an IFrame you will need to click on the globe icon. Once selected you will be presented with the IFrame Properties window. You can paste the URL within here and configure how you want the IFrame to be displayed.

Formatting Text

Within content areas in StayTech you have the ability to format your text using the relevant styling. For styling titles and sub heading you can change the default paragraph format to using Heading styles - this will use your websites current branding colours. To apply this format you will need to either, highlight the text you want to apply the styling too or, you can select the correct format and type the text. You can also apply styling to images and links. To apply styling to your images you will need to select the image, once selected you will see an option within the dropdown called 'Full Width Image' as displayed below:

Select this if you want your image to go across the entire width of the content area.

To apply styling to links you will need to type the text you wish to make a link, highlight the text and then select the link icon as shown below:

If you're linking to a page within your website select the relevant page within the drop down menu.

If you're linking to a page that is not listed you will need to select Custom URL, paste in the URL and click the OK button. Once you have added the link highlight the text - once highlighted select the drop down menu as displayed below:

You will see Primary Button - once you have assigned the format to the text it will apply the relevant styling.

Within your editor you can create a numbered list. Start a new paragraph and select the numbered icon, add your list item and click return to add more items to the list.

Adding a Bullet Pointed List

Within the editor you can create a bullet point list. To create a list you will need to start a new paragraph within your editor and select the bullet icon, add your list item and click return to add more items to the list.

Text Indentation

You can set the indentation of your text. You have the option to be able to either decrease or increase the indentation. Select the beginning of the paragraph you want to indent and click the relevant icon to either decrease/increase the indentation of the text - select the icon again if you want to indent it further.

Adding Blocked Quotes

To add blocked quotes to your content area you will need to highlight the text and select the 'speech mark' icon - this will apply styling to your text and indent the quote.

Type the text you wish to make a link, highlight the text and then select the link icon as shown below:

Paste in the URL and click OK.

Unlinking Text

To unlink text that you have assigned a link to you will need select the relevant link, once selected you will see that the unlink icon has become available for you to use.

Adding Anchors

Content areas within StayTech allow you to places anchors within your text. To insert the anchor you will need to click on the flag icon you will then be able to see an anchor properties window. Give your anchor a relevant name click ok and you should now see a flag icon appear. Now that your anchor has been added you can create a link that takes you to your anchor point. Highlight the text and click the link icon you will be able to see the Link properties window. Change the link type to be 'Link to anchor in the text' you should then be able to see the anchor you have just created as displayed below:

Click OK and the link will then take you to the specified point within your paragraph.

Maximise The Content Area

If you feel the content area is too small to work with you can click on the 'arrows' icon to maximise the content area to fill your entire screen.