Pages and Menus
The Pages and Menus section enables you to create and manage the content of your site, including the pages and menus.
After logging into the ESP Website admin, locate your site and click on the Edit Site button.
Click on the plus button to expand the Pages & Menus area and then make your selection.
Note: To close the menu, click on the minus button.
The options within the Pages and Menus section include:
- Manage Page Content
- Site Menu/Navigation
- Introductory Text
- News and Video
- Advanced Page Manager
- Advanced Site Menu/Navigation
Manage Page Content
The Manage Page Content area enables you to manage the content of your ESP Website pages.
Select the page you would like to edit from the Select Your Page dropdown.
You can then type new text or update the existing text by using the toolbar (hovering over the options in the toolbar will let you know what each tool will help you accomplish) or switching to HTML mode. When you are finished making your changes, click on the Save button at the bottom.
You can use the Create New Page button in the upper right hand corner to begin creating your own custom page for your site.
Enter a Display Name. The Display Name is an extension of your URL (ex: abcpromos.espwebsites.com/DisplayName) and cannot contain spaces. Then, enter your text and customize it using the toolbar.
When you are finished making changes, click on the Save button and then click on the Make Changes Live link.
The Site Menu/Navigation area enables you to edit existing menu items. If you want to create a new menu, go to the Advanced Site Menu/Navigation section. The first step is to edit a menu is selecting which menu you would like to modify. In most templates there is only one navigation menu set up called "Top." This menu pertains to the navigation bar at the top of your website.
If you have more than one menu on your site, you can use the Select a Menu dropdown to choose which menu you want to edit.
Editing Menu Items
After selecting the menu you would like to edit, click on a menu item to edit its properties or add to it. Next, select a menu item.
In the example below, "More" is selected. The menu item will display in the Properties column. It is important to note that "Home" and "Product Search" are static and cannot be edited.
There is a note above the menu links in the Menu property box which states: "Click any item to edit Properties. Drag and drop any item to rearrange the order".
The Properties column is where we can edit the display name (the name of the menu item that will be displayed on your site), the type of item, and the details.
There are several different types of items available in the dropdown:
- Product Collections
- Top Searches
The Detail will be dependent on the type of item you select. For example, if you choose Product Collections, the detail will display a dropdown of all available product collections.
Advanced Menu Options
The Advanced options will display options for opening the menu item, as well as the ability to enter CSS class information. If you are not well versed in CSS, it is recommended that you do not enter information in the CSS class field.
The navigation found below the Advanced options area of the Properties box is the dropdown menu associated with its parent link. For example, when I chose "More" from the Menu, when I hover over More on my live site I will see News & Videos.
Add a New Submenu Item
If you would like to add a new link to the menu item, called a submenu item, click on the Add button in the lower section of the Properties box.
A second Properties window will be displayed with the "Navigation Item Options".
Navigation Item Options
You can edit the submenu item selected in the previous step the same way as the main menu item.
Edit the Navigation Item Options:
- Add a Display Name
- Select a type
- Select/Add Detail
Click on the Save button.
After you have finished saving your menu changes, click on the Make Changes Live link.
The Banners area enables you to select from three options:
- I don't want to select banners. Let the system select for me.
- I want banners only from my preferred suppliers. Let the system select for me.
- I want to choose the banners that appear on my site.
If you select the third option, "I want to choose the banners that appear on my site", you will be able to select and organize the banners that will be displayed on your site. Then, drag and drop banners from the Available Banners area into the Banner Loader. Also, you are able to download ASI Design Store banners for use on your site.
- Note: Banners may take up to 10 minutes to display on your site once added to the Banner Loader.
Large and Small Banners
After selecting "I want to choose the banners that appear on my site" you have the option to choose a Large Banner or a Small Banner.
What's the difference? The small banner is 110 pixels shorter than the large banner. If you're interested in keeping your content close to the top of the page, but still want to display banners, this is a good option for you!
- Large Banner: 914 pixels wide x 218 pixels high
- Small Banner: 914 pixels wide x 108 pixels high
The maximum file size for banners is 150kb
After you've selected whether or not you want to display a large banner or a smaller banner, and you don't have any banners of your own, you can select and/or rearrange the banners available.
You will see the following options:
- Company Banners
- Personal Shared Banners
- Personal Banners
- ASI Banners
Selecting a Preloaded Banner
To add your banners to the Banner Loader, all you have to do is click on the banner and drag it from the list of Available Banners into the Banner Loader. After you have added up to four banners, you can re-order them in the banner loader. There are two ways to do this:
- Drag and drop the banners into order by clicking on the plus symbol (located in the upper left corner of that banner)
- Click on a banner and then use the up/down arrows to move it to the desired position
To remove a banner from the banner loader, click on the banner and select remove.
Upload/Create Your Own
To upload custom banners, scroll down to the banner upload area. Then, select the banner size and click on the Browse button.
Browse your computer and locate the image you would like to use. Select it and click on the Open button.
Select A Level
After you upload your image and select your level, you will need to set up the Click-Through-Destination for this banner.
- Product Detail Page
This option enables you to link to the product detail page of an individual product. To link the banner to a product detail page, the product will need to be on your Clipboard. Select the "Product Detail Page" dropdown and choose the product.
For help on the fly, hover over the information icon next to each dropdown.
This option enables you to link your banner directly to a Select-A-Search. You can select from your already created Select-A-Searches or create one in this area.
Select-A-Searches are links to already established searches. This link acts as a shortcut for your customers to click on and access products without having to search.
If you don't see the select-a-search you're looking for in the dropdown menu, hover over the information icon next to the dropdown.
Click on Add in the Action area to finish this banner.
This option enables you to type or paste a URL for your banner to be directed to. Just select URL and type the web address (ex: http://www.asicentral.com). Click on Add in the Action area to finish this banner.
After you have finished setting up your banner, it will be appear in the Available Banners area. When you are ready to post your banner, drag and drop it into the Banner Loader.
The Introductory Text area is where you update the text that is shown on your home page.
In the Introductory Text area, type a headline and text in the available boxes.
Use the text editor toolbar to edit the style of your text (hovering over the options in the toolbar will let you know what each tool will help you accomplish). You can also click on the HTML button to edit the HTML of your Introductory Text.
After you have finished making your changes, click on the Save button and then click on the Make Changes Live link to publish.
News and Video
The News and Video section contains two tabs: Home Page and News and Video Page.
Home Page Tab
In the Homepage tab, you can make selections about the editorial and video content which will be displayed on your home page.
The Editorial Feed section enables you to allow delivery of news articles to your home page.
There are three options for displaying Video Content on your home page:
- Allow client-safe video content to be added to my ESP Website home page and updated automatically.
- I want to feature my own video content on my home page. This option will enable you to paste a URL to a YouTube video of your choice (ex: http://www.asicentral.com). Just type/paste the URL into the available box.
- No thanks, I don't want to feature video content on my home page.
When you are finished making your selections, click on Save.
News and Video Page Tab
Within this tab there are two options in the Industry News, Video and Events section:
- Yes, I want to feature a page just for Industry News, Video and Events
- No Thanks. I don't want to feature a page of Industry News, Video and Events on my ESP Website
Click on the Save button when you have finished making your selections.
This section, enables you to select the video content of your Industry News, Video and Events page. There are two options:
- Let the system choose the videos on my Industry News, Videos, and Events page.
- Let me customize the video content on my Industry News, Videos, and Events page.
If you select "Let me customize the video content on my Industry News, Videos, and Events Page", you can type or paste the URL for the video in the URL box, select a level and enter a headline. Lastly, click on the Add link.
When you are finished making your selections, click on Save and then click on the Make Changes Live link to publish these updates to your ESP Website.
Advanced Page Manager
The Advanced Page Manager section is where you can edit and create new pages for use on your ESP Website or Company Store.
To create a new page, click on the Create New Page button. You will need to enter a Page Name, Page Title, and Page Layout.
- Page Name is the extension for this page from the site's URL. For example: abcpromos.espwebsite.com/AboutUs.
- Page Title is the text that appears in the browser bar. For example:
- Page Layout refers to how many columns your site will have. Generic2Column is the most standard, and recommended option. However, if you want your site to have 3 columns, select Generic3Column layout instead.
When you finished entering this information, click on the Create Page button.
When you click on the Edit link in the Manage Pages area, the properties of that page will open in the Properties area.
You can check the Default Page box to make this your default page. Your default page is what displays when your site is accessed, otherwise known as your 'Home' page.
There are Page Layouts available. You can see a preview of each layout. Click on a layout to select it.
The Meta Description and Meta Keywords boxes are where you can enter individual meta tags for this page.
- Generally, meta tags consist of three fields: title, description, and keywords. The title and description of your site will be displayed on a search engine's results page. They need to be coherent and concise.
- Keywords, on the other hand, will not be seen and are only for the search engine's background ranking processes. In this section, you can enter multiple keywords, separated by commas. For example: promo products, imprinted products, promo items, imprinted items, etc.
When you are finished customizing the properties of your page, click on the Save Properties button.
Edit Pages Tab
The Edit Page section displays your page in terms of modules and zones. Essentially, the feature you would like to have on your page is a module (Select-A-Search, Product Collection, Text, etc.) that you place inside of a zone area.
The zones are broken down into sections:
The first step is to use the Select Page dropdown menu to select the page you would like to edit. You can drag a module to a zone and then configure it.
For example, if we wanted to add Editorial Content to our Homepage, we could do so by dragging the Module on the left and dropping it into the zone of the page.
Then, after dragging and dropping the module into the zone, you will need to configure that module. The configuration options will vary depending on the module's capabilities. Click on Save to finish adding the module.
Every Module will have three links associated to it after you've configured the settings. Global, Settings, and Remove.
The Global link will tell the site to keep that module, where you've placed it, on every page in the site. Global elements are typically placed in the header and the footer of the site.
Multiple Modules Per Zone
More than one module can be added to a zone, and modules can be dragged and dropped from one zone to another. There is no save button in this area. All changes are automatically saved.
To make these changes live, click on the Make Changes Live link.
Advanced Site Menu/Navigation
The Advanced Site Menu/Navigation area is where you can edit, create, and manage navigation menus for use on your ESP Website and Company Store(s).
Create a New Menu
To create a New Menu, click on the "Create a New Menu" button.
Then, configure the new menu by:
- Selecting whether you want to create a new menu or copy an existing one.
- Naming the menu (ex: Side).
- Selecting whether you would like this menu to be horizontal or vertical.
- Clicking on the "Create Menu" button when you are finished.
Add Menu Items
Now, begin building your menu by clicking on the Add button in the Menu section on the left.
When you are finished editing this menu item, click on Save.
The navigation found below the Advanced options area of the Properties box is the dropdown menu associated with its parent link. For example, ifI chose "More" from the Menu, when I hover over More on my live site I will see News & Videos.
Add a New Menu Item
If you would like to add a new link to this submenu, click on the Add button in the lower section of the Properties area.
A second Properties window will be displayed with the "Navigation Item Options"
If you wanted to add another menu item below the new Navigation Item, you can use the Add button in the lower portion of the Properties window.
Here's a menu item with sub menus would appear in the Advanced Site Navigation area. In the example below, Stress Relievers is first, then Medical, then Doctors, Nurses, Health and Fitness.
Therefore, the site navigation menu is:
Stress Relievers > Medical > Health and Fitness
To make a menu item inactive, just uncheck it.
There are two preview buttons; both will display a preview of your menu. If you are satisfied with your site navigation, you will need to add the menu to your site. For more information on how to do this, please refer to the ESP Websites Advanced Page Manager section.