Phlox Contact Box

Phlox has a Contact Box Widget which allows you to write your contact information, such as phone number, social media, and address. You can add this widget on any available widget area, or between the content of your posts or pages.

Follow below steps to add Phlox Contact Box to a widget area or in a page content:

1. Go to your WordPress admin panel
2. Click Appearance on the Dashboard
3. Then click on Widgets
4. Find [Phlox] Contact Box among the available widgets and add it to your desired Widget Area

Video Tutorial

Access Contact Box Options in Elementor Page Builder

1. Go to your WordPress Admin Panel
2. Click the Pages on the Dashboard
3. Click the Add New
4. Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
5. Check out Elements
6. Scroll down to PHLOX - GENERAL section
7. Choose Contact Box

After you add contact box to your post or page, you are able to customize it by available options:

Contact Info

You can set the Email address of website author here. You are able to add Telephone number or Show site socials. Also, write an Address to show on the contact box if you want. Please note that all of these options are optional.

Map

Enable Show map to have a map on your contact box. There are to options on Map position that let you show your map Below or Above the contact details.

You can change Map height on desktop, tablet, and mobile.

To show your place on the map, you need to put Longitude and Latitude. In order to find out a place’s latitude/longitude, right click the place or area on google maps and select What’s here. Then you will find a coordinates box at the bottom of the page.

There are two Map types. Roadmap and Satellite. After choosing each of them, you are able to find many preset styles on this website and copy the style on Map style section.

If you want to popup a text after marker is clicked, you can add the text as a Marker info.

To add navigations such as zoom in, zoom out, fullscreen view button, etc. to your map, you need to enable Navigation control.

You can set the default and initial resolution by changing Zoom from 1 to 20. Also, you can enable Zoom with mouse wheel in order to let your visitors change it by mouse wheel.

Check out this article to know more about Advanced tab and start working with Elementor.