Web Builder User Guide For New Users

Web Builder User Guide For New Users

  • Launching Web Builder
  • Understanding the Basics
  • Getting Started
  • Creating Content
  • Adding Subpages
  • Moving a Webpage
  • Design Templates
  • Webpage Layout
  • Uploading Files
  • Inserting Files
  • Deleting Files
  • Embed Videos, Maps, Google Documents
  • Interactive Built-in Apps
  • Page Options

Launching Web Builder^

  1. Login to https://marketplace.singtel.com/ and enter your login ID and password.
  2. In your Access Apps section, launch Web Builder.
  3. You will be directed to the Swiiit End User License Agreement. Tick the box and click Ok.
  4. The page below shows how you can publish your website. Since you are just starting to create one, click on the "Proceed to my website"button.
  5. Once you have reached this page, you can already start editing your website.

Understanding the Basics^

Below is the Web Builder workspace.

The dashboard or control panel is always located at the top of every web page. You can access to the tools and features by clicking on the icons located on the dashboard to build your website.

Getting Started^

Sections

Sections are the main pages on your website and it appears on the menu bar.

a. Create Section
Step 1: Clickon the top of the webpage to add section

Step 2: Type the section title and click OK

Step 3: Click "Ok" to submit.

Arrange Sections
Clickon the menu bar to arrange the sections.

Creating Content^

Or simply point the cursor to a block of content and click on it to start typing.

  1. Select a section from the menu bar.
  2. Click on the green button within the page to create an empty block where you can write or insert your content.
  3. You can edit the text according to your preference by clicking the Format tool in the dashboard.
  4. To arrange the blocks of content, click on the blue arrows. This gives you the flexibility to present the content in any sequence you prefer.
  5. If you want to remove an entire block of content, just click the delete button.
  6. If you wish to delete the entire webpage, click the delete page buttonon the top right corner of the page. This page cannot be retrieved once it is deleted.

    Note: If there is a subpage under this main page, please delete the subpage first before you delete the main web page

Adding Subpages^

After creating sections, we can start creating subpages.

  1. Mouse over the entire web page to locate the space designated for the subpage links and clickto add subpage links.
  2. Next, type the subpage title.
  3. To access the subpage, click on the subpage link
  4. Point the cursor to the blocks and start typing.
  5. To delete a subpage, clickat the upper right corner of the page.

Moving a Webpage^

If you want to move a web page to another location:

  1. Go to the web page A (e.g. Services) and click located at the top right portion of your dashboard. Clicking the icon will mark the webpage to move and it will be saved to Clips.
  2. After web page A has been selected for move, go to another web page (e.g. Products) where you want to park web page A to the location of web page B
  3. Clickon the dashboard to show the selected web page to be moved (web page A)
  4. Click the selected web page as shown on the diagram above
  5. A pop-up window will appear to prompt for your action
  6. Choose one of the options and click OK.
  7. Refresh the page to see the change.

Design Templates^

Web Builder has more than 70 design templates to choose from. You can either select a template or upload your preferred theme.

Selecting Themes
To select a design template for your website, click on , select a category and choose a design. Click one to preview and apply the design.

Uploading Themes
1. Click then click to upload your own template
2. Mouse over the grey theme icon as shown below and click the orange button

3. Select "Upload" to upload the Cascading Style Sheet (CSS) zipped folder

4. Click "Submit" to upload the design template

Alternatively, you can download the CSS template by selecting the "Download" button and edit the CSS before you upload it to your website.

Webpage Layout^

To select a layout, click from the dashboard and apply one of the templates.

Uploading Files^

Before you can insert images, videos or documents, you need to upload the files onto the server where your website is hosted. Document Manager is a large folder where you can upload and store all the files that you want to use on the website. We recommend you to compress the images and/or videos before uploading to reduce the loading time.

Note: You can click to create different folders to categorize your documents, images or videos

  1. Click from the dashboard to show
  2. Click to start uploading
  3. Type the name of the folder and click "Submit"
  4. Click to upload
  5. Choose the files you want to upload and click "Submit".

Upload compressed (zipped) folders ^

It can be tedious when you have over, say 50 files to upload. Thus, with the zip and unzip feature, you can upload all the files at one go.

  1. Compress the documents/images into a zipped folder
  2. From the Edit click to create a new folder for the zipped file
  3. Type the name of the folder and click "Submit".
  4. Select the zipped file you want to upload.
  5. Click "Submit" and the zipped folder will be uploaded


  6. Click to expand the zipped file.
  7. Click "Confirm".
  8. Close the window and the web page will be refreshed with the newly uploaded images/documents

