Accessing your account

Log in to your Umbraco PackPages site at PackPages.unr.edu. Your credentials are the same as your NetID; this means if you change your NetID password, your Umbraco PackPages account will also change.

Having trouble logging in? Visit UNR's NetID site

Exploring Umbraco

When you first log in to Umbraco PackPages, you should see your home page located on the left column with the title "Lastname, Firstname". In the right column sits the content to be displayed on your homepage.

Please do not change your home page title from "Lastname, Firstname".

Entering your site settings

Locate the "Global Settings" file by expanding your home folder, then your "Settings" folder. Notice the 5 tabs at the upper-right location of the screen; click through each one to explore the site-wide settings you can edit for your instance of Umbraco PackPages.

Begin filling out your information. Fields marked with a red star (*) are required fields. All required fields must be filled out before you can publish your settings.

1. Personal Information Tab - This tab contains general information about you like: your name, job title, department/division, etc.
2. SEO & Social Media Tab - This tab allows you to edit the information that search engines and social media sites pull from your website.
3. Site Alert Banner Tab - This tab allows you to create a site-wide banner that is displayed at the top of your site on every page. This can be helpful for general announcements.
4. Design Options Tab - This tab allows you to change your site-wide title and footer background colors.

Once you have completed all required fields, push the "Save and publish button". Go back to your home page ("Lastname, Firstname") and push the "Preview" button to view your changes.

Your home page should now look similar to this:

Setting up your home page

Now that you have published your site settings, let's finish your home page. Navigate back to your home page within Umbraco. Add a profile image by clicking on the "+" (plus sign) box next to the "Profile Image" field. In the popup "Select media" dialog, you will notice you will immediately be directed to your personal media file. Drag a photo directly into this window to upload your image into Umbraco. You can also make a folder by clicking the "+" (plus sign) in the "Select media" dialog.

Finish uploading your photo by pressing "Submit" and the "Select media" popup dialog will close. Notice your image is now selected. Continue to fill out your biography using the rich text editor in Umbraco. This editor allows you to create many styling methods found in most word processors. When you are finished, publish your home page by pressing "Save and publish".

After you publish your homepage, your home page should look similar to this:

Setting up your first page

Navigate to "First Page" under "Lastname, Firstname". Enter your page title followed by the navigation page title. If you would like to hide this page from the navigation menu, click the "Hide from page navigation?" checkbox. When you're happy with your entries, press "Save and publish".

Pages that appear to be "greyed out" in the sidebar are unpublished.

When you have finished entering your page information, expand the "First Page" dropdown to reveal the "Page Components" folder. Right click on "Page Components" to view the page options. Click "Create", and then under "Create an item under Page Components", select "Grid Component".

You have now generated a new grid component under your "First Page". A grid is used to display various forms of content on your website with ease. Since you generated this grid under your "First Page", it will automatically display the contents of this grid on your "First Page". Begin by filling out the component name; this name does not publish in any way to your live site, but rather it serves as a reminder to you of its contents. Choose a background color for your container and then switch to the "Component Content" tab.

Select a row type that fits your content well. There are many different row styles to choose from. Notice the main difference between these row types are how many/how wide your columns are. We will choose "Row with 3 columns". Choose wisely, as you can not effortlessly change your layout once selected. Your screen should now look similar to this:

Now, you can simply click any "Add content" container to add content to your grid. When you've finished adding content to your grid, push "Save and publish" and navigate back to your "First Page" to preview your changes.

Tip: You can also add grid components to your homepage using the same method, except instead of creating grid components within "Page Components", create them under "Home Page Components".

Note: You must publish component folders (in addition to the components themselves) to successfully upload your changes.

Where to go from here

Now that you've completed the initial setup, feel free to play around with your site and add more content to your pages. If you need more help with a specific task, try looking at the subject or task's documentation below.

Need more help? Visit the help page

Overview

When you sign in to Umbraco PackPages for the first time, you will have 3 pages generated automatically for you. While these pages are not published, you are free to begin manipulating all aspects of the page; this includes its name, grid layout, and content.

Pages contain the following fields/components:

• Umbraco Page Name: This field is not displayed on your live site, but rather it is a name private to you that can aid you in remembering the page's content.
• Page Options Tab:
• Page Title: This is the full page title that will be used on the header and title sections of your page.
• Navigation Subpage Title: This is the shortened page title that will be displayed only in the navigation section of your site.
• Hide Page from Navigation: This option allows you to hide your page from the navigation area.
• Properties Tab:
• Publish at: This is the publish date for the page. Setting this will automatically publish the page at your desired date/time.
• Unpublish at: This is the unpublish date for the page. Setting this will automatically unpublish the page at your desired date/time.
• Page Components Folder: This is the folder where you will create "Grid Components" (content blocks) for your page.
• Right-click Menu Options: In this menu, you can access many important page options such as: sort, copy, delete, audit trail, etc. This menu is found by right-clicking the Umbraco page name along the left-hand rail.

Managing pages

Page Sorting: Pages are displayed in the navigation bar by the same sort order you see them in. If you would like to move the order of your pages, right click your Home Folder and select "Sort". A new window will open that will allow you to resort your pages to the order you prefer.

Deleting Pages: You can delete any page by using the right-click menu (this menu is found by right-clicking the Umbraco page name along the left-hand rail) and clicking "Delete". When you delete a page, it will automatically be unpublished.

Overview

What is a grid component? A grid component is a section of data that can be easily manipulated to fit your content. You can control background color, column width, number of columns, and the type of content that sits inside the columns.

