Contact information

Overview #

The Contact Information block is designed to display essential contact details within a theme. It is typically used in sections like the Contact Form to provide users with easy access to contact information, enhancing user experience and accessibility.

Key components and functionality #

Icon

This setting allows you to add an icon to the Contact Information block. Icons can visually enhance the block and make it more engaging. Additional information about the icon can be found in the theme settings.

Caption

The caption setting provides a space for additional text that can accompany the icon or other elements within the block. This can be used to provide context or additional information.

Heading

The heading is a prominent text element that introduces the contact information. By default, it is set to Contact information.

Heading type

This setting allows you to choose the HTML tag for the heading, which can affect its size and importance on the page. Options include paragraph (p), heading 1 (h1), heading 2 (h2), heading 3 (h3), heading 4 (h4), heading 5 (h5), and heading 6 (h6). The default is h2.

Subheading

The subheading provides an additional layer of text below the main heading, allowing for more detailed descriptions or information.

Phone

This setting allows you to input a phone number, making it easy for users to contact you directly from the block.

Email

The email setting provides a space to include an email address, facilitating direct communication from users.

Address

This setting allows you to display a physical address, which can be useful for businesses with a physical location.

Hours of operation

This setting lets you specify the hours during which your business is open, providing users with important operational information.

Display social media icons

This checkbox allows you to show or hide social media icons within the block. By default, this is set to true. It requires setup in the theme settings.

Background settings

These settings allow you to customize the background of the block with colors, gradients, images, or videos. Adjusting these settings can affect the overall layout and appearance of the block.

Overlay settings

Overlay settings enable you to add a color or gradient overlay on top of the background, which can enhance the visual appeal and readability of the block.

Opacity overlay component

This setting controls the opacity of the overlay, with a range from 0% to 100%. The default value is 48%.

Visibility

The visibility setting allows you to control where the block is displayed. Options include not hiding the block, hiding it on desktop, or hiding it on mobile. The default is do not hide.

Available in sections #

• Contact form

Usage notes #

• Responsive design: Ensure that the block is optimized for both desktop and mobile views by adjusting visibility settings as needed.
• Performance: Use images and videos that are optimized for web use to maintain fast loading times.
• Accessibility: Ensure that text colors and background colors meet accessibility standards for readability.

Usage examples #

1. Contact Form Section: Use the Contact Information block within a Contact Form section to provide users with all necessary contact details, including phone number, email, and physical address.

2. Footer Section: Place the block in the footer to ensure that contact information is readily available on every page of the site.

3. About Us Page: Include the block on an About Us page to give users a comprehensive view of how they can reach out to your business.