While editing a page, a menu bar will appear at the top with the following options:

Transcription

1 Page Editor ===> Page Editor How Can I Use the Page Editor? The Page Editor will be your primary way of editing your website. Page Editor Basics While editing a page, you will see that hovering your mouse pointer over the content will highlight certain areas in different colors. While a content area is highlighted, you are able to click to bring up the editing tools for that content. The available content types are: Site Area Containers (Gray Highlight) Page Area Containers (Blue Highlight) Rich Text Editor or Widget (Orange Highlight) Menu (Yellow Highlight) Highlighted areas will also have a second menu, available if you hover your mouse over the black area where the name of the section is. This menu will have the following options: Properties - Opens the properties menu for that section. For more info, see Container Properties. Move Up - Moves the section above the previous section. This will generally only have a noticeable effect when used on sections in the content area of the page, rather than in the Header, Menu, or Footer. Move Down - Moves the section below the next section. This will generally only have a noticeable effect when used on sections in the content area of the page, rather than in the Header, Menu, or Footer. Remove - This will remove the section from the page. While an area is highlighted, you can also right-click on it to bring up a small menu. Each item in the menu represents a different section, which will itself highlight as you mouse-over the menu. This provides you with a very useful alternate way to edit the specific section you want. Background Containers will be labeled as either Site Area or Page Area. Changes made to a site area will affect that area on each page of the web site. Changes made to a page area or its contents will only happen on the specific page you are editing. Page Editor Menu While editing a page, a menu bar will appear at the top with the following options: Manage Pages - Clicking this will open up a list of your pages, allowing you to click a page to edit it. Make sure you Save the changes you make to the current page before you go to a different page Change Design - Clicking this will open up a list of the available designs we offer for your website.

2 Choosing a new design will instantly change the entire look of your web site, while still keeping any of your own content that you have added. There is also an option to Build Custom Design, which will have you name the new design and then give you a very basic design for you to modify for your own purposes. See the Custom Design Examples for ideas on how to get started with custom designs. Make sure you Save the changes you have made to the current page before you change the design, as well as before you leave the page - Change Layout Site Layout - Change the layout of all pages on your web site. The basic design and all of your content will remain the same, but the position of the contents will be changed. Make sure you Save the changes you have made to the current page before you change the layout, as well as before you leave the page - Page Layout - Change the layout of the current page. The basic design and all of your content will remain the same, but the position of the contents will be changed. Make sure you Save the changes you have made to the current page before you change the layout, as well as before you leave the page - Save - Saves any changes you have made to the page. Be sure to click this after making any changes you plan on keeping. Preview - Opens the page in a new window, allowing you to see how it would look on the live web site. Publish - Updates the live version of the page with any saved changes you have made. Live - Opens the live web site in a new window. Use Your Own Text To use your own text, first edit the page you would like to add to. Hover your mouse over the text until it highlights in orange, then click. You may now click to place your cursor to add and delete text. 3. Use your mouse to highlight text and apply formatting such as font family and font size.

3 4. To change the color, highlight the text and click the arrow next to the color button. 5. To add a link, highlight the text and click the link button. You will be given easy-to-follow options for each type of link. 6. Click Save when you are finished making changes. For more information about all of the options available in the Rich Text Editor, see the Rich Text Editor Options page. Add a Link To add a link, first edit the page you would like to add to. Hover your mouse over the text until it highlights in orange, then click. Use your mouse to highlight the text and click the link button. When you click the button, a new window will open asking you what type of link you would like to add 3. - Screenshot New Page - This will open up the create new page screen. Once the new page is created, your text will automatically be linked based on its filename - Screenshot Existing Page - This will open a list of your exiting pages for you to choose from. Once you select a page, your text will automatically be linked based on its filename - Screenshot Outside Web Page - This will let you enter a link to someone else's web site. Make sure to keep the " at the beginning of the address you enter - Screenshot Address - This will let you enter the address you would like to link to - Screenshot Existing File - This will open a list of the current files for your site. Once you have selected a file, your text will automatically be linked based on its filename - Screenshot New File - This will allow you to upload a new file to yoru site. Once you have selected a file, your text will automatically be linked based on its filename - Screenshot Click Save when you are finished making changes.

