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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis dolor in sem molestie dignissim hendrerit quis metus. Nulla sit amet viverra ligula. Sed eget lectus ullamcorper, viverra risus sit amet, laoreet arcu. Nunc vel nisl nec nulla hendrerit tincidunt ut non ligula. Quisque sed eros purus. Fusce ac nunc sed nibh luctus tempor. Nunc eget sollicitudin nulla.

 ​

  • 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