Responsive Elements: “Acalog Course List”

Share

Element Information

Lists courses for degrees from Acalog.

Tutorial

  1. Insert the Responsive Element “WordPress Blog Content”
  2. Define the element
    • Select desired degree to be displayed.
    • Select desired display options.

Detailed Tutorial

Step 1: From your template insert the new element “Acalog Course List” under “1- Responsive Elements”

AcalogElement

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Step 3: Select your desired degree to be displayed from the drop down menu titled “Acalog Degree”

AcalogSelectDegree

Step 4: Set the display options.

AcalogOptions

Responsive Elements: “WordPress Blog Content”

Share

Element Information

Display up to the 10 most recent entries in a WordPress blog.

Tutorial

  1. Insert the Responsive Element “WordPress Blog Content”
  2. Define the element
    • Select Display As type
    • Fill Option out for the type

Detailed Tutorial

Step 1: From your template insert the new element “WordPress Blog Content” under “1- Responsive Elements”

WordPressSelect

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

There are many option for the WordPress Element. The first is the Blog Name, here enter the name of the blog to be display on this web page. The Number of Posts changes the number of post to be show on this web page, this number can be between 1 and 10. The Display As is the way the blog information will be displayed. This part is important because you will only need to fill out the information for that type of display for the rest of the options.

For Option – All (needs to be fill no matter what Display As type is selected)
Select Display Blog Title if you would like the title to be displayed. Title Size changes the size of the title of the blog entries and go from H3-H6. This next couple of boxes allow you to only display what you would like from the blog, click the box to add each option you like. The box beside Read More Text, allow to have a clickable link to the blog. This can say thing such as, “Click here to read more” or “Read more here”.

For Options – List With Images, Carousel
The first option, Image/Text Location allows you to choose which side your image and you text will be on. The second option, Section Width will change the width of each blog entry that is displayed on the web page.

For Option – Carousel Only
For the Carousel, the time display can be change by selection the number of seconds beside Display Duration. The Transition can have the blog items slide or fade to each blog item.

WordPressData

Responsive Elements: “News Items”

Share

Element Information

Displays up to 5 images, stories, and links.

Tutorial

  1. Insert the Responsive Element “News Items”
  2. Define element and add news
    • Options
    • Add images, stories, and links

Detailed Tutorial

Step 1: From your template insert the new element “News Items” under “1- Responsive Elements”

NewsItemSelect

Step 2: Define the element by clicking the dear icon where you placed the element in the previous step.

Define-Custom-Element-SS

For this element, there are many option to change. This part of the tutorial will explain each option. The Display As option allow you to display the data in different ways, the most commonly used is the list, selecting Randomize Entries will place the data in a random order. The Location of Text and Image allows you to choose which side the text and the image will be on. Section Width define the width of each section of data. The “Read More” Text is the text display for users to click to read the full story. Example, you could put “Read more about it here” or “Full story click here”. Header is use if you would like to display a header. The bottom option are for the Carousel Display type.

NewsItemData

Add a title to the data by putting text in the Title box. Select the Select Image button to add a image. Follow the direction for adding an image. Add a summary of the data in the text box. In the box beside Link to full story, add the full URL of the story. You can select the order of the data by changing the number in Sort Order, but this is automatically done if there is no preferred order. REMEMBER to select the Display this Item, so that the image will be display if this is not selected the item will not show.

NewsItemOptions

Responsive Elements: “Text Around an Image”

Share

Element Information

This element allows you to wrap text around an image.

Tutorial

  1. Insert the Responsive Element “Text Around an Image (Responsive)”
  2. Add to the element
    • Add picture
    • Add text

Detailed Tutorial

Step 1: From your template insert the new element “Text Around an Image (Responsive)” under “1- Responsive Elements”

TextAroundImageSelect

Step 2: Define the element by clicking the dear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Select the Select Image button to add a image to the element. Follow the step to add an image. To add text type in the text box an the bottom. To change where the picture is located select from the drop down beside Image Location. To change the width of the picture select from the drop down beside Image Width. To add padding (space around) to the picture change the number beside Padding. Click save to create element.

Tabbed Section

Responsive Elements: “Tabbed Sections”

Share

Element Information

Creates up to 10 tabbed sections.

Tutorial

  1. Insert the custom element “Tabbed Sections”
  2. Define the element.
    • Options
    • Tabbed Sections

Detailed Tutorial

Step 1: From your template insert a new element as “Accordion” found under “1 – Responsive Elements.”

Tabbed Section Selection

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

After setting up the options click one of the numbered sections (1-10) to start working on a section. Be sure to click the “display this section” check box before finishing your work in your formatted text box.

Tabbed Section Settings
Tabbed Section

Responsive Elements: “Banner Images”

Share

Element Information

Display a random image on a page load from a directory in your customCF folder. Image must be a .jpg file.

Tutorial

  1. Upload Images to customCF folder
  2. Insert the custom element “Banner Images”
  3. Define the element
    • Custom CF folder
    • Default ECU images

Detailed Tutorial

Step 1: Upload images to CustomCF folder, If you plan to use the Default ECU images you can skip this step.

Element Information

Displays content in up to 10 collapsible sections.

Tutorial

  1. Insert the custom element “Accordion”
  2. Define the element
    • Options
    • Accordion Sections

Detailed Tutorial

Step 1: From your template insert a new element as “Accordion” found under “1 – Responsive Elements.”

Banner Images - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Type in the customCF path to your image folder created in step one, or check the “Use Default Ecu Images” box to use default ECU images.

