Phlox Contact Box

preview-contact-boxPhlox 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.


Access Contact Box Options in SiteOrigin Page Builder

  1. Go to your WordPress Admin Panel
  2. Click Pages on the Dashboard
  3. Click Add New
  4. Navigate to the top right hand of the WordPress editor and find Page Builder, beside text tab
  5. Click Add Widget
  6. Click Phlox and choose [Phlox] Contact Box
  7. Click Edit on the right side of the widget on Page Builder

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

contact box widget

Title

In this field, you can enter a title for the widget.

Email

Write your email address here and it appears under the phone number.

Telephone

The telephone number will be displayed at the top of the box, under the title. (If you enable the map, the telephone will be below it.)

Address

In this section, you can write your address. It shows up below the email address.

You can switch on the Show socials to show your social media on contact box. But it shows the enabled socials. You can find more info about enabling socials here.

Map

By enabling Show map, a map will be added at the top of the widget.

You can find more info about map options here.

Extra Class Name

In this section, you can customize the widget. Write your desired style on your CSS file and add the defined class name here.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us