Layers Contact Details & Maps Widget

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 1.5.5 Time to Read: 8 minutes

This widget requires you to have a valid API key entered in Site Settings > Additional scripts. See How to Setup Your Google API Key.

The Layers Contact Details & Maps Widget creates a customizable section for displaying maps and contact forms. This widget can be used on any Layers page, including a custom “Contact Page” where it can be used alone or in combination with other widgets.

contact-widget

When you add a new Contact widget, it will be pre-configured to display some text and a map

The design bar on the right side of the widget controls the overall style and layout for the widget. Choose the following options to begin:

This section sets the widgets’s overall size

  • Boxed will limit the width of the widget’s content (including the map) and is the default. As such, the map and form area become narrower
  • Full Width will allow the widget to span the entire browser window. If you choose not to show a contact form, this will let the map span full-width as well.

This section controls the visibility and design of elements in the widget.

Map Height

Enter a value (corresponding to pixels) to set your desired map height. Default is 400.

Show Google Map

On by default.  Uncheck to hide the map.

Show Address

Off by default. Check to display the content of the “Address Shown” field, which is placed above the contact form on the left side of the map.

Show Contact Form

On by default. This displays the content of the Contact Form field (typically a contact form shortcode or text). This section is not limited to contact form shortcodes and can contain other shortcodes, if desired

Uncheck to hide this section.

When both the Show Address and Show Contact form options are unchecked, the map will span full-width.

The background option affects the widget background and will span full width of the page.

Background Color

Click SELECT COLOR to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.

  • Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.

Backround Image

Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.

  • Textures, photos and images without embedded text are best.
  • Full-size images  should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
  • Tiles or repeatable images can be any size you want.

When you set a background image, the following settings will appear:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

This option aligns your image and can help you adjust the placement of the subject of your background if needed.

Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.

PARALLAX (LAYERS PRO)

Layers Pro adds a Parallax option that allows your background image to stay in place while the site is scrolled. For Parallax to work well, your background image must be on Repeat, or be at least 300px taller than the widget’s height to allow for scrolling.

Stretch

Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.

Title

Sets the heading on the widget, appearing above your widget content and may be left blank.

Click the text-icon button to choose your alignment, size and color:

HEADING TYPE (LAYERS PRO)

This option allows you to choose the heading tag to wrap your title, H3 by default. The heading tag does not impact SEO ranking or change the heading size by default, though it can be used in child themes or custom styling to allow selecting special heading styles such as jumbo headings, fancy headings etc.

For best results we recommend keeping these H2 or H3 to ensure your site outline reads well for visitors on accessibility devices.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

Choose from Small, Medium or Large.

Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.

Text Color

Depending on the background color of the content area, your text will be black or white by default, but can be customized here.

Click on SELECT COLOR  to expand the color wheel and click to select a color from the palette or enter an HTML hex value.

Description

The Description field, containing “Our services run deep and are backed by over ten years of experience.” by default, will display just below the widget title above the widget content. Clicking into the description will activate the rich text editor to aid you in formatting your content, and supports basic HTML input via the Code </>view, much like the WordPress post editor.

For best results, limit the description to 1-3 sentences to introduce the content in this section of your layout. This field may optionally be left blank.

  • You cannot put scripts into this field such as javascript snippets
  • You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
  • Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may be best in a column or require Advanced CSS styling.

Content Editor Toolbar

This section controls the location of the map, and the content of the Address Shown field, if enabled.

Google Maps Location

Enter your street address using the same format as the field hint, ie Street, City, Zip or Country at a minimum

Example: 300 Prestwich Str, Cape Town, South Africa

Google Maps Longitude and Latitude

This is optional, but can increase the accuracy of the map pin and problems with your map resolving at all.

  • Go to http://maps.google.com and enter your address
  • Zoom in, center on your location until you’re satisfied, then click the map once to add a marker
  • Look at the URL in your browser address bar and you will see the latitude and longitude there
  • lat-long
  • Highlight and copy it, then paste into this field in the widget
  • Example:
    45.8203704, 15.9870767

Address Shown

This field includes rich text editing like the Description field, and supports basic HTML input via the Code view </> 

If the Contact Form section is enabled, you should limit this to your address, phone number and email, if desired (ie one per line)

If the Contact Form is not enabled, you can add pure-HTML widget codes such as a mailchimp signup form, etc, though we recommend using plugins that provide shortcodes instead as they offer the most customization options.

  • You cannot put scripts into this field
  • You cannot put shortcodes into this field
  • You should not paste text/html from Word or the WordPress editor into this field

The Contact Form section of the widget is intended to hold a shortcode from your chosen Contact Form plugin and has the same content rules as the other text areas outlined above.

For best results, use a contact form shortcode with no additional content in this field. Example using Contact Form 7:

contact-form-example

Recommended Contact Form plugins include:

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

Your contact form plugin likely comes with its own styling, and may not inherit the styling of Layers or this widget, including form field label colors. If needed, the following code snippet can be added to the Custom CSS field under the Advanced button in the Design bar to attempt to color these label colors. Change #FFFFFF (white) to the color code selected under your Text option to match your heading. You will otherwise need to check with the plugin author for help with styling the form.

contact-form-labels

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a page revision (up to 5) you can restore if you made a mistake or want to revert to a previous version

 

Next up, Customize the Site Settings!