Create/Edit Site Content

Site Content is our Page Editor modules. Under the Main Menu, we have the following sub-menu for different functions:

• Site pages
• Headers
• Footers
• Scroll Buttons
• Opening hours
• Site form
  
• Site Overlay

1. Site Pages

Site Pages consists of listings which displays all pages within the  website. Center Admin can create, edit, and delete pages here.

1.1 List of pages

All website pages will be visible on this overview. There are 4 types of pages :

• Active Pages - Pages with Active status and visible on the website
• Deactivated Pages - Pages with InActive status and not visible on the website
• OLS Landing Pages - Pages which are created as single Landing page
• System Pages - Pages belonged to system's mandatory pages and are not deletable by the Center Admin

Staging URL : https://kws.jaramdo.de/admin/site-content/pages

1.2 How to Create New Page

Click on "Create New Page" button: 

• Fill in your 'Page URL' , 'Page Title' & 'Page Description'
• Fill in Rich Snippet
• Center Admin can choose to duplicate a page from : 
  • Current site - select existing site page to copy from
  • Other sites - This option is only visible to System & Super Admin)
  • Landing page template - select an existing page template available

Remarks : All the above fields are mandatory to fill in & select when creating a page.

• There are 2 options to choose from when a new page is created :
  1. Make this page a landing page : If this option is chosen, this page will be a landing page instead ( standalone ).
  2. Make this page without header : if this option is chosen, the header ( with all menu items ) are removed. 

• When a page is successfully created, it will appear on the {Active Page} tab.
• If you select  "Make this page a Landing page" during creation, then the new page created will appear under the OLS Landing page tab.

1.3 Edit Page

After a new page is created, to further build and edit content of the page. Click on the "Edit" button on the page listing.

You will enter the page editor of the website.

conida page editor consists of multiple sections which builds up the page content. Center Admin edit the section individually using the tool that is on the right. 

Tool bar: 

• Up/Down Arrow - Move the section up or down the page
• Recycle bin - Delete the section
• '+' button - Add a new section
• Duplicate button - Duplicate current section
  
• Pencil button - Edit the current section
• Eye-crossed button - Hide the current section
• Spanner button - Code section ( use and visible for system/super admin only)
• Reset button - 

1.4 Add Section 

When click on the '+' button, you will come to the following modal : 

• Select a template - this show your existing website template theme (For eg: if your website is built using Sale template, Center Admin will see 'Sale' by default 
  • Remarks : Super/System Admin can see all templates on this listing
• Select category - select category of sections 
• Select section - Listing of section templates available to be chosen from

Screenshot of Section template listing when 'clicked'

1.5 Edit Section

After a section is added, Center Admin can click on the "Edit" button to edit section content.

Screenshot after clicking "Edit"

In the Edit Section, you may edit text, images, row & column padding margin, container color background.

Center Admin can also make use of the [ + Row ] [ + Column ] and [ + Component ] to add on the section's content.

2. Introducing the Blank Section Editor 

Center Admin may create a section out of a blank canvas.

Click on the "+" button. At the Select Section modal, click "Create Section"

Blank canvas : 

Step 1 : Add a row 

Step 2 : Define column % for your row 

Step 3 : Add a Component 

Components Available : 

• Text 
• Image 
• Video
• Button
• Site form
• Template component*
• Map/embed code
• Divider

Remarks : *Template components are design which is usually harder to build mainly due to complex design component. This is where the design will be created separately, and added here so our client can easily add this to the section.

2.1 Section Configuration Tool

For all conida setion editor, it is positioned on the right of the canvas. Center admin may edit the component using this editor.

Under the section configuration tools, there are a few standard tools for user to manoeuvre :

2.1.1. Column 

Here, Center admin can set the column width for mobile, tablet & desktop separately

Min.height, max. width, Padding and Margin can also be configured for mobile, tablet & desktop.

Background color - May configure the column color in primary, secondary, or custom color

Horizontal / Vertical - need demo

2.1.2. Row 

User may set color for the entire row in primary, secondary or custom color

User may set padding and margin value for mobile, tablet and desktop separately.

2.1.3. Container

User can set background color of container with primary, secondary & custom color.

User can also set container height/width, padding and margin for mobile/tablet/desktop.

2.1.4. Column Navigator

Column navigator is the tree view of the section. User can see clearly the content made up from container, column, rows and different components. Users can duplicate/delete these container, column, rows and component via here.

An example of the column navigator 

2.2 Save As Template

[ Save As Template ] allows Admin to 1) create a new section from Blank Section Editor, or 2) Edit an existing section, and save this template for future usage.

Just build a new section/edit a section, and click "Save as Template" button after a title is keyed in. It will be stored in the template database.

