Divi Contact Section with Clipped Map and Animated Form Background.
Clip-Map Contact Section suitable for websites of companies and agencies. It assumes the use of the Divi Map module and the possession, therefore, of the Google API Key.
You can customize the Address blurb animation easily by adding or removing specific ‘Modular’ Css Classes while on the right the purple background below the Contact Form will be animated a little when the form will be submitted.
If you need the layout on more than one page/post you can also copy the Css code of the Code module in Divi Theme Options -> Custom Css and the jQuery script in Divi Theme Options -> Integration -> <head>.
The zip file includes:
Layout Sample Image
The layout is a Contact section made of 6 rows:
Row 1 : Text module with the Title;
Row 2 (only Desktop): Two-columns: 1 – Text module with the Subheading | 2 – Two Blurb modules with Email and Phone icons;
Row 3 (Tablet/Mobile): Two-columns: 1 – Text module with the Subheading | 2 – Three Blurb modules with Email, Phone and Address icons;
Row 4 (only Desktop): Two-columns: 1 – Blurb module with Address icon and Map module | 2 – Text module with purple background and Contact Form module;
Row 5 (Tablet/Mobile): Two-columns: 1 – Map module | 2 – Text module with purple background and Contact Form module;
Row 6: Code Module – A Code Module in which is stored all the advanced css to make the design properly work and a little jQuery script.
You can obviously modify all of these rows and module settings; you can also toggle some css classes for customize the design and/or change some animations:
– ‘address_blurb‘ (Enabled by default) -> This class is responsible for the disappearance of the title and content of the Address blurb on hovering the column while will be still visible the Address icon. This class is already activated and is recommended for the design; even if is suggested to leave it active adding eventually other animations (see below), there may be rare cases in which you need to delete this class. – ‘icon_animated_1‘ (Disabled by default) -> If activated this class enable an animation on Address blurb: it will be translated just above the Map module on hovering the column. – ‘icon_animated_2‘ (Disabled by default) -> If activated this class enable an animation on Address blurb: it will be rotated on hovering the column. – ‘address_if_vertical‘ (Disabled by default) -> This class is responsible for the adjustment of the Address blurb icon position. You have to active it if (and only if) your Divi website has a vertical menu enabled.
By toggling these classes you will have good margins of customizations without having to touch the css code; however if you need to customize further you can modify the css both in the Row/Module Advanced Settings and in the Code Module in which is stored all the advanced css.
We offer a basic support that includes: a) fixes of any display problems; b) one minor design improvement. This can involve a specific part of the layout and in a way that the improvement doesn’t change the global design: could be for example changing the clip path on the map or styling a little the Contact Form.
The time needed to get support may vary; any fixes will be supported in about 1/2 days while for the improvement support the time needed will be from 1 to 5 days.