Insert Images and Documents^



  1. From your Files folder, drag-and-drop the image or document to the block of content
  2. To align the image, Mouse over to the image and click
  3. Then, click

Delete Images and Documents^

Note: Those images/documents that are already inserted into your web page cannot be deleted unless you remove them from your webpage first.

  1. Click from the dashboard to show
  2. Select the folder where your images/documents are located. Click .
  3. Double click the images/documents/videos that you want to delete from the dashboard

Masthead^

Masthead is a banner that appears on top of most website, as highlighted in red below. You can choose to personalize your website by changing/replacing the masthead.

Step 1: Click from the dashboard.

Step 2: Click to insert your banner.

Step 3: From your files, you can drag-and-drop the image to the Masthead area

Embed Videos, Maps and Google Documents^

Aside from text, you can now easily embed Youtube videos, maps and Google documents in your website. There are 2 ways to embed: Smartpaste and HTML coding:

Smartpaste Function

Step 1: Copy any URLs from Youtube or Google Map



Step 2: Paste the URL into the web page, and a pop-up window will appear to prompt for your action

Step 3: Select one of the options and close the window.

Step 4: You can resize the map or the video you have just embedded.

HTML code^

Step 1: Copy the HTML from Youtube, Maps, Google Calendar or Google Docs.

Step 2: From Edit Menu, click to show the HTML window

Step 3: Paste the HTML code into the pop-up window provided.

Step 4: Click "Update" to insert.

Interactive Built-in Apps^

Web Builder has useful widgets and applications to help promote customer interaction.

Click from the dashboard and the list of apps will be shown:

1. Event Calendar
Use event calendar to add events and activities to the website calendar. As this calendar is for public viewing, share only activities that are meant for the public.

To Add Event:
Step 1: Drag-and-drop to any block of content

Step 2: Click to add event to the calendar

Step 3: Type the event title

Step 4: Click "Ok" to submit.

Step 5: Mouse over the calendar and click to change the appearance of the calendar

Step 6: After an event is added to the calendar, a web page for that particular event is created

Step 7: Click the event web pages to create content

2. Feedback

Use Feedback form to gather comments, enquires and feedback from your site visitors. All feedbacks are in a tabulated format. Fields in the form are pre-set.

Drag-and-drop to an empty space in a block of content

3. Sitemap

Pages that appear on the site map are generated automatically. In the site map feature, there is a number indicator beside each page which indicates the number of hits for the page

Drag-and-drop to an empty space in a block of content

4. Notice Board

The notice board feature allows you to pin up announcements and other notices that can be linked to the web pages.

To Add Notice board:

Step 1: Drag-and-drop to a space in the block of content

Step 2: Click to create content and pop-up window will appear for you to edit

Step 3: Click "Submit" after editing and mouse over the notice board to locate to change the settings of the notice board

5. Page Counter

The page counter application allows you to know the number of clicks to your website.

Drag-and-drop to an empty space in a block of content

6. Social Widgets

With the social widgets, visitors are able to share your web page on their social page such as Facebook and Twitter.

Just drag-and-drop to an empty space in a block of content

7. Search Box

This search box feature is particularly important to visitors as they are able to type in any keyword and search for relevant information from the website.

Drag-and-drop to an empty space in a block of content

8. Mini Calendar

Drag-and-drop to any space in the block of content

9. Recent Updates Notification

This notification allows visitors to know the recent updates made on the website.

Drag-and-drop to an empty space in a block of content

10. RSS Feed

This incoming RSS feed application allows website to synchronise content from external URL.

Step 1: Drag-and-drop to an empty space in a block of content

Step 2: After the application is inserted into the web page, mouse over it to show and click to change the URL.

11. Discussion Board

With a discussion board on your website, you are able to discuss any topics with the visitors and get to know them better as they make constructive feedback regarding your company and product offering. Members of the public can also make use of this platform to discuss any topics with each other.

Drag-and-drop to an empty space in a block of content

Page options^

When you are at a web page, click located at top right corner of the dashboard.

The page options tool will appear.

The page options tool consists of the following:

1. Properties





2. Search Engine Optimisation

Search Engine Optimisation is inmportant because it allows search engines such as Internet Explorer, Firefox, Google Chrome to match and search content on your webpages during a search query. It is important to indicate your meta descriptions and meta webpage.



3. Customize

This allows you to customize your webpage even further by creating additional codes.