4 Using Your Own Images To use your own images, first edit the page you would like to add to. Choose Image from the Add to Page menu. Click Upload Image. 3. Click Browse, which will let you search your computer for the image you would like to use. 4. Click Upload File. 5. Click Close. 6. Click Uploaded. 7. Your image will now show in the image bar. 8. Click and drag your image onto the page. The available areas to drop your image into will be highlighted in green. The active green highlighted area will have a red border around it.

5 We also provide an extensive library of images for you to use. To view the library, you would click the Library folder, which will then open up a list of categories. Once you have found the image you want to use, you can click and drag it onto the page just like in the last step above. Change a Background Image To use your own background image, first edit the page you would like to change. Hover your mouse over the desired area until it highlights in blue, then click. Click the Background tab at the top of the new window. 3. Make sure the box next to Background Image is set to From File. 4. Click Select File. This will open the File Manager. 5. If you have not already uploaded the file you want to use, click Upload to Browse your computer for the image and upload it.

6 6. Find the file you want to use, check the box next to it, and click Select. 7. Click Apply. Change a Background Color To use your own background color, first edit the page you would like to change. Hover your mouse over the desired area until it highlights in blue, then click. Click the Background tab at the top of the new window. 3. Make sure the box next to Background Image is set to None. 4. Click the colored box next to Background Color. 5. Click the long bar on the right to choose the type of color you want, then click in the square on

7 the left to choose the specific color. 6. Make sure Transparent is not checked, then click Ok. 7. Click Apply. Add a Menu Button To add a new menu button, first edit the page you would like to change. Hover your mouse over the desired area until it highlights in yellow, then click. Click New Menu Item. 3. Type the text you want to appear on the new button in the New Menu Item field. 4. Choose the type of Destination for this new menu item. New Page - This will open up the create new page screen. Once the new page is created, your text will automatically be linked based on its filename. Existing Page - This will open a list of your exiting pages for you to choose from. Once you select a page, your text will automatically be linked based on its filename. Outside Web Page - This will let you enter a link to someone else's web site. Make sure to keep the " at the beginning of the address you enter. Address - This will let you enter the address you would like to link to. File - This will open a list of the current files for your site. Once you have selected a file, your button will automatically be linked based on its filename. 5. Choose what window you want to Open this link in 6. When you are done, click Finish. Add a Map To add a new map, first edit the page you would like to change.

8 Click and hold your mouse on the icon for Google Map 3. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 4. Enter the address for the map, then click Apply. Add a Weather Display To add a new weather display, first edit the page you would like to change. Click and hold your mouse on the icon for Weather. 3. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it.

9 4. Enter the city or zip code for the weather display, then click Apply. Add a Video To add a new video, first edit the page you would like to change. Click Flash Video 3. Click Upload Video 4. Browse your computer for the video you want to upload, then click Upload Files

10 5. The video will show as Converting for a few minutes. 6. Click and hold your mouse on the icon for the video. 7. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the video would be placed. Release your mouse button once the green bar is where you want it.

11 Add a Photo Gallery Click Photo Gallery 3. There are five types of Photo Gallery you can choose from: Filmstrip 1 - The images will be shown left-to-right in thumbnails. Clicking a thumbnail will gray out the page and show the full version of the image. Filmstrip 2 - The images will be shown left-to-right in thumbnails, with the first image displayed in full above. Clicking a thumbnail will show the full version of the image. Grid - The images will be shown as thumbnails in a grid. Clicking a thumbnail will gray out the page and show the full version of the image. You will be able to choose how many rows and columns are used in the grid. Single Image - A single image will be displayed, with left and right arrows to show the next image. Slideshow - A single image will be displayed, with a play button beginning the slideshow to display the images one at a time in succession. Slideshow 2 - A single image will be displayed, with the rest of the images automatically displaying one at a time in succession. You have options to determine the length of display and type of transition. 4. Click and hold your mouse on the icon for the desired type of slideshow. 5. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the gallery would be placed. Release your mouse button once the green bar is where you want it. 6. Click Add Images.

12 7. Choose the images you want to use from the File Manager, then click Select. 8. Click Save Changes. While editing your photo gallery, you will see a tab for Display Options. This will let you change the Gallery Type, as well the the size of the gallery and its images. Share Your Page on Twitter To share your page on Twitter, first edit the page you would like to change. Click Social Media 3. Click and hold your mouse on the icon for Tweet This. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it.

13 Link to Your Twitter Account To link to your Twitter account, first edit the page you would like to change. Click Social Media 3. Click and hold your mouse on the icon for Follow Us on Twitter. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. Enter your Twitter Username in the space provided, then click Apply. Display Your Twitter Feed To display a feed of your Twitter account, first edit the page you would like to change.

