Welcome to the Shortcodes Page

Here you'll find grab-n-go HTML and more information on the options baked into your Landing Page template.


TEMPLATE VARIABLES:

Global and template-level element information.

[css] AdHoc CSS

Type or paste CSS code into this input. It will be added to the end of the head element on the template, but only modify 'this' LP.
Replace the /* CSS Comment */ in the input box to activate additional styles for this page.

Depending upon the element, some CSS may need an !important flag to override template or variable styles.

You can add entire stylesheets here to an upper limit of approx. 10,000 characters.

                        /* Add Page-Specific CSS Here */
                      

[theme] Theme Keywords

Enter a keyword from the list to change the color of all elements with the 'primary' class. Each color palette has a base color and a highlight color.

OPTIONS:  dkOrange  blue 

#DD3303

 

#FFD550

#1568BA

 

#7DFFF8

                        dkOrange
                        blue
                      

GLOBAL HELPER CLASSES:

Find documentation on element-specific helper classes to make re-styling your LP a snap!

(Global) Backgrounds

Most sections will have an input (Variable) for the background color/image. Choose one of the options for the background or 'none' (or empty) for no background. Background images will cover, not repeat, and be aligned to the center of the element by default.
For add'l information on the background property, Visit w3schools: CSS background property

OPTIONS:  #A0A0A0  rgba(160,160,160,1)  url('http://imageURL')

Background: #A0A0A0
Background: rgba(160,160,160,1)
Background: Image URL
                        #A0A0A0
                        rgba(160,160,160,1)
                        url('http://www.fpoimg.com/300x300')
                      

(Global) Text Classes

Add a class to any text element to modify the style. Classes can be stacked and combined by using a space between them.
EX. class="primary medium" | class="primary large bold"

Font color and weight

primary paragraph

light paragraph

regular paragraph

medium paragraph

bold paragraph

heavy paragraph

Font size adjustments

tiny paragraph

small paragraph

large paragraph

Text alignment

left-aligned

center-aligned

right-aligned

                        <p class="primary">primary paragraph</p>
                        <p class="light">light paragraph</p>
                        <p class="regular">regular paragraph</p>
                        <p class="medium">medium paragraph</p>
                        <p class="bold">bold paragraph</p>
                        <p class="heavy">heavy paragraph</p>
                        <p class="tiny">tiny paragraph</p>
                        <p class="small">small paragraph</p>
                        <p class="large">large paragraph</p>
                        <p class="text-left">left-aligned</p>
                        <p class="text-center">center-aligned</p>
                        <p class="text-right">right-aligned</p>
                      

(Global) Buttons

Add a class to any text element to modify the style. Classes can be stacked and combined by using a space between them.
EX. class="primary medium" | class="primary large bold"

                        <a class="btn" role="button" href="#" target="_blank">Button</a>
                        <a class="btn btn-primary" role="button" href="#" target="_blank">Primary Button</a>
                        <a class="btn btn-lg" role="button" href="#" target="_blank">Large Button</a>
                        <a class="btn btn-lg btn-primary" role="button" href="#" target="_blank">Lg Primary Button</a>
                        <a class="btn btn-sm" role="button" href="#" target="_blank">Small Button</a>
                        <a class="btn btn-sm btn-primary" role="button" href="#" target="_blank">Sm Primary Button</a>
                        

(Global) Lists

Add a class to any text element to modify the style. Classes can be stacked and combined by using a space between them.
EX. class="primary medium" | class="primary large bold"

  • List Item One
  • Span class="medium" inside a list item
  • Span class="primary" inside a list item
  • List item class="primary" colors all contents
  • (divided) List Item 1
  • (divided) List Item 2
  • (divided) List Item 3
                        <ul>
                        <li>List Item One</li>
                        <li><span class="medium">Span class="medium"</span> inside a list item</li>
                        <li><span class="primary">Span class="primary"</span> inside a list item</li>
                        <li class="primary">List item class="primary" colors all contents</li>
                        </ul>

                        <ul class="divided">
                        <li>(divided) List Item 1</li>
                        <li>(divided) List Item 2</li>
                        <li>(divided) List Item 3</li>
                        </ul>
                        

