{"title":"Phlox Contact Box","id":36471,"link":"https:\/\/env.averta.net\/en\/step\/phlox-contact-box\/","parent":[37224,35059],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36512 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/preview-contact-box.jpg\" alt=\"preview-contact-box\" width=\"256\" height=\"437\" \/>Phlox has a?<strong>Contact Box Widget<\/strong> 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.<\/p>\n<p>Follow below steps to add <strong>Phlox Contact Box<\/strong> to a widget area or in a page content:<\/p>\n<ol>\n<li>Go to your <strong>WordPress admin panel<\/strong><\/li>\n<li>Click?<b>Appearance<\/b> on the <b>Dashboard<\/b><\/li>\n<li>Then click on <strong>Widgets<\/strong><\/li>\n<li>Find <strong>[Phlox] Contact Box<\/strong>?among the available widgets and add it to your desired <strong><a href=\"https:\/\/env.averta.net\/en\/step\/adding-widgets-to-different-widget-areas\/?b=36406,36406\" title=\"Adding Widgets to Different Widget Areas\">Widget Area<\/a><\/strong><\/li>\n<\/ol>\n<div style=\"clear: both;\"><\/div>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/sOVsUu-2DHw?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Access Contact Box Options in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; GENERAL?<\/strong>section<\/li>\n<li>Choose?<strong>Contact Box<\/strong><\/li>\n<\/ol>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-contactbox-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-55853 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-contactbox-content-elementor.png\" alt=\"\" width=\"298\" height=\"1742\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-contactbox-content-elementor.png 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-contactbox-content-elementor-175x1024.png 175w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/a>After you add contact box to your post or page, you are able to customize it by available options:<\/p>\n<h4>Contact Info<\/h4>\n<p>You can set the <strong>Email<\/strong>?address of website author here. You are able to add?<strong>Telephone<\/strong> number or?<strong>Show site socials<\/strong>. Also, write an <strong>Address<\/strong> to show on the contact box if you want. Please note that all of these options are optional.<\/p>\n<h4>Map<\/h4>\n<p>Enable?<strong>Show map?<\/strong>to have a map on your contact box.?There are to options on?<strong>Map position?<\/strong>that let you show your map?<strong>Below<\/strong>?or <strong>Above<\/strong><strong>?the contact<\/strong> <strong>details<\/strong>.<\/p>\n<p>You can change?<strong>Map height?<\/strong>on desktop, tablet, and mobile.<\/p>\n<p>To show your place on the map, you need to put <strong>Longitude<\/strong> and <strong>Latitude<\/strong>. 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.<\/p>\n<p>There are two?<strong>Map types<\/strong>.?<strong>Roadmap?<\/strong>and?<b>Satellite<\/b>. After choosing each of them, you are able to find many preset styles on <a href=\"https:\/\/snazzymaps.com\/\">this website<\/a>?and copy the style on?<strong>Map style<\/strong> section.<\/p>\n<p>If you want to popup a text after marker is clicked, you can add the text as a?<strong>Marker info<\/strong>.<\/p>\n<p>To add navigations such as zoom in, zoom out, fullscreen view button, etc. to your map, you need to enable?<strong>Navigation control<\/strong>.<\/p>\n<p>You can set the default and initial resolution by changing?<strong>Zoom<\/strong>?from 1 to 20. Also, you can?enable?<strong>Zoom with mouse wheel?<\/strong>in order to let your visitors change it by mouse wheel.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr \/>\n<h3>Access Contact Box Options in SiteOrigin Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click?<b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click?<b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find <strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>, beside text tab<\/li>\n<li>Click?<strong>Add Widget<\/strong><\/li>\n<li>Click <strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Contact Box<\/strong><\/li>\n<li>Click?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder?<\/strong><\/li>\n<\/ol>\n<p>After you add contact box to your post or page, you are able to customize it by available options:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-36474 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Widgets-?-PHLOX-?-WordPress-Google-Chrome-2016-11-08-11.01.32.png\" alt=\"contact box widget\" width=\"430\" height=\"624\" \/><\/p>\n<h4>Title<\/h4>\n<p>In this field, you can enter a title for the widget.<\/p>\n<h4>Email<\/h4>\n<p>Write your email address here and it appears under the phone number.<\/p>\n<h4>Telephone<\/h4>\n<p>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.)<\/p>\n<h4>Address<\/h4>\n<p>In this section, you can write your address. It shows up below the email address.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>You can switch on the <strong>Show socials<\/strong> to show your social media on contact box. But it shows the enabled socials. You can find more info about enabling socials <a href=\"https:\/\/env.averta.net\/en\/step\/setting-up-social-media\/?b=36312,36312\" title=\"Setting Up Social Media\">here<\/a>.<\/p>\n<h4>Map<\/h4>\n<p>By enabling <strong>Show map<\/strong>, a map will be added at the top of the widget.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>You can find more info about map options <a href=\"https:\/\/env.averta.net\/en\/step\/phlox-map\/?b=36620,36620\" title=\"Phlox Map\">here<\/a>.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>In this section, you can customize the widget. Write your desired style on your CSS file and add the defined class name here.<\/p>\n","type":"solution"}