SR Contact 01

SR Contact 01 is great for displaying your business location and work hours your contact page.

Module Overview - SR Contact 01

This module features a combination of headers, body text, Google Maps API, and Map Image.



Module Settings Walkthrough

Styles

You can edit the following items within the Styles tab:

• Layout: page or full-width
• Container width: minimum, narrow, wide, maximum
• Top-bottom padding: default, no padding, small padding, large padding, custom padding
• Background option: image, video, color, custom, gradient
• Text align: right, left, center, justified
• Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
• Border styles: none, solid, dotted, dashed, double
• Responsive settings:
  • Tablet: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)
  • Mobile: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)



Module Settings

For SR Contact 01, most settings are focused on headers, body text, Google Maps API, and Map Image.

Setting custom classes and ID

At the very top of the content section, you have the ability to add custom classes and an ID to the module.

• Learn more about adding custom CSS
• Learn how to use the module ID

Header and Content

The first setting you see when editing SR Two Col 05 is for the header. Here you can add a header, designate its style and display size, and add rich text. This is also the section where you can specify any information you want to relay to visitors such as work days and hours, link to email, and telephone number.





Adding the Maps

• You have the option to add the maps in two ways.
  • As an Image. When adding the maps as an image you have the ability to set:
    • Map Image
    • Image Size: Automatically adjust, Exact width and height
    • Image Loading: Browser default, lazy, eager
  • With Google Maps API. To use the Maps API, you must get a Google API key which you can add to your app. Watch Video.



How to Use SR Contact 01 - See it Live

1. Excel Pain and Spine Contact Page- You can see the module used live
2. Sprocket Rocket Module page- You can see the module used live