Align v1.7 is out now! Learn more about the best release yet →
The Contact Information block is a versatile tool designed to display essential contact details within a theme, enhancing user experience by providing easy access to information. It is commonly used in sections like the Contact Form, allowing users to quickly find phone numbers, email addresses, and physical locations.
Key features of the Contact Information block include customizable headings, subheadings, and the ability to display social media icons. Users can also personalize the block's appearance with background and overlay settings, ensuring it aligns with the overall theme design. Visibility settings allow for control over where the block appears, optimizing it for both desktop and mobile views.
Practical usage examples include placing the Contact Information block within a Contact Form section to provide comprehensive contact details, adding it to the footer for consistent accessibility across all pages, or incorporating it into an About Us page to facilitate easy communication with the business.
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.
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 #
-
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.
-
Footer Section: Place the block in the footer to ensure that contact information is readily available on every page of the site.
-
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.
Align v1.7 is out now! Learn more about the best release yet →