14 Click Social Media 3. Click and hold your mouse on the icon for Twitter Feed. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. Enter your Twitter Username in the space provided, then click Apply. Share Your Page on Facebook To share your page on Facebook, first edit the page you would like to change. Click Social Media

15 3. Click and hold your mouse on the icon for Share on Facebook. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. Link to Your Facebook Account To link to your Facebook account, first edit the page you would like to change. Click Social Media 3. Click and hold your mouse on the icon for Find Us on Facebook. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. Enter your Facebook Page URL in the space provided, then click Apply.

16 Link to Your Google+ Account To link to your Google+ account, first edit the page you would like to change. Click Social Media 3. Click and hold your mouse on the icon for Follow on Google+. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. The Edit Follow Google Button window will appear. 6. Enter your Google+ Page in the space provided. 7. There are three options for Layout Style Icon the icon. - The Custom Name field that appears will add the text that appears in bold before

17 Badge - Standard Badge - Add an Appointment Form To enable your site to accept appointment booking, there are first some steps you will need to take: Create a Resource Attribute, which is the type of employee this appointment will be with (such as a Dentist or Doctor): Choose Calendar Manager from the Customer Manager menu. Choose Manage Resource Attributes. 3. Click New Resource Attribute. 4. Enter a Resource Attribute Name, then click Save.

18 Choose Manage Employee Resources. 3. Click New Contact and fill out the information for the employee. At the bottom of the new contact window, click Resource Attributes Click the Available Resource Attributes you want for this employee, then click Add > 3. Click Save. 4. Click Available Hours 5. Choose the Available Days and Hours per Day that this employee will be available.

19 6. Click Save. 4. Create an Appointment Type: Choose Appointment Types. Click New Appointment Type. 3. Enter an Appointment Type Name. 4. Choose an Appointment Type Duration. 5. Click the Required Employee Resource Attributes you want for this appointment type, then click Add > 6. Click Save.

20 Once you have completed these steps, return to the page you want to add the appointment form to. Click Form 3. Click and hold your mouse on the icon for Appointment 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. Add a Reservation Form To enable your site to accept reservation booking, there are first some steps you will need to take: Create a Resource Attribute, which is the type of service this reservation will be for (such as a Table at a Restaurant): Choose Calendar Manager from the Customer Manager menu.

21 Choose Manage Resource Attributes. 3. Click New Resource Attribute. 4. Enter a Resource Attribute Name, then click Save. Create a Facility/Equipment Resource for the service available for reservations. Choose Manage Facility / Equipment Resources. Click New Facility / Equipment Resource Enter a Resource Name. Enter a Max Capacity. Enter a Min Capacity.

22 6. Click Save. 7. Click the Available Resource Attributes you want for this facility, then click Add > 8. Click Available Hours 9. Choose the Available Days and Hours per Day that this employee will be available. 10. Click Save. 3. Create a Reservation Type: Choose Manage Resv. Types. Click New Reservation Type. 3. Enter an Reservation Type Name.

23 4. Choose an Reservation Type Duration. 5. Click the Required Employee Resource Attributes you want for this Reservation type, then click Add > 6. Click Save. Once you have completed these steps, return to the page you want to add the appointment form to. Click Form 3. Click and hold your mouse on the icon for Reservation 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. Form Display Options The following options are available to customize your forms: Form Settings Send Form Responses To - This is the address the form will send to Confirmation Action - This is what will happen for a visitor after submitting a form Display Message - Displays the message that you type in the space provided. Display Site Page - Sends the customer to one of your existing pages.

24 Edit Form Default value for Appointment/Reservation Type - The type of appointment or reservation. Edit Field Labels - This will let you change the text that appears next to each field in the form. Field Options Go to Web Address - Sends the customer to a web address that you provide. Font / Font Color/ Font Size - These control the appearance of the field label text. Field Line Spacing - This controls the amount of space between each line of the form. Label Alignment - This controls the alignment of the field label text. Left Margin / Right Margin / Top Margin / Bottom Margin - These control the spacing around the form fields themselves. Button Options Display - Controls whether both Submit and Reset buttons display or only Submit. Submit Button Text - Controls what text appears on the Submit button. Reset Button Text - Controls what text appears on the Reset button. Apply To - Sets which button(s) the following options apply to. Button Font / Button Font Color - These control the appearance of the text on the buttons. Button Background Color / Button Border Style / Button Border Style / Button Border Color - These control the appearance of the buttons. Create a Custom Form To add a new custom form to your page Click Form 3. Click Custom Forms 4. Click and hold your mouse on the icon for New Form 5. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it.

