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 a Column to a Page

The Row Column element allows you to vertically divide a page or section into multiple parts with flexibility and responsiveness across different devices.

To add a Row Column to a 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 "Row Column" element into the page editing area (typically into a section) on the right.
• By default, the Row Column element contains three columns in one row.

• To add more columns:
  • Click the "" icon in the "Column" label, and then select "Duplicate", or
  • Right-click any column and select “Duplicate”, or
  • Click the "" icon at the top of the blue bar.

• You can add more rows by using the same "Duplicate" action, or dragging or dropping another Row Column element into the page.

• You can modify the width of each column by dragging the blue bar left or right.
• You can then add text content or more elements within eah column.

Row Options

You can configure the Row Options to optimize the layout and ensure it looks clean and professional.

• Reverse Column Order on Mobile: By default, columns are displayed in the order “Column One, Two, Three” (with Column One at the top and Column Three at the bottom). You can reverse this order for mobile devices by enabling this option.

• Stretch Columns Vertically to Fill: Vertically align the content in each column to the Top, Middle, or Bottom. This is particularly useful when the content in columns varies in length.

---

Adding Tables to a Page

The Table element enables you to create structured, organized content displays within a page.

To add a Table to a 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 "Table" element into the page editing area (typically into a section) on the right.
• By default, the table element contains two rows and two columns (4 cells in total).

• You can then add text content or more elements within eah cell.

Editing Tables

To editing a table:

• Click the "" icon in the "Table" label, and then click "Edit".
• You can adjust the width of columns by dragging the blue bar left or right.
• You can edit cells, columns, or rows by right-clicking the specific element you want to edit. Here’s a list of available actions:
  • Cell:
    • Merge with right cell.
    • Merge with blow cell.
    • Split cell horizontally.
    • Split cell vertically.
  • Column:
    • Insert column before.
    • Insert column after.
  • Row:
    • Insert row before.
    • Insert row after.

• When you select two or more rows or columns, a pop-up menu will allow you to merge or delete the selected cells.

Table Properties

• Cell Padding: It controls the space inside each cell, between the cell’s content (such as text or images) and the cell’s border. Adding padding creates breathing room around the content, making it easier to read.

• Cell Spacing: This defines the space between individual cells in a table. Adjusting cell spacing separates each cell from its neighbors, making them appear as distinct blocks, which can enhance readability and overall layout clarity.

• Table Width: It sets the overall width of the table in its container. Adjusting this width allows you to control how much horizontal space the table occupies. A wider table displays more content per row, while a narrower table can be more adaptable to mobile devices.

Note: Each of these properties can be adjusted using pixels (e.g., 10px) for a fixed measurement or percentages (e.g., 5%) to create a responsive,  layout that adjusts based on the table’s container or cell size.

---

Adding Rotators To A Page

A Rotator is a slideshow element that displays multiple images or content slides in rotation. It’s perfect for showcasing featured content or highlights with smooth transitions.

To add a Rotator to a 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 "Rotator" element into the page editing area (typically into a section) on the right.

• You can then choose to add Sections or Images into the Rotator as slides.
• You can also edit the text content or add other elements to the Rotator Sections.

Rotator Options

• Add a new slide: Click on an existing slide and move the mouse cursor to the icon "" at the bottom. It will turn into an "Add New Slide" button.

Click the "" icon in the "Rotator" label, and then click "Edit".

• Auto Rotate Time: Set how long each slide should be shown before automatically moving to the next one (in seconds). If set to 0, the rotator will not rotate automatically.

• Auto Rotate Direction: Choose whether the slides should rotate forwards or backwards when auto-rotation is on.

• Group Size: Decide how many items to show at once on desktop.

• Mobile Group Size: Choose how many items to display at once when viewed on mobile.

• Space Between Items (PX): Set the spacing between slides (in pixels). This is helpful if you’re showing more than one item at a time.

• Start at Random: Turn this on if you want the rotator to start with a random slide each time the page loads. Otherwise, it’ll always start with the first slide.

• Transition: Customize the way slides transition from one to the next, including the Transition Animation, Transition Easing, and Transition Speed.

• Position Step: Choose how many slides the rotator moves each time the "next" or "previous" button is clicked.

• Minimap Variant: Pick a style for the minimap (the navigation dots) below the rotator.

• Arrow Variant: Set the look for the rotator’s navigation arrows.

• Align Items: Aligns items vertically when they vary in height, keeping things looking tidy and consistent.
  

---

Adding Cards To A Page

The Card element allows you to create visually appealing content that combines text, images, and links. It works similarly to other elements like Team, Testimonial, and Fancy Box, offering a flexible way to enhance your page's design and functionality.

To add a Card to a 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 "Card" element into the page editing area (typically into a section) on the right.

• You can then edit the text content and upload an image within the card

