Site Notes
Homepage Elements
- Header Banner
- Update the Homepage Hero Slideshow
- Callout Buttons on side of page
- Image Hover Buttons
- Update the News & Calendar
- Infographic
- Footer Banner
Header Banner
This is a banner - you should manage the necessary content at the banner level NOT at the page level.
-
Most of the content you will want to update will be done at the branch level through a set of pages.
-
The main navigation is created dynamically as you create pages
-
Utility navigation (parents, students etc.) is managed through the header utility branch
-
the page names are what's showing in the footer. These pages will likely link to other pages within your main site navigation. If needed you can add content to them, with the understanding that through the footer would be the only way to get to them.
-
-
-
All other information is managed on the banner itself (the logo - the school name and where it links, etc)
-
go to the appropriate header banner
-
each item will be associated with an element within the banner.
-
Pro tips to edit link content -
-
To change the words on the page for a link, click the html toggle in the top left corner of the tool bar (</>) and change the information accordingly retaining the formatting around all items (text is in black, code is in color).
-
to alter where the links go, click back to the main view and right click on the link, select “edit link”
-
-
Update the Homepage Hero Slideshow
This is a resource element
-
In resources either add the images/videos you want to the existing gallery or create a new gallery of images or a video, using individual resources you have already uploaded into the system.
-
photos should be cropped to (1600 x 700) before uploading them into Resources
-
-
Once uploaded, while still in resources, click each photo - edit the photo title and the photo description if you want to show either of those on the image or video itself
-
PRO TIP, for compliance, you should also ALWAYS add an "alt tag" to the photo
-
-
If adding photos to the already created gallery, once all photos are added and descriptions accurate, your work is done
-
If creating a new gallery, Go into the element for the masthead on the homepage and click the settings
-
Select the gallery within Resources you want to point to
-
-
This should be the only change you make to this element. Anything else will break it.
Callout Buttons on side of page
-
These are managed by the pages within the CTA branch
-
The page names are what's showing as the button content/title. These pages will likely link to other pages within your main site navigation. If needed you can add content to these actual pages, with the understanding that this would be the only way to get to them and that they would need to have all the appropriate banners and theme applied.
Image Hover Buttons
This is a container with content elements in it. The content elements are all managed the same.
Panel Title and Subtext
-
Click the settings of the container.
-
The title of the container is the title of the panel.
-
Under the Design+ accordion in the header area is where you add sub text if you have it.
-
Image Buttons
-
Click on the settings
-
The title is the title of the element
-
Under the Design+ accordion browse to the image you want to show
-
In the footer content area add the link to what you want the button to say and where you want the button to lead to on click
-
click save
-
-
Click"edit content" to add the rest of the content you want to show (this is what you see on hover along with the title again and the button)
Update the News & Calendar
This is a container with a tab element in it. One panel of the tab is a post element for the news one panel of the tab is a calendar element for the calendar.
Panel Title
-
Click the settings of the container - the title of the container is the title of the panel
-
News Element
-
This is controlled via the post module
-
Create your posts within the post module ensure for the homepage you always use a thumb nail and a title (as this is what shows on the homepage) - if you want to add a summery you certainly can.
-
On the homepage itself, click the gear icon for the news element
-
Using the edit tools, select what board (single) or multiple board and tags you want to pull onto your homepage
-
There are a few other features you can alter on the homepage news
-
Pop up details, as that doesn't effect the design of the homepage layout
-
Under format drop down you may ONLY change the number of news items you are showing on the page and the thumbnail information for the pop up
-
-
Under the design drop down you can change where the view all news button goes to (this needs to be a page set up within composer allowing the user to view more than just the handful of news posts you are showing on the homepage.
-
ONLY CHANGE THOSE ITEMS INDICATED ABOVE - ANYTHING ELSE WILL BREAK THE ELEMENT
Calendar Element
-
Click the gear icon for the element
-
ONLY CHANGE under General Settings
-
The calendar (s) which you are pulling from
-
The number of items within a date range
-
The date range (it is recommended for the homepage to set it to 0 days before and however many days you want after today's date)
-
Where the more events link leads to through the design dropdown (single click on the link in the footer content area and select "edit")
-
ANYTHING ELSE WILL BREAK THE ELEMENT
-
Infographic
Footer Banner
This is a banner - you should manage the necessary content at the banner level NOT at the page level.
-
The links in the footer (sitemap, privacy policy etc) are managed within the footer utility branch - the page names are what's showing in the footer. These pages will likely link to other pages within your main site navigation. If needed you can add content to them, with the understanding that through the footer would be the only way to get to them.
-
You may add a few additional pages if necessary being mindful of space
Social Icons in the Footer
-
The social icons in the footer (facebook, twitter etc) are managed within the social media links branch.
-
You will need to change where each page is linked to (at the time of this the icons are just pointing to the main social channels). This is done the same way you link any page within Composer - just use your specific channel URL
-
To turn OFF an icon that you don't have a social media presence in, go to the gear icon of the page within the social branch and "hide from navigation" this will maintain the icon for when you are ready to start using is
-
DO NOT DELETE THESE PAGES
To update the remaining footer information:
-
go to the appropriate footer banner
-
each item will be associated with an element within the banner.
-
Click edit content for each -
-
To change the words on the page for a link, click the html toggle in the top left corner of the tool bar (</>) and change the information accordingly retaining the formatting around all items (text is in black, code is in color).
-
to alter where the links go, click back to the main view and right click on the link, select “edit link”
-
Interior Page/Style Guide Instructions
- Adding a Blockquote
- Adding a Button
- Add Callout Box
- Styled Tabel
- Content Callout
- Interior Page Hero Image
Adding a Blockquote
Adding a Button
(must be done in this order):
-
Type your button text.
-
Select the text and click the "link" icon.
-
Type in your link, and in this same window, select the button class you want from the styles dropdown. You have the following options
- button-small-1
- button-small-2
- button-small-3
- button-large-1
- button-large-2
- button-large-3
- button-on-dark
- button-download
- button-link
-
Click Save
Note: If you add a button a different way than listed above, the text may be hard to ready and the style might not look correct.
Add Callout Box
-
Add a content element
-
Click the gear icon for the element
-
Open the “design” dropdown and the appropriate custom class to the custom class field. You have several options
-
callout-box-light
-
callout-box-dark
-
callout-box-school
-
Images are optional and are added in the settings under the Design+ accordion under the "header" area
-
-
-
Hit save
-
Click “edit content” in the main content area
-
Add the content you want into the content area
-
To create a title, add the content and style it as an h2 using the paragraph format icon in your toolbar
-
Click save (and publish)
** I find a nice size to be 800 x 400
Styled Tabel
-
Create the table using Insert Table from the menu tool bar.
-
From the table Properties, add the rows and columns you need
-
This is where you also determine how the content within the tables is aligned AS WELL AS whether your table has a styled header and what cell to apply that to (typically it's the first row)
-
Pro-Tip: By default the cell has a 1 pxl border and a 500 pxl width. To get it to look like your approved design, set border to 0 and width to 100%
-
-
Once you have that set, in the same set of table property tools, select from the class drop down Table Styled
-
Click Save (and add your table cell content)
-
At any time, you can right click on the table after you have created it to adjust rows, cells, and columns - for example this is where you would adjust the settings to make each cell the same size, or if you wanted to add a row etc.
Content Callout
-
Add a content element to the page
-
Add the content you want to apply the call out style to
-
Highlight the content
-
From the toolbar, select the “call out” from the Styles select box
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
Interior Page Hero Image
This is a resource element (add - set to a slideshow - where necessary).
-
To add it to a landing page, click "add element" on the landing page,
-
Select the shared tab
-
Selected the Landing Page Hero element
-
Once on the page, click the "shared" setting and edit and orphan
-
Now you should only need to change what image you are pointing to (change to - what gallery it points to - where necessary)
Photos should be cropped to 1440x600 before uploading them into Resources. You can have the width larger to account for larger screen sizes but the height should not exceed 600px.