Page Editing

---

Adding Sections to a Page

A section is the most basic element that allows you to add other elements when editing a page. It also lets you adjust the content layout to look neat and tidy. Most of the time, it's important to add a section as the base container before adding other elements to ensure the content layout is responsive on different screen sizes.

To add a section to the page:

• Open the page editor by navigating to Dashboard > Website > Pages > Create a New Page or click the existing page.
• Click the “Insert” button in the left panel.
• Under the “Layout” heading, drag and drop the “Section” element into the page editing area on the right.
• Enter the text content in the section, then adjust the padding to change the content layout within the section.

Section options

There are many options to configure on the Section, giving you the flexibility to customize the content to your needs.

• Content Size: This changes the maximum width of the content area in the section. You can choose Large, Medium, or Small.
• Full Height: This changes the height of the section to cover the whole screen.
• Background: You can set the background of the section with a color or an image.
• Font Color: You can configure the color of the text within this section.

Section Sizing

To configure the default section sizing:

• Navigate to Dashboard > Website > Design.
• Click the primary Design to edit.
• Click the “Style” button in the left panel, then select the “Section Sizing” option.
• Adjust the width of Sections (small, medium, large) and the height of the Full-Height Sections.

Note: You can also add one section into another section.

---

Adding Text to a Page

To add text to a page:

• Open the page editor by navigating to Dashboard > Website > Pages > Create a New Page, or click on an existing page.
• Type within a section, or copy and paste text from another source into the section.
• Alternatively, click the "Insert" button in the left panel, then drag and drop the "Heading" or "Paragraph" element into the page editing area.

Editing the Text Style

After adding text, you can edit the style via the top toolbar, including:

• Making the text Headings (Heading 1, 2, 3).
• Adjusting text alignment.
• Formatting the text into a list.
• Creating links for the text.
• More advanced text styling options can be found by clicking the three-dot button in the top toolbar.
• Note that each page should contain only one Heading 1 text for the best SEO practice.

Note: To change the font style, you can go to the design section to adjust the typography.

---

Adding Images to a Page

To get started：
Log in to your website dashboard and select the Pages option, which appears under the Website heading in the left sidebar.

Click the "New Page" button on the top of the page and configure a new page, or select a existing page from the list of pages.

Uploading Your Image

After opening the page editor, click the "Insert" button, located in the left-hand toolbar.
Drag the image box to the place on the page where you want the image to sit.
The sidebar will then give you the option to input an Image URL, select an image From Stock, From Media (previously uploaded files), or Upload a File.
Choose the necessary option and the image will display wherever the image box was placed.

When you upload an image to a page in Oncord, the image is stored in the attached media folder for that particular page. Images uploaded on one page won't appear in another pages attached media folder.

Resizing and Positioning Images

After placing an image on the page, you can resize it and choose how it interacts with elements around it.

Click the image to display a sizing tab in the bottom right-hand corner, and positioning handles on the bottom and the right-hand sides.

Adding Icons to a page

To add a generic image from an image library click the insert option from the toolbar on the left-hand side of the page.

Select the icon element in the insert toolbar and drag it onto the page where you want the icon to sit. A new window will open up where you can adjust the size of the icon and search for the icon you need from the icon library.

---

Adding Videos To A Page

To get started, log in to the website dashboard and select the Pages option, which appears under the website heading in the left sidebar. Click the "New Page" button on the top of the page and configure a new page, or select a existing page from the list of pages.

Embed or Upload?

There are two ways of adding a video to your website: uploading or embedding.

When you have the video file on your local computer and wish to place it on a page, you can upload the video to Oncord via the 'From Media' button in the settings toolbar.  Uploading a video directly to your website will use quite a lot of your bandwidth and storage allowance.

An alternative to uploading a video directly to your website is to upload your video to YouTube or Vimeo. You can then embed a YouTube or Vimeo player on your website instead, which won't use your bandwidth and storage allowance. 

Uploading The Video

After opening the page editor, click the "Media" button on the left hand side of the page.

Select "Upload Files" to upload a video into the media folder. 

Note: when you upload a video to a page in Oncord, the video is stored in the attached media folder for that particular page. Videos uploaded on one page won't appear in other pages attached media folder.

From the "Attached Media" folder drag the video to the place you want it to display on the page.

Embedding a YouTube Video

To embed a YouTube Video, click the insert button on the left hand side of the page. Drag the YouTube box to the place on the page where you want the video to display. 

Embedding a Vimeo Video

Vimeo has a feature for generating a video embed code. 'Embed code' is a small snippet of code that can be pasted onto your site to link to interactive content from an external site.

Firstly go to vimeo.com and search for the video you want featured on your page. Once you have found the video, hover over the video and click the share button. 

A popup window will appear, copy the embed code from that popup window.

To embed a the Vimeo video:

Click the insert button on the left hand side of the page.
Drag the Embed Code box to the place on the page where you want the video to display. 

Then paste the copied Vimeo code into the toolbar on the left hand side and select "Apply".

Resizing and Positioning Videos

After placing an image on the page, you can resize it and choose how it interacts with elements around it.

Click the image to display a sizing tab in the bottom right hand corner, and positioning handles on the bottom and the right hand sides.

---

Adding A Google Map To A Page

To get started:
Log in to your website dashboard and select the Pages option, which appears under the Website heading in the left sidebar.

Click the "New Page" button on the top of the page and configure a new page, or select an existing page from the list of pages.

Embedding the map

Select the insert button on the left hand side. Then drag the "Map" box onto the section of the page where you want the map to display. 

Defining the map

A menu will open on the left hand side allowing you to adjust the size of the map, the centring, and any markers you wish to add.

---

Creating Links

This article will offer a complete tutorial on how to link page elements like text and images to other pages on your website, as well as external addresses and downloadable files. This article also explains how "link targeting" works, allowing you to open links in new browser windows.

To get started:

Login to Oncord and click the "Pages" link, located under the "Website" heading in the left sidebar. Click the page that you'd like to update, or create a new page. If you don't know how to create or edit a page, please refer to the 'Create a new page' tutorial.

Once on the page editor screen, select the text or image that you would like to act as a link to another page.

After selecting an element, on the top of the screen you'll notice the text format bar.

Select the link tool, which is located in the top toolbar and shown in the image below.

Clicking the link icon will show additional options on the left-hand side of the screen.

The following options are available in this toolbar:

Page on your Website

To create a hyperlink to a page on your website, select this option and then select the page you would like to link to from the library of pages.

Link to: External URL

If you would like to create a hyperlink to an external website, select this option and then type the web address you would like to link to in the first field.

Link to: E-Mail Address

If you would like to create a hyperlink to open an email account and pre-fill an email with specific email details, select this option and then type the details into the E-Mail Address, Subject, and Body fields.

Link to: Heading on this page

If you would like the link to scroll to a particular heading on the page, select this option and choose a heading from the "Scroll to heading" dropdown box.

Link to: File / PDF

If you would like to create a link to a file or PDF, select this option and then upload the file you would like to link to.

Modify or Remove an Existing Hyperlink

To modifying an existing link, select the hyperlinked text or image, open the link tool and alter the hyperlink details.

If you would like to remove a hyperlink select the "Remove Link" option at the bottom of the link toolbar.

Checking your Hyperlinks

After creating or editing hyperlinks, you can check that all hyperlinks on the website are working correctly. To check your website links:

Login to Oncord, and navigate to "Pages" in the left menu. 

At the top of the screen in the top menu, select "Check Links".