1. Login to and enter your login ID and password.

Size: px

Start display at page:

Download "1. Login to https://marketplace.singtel.com/ and enter your login ID and password."

Esmond McGee
6 years ago
Views:

Web Builder User Guide Launching Web Builder Understanding the Basics Getting Started Creating Content Adding Subpages Moving a Webpage Design Templates Webpage Layout Uploading Files Inserting Files

1 Web Builder User Guide 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 and enter your login ID and password. 2. In your Access Apps section, launch Web Builder.

2 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 Pro eed to y e site utto.

3 5. Once you have reached this page, you can already start editing your website. Understanding the Basics Below is the Web Builder workspace.

4 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: Click on the top of the webpage to add section

5 Step 2: Type the section title and click OK tep : Cli k Ok to su it. b. Arrange Sections Click on the menu bar to arrange the sections.

Creating Content 1. Select a section from the menu bar. 2.

empty block where you can write or insert your content.

6 Creating Content 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. Or simply point the cursor to a block of content and click on it to start typing. 3. You can edit the text according to your preference by clicking the Format tool in the dashboard.

7 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 button on the top right

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

8 6. If you wish to delete the entire webpage, click the delete page button on 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 click to 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, click at the upper right corner of the page. Moving a Webpage If you want to move a web page to another location: 1.

9 4. Point the cursor to the blocks and start typing. 5. To delete a subpage, click at 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. Click on 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.

10 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. a. Selecting Themes To select a design template for your website, click on a design. Click one to preview and apply the design., select a category and choose

11 b. 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. ele t Upload to upload the Cas adi g tyle heet C zipped folder

12 4. Cli k u it to upload the desig te plate Alter ati ely, you a do load the C te plate y sele ti g the Do load utto a d 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.

13 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. 1. Click from the dashboard to show 2. Click to start uploading

14 Note: You can click images or videos to create different folders to categorize your documents, 3. Type the a e of the folder a d li k u it 4. Click to upload

15 5. Choose the files you a t to upload a d li k u it. 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 a e of the folder a d li k u it 4. Select the zipped file you want to upload.

16 5. Cli k u it a d the zipped folder ill be uploaded 6. Click to expand the zipped file.

17 7. Cli k Co fir. 8. Close the window and the web page will be refreshed with the newly uploaded images/documents

18 Insert Images and Documents 1. From your Files folder, drag-and-drop the image or document to the block of content.

19 2. To align the image, Mouse over to the image and click 3. Then, click to change the image resolution Delete Images and Documents 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

20 Note: Those images/documents that are already inserted into your web page cannot be deleted unless you remove them from your webpage first. 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

Smartpaste Function Step 1: Copy any URLs from Youtube or

21 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

22 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.

23 Step 2: From Edit Menu, click to show the HTML window Step 3: Paste the HTML code into the pop-up window provided.

24 Step : Cli k Update to i sert.

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.

25 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

pages to create content 2. Feedback Use Feedback form to gather comments, enquires and feedback from your site visitors.

26 tep : Cli k Ok to su it 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

27 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

To Add Notice board: Step 1: Drag-and-drop to a space in the block of

28 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

29 Step 3: Cli k u it after editi g and mouse over the notice board to locate change the settings of the notice board to 5. Page Counter

30 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

keyword and search for relevant information from the

31 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

on the website. Drag-and-drop to an empty space in a block of content 10.

32 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

33 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

34 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 Properties Lock Visibility Functions To restrict public from viewing a page To hide title, sections, subpages

35 Show page in calendar app Display this page on these dates 2. Search Engine Optimisation To add a page to the calendar To allow visibility of a page on certain dates 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 keywords on each webpage. Properties Meta-Description Meta-Keywords Functions To allow search engines to match and rank your page during a search query based on a short description of a web page To allow search engines to match and rank your page during a search query based on the key words 3. Customize This allows you to customize your webpage even further by creating additional codes.

Swiiit User Guide 03/09/2015

Swiiit User Guide 03/09/2015 Contents Getting Started... 4 Overview of Main Tools... 5 Webpages... 6 Main pages (Sections)... 6 Rearrange Sections... 6 Subpages... 7 Change the Title of a Webpage... 8