Web editing - What are the various parts of my pages?

Anatomy of a UWL page and what content is editable

Most UWL content pages are made up of 3 columns:


Left page menu and contact info
The Page menu on the left side of the screen is edited by Web Services simply to prevent editors to accidentally delete their pages. The contact section is also edited by Web Services as it ties into various systems around campus. Some people refer to the left hand menu as tabs or page buttons, but we call it the Page menu. 
page menu

Middle main content column
The middle column contains 3 content zones. Content zones are areas of the site where blocks can be placed. Think about it like a lunch tray, you have a tray with designated areas for food and you can choose what type of food to put in each spot. Some spots might not have any food, some spots might have lots of food. The food talk is making me hungry, sorry, back to the web stuff! The content zones exist so that you can put blocks within them, where you want them. 
center column

Your welcome page will contain 3 content zones in the middle column: at the top will be an inherited zone, the middle will be a page specific zone and the bottom will also be inherited. What is inherited? Inherited zones mean the blocks placed in them will be inherited through each page under your welcome page. For instance, if you put a "Get Web help" button at the top of your page in the Inherited Main content top, it will appear on all of your subsequent pages. In between the two inherited zones is a standard, page specific zone. Anything you put in the Main content zone will only appear on the page you're currently working on.

Often times, web editors accidentally place a block in the inherited top section and get confused why it's showing on every page. A simple fix is to edit the welcome page, and drag the block in the Inherited Main content top down to Main content. 


Right column content
The right column is set up almost identically to the middle column. There are 2 inherited zones (top and bottom) and a page specific zone in between.
right column




How does the site look on my phone versus my computer?

Below are two diagrams which show the parts of the page discussed above, and how they lay on the page based on screen size. The shifting of content zones to match the screen width is called Responsive design. Our site is fully responsive. Pay attention to the Orange content zone on desktop and where it goes on mobile, for example.

Desktop view
Desktop view

Mobile phone/tablet view
mobile phone view




Keywords:content zones, content blocks, inherited, content   Doc ID:98658
Owner:Jake S.Group:UW-La Crosse
Created:2020-03-11 10:46 CDTUpdated:2020-03-23 14:10 CDT
Sites:UW-La Crosse
Feedback:  0   0