Banner Images - Full Setup

Responsive Elements: “Accordion”

Share

Element Information

Displays content in up to 10 collapsible sections.

Tutorial

  1. Insert the custom element “Accordion”
  2. Define the element
    • Options
    • Accordion Sections

Detailed Tutorial

Step 1: From your template insert a new element as “Accordion” found under “1 – Responsive Elements.”

Accordion - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

After setting up the options click one of the number tabs (1-10) to start working on a section. Be sure to click the “display this section” check box before finishing your work in your formatted text box.

Accordion - Sections

Responsive Element: “Localist Calender”

Share

Element Information

Displays a localist calendar of upcoming events. Content groups, departments, and other filters may be set.

Tutorial

  1. Insert the custom element “Localist Calendar”
  2. Define the element
    • Dates
    • Events

Detailed Tutorial

Step 1: From your template insert a new element as “Localist Calendar” found under “1 – Responsive Elements.”

Localist Calendar - Select Element

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

After you add a header, you can choice to add the “more events” link. This will add a link on the right side of the container to calendar.ecu.edu. By default the Header will already be a link to the same page. The number of results section lets you set the number of maximum results you want to be displayed (1-10). The days ahead section sets the maximum days in the future you want to show on your calendar. The rest of the settings allow you to filter and create any calendar you wish from any of the feeds from calendar.ecu.edu.

Localist-Calendar-Full-Setup

Responsive Elements: “Image Carousel”

Share

Element Information

Displays up to 5 images, titles and descriptions. Various styles, urls, and transitions can be set.

Tutorial

  1. Upload your images
  2. Insert the custom element “Image Carousel”
  3. Define the element data fields
    • Display Options
    • Images

Detailed Tutorial

Step 1: Upload your images by selecting new at My CommonSpot bar at the top of the browser.

CommonSpot New Image - Step 2

Single Image
Configure your target subsite to where you want the image to be stored in commonspot. Then click the choose file button to add the image. Once you have selected your image, type in a good description of the image and give it a category to be stored in. Hit save and your new image will be stored.

CommonSpot New Image - Single 1

Multiple Image(s)
Start by clicking the add image button or dragging and dropping your images into the highlighted drop files here box. Then click upload image(s).

CommonSpot New Image - Multiple 1

Now make sure that the image(s) you selected in the previous step are the ones you see highlighted region above. If so, proceed by clicking the next button.

CommonSpot New Image - Multiple 2

Next, give each uploaded file a description and select the images you would like to upload by either clicking the link or by individually checking each images box highlighted to the right. Once you are satisfied click enter properties.

CommonSpot New Image - Multiple 3

Finally, give the images a category and click save to finish the multiple image(s) upload process.

CommonSpot-New-Image-Multiple-4

Step 2: From your template insert a new element and define this element as “Image Carousel” found under “1 – Responsive Elements.”

Image-Carousel-Select-Element

Step 3: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

Display Options
The Show Previous/Next option will display arrows on both ends of the container to slide from image to image. An unchecked box here will still display small circles on the bottom of the image container to allow users to slide between images. Also, the display duration can also be set to manual allowing users to control when the images are cycled through. You can set your text location to be at the bottom left or right, the text is the image description that is entered in the next step. Once you are finished with the display options click one of the image tabs to begin configuring your images.

Image Carousel - Display Options

Images
Before selecting an image be sure to check the “display this image” box. Once you have selected an image and given it a title and description you can give it a sort order number, this sets the order in which your image will appear (If you did not select random image in the display options tab). All images sort order number are defaulted to their image tab number.

Image Carousel - Images

Responsive Elements: “Primary Navigation”

Share

Element Information

Primary Navigation is a site-wide navigation element. It is used to have a consistent navigation element across whole sites. Changes to primary navigation are done in the pane.

Tutorial

  1. Insert the custom element “Navigation – Primary”
  2. Define the element in the left pane
    • Open left pane (Primary Navigation)
    • Manage Navigation

Detailed Tutorial

Step 1: From your template insert a new element as “Navigation Primary” found under “1 – Responsive Elements.”

Navigation(Primary) - Select Element

Step 2: Open the left pane to define the element by moving your mouse over the left side of the page and click the orange arrow. Once the left pane is open select the primary navigation tab at the bottom.

Left Pane - Primary Navigation

Next click the manage navigation button at the top

Left Pane - Manage Navigation

Once the new tap or pop-up has appeared for managing the navigation you can add a new item(with or without a parent) or edit/delete an existing menu option.

  • To add a new menu item, click the add new item button.
  • To edit an existing option, click the pencil logo next to the item you want to edit.
  • To delete an existing option, click the “X” logo next to the item you want to delete.

Primary Navigation List of Menu

Add New Item
First give your link a user friend label name such as “Home” or “Athletics”. Then choice whether or not you want the link to have a parent item to be listed under, or if you want the new item to be a parent.
Now give your item a link either Internal or External to http://www.ecu.edu.

Internal
Click in the text box next to the url listed “http://www.ecu.edu” to type in the extention to that page for an internal URL.
External
Click the check mark next to “External URL” and then click in the text box next to the url listed “http://” and type in the extention to that page for a external URL.

When you are finished creating a new menu item click the create button.

Add New Menu Item Primary Navigation

Update Menu Item Here you can edit the label and URL of your menu item that was defaulted on setup or created when you added a new item. When you are finished updating the item click update.
See “Add Menu Item” (above) to see how to add a internal or external URL.

Update Menu Item Primary Navigation