• Add a new card: Click on an existing card and move the mouse cursor to the icon "" at the bottom. It will turn into an "Add New Card" button.

Card Options

Click the "" icon in the "Card" label, and then click "Edit".

• Card Size: Choose from three size options: Small, Medium, or Large.

• Link To: Add a link to the Card. Options include linking to a page, email address, file, or phone number.

• Background Colour: Change the background color of the Card.

• Font Colour: Adjust the font color to ensure readability and match your design.

• Padding: Modify the spacing between the content and the edges of the Card.

• Rounded Corners: Apply rounded corners for a softer look.

• Apply Border: Add a border around the Card.

• Apply Box Shadow: Create a shadow effect to give the Card a three-dimensional appearance.

Adding a Team, Testimonial and Fancy Box to a page

Adding a Team, Testimonial, or Fancy Box to a page works the same way as adding a card in Oncord.

Oncord provides a variety of variants for each element, giving you the flexibility to customize your page to suit your preferences.

For example, to change the style of a Team element:

• Click the "" icon in the "Team Member" label, and then click "Edit".

• In the "Team Member Options" menu, click "Variant".

• Choose a style from the available list of variants.

---

Adding FAQ to a Page

FAQs (Frequently Asked Questions) are a great way to provide quick answers to common queries, enhancing the user experience and improving page clarity.

To add a FAQ to a 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 "FAQ" element into the page editing area (typically into a section) on the right.

• You can then edit the text content within the FAQ field.

• Add a new FAQ: Click on an existing FAQ and move the mouse cursor to the icon "" at the bottom. It will turn into an "Add New FAQ" button.

• Delete FAQ: Click the "" icon in the "FAQ" label, and then click "Delete".

• To remove the FAQ elements while keeping the text content, hover over the "Delete" option, then click "Leave Content".

---

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 Buttons to a Page

Buttons are essential elements on your website for guiding users to take action, such as navigating to another page, downloading a file, or contacting your business.

To add a Button to a 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 "Common" heading, drag and drop the "Button" element into the page editing area (typically into a section) on the right.

• You can then edit the text content within the Button field.

Button Options:

• Click the "" icon in the "Button" label, and then click "Edit".

• Variant: Choose from a list of styles to match your design preferences.

• Background Color: Set the button's background color.

• Font Color: Customize the button's font color.

• Border: Add a border to the button, with options for color and width.

• Rounded Corners: Control how rounded the button’s corners appear.

• Padding: Adjust the space around the content within the button.

• Link To: Add a link to the button, with options to link to a page, email address, file, or phone number.

---

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 a Gallery to a Page

A Gallery is an element that allows you to present photos in a space-efficient and visually attractive way, with image grid support and an integrated modal.

To add a Gallery to a page:

• In the page editor, click the “Insert” button in the left panel.
• Under the “Layout” heading, drag and drop the "Gallery" element into the page editing area (typically into a section) on the right.
• By default, the gallery element contains two rows with 6 image placeholders in each row (12 images  in total).

• You can then add image to each placeholder.

Gallery Options:

• Responsive Items Per Row: This option sets the number of images on each row within a specified range, attempting to choose the best number for the available space.
  • Example: a value of '4,6' tells the gallery to have between 4 and 6 items on each row, choosing the best number within that range according to the available space. A value of '4,4' tells the gallery that it can only have 4 items per row (if possible) at all times.

• Gallery Spacing: Controls the amount of space between images in the gallery.

• Gallery Sizing Tolerance: Determines how much image sizing can be adjusted to create balanced rows. It's helpful especially when images are in different aspect ratios.

• Enable Modals: When this option is enabled, it opens each image in a modal (light or dark box) view when clicked.

---

Adding Social Links to A Page

Social Links feature allows you to effortlessly add and customize icons for popular social networks, ensuring your visitors can easily find and follow your business online.

To add Social Links to a page:

• In the page editor, click the “Insert” button in the left panel.

• Under the "Common" heading, drag and drop the "Social" element into the page editing area (typically into the footer) on the right.

• By default, the Social element includes placeholders for eight popular social media platforms:
  Facebook, X (formerly Twitter), LinkedIn, Google My Business, Instagram, YouTube, TikTok, and Pinterest.
  • Only the platforms for which you enter links will be displayed.

• Resizing the Social element: To resize the social icons, drag the sizing handle located at the bottom-right corner of the element.

Social Links Options:

• Click the "" icon in the "Social Links" tab, and then click "Edit"

• Adjust the following to suit your needs:
  • Style: Change the design of the social icons.
  • Icon Size: Modify the size of the icons.
  • Colors: Customize the icon and background colors.
  • Borders: Apply borders to the icons.
  • Social Links: Add the links to your social media profiles.

Note: Placing your social links in the footer ensures they are easily accessible across all pages of your website.

---

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 an 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".