{"title":"Phlox Audio","id":36462,"link":"https:\/\/env.averta.net\/en\/step\/phlox-audio\/","parent":[37224,35059],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36509 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/preview-audio.png\" alt=\"preview-audio\" width=\"255\" height=\"165\" \/>Phlox presents an <strong>Audio?<\/strong><strong>Widget<\/strong>, which can?add an audio box to the sidebar and can be used as an element of page builder. By adding this audio widget, you will be able to share audios?such as music, podcast, etc. with your visitors. You are able to choose a style for this audio box and customize it with CSS if you want.<\/p>\n<p>Follow below steps to add <strong>Phlox Audio<\/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?<strong>Widgets<\/strong><\/li>\n<li>Find <strong>[Phlox] Audio<\/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 Areas<\/a><\/strong><\/li>\n<\/ol>\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\/kYh0z4jo6jM?rel=0\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr \/>\n<h3>Access Audio 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>Audio<\/strong><\/li>\n<\/ol>\n<p>After adding audio to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55684 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-content-elementor.png\" alt=\"\" width=\"301\" height=\"475\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-content-elementor.png 301w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-content-elementor-190x300.png 190w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-content-elementor-110x173.png 110w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/a>Content<\/h4>\n<\/li>\n<\/ul>\n<h4>Audio<\/h4>\n<p>You can add your audio file to this section. The format should be <strong>MP3<\/strong> or <strong>ogg<\/strong>.<\/p>\n<p>To play audio automatically, you need to enable?<strong>Autoplay<\/strong> option and if you want to start over it again, enable?<strong>Repeat the audio<\/strong>.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-style-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55685 alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-style-elementor.png\" alt=\"\" width=\"301\" height=\"350\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-style-elementor.png 301w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-style-elementor-258x300.png 258w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-audio-style-elementor-149x173.png 149w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Skin<\/h4>\n<p>The skin of your audio box can be <strong>Dark?<\/strong>or?<strong>Light<\/strong>.<\/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 style=\"clear: both;\" \/>\n<h3>Access Audio 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] Audio<\/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 adding audio to your post or page, you are able to customize it by available options:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36465 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/audio-widget.png\" alt=\"audio-widget\" width=\"432\" height=\"655\" \/><\/p>\n<h4>Title<\/h4>\n<p>You can either choose a title for your audio or leave it?empty.<\/p>\n<h4>Audio File<\/h4>\n<p>By clicking on the?<strong>Add Audio<\/strong> you can upload your file. Pay attention, the audio format should be MP3 or ogg.<\/p>\n<h4>Repeat the Audio<\/h4>\n<p>Enable?this option, if you want your audio to?auto-replay.<\/p>\n<h4>Autoplay<\/h4>\n<p>By switching on this, your audio automatically starts after entering the website.<\/p>\n<h4>Skin<\/h4>\n<p>You are provided to choose a skin for the audio box.<\/p>\n<div id=\"attachment_36664\" style=\"width: 306px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-36664\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36664 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/dark-preview.png\" alt=\"dark-preview\" width=\"296\" height=\"183\" \/><p id=\"caption-attachment-36664\" class=\"wp-caption-text\">Dark Skin<\/p><\/div>\n<div id=\"attachment_36665\" style=\"width: 306px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-36665\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36665 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/light-preview.png\" alt=\"light-preview\" width=\"296\" height=\"183\" \/><p id=\"caption-attachment-36665\" class=\"wp-caption-text\">Light Skin<\/p><\/div>\n<div style=\"clear: both;\"><\/div>\n<h4>Extra Class Name<\/h4>\n<p>Add the class name here if you have added a style on your CSS file.<\/p>\n","type":"solution"}