To use this template in the future : 
1. Go to [ + ] on the Section editor
2. Select [ Own Sections ] from the template dropdown

3. Admin will find the templates created listed here. Select and apply.

 

3. Introducing Header Editor

A website header is the top section of a web page, typically visible across all pages of a website. It serves as a key area for branding, navigation, and essential information.

Elements in a conida Website Header:

1. Logo: Represents the brand and often links to the homepage.
2. Navigation Menu: Links to important pages like Home, About, Services, Contact, etc.
3. Call-to-Action (CTA): Buttons like "Log in", "Shop Now" 
4. Contact Information: Phone number, email, address and social media icons.
5. Language Switcher: On multilingual sites, this lets users select a preferred language.

Following are some examples of conida website header: 

3.1 Setting up Navigation Menu 

Go to Site Content > Header 

Under 'Edit Header' 

Under the "Edit Navigation" modal, it allows Center Admin to do the following : 

• Configure main menu, and unlimited levels of sub-menu
  • click on the blue arrow to add sub-menu item
  • click on "Add Header Menu" to add main-menu item 
  • Remove any menu item by clicking on the red recycle bin button
• The 'green eye' button on the right : allow center admin to hide a specific menu item
  

3.2 Setting up menu styling 

On the same modal, go to "Edit Menu Header Styling"

Here, Center Admin is allowed to configured the following : 

• Header Menu : Background color, Menu Item color, and Hovered Menu Text Color (Available for both mobile and desktop)
• Contact Bar Item : Background color, contact bar item color 
• Dynamic Navigation Bar: This color configuration only works for website template with dynamic navigation bar (Business Casual, Injoy New, Sale) 
• Hamburger icon: may configure the color of hamburger icon
• Modify Logo size: may select from 'small', 'medium' and 'large' for the logo size.

3.3 Setting up contact info 

On the same modal, clicks "Contact Info Configuration"

On this modal, Center Admin can update the following data : 

• Phone number, address and google map link displayed on the contact info bar
• Tick the checkboxes to configure their visibility on the website.

4. Introducing Footer Editor

Go to Site Content > Footer 

A footer is the bottom section of a web page that typically appears across all pages of a website. It contains important information and links, acting as a reference point for users.

conida website's footer configuration as below :

4.1 General Tab 

Under "General" tab, user can add footer components using the " + " button.

After clicking "+", this modal will pop up : 

Then Center Admin may configure the footer by adding the components which required. Each component can be further configured during setting up.

Screenshot below show some examples of website footer created by conida footer editor:

www.conida.com

https://pactainvest.at/

4.2 Setting Tab

Under this tab, Center Admin can configure the color for the footer elements : 

• footer background 
• links 
• hover-links
• Content Separator Mobile : this refers to this lines on the mobile version's footer. Center admin can configure its color here.
  • 
• Background image : the footer can have background image if an image is uploaded here. 
• Copyright text : copyright text appeared under the bottom left of the page. Center admin may configure the text here. 
  • 
• Show social media icon: if this checkbox is ticked, the social media icon configured under Center Setting will be displayed at the bottom of the page. For example : 
  • 

5. Introducing Scroll Buttons 

Scroll Buttons usually appears as a CTA ( Call-to-action) buttons on conida websites. It will always appear on the right hand side of the page, if configured.

An example of scroll buttons: 

Click on Site Content > Scroll Button, and this modal will pop up. 

5.1 Create Scroll Button 

Click "Create" Button.

Under [ General ] tab:

• Button type - Select form of your scroll button, it can be in "Icon", "icon with tooltip" and "text" 
• Title - the name of your button
• Link - configure the URL of the button
• Content - "select image" to display for your scroll button (option only available if "icon" or "icon with tooltip" is selected. Or you could just "drag & drop" the image for upload.

• Position - set the order of scroll button. If '1' is set, meaning it will be the first button from top.
• Status - Active display the button; inactive hide the button
• Position of the scroll button in percent from the top - Set a percentage for the scroll button to configure how far it is from the top of the page.
• Submit the form. 

Scroll button created will appear on the listing. Center admin can click on "edit" button to edit properties of the scroll button.

Under [ Color ] tab : 

Center admin can set the properties of "Text Scroll button" via this tab :

This is an example of the Text Scroll Button.

The configuration of a text scroll button will require the color setting of : 

• Background color
• Mouseover color - color of background when mouseover
• Text color 

6. Opening Hours 

Under Site Content > Opening Hours, Center Admin may configure the opening hour using the text editor.

6.1 Opening Hour at Footer 

This opening hour will appear under Footer, if this component is added by Center Admin.

6.2 Opening Hour at Contact form 

This opening hour will also be displayed under every conida's standard contact form's template :

- the end -