Here is an example of a site using grid components to display publications on a single page, using 2 grid components:

Creating a grid component

Create a new grid component by right clicking any "Page Components" folder (or "Home Page Components" folder on the homepage) and selecting "Create". In the popup window, select "Grid Component". You have now created a new grid component under your selected page.

Note: You must publish component folders (in addition to the components themselves) to successfully upload your items.

Background color

Control your background color by selecting any grid component and selecting the "Background Color" tab. You have 6 available colors to choose from. We do not allow users to create their own background colors for accessibility-related purposes.

Content layouts

After you have created a new grid component and selected your background color, click on the "Component Content" tab to begin styling your content layout.

You will be presented with 8 default layouts. Select one that works best for the content you have.

Once you select your layout, you can begin placing your content data types in your grid component. You can add even more layouts to the same grid component by pushing the "+" (add more layouts button).

Content data types

After you have created a new grid component, selected your background color, and designed your content layout, you are ready to place your content into the grid component. Click on any open content field that says "Add Content" to chose a content type for your data. You can choose 3 types of content.

Types of content:

• Headline: Use this to insert a headline (or title) into your content.
• Image: Use this to insert a photo (cropped or uncropped) into your content.
• Rich text editor: Use this to insert rich text into your content. The functionality of this editor is similar to a word processor.

Uploading images

Uploading photos to your content is simple! Follow the steps to add an image to your content:

1. In your current grid, click "Add Content" and select "Photo" from the popup menu. The media selector will display in the right-side of your screen.
2. Click the "Upload" button in the upper-right corner of your window.
3. Select an image from your computer to upload.
4. Optional: Click on the newly uploaded image to add alt text now, or to edit the photo name.
5. Click "Submit", and your new photo will populate in your content immediately.

You can manage and edit your photos at any time by clicking on the "Media" tab in the left-hand Umbraco menu.

Creating a link

To create a link in your content:

1. Create a "Rich Text Editor" content data type in a grid component.
2. Type your link text.
3. Highlight your link text.
4. Click the link button (chain-link icon) in the rich text editor menu.
1. Link: Copy and paste an external/internal URL to link to.
2. Link title: is the text displayed when mouse hovers over link.
3. Link to Page: Choose an internal page from pre-created PackPages sites.
4. Link to Media: Choose an image to link to from PackPages.

Creating a button

While you can always make a regular link in your content, you can also create a call-to-action button that will stick out in your content.

To create a button in your content:

1. Create a "Rich Text Editor" content data type in a grid component.
2. Type your button text.
3. Highlight your button text.
4. Click the "Formats" button in the rich text editor menu. In the dropdown, select "Button".
5. While the text is still highlighted, click the link button (chain-link icon) in the rich text editor menu. In the popup link box, link the content or page you would like to link.
6. Optional: Center your text to center the button in the middle of the container.

Navigation layouts

There are many different types of layouts your site can emulate.

• Default Navigation: This is how your navigation should look on a desktop display with 1 homepage and 3 sub-pages.
  
• Extensive Page Navigation: This is how your navigation should look on a desktop display with 1 homepage and 4+ sub-pages.
  
• Navigation Disabled: This is how your navigation should look on a desktop display with 1 homepage 0 visible subpages. This means you can still have sub-pages, but they are all labeled "hidden".
  
• Mobile Navigation: This is how your navigation should look on a mobile (and some tablet) displays with 1 homepage and 4+ sub-pages after clicking the "hamburger menu" (disabling your navigation will also disable this section).
  

Ordering nav items

Default sort order: Navigation items are displayed in the same order as your pages in Umbraco.

Reordering your pages: To reorder your pages in Umbraco, right click your home folder and select "Sort". In the popup window, you can drag your pages to your preferred order.

Hiding pages from the nav

On the page you would like to hide from the nav, click the "Page Options" tab and then check "Hide Page from Navigation?".

Changing title & footer colors

In your global settings file (located in your "Settings" folder), click the "Design Options" tab to access the color options for your site's title and footer colors. Changing these options will reflect across your entire site.

Data in your footer

Your footer contains a copyright notice with your full name. If you filled out your pronouns in your global settings file, then this will also appear here.

Publishing your site in Umbraco is often easy to do; however, there are a few tips and tricks to ensure you publish your site correctly:

• If you are trying to publish a page sitting in any folder, the folder must also be published before it will be published on your site.
• Similar to the statement above, if you have a page component stored under a page, then the page, component folder, and the component itself must all be individually published before it will be published on your site.
• You can easily publish "root" pages and, subsequently, all child content of that "root" automatically by completing the following:
1. Right-click the root page or folder that you would like to publish all children of
2. Click "Publish"
3. Select "Publish [name] and all its subpages"

Why use a banner? Banners are useful for displaying alerts to users of your site.

Enabling the banner: To enable a banner on your site, open your global settings file (located in your "Settings" folder). Click the "Site Alert Banner" tab to view banner options. Enter your banner title, information text, and choose an icon/color combination for your alert. When you are satisfied with your results, check the "Show alert banner?" box and view your changes on your site.

What is Umbraco? Umbraco is an open source content management system (CMS) platform for publishing content on the World Wide Web and intranets. It is written in C# and deployed on Microsoft based infrastructure.

Visit umbraco.com

Still need more help? If you have looked over the documentation section in which your question pertains to and you still have a question, feel free to seek further aid resources on the help page.

Visit the help page