25 6. A new window will open up with new options to edit the new form. The following options are available to add to the form under the Edit Form tab: Custom Field - The following custom field types are available: Text Box - This is a typical box to enter text. Paragraph Box - This is a larger box to enter text. Number - This is a box that must have a valid number entered. Date - This allows the user to enter a date Date and Time - This allows the user to enter a date and time Radio - This lets you add a Radio option (such as the Yes/No options for Required) Checkboxes - This lets you add checkbox options Drop-down - This is a drop down option (like the Field Type box you are selecting from) Contact Field - These are pre-built fields that add their information to your Customer Manager when submitted. Most of these fields, such as Contact Address, have multiple parts to them that must all be used Text - This allows you to add text not connected to a specific form field. You can control the text and the padding around it. Divider - This allows you to add a dividing line between sections of the form. You can control the style, weight, color, and padding. Section Heading - This allows you to add text to label different sections of the form. You can control the text, background color, border, padding, and margin. The following options are available to add to the form under the Form Settings tab: Form Name - This is the name used if you save the form using Save as New Form and want to add it from the Add to Page -> Form menu Send Form Responses To - The form will send to the address(es) listed here when submitted. Confirmation - This is what will be shown to your visitor after submitting the form. You can have it display a custom message, send the visitor to another page on your site, or to another website altogether. The Field Options and Form Display Options tabs will allow you to change the appearance of your form (ie button colors, text appearance, etc). When a user submits the form, the responses will show in Customer Manager -> Form Responses.

26 Re-Use a Custom Form The forms you create are saved in your Custom Form library so that you can use them in multiple places. To add an existing custom form to your page Click Form 3. Click Custom Forms 4. Click and hold your mouse on the icon for the form you wish to add> 5. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 6. A new window will open up with new options to edit the new form.

27 Edit an Image Once you've added an image, you can also manipulate it in a variety of ways. To access these options: Hover your mouse over the area your image is in until it highlights in orange, then click. Click on the image to select it, then click the Image button in the control panel 3. Click the tab for Edit Image The following options are available:

28 Crop - This lets you drag your mouse to select an area of the image, then click Apply Crop to remove the rest of the image, leaving only your selected area. Resize - This lets you enter a specific width and height for the image, then click Resize to change the image to use those dimensions.

29 Rotate - This lets you rotate the image either left or right. This can be done multiple times for

30 desired effect. The altered copies of your images are stored in a new folder called " edited_images" Add a Facebook "Like" Button To add a Facebook "Like" button.

31 Click Social Media 3. Click and hold your mouse on the icon for Facebook Like. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. The Edit Facebook Like Button window will appear. 6. There are three options for Layout Style Standard - Button Count - Box Count - 7. When checked, Show Faces will show the Facebook profile images for your friends who have clicked the like button. Add a Google +1 Button To add a Google +1 Button. Click Social Media

32 3. Click and hold your mouse on the icon for Google +1 Button. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 5. The Edit Google +1 Button window will appear. 6. There are three options for Annotation Bubble - Inline - None - Add a Calendar To add a Calendar to Your Page. Click Calendar There are five types of calendar Day Calendar will show one day at a time Week Calendar will show one week at a time Mini Month will show one an entire month in one small area. Days with events are bolded and can be clicked for details. Full Week will show one week at a time, with days broken into time slots Full Month will show an entire month 3. Click and hold your mouse on the icon for the calendar you want. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where

