Welcome to G5 Help Center

G5 Knowledge Base
G5 Logo Knowledge Base

Return To Blog
Article Header

Avenue Theme

|

   Avenue Build Notes -- G5 THEMES

 

Helpful Links & Resources

Avenue Talking Points

  • Fresh navigation placement: This theme displays the navigation at the bottom of the screen and will rise and pin to top of the browser window upon scroll.

  • Large text over the hero: Avenue features a large tagline area over the hero image to prominently display a value proposition or branded tagline. This feature is optional.

  • Strategically placed CTAs: Displaying the calls to action in the top left corner places them where the user will first glance as they scroll the page (rules of the "F Pattern). This also strengthens the G5 Theme Collection by providing a new placement option.

  • Parallax scrolling: The pinned hero image provides depth while the foreground elements sliding over it adds excitement and user engagement to the design.

  • Other design elements include: full browser width layout, top-centered logo directly over the hero image and a double border under headings as a text treatment.

Vertical Specific Live Demo Sites:

Product Document: New G5 Theme Product Document -- Bottom Pinned Navigation https://g5.jiveon.com/docs/DOC-8211

 

 

TABLE OF CONTENTS

 

PHOTO/LOGO SPECS

 

LOGO SPECS:

Padding is NOT coded around the logo area on Avenue. Upload logo files on a canvas with top padding around the image if you do not want the logo to be flush with the top of the browser window.

 

W: Semi-Arbitrary -- Min: 250px - Max: 325px

H: Semi-Arbitrary -- Max: 170px

 

NOTE: The logo will display true to the size it is loaded as until the breakpoint around 1600px and below. The logo will then shrink to be about 100px tall to accommodate for the tagline/CTAs.

PHOTO SPECS:

 

IMPORTANT NOTE:

Avenue is a full width design which means large browser windows need to be taken into consideration.

 

When to Lazy Load Images:

  • DO NOT turn on lazy loading for hero Images

  • DO use lazy loading for photos lower on the page.

It is VERY important to use the 'Lazy Load' option in the Photo widgets below the hero stripe, compress your images before uploading and use tools to check your page weight.

 

Checking Your Page Size:

HERO IMAGES

 

Home Page:

  • Home Page hero image photos must be loaded with a ratio of 5:3

  • If the home hero image is not as wide as the browser window it will stretch to fill the space

 

W: 2000px (Recommended)

H: 1200px (Recommended)

 

 

 

Internal Page Hero Images:

  • If the interior hero image is not as wide as the browser window it will stretch to fill the space

  • Interior Page hero will be cropped to have a fixed height of 150px on mobile

  • Interior Page hero will be cropped to have a fixed height of 250px on desktop

 

Internal Hero Full Browser Width:

W: 2000px (Recommended)

H: 250px (Recommended)

 

 


 

PHOTO GALLERIES

 

NOTE: For smooth transitions between photos in the galleries, photos should be the same dimensions. If a combination of landscape and portrait are used, the height of the photos should at least be the same.

 

Standard Photo Gallery:

W: Arbitrary

H: Arbitrary

 

  • NOTE: Load images around 2000px wide to be full width in a single column on the majority of monitors. However, DO NOT do this if displaying a large amount of images in the gallery.

 

 

Featured Properties Gallery:

W: Minimum 500px (Recommended)

H: Arbitrary

 

 

Mini Gallery:

W: Minimum 1000px (Recommended)

H: Arbitrary

 

NOTE: The Mini Gallery photo will stretch depending on the browser width. It is also important that all images in the same Mini Gallery have the same dimensions.

 

 

 

 

 


GENERAL PHOTO SIZES:

 

Single Column:

  • W:2000px  H:Arbitrary

2/3 Column:

  • W:1400px H: Arbitrary

1/2 Column:

  • W:1050px H: Arbitrary

1/3 Column:

  • W:700px H:Arbitrary

 

VARIABLES

(From Approved Design File)

 

COLOR CONFIGURATIONS:

Primary Color:

  • Navigation background color (semi-transparent)

  • Subnavigation background color

  • Background color of the navigation hover state

    • Darkened 20%

  • Background color of the subnavigation

    • Darkened 20%

  • Background color of the footer

  • Contact Info Sheet (sticky nav) background color (semi-transparent)

  •  
  • Contact Info widget background

  • Background color of text overlay on the Featured Properties Gallery widget

 

Secondary Color:

  • Button Widget background default color (including header button)


  • Corporate Home button background color

  • Gallery widget arrow background color

  • Social Link icon background color

  • Hyperlink color

 

Tertiary Color:

  • Background color of Calls to Action widget buttons


  • MF IUI Home -- Default color of the bedroom buttons

  • SS Featured Units Categories -- Default color of all buttons

  • City State Zip Widget -- Default color arrow backgrounds

  • SS Home Search Widget -- Default color of the buttons

  • MF Search Home -- Default color of the buttons

  • Locations Navigation Widget -- Default color of the button

FONT CONFIGURATIONS:

Custom Font Configurations - ORION  https://g5.jiveon.com/docs/DOC-7274

 

TYPEKIT SHOULD BE USED ON ALL BUILDS

  • Refer to the design file for font direction for each build

  • Please include 'lato' in your kit, so the paragraph text will display as designed

 

Typekit Note:

  • To allow for the theme to determine the weight of the text, it is only necessary to select 'Light' and 'Regular' text (the naming may vary depending on the font)

  • Do not select, bold or italics. The heavier the kit, the heavier the site and those options are irrelevant.

 

Primary Font Default: 'Helvetica Neue'

 

Secondary Font Default: Georgia

 

Base Font: 'lato', 'Helvetica Neue'

Primary Font:

  • Navigation font

  • Corporate Home button font

  • Calls to Action font

  • SS Featured Units Categories
 font

  • Self Storage Filtered font

  • Multifamily IUI Home font

  • City State Zip Search Widget
 font

  • Multifamily Mini Search & Multifamily Search font

  • Locations Navigation Widget
 font

  • Phone Number font

  • Contact Info font

 

Secondary Font:

  • All H tags

  • Button Widgets font (including Header Button)


  • Widget Headings

  • Quote field in the Quote widget

 

Base Font:

  • All p tags

 

Custom Classes

VISUALS

CONTENT STRIPE CLASSES

Add these classes to the Custom CSS Class field in the Content Stripe widget to apply specific styling.

 

Multiple classes can be added here with no punctuation in between classes

 

Example:

  • mosaic vert-align photo-crop

Purpose: Vertically aligns all widgets in each column in the content stripe

 

 

Class:

  • vert-align

Purpose: Removes the double border from ALL headings and the Contact Info widget

 

 

Class:

  • no-heading-border

 

NOTE: If this class is used on the hero stripe, it will allow the text to wrap throughout the breakpoints. (Text does not wrap without the class because of its relationship with the borders)

                      BEFORE                                     AFTER

Purpose: Removes the double border from all headings EXCEPT the h1 and the Contact Info widget

 

 

 

Class:

  • limit-heading-border

Purpose: Removes padding from the top and bottom of the content stripe

 

Content Stripe Class:

  • no-padding

 

NOTE: This is a global class and can be used on any theme.

Purpose: Adds 9ems (144px) to the top and bottom of the content stripe

 

 

Content Stripe Class:

  • super-padding

 

 

NOTE: This is a global class and can be used on any theme.

COLUMN CLASSES

Add these classes to the Custom CSS Class field in the COLUMN widget to apply specific styling.

 

Multiple classes can be added here with no punctuation in between classes

 

Example:

  • mosaic vert-align photo-crop

Purpose: Horizontally centers all widgets in a column

 

 

Column Class:

  • center

 

HOME PAGES

(Location & Corporate)

 

HEAD/HEADER SECTION

SPECIFICATIONS

Meta: Add Favicon -- Meta (Favicon, CrazyEgg, Google Webmaster Tools): G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7157

 

Typekit:Custom Font Configurations - ORION https://g5.jiveon.com/docs/DOC-7274

Typekit Fonts:

  • See specs above in the 'Font Configuration' section

  •  

Logo: Logo: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7180

Logo Specs:

  • See Above in the 'Logo Specs' section

Button:Button Widget: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6905

Button Notes:

  • The character limit is around 18 characters

    • The character limit is for small laptops and tablets

  • The text will wrap on all devices to accommodate, but it is not styled to wrap twice (display 3 rows of text)

Navigation: Navigation (v2) & Website Pages: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6867 Navigation (v2) & Website Pages: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6867

Navigation Notes:

  • The Avenue navigation displays a 'Corporate Home' button in place of the corporate navigation when 'Show Corporate Navigation' is checked in the widget.

  • There is not a character limit on navigation items, but the number of navigation items should not equal more than 6.

  • Long navigation items will wrap on smaller devices, if necessary

  • The subnavigation will display as a horizontal bar under the navigation

ASIDE BEFORE MAIN SECTION

 

Contact Info Sheet Widget: Contact Info Sheet: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7156

This widget is used to place the icons and smooth scroll sticky nav on the site.

 

  • The Contact Info Sheet widget is pinned in the lower right corner of the browser window on Avenue

Phone Number Widget: Phone Number: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7191

Avenue Phone Number Configurations:

  • To Display the phone number BEFORE the button in the nav bar (recommended):

    • Select 'Prepend Phone Number to Other Elements'

    • Paste header .buttons in the 'Other Phone Elements' field

 

  • To Display the phone number AFTER the button in the nav bar:

    • Select 'Append Phone Number to Other Elements'

    • Paste header .buttons in the 'Other Phone Elements' field

VISUALS

Navigation

Home Page Initial Load:

 

Upon Scroll:

 

With Corporate Navigation Selected:

 

 

Interior Page Initial Load (will pin upon scroll):

MAIN SECTION

 

Location & Corporate CONTENT STRIPE ONE:

SPECIFICATIONS

Row Layout: Single Column

Photo: See Photo Specs section above

 

Large tagline text over hero image (Fig.1):

  • The h6 should be used to display the tagline text over the hero image.

  •  
  • By default, a top border will appear over the text

  • For the bottom border to appear, wrap a span tag around the second line of text

    • Example:

<h6>MODERN APARTMENTS<br />

<span>In The Heart Of The City</span></h6>

 

NOTE: The text will not wrap if the border is used with the tagline text. If it is necessary for the text to wrap for your tagline, use the "no-heading-border" class for this stripe. This will also turn off the border though.

STRIPE ONE VISUALS

Home Page (Fig.1)

w/Large Tagline Option & Call to Action

 

Home Page (Fig.2)

No tagline w/ search widget:

 

Home Page

No tagline & 3 CTAs configured:

 

 

Location & Corporate

INTERNAL PAGES

(Use this information as it is appropriate for the page being built)

 

MAIN SECTION

 

Internal CONTENT STRIPE ONE

SPECIFICATIONS

The styling of the internal hero area has options:

 

OPTION 1:

Row Layout: Single Column

 

OPTION 2:

Row Layout: Single Column

  • Select to display a background COLOR using the Content Stripe widget 'Styles' tab

  • Do not select a widget to be displayed

 

OPTION 3:

Row Layout: Single Column

  • Select to display a BACKGROUND IMAGE* using the Content Stripe widget 'Styles' tab

  • Do not select a widget to be displayed

The height of the top stripe on Avenue is 250px tall.

 

*If opting to use the Background Image option, an image or a repeatable pattern can be used because the height of the stripe is fixed.

 

Remember that the logo and phone number will be laying on top of this stripe, so choose imagery that will contrast well with these elements.

INTERNAL STRIPE ONE VISUALS

 

Internal Page Stripe One

w/ Background Image as Top Hero:

 

WIDGET NOTES

(These notes are specifics for the build -- refer to the widget documentation for further instructions)

G5 Marketing Cloud - Widget Index https://g5.jiveon.com/docs/DOC-6923

 

SPECIFICATIONS

CONTACT INFO

 

Contact Info: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7155

The Contact Info widget on Avenue is styled as seen below. It accommodates all configuration options in the widget as displayed in the example.

 

The text WILL NOT be controlled by the Text Color style options in the Content Stripe widget because the background is the primary color and should always work with white text (shares this color with the navigation).

 

STANDARD GALLERY

 

Photo Gallery: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6842

See Photo Specs section above for recommended Standard Gallery image sizes

 

  • The images will not display at full width by default. If this is the desired effect, larger images must be loaded to accommodate all browser widths

 

Standard Gallery w/out Thumbs

MINI GALLERY

 

Photo Gallery: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6842

The height of the photos should be adjusted to accommodate the amount of text displayed in the right column, if any.

 

The character count used in the caption is directly related to the number of photos in the gallery. If there are 5 or more photos in the gallery then the thumbs will display on two or more rows, making the content area smaller (depending on the browser width).

 

The below example is using the "no-heading-border" class on the stripe to remove the border from the title.

 

Note: It is very important to size all of your photos with the same dimensions when using the Mini Gallery

Mini Gallery w/ Above Specs:

FEATURED PROPERTIES GALLERY

 

Featured Properties Widget: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7082

  • The ratio of the dimension of the Featured Property Gallery images are arbitary.

  • It is recommended to load images that are at least 500px wide.

    • The images will resize to fill the screen, so loading larger images is important to accommodate users who are viewing the site on large screens.

Featured Properties Gallery:

COUPON WIDGET

 

Coupon: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7177

  • The Coupon widget on Avenue is styled with a background that inherits a lightened value of the secondary color.

  • The buttons displayed on the coupon will inherit the secondary color.

HTML WIDGET (TAGLINE)

 

HTML Widget: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7176

Heading 6:

  • Avenue provides an option to display a large text tagline over the hero

  • Use the h6 as the heading in the HTML widget

  • The h6 will display with a top border. Wrap the second row of text in a <span> to display the bottom border. The <span> will also increase the size of the text a bit.

  • The font size of the tagline will adjust with the width of the browser.

HTML WIDGET (HEADINGS)

 

HTML Widget: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-7176

Stacking h1s, h2s, & h3s using the border:

  • A <br /> must be used after the first heading when trying to stack any of the headings listed above.

<h1>Our Amenities - h1</h1><br />

 

 

<h2>Our Amenities - h2</h2>

  • If the "no-heading-border" class is used the <br /> DOES NOT have to be used.

W/out the <br />:

W/ the <br />:

Button Widget (when placed in a Content Stripe)

 

Button Widget: G5 Marketing Cloud Widget https://g5.jiveon.com/docs/DOC-6905

The configuration of the button allows for two display options:

  • List (Defautl): The same styling will be applied as the CTA (drop shadow) and the width of the button will be determiend by the characters in the text field.

    • NOTE: Using this option the color configurations in the widget will not work as intended.

  • Inline: The drop shadow will be removed and the width of the button will be determiend by the characters in the text field.

    • NOTE: The color configurations in the widget WILL work with this option

'List' Selected (Default):

'Inline' Selected:

 

GOTCHAS & TROUBLESHOOTING:

WHEN USING LARGE IMAGES:

Do NOT use the 'hero' class on Avenue. It will break the overlay over the hero image:

 

BUTTON WIDGET

  • Color configurations will not work when the "List" option is selected.

 

CHILD THEMES

Style Variations

SPECIFICATIONS

 

Select images to enlarge

SIMPLE

 

Styles:

  • Squared button edges

  • Squared field edges

  • Squared CTA background

  • Squared Contact Info background

  • Border above navigation is turned OFF

CLASSIC

 

Styles:

  • Rounded button edges

  • Rounded field edges

  • Rounded CTA background

  • Rounded Contact Info background

  • Border above navigation is slightly transparent

BOLD

 

Styles:

  • Leaf-shaped button edges

  • Leaf-shaped CTA edges

  • Leaf-shaped Contact Info background

 

 

RELEASE NOTES:

 

DATE: 9/26/2016

Avenue Launches!

DATE: 10/17/2016

First round of beta testing edits released

DATE: 12/5/2016

Last round of beta testing edits released

DATE:7/26/2016

Avenue Classic & Avenue Bold child themes are released