SECTION DOCUMENTATION:

Find additional information about the variables and features by section.

[0] Navigation Snippet & Boolean Toggle

TYPE: Boolean Toggle
Options: yes | no

Toggle [0] Show Navigation: to 'yes' or 'no' to show/hide navigation snippet in layout. Edit the snippet's html (links, text, etc) in the Snippet Folder in Design Studio as necessary.
Navigation uses a snippet so that all pages using the navigation option can be updated "at once" from a single place without needed to go thru each page and make redundant updates. This saves time if a link on the .com changes. If you'd like to A/B test different Nav options, you can clone the snippet and modify the new snippet for optimization testing. The default HTML for the snippet is included below.

OPTIONS:  yes = show  no = hide 

                        <!-- navBar -->
                        <ul class="navBar">
                        <li><a href="https://apigee.com/api-management/#/why-api-platform" target="_blank" title="↪ https://apigee.com/api-management/#/why-api-platform">WHY API PLATFORM</a></li>
                        <li><a href="https://apigee.com/api-management/#/products" target="_blank" title="↪ https://apigee.com/api-management/#/products">PRODUCTS</a></li>
                        <li><a href="https://apigee.com/api-management/#/pricing" target="_blank" title="↪ https://apigee.com/api-management/#/pricing">PRICING</a></li>
                        <li><a href="https://apigee.com/api-management/#/customers" target="_blank" title="↪ https://apigee.com/api-management/#/customers">CUSTOMERS</a></li>
                        <li><a href="https://apigee.com/api-management/#/resources" target="_blank" title="↪ https://apigee.com/api-management/#/resources">RESOURCES</a></li>
                        </ul>
                        <!-- /navBar -->
                        

[1] Hero Section Min-Height Input

TYPE: String Variable
Values: use numbers; "0" for none -to- "X" any positive number (recommended max 340px).

Set the minimum height for the hero section. Space will get added to the bottom of the container (add'l space below content). Control the min-height to optimize for background-image display in the Hero Section.
Set to "0" for off (at least 0px tall). When min-height is less than the height of content in either row, the height of the row will be determined by the content.

 

[1] Hero Section Image Offset (px)

TYPE: String Variable
Values: use numbers; "0" for none -to- "X" any positive number.

Set the vertical offset of the image in the right column. A positive value is translated to a negative value and added as margin-top.
EX. Input = 40 | Under the hood = margin-top:-40px;

 

[2] Content Section PolyBox Keywords

TYPE: String Variable
Values: KEYWORDS; video, image, form | widescreen, small

video: This will show an editable area designed to house an iframe from YouTube. Use 'video' in conjuction with: 'widescreen' to make the video span side-to-side in the column and shrink in height; 'small' to shrink the video element (ideal for hidden sidebar layouts)

image: This will show an editable area designed to house an image. The 'image' box can also be used to house other content when needed. Use 'image' in conjuction with: 'widescreen' to make the image span side-to-side in the column and shrink in height; 'small' to shrink the image element (ideal for hidden sidebar layouts)

form: This will show an editable form element in the polybox. Use 'widescreen' to expand the width of the form element. The keyword 'small' does not have yet a have setting associated with the form element.

widescreen: This is a "modifier" class and will make an adjustment to the type of content you select above. It can be used in conjunction with the content classes (video image form) by adding a space between the content name and the modifier name. EX. class="video widescreen"

small: This is a "modifier" class and will make an adjustment to the type of content you select above. It can be used in conjunction with the content classes (video image form) by adding a space between the content name and the modifier name. EX. class="video small"

 

[2] Content Section Dynamic Speakers

TYPE: String Variable
Values: use numbers; 1-4

Use this input to control the number of speakers that show in the Speaker section.

 

[3] Thank You Section Background Image Offset

TYPE: String Variable
Values: use numbers; "0" for none -to- "X" any positive number.

Set the vertical offset of the image in the right column. A positive value is translated to a negative value and added as margin-top.
EX. Input = 40 | Under the hood = margin-top:-40px;

 

(Global) [x] Title

Description text here [This is a quick-start sample card]

Callout for instructions or important use information

Use this as a starter for new shortcode card [template]
OPTIONS:  label 1