33 the map would be placed. Release your mouse button once the green bar is where you want it. 5. The Calendar Options window will appear. The Calendar Title will appear at the top of the calendar. Start Week On lets you choose which day is listed to the far left of the calendar. Calendar Event Window will show you an example of the box that comes up when a user clicks an event for more details on the live website. Select a calendar checkbox to display all events in the selected calendar. You can also create a new calendar by clicking Add New Calendar. The calendars can be managed under Customer Manager > Calendar Manager. Appointment and Reservation calendars will use information submitted through Appointment and Reservation forms Resource Adjustments will show time changes you make to Employee or Facility/Equipment Resources (such as giving an employee time off If you've created a custom calendar, an additional checkbox will appear for it. Events for that calendar can be created under Customer Manager > Calendar Manager. Rename a Widget or Page Area To keep track of specific widgets or Areas, you can give each an individual name (which will show in the Site/Page Area list while editing properties) Highlight the area you want to name Hover over the upper left corner, and choose Change Name Enter the new name and click Apply Add a Menu To add a new menu, first edit the page you would like to change.

34 Click Menu 3. There are three types of menu Horizontal Vertical (Flyout) - Any second level menu items appear when the parent is moused over 3. Vertical (Tree) - Any second level menu items appear indented under their parent 4. Click and hold your mouse on the icon for the desired menu type 5. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the map would be placed. Release your mouse button once the green bar is where you want it. 6. Your new menu will copy the menu items from the site's main menu. You can add, edit and delete menu items in the same way as the main menu. Add Google Font There are hundreds of fonts available on the web, too many for us to provide right from the start. However, you can add any fonts you want from Google Fonts. From any Properties window or Rich Text Editor, click the icon. Enter the names of up to three fonts that you want to add, then click Save. 3. You can now use those fonts in any part of the page editor. Add a Catalog Product To add a catalog product to your page: Click ecommerce Widgets 3. Click and hold your mouse on the icon for Product Item. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the product would be placed. Release your mouse button once the green bar is where you want it. 5. The Select Product Item window will appear.

35 6. Enter the name of the desired product into the Search box, then select it from the list once it appears 7. Click Save Changes Under the Global Display Options, you can choose which product information displays for all product widgets that you add. Under the Display Options, you can modify those options for the specific product widget you are editing. Add a Catalog Category To add a catalog category to your page: Click ecommerce Widgets 3. Click and hold your mouse on the icon for Product Category. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the category would be placed. Release your mouse button once the green bar is where you want it. 5. The Select Product Category window will appear. 6. Enter the name of the desired category into the Search box, then select it from the list once it appears 7. Click Save Changes Under the Global Display Options, you can choose which product information displays for all category widgets that you add. Under the Display Options, you can modify those options for the specific category widget you are editing. Add a Pinterest button To add a Pinterest button to your page: Click Social Media 3. Click and hold your mouse on the icon for Pin It. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the category would be placed. Release your mouse button once the green bar is where you want it.

36 5. The Edit Pin It Button window will appear. 6. Make any desired changes, then click Apply Add a Follow Us on Instagram button To add an Instagram button to your page: Click Social Media 3. Click and hold your mouse on the icon for Follow Us on Instagram. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the category would be placed. Release your mouse button once the green bar is where you want it. 5. The Edit Follow Us on Instagram Button window will appear. 6. Enter your Instagram Username, then click Apply Add an Instagram Feed To add an Instagram Feed to your page: Click Social Media 3. Click and hold your mouse on the icon for Instagram Feed. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the category would be placed. Release your mouse button once the green bar is where you want it.

37 The Edit Follow Us on Instagram Button window will appear. Click Link Instagram Account Enter your Instagram Username and Password, then click Log in Make any desired changes, then click Apply Add a Blogger Blog To add a blogger page to your Web Site, you will first need to create an account at Blogger.com. Any entries to your blog will be made there, then displayed on your site using these steps: Click Blogger 3. Click and hold your mouse on the icon for Blogger Post Area. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the product would be placed. Release your mouse button once the green bar is where you want it. 5. The Blogger.com URL window will appear. 6. Enter the URL of your Blog, then click Apply Click Blogger 9. Click and hold your mouse on the icon for Blogger Post Area. 10. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the product would be placed. Release your mouse button once the green bar is where you want it.

38 1 The Blog Archive window will appear. 1 Enter the URL of your Blog, then click Apply Add a Wordpress Blog To add a Wordpress page to your Web Site, you will first need to create an account at Wordpress.com. Any entries to your blog will be made there, then displayed on your site using these steps: Click Wordpress 3. Click and hold your mouse on the icon for Wordpress Post Area. 4. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the product would be placed. Release your mouse button once the green bar is where you want it. 5. The Wordpress Info window will appear. 6. Enter the URL, Username, and Password for your Blog, then click Apply Click Blogger 9. Click and hold your mouse on the icon for Blogger Post Area. 10. While still holding the mouse button, drag the icon onto the page. A green bar will appear where the product would be placed. Release your mouse button once the green bar is where you want it. 1 The Blog Archive window will appear. 1 Enter the URL, Username, and Password for your Blog, then click Apply