Skip to main content

3. Design Elements

 

Design Element 1: Widgets

Previous Next Jump to top of events for this list
  • Choose from the following layout options
    - 2 big
    - 1 small, 1 big, 1 small
    - 2 small, 1 big
    - 1 big, 2 small
  • Widgets Available: Upcoming Events, Quick Links, News Articles (text + images), Announcements  (no images), Facebook Feed, and Twitter Feed

 


 

 

Design Element 2: Slideshow

 

 

  • Can be contained or uncontained (meets the edge of the screen)
  • Can show or hide captions. If you hide captions with this particular stack item, it will still be ADA compliant

 


 

 

Design Element 3: Shortcut Blocks

 

 

  • Allows 2, 4 or 6 shortcut boxes
  • Can use any images for the background
  • Allows for a title and sub title (optional)
  • Can add an icon to each shortcut box and can make it as large or small as wanted

 


 

 

Design Element 4: Trendy News Articles

 

  • Can be used in replace of a standard slideshow if wanted
  • Feeds from a News Article page type that the user controls adding information to
  • Can link off to other pages to read more so you don’t have to overwhelm the user up front
  • Can display up to 10 images

 


 

 

Design Element 5: Design Video

 

 

  • Can display a full width video as a loop
  • The loop video can include a color overlay and a caption (like design stack home page)
  • Second video option is a contained video with a play button (above)
  • Height of videos are determined by the proportions of the video that’s uploaded

 


 

 

Design Element 6: Double Calendar

 

Upcoming Events

Gabbart Calendar

 

  • Highly requested by our school districts
  • The Upcoming Events displays on the left so you can see the closest dates coming up with more information
  • The full calendar displays on the right and you see more details when you hover over the dashes
  • Pulls from the same calendar

 


 

Design Element 7: YouTube Feed

Featured Videos

 

  • Requested specifically by our school districts
  • Uses your YouTube username and feeds the videos in the order they are uploaded, the most recent first


 

Design Element 8: Scroll Over Images

 

 

  • Image heavy to create a “wow” factor when you first visit a site!
  • Allows for a background image, title, body copy, and rollover animation
  • Can contain or uncontain (reach edges of the screen) on each row
  • Allows for 2 or 3 images per row
  • ​Can add multiple rows on top of each other for a great effect

 


 

Design Element 9: Social Media Heading

Social media bar

 

  • Background color must be uncontained (meets far left and right hand of screen)
  • Social media accounts posted above are the only ones available to display
  • Have an option to make the social media icons full color or 1-color
  • Can customize the font family, font size, verbiage, and colors

 


Design Element 10: Design Quote

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum orci et leo dignissim tempus. Morbi viverra augue sit amet diam laoreet tincidunt. In suscipit erat vitae erat scelerisque, quis pulvinar sem blandit. Donec ex lacus, pharetra hendrerit pharetra ac, interdum eu metus.

 

  • Background color can be contained or uncontained
  • Allows for an optional favicon above the quote
  • Decorative vertical lines optional
  • Can customize the font family, font size, and verbiage

 


Design Element 11: Twin Feature

 

View More

+

Meet Our Faculty

  • Administration

  • Elementary Teachers

  • Middle School Teachers

  • High School Teachers

business people

View More

+

DOCUMENTS

  • Administration

  • Elementary Teachers

  • Middle School Teachers

  • High School Teachers

cloud pic

 

  • Allows for 2 separate backgrounds: One on the outside and one that displays on hover per side
  • Inside rollover displays 4 bullet points about the page itself so the users can see what the page includes without actually clicking off
  • Ideal for pages that the name of the page doesn't give enough details
  • Allows for 2 separate icon overlays: One on the outside and one that displays on hover per side 

 


Design Element 12: Parallax

 

Classrooms with the latest technology

All of the classics housed in one library

Online Learning Available

 ​

  • Parallax images can either be one, two, or three
  • Groups of 3 parallax images can be two on the right or two on the left
  • Images can be uncontained (meets the edges of the browser) or contained in an invisible box to display the background color on the left and right side
  • Optional text can be displayed on top of the images
  • Can customize the font family, font size, and font color

 


Design Element 13: Feature Video

X Close

Gabbart Communications

A brief overview of what the video is about. Give a short exciting title to your video to grab people's attention. I.E. Important statement from our superintendent on the new policies and procedures regarding in-person learning. Be sure to check it out here!

 ​

  • Choose any video uploaded to your video drawer to display in this stack
  • Add a title and description to outline what your video is about
  • Video does not play until the user presses play so the sound doesn't take over their computer unwillingly

 


Design Element 14: Double Blocks

X Close

___________________________ ___________________________ ___________________________ ___________________________ ___________________________ ___________________________ ___________________________

 

  • Display any text or any image side-by-side
  • This design stack can link to another page or document by clicking on the “Learn More” button
  • This design stack can be contained or uncontained

 

Design Element 15: Video with Shortcuts

Gabbart Communications

This is the Gabbart Story....

 

  • Display any video or image with shortcut buttons overlay
  • You have the option to overaly text or a clickable button that will bring you to other page or document
  • The text overaly can be left-aligned, centered, or right-aligned
  • You have the option to display 2 or 4 shortcut icons
  • You have the option to change: the colors of the text, the button, the icons, the overaly bottom bar or the shortcut titles
  • This design stack can be contained or uncontained
  • This design stack can also switch from a video on full screen, to an image on mobile