{"title":"Phlox Quote","id":36634,"link":"https:\/\/env.averta.net\/en\/step\/phlox-quote\/","parent":[37224,35059],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36637 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/quote-preview.png\" alt=\"quote-preview\" width=\"294\" height=\"657\" \/><strong>Phlox Quote Widget<\/strong>, lets you show your favorite quotes, not only on the posts&#8217;?content but also on any widget area you want. This widget has different blockquote?styles.<\/p>\n<p>Follow below steps to add <strong>Phlox Quote<\/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] Quote?<\/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<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>You can use this element, to show your website testimonials.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Access Blockquote 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>Blockquote<\/strong><\/li>\n<\/ol>\n<p>After adding a quote to your content, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Content<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55699 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-content-elementor.png\" alt=\"\" width=\"299\" height=\"451\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-content-elementor.png 299w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-content-elementor-199x300.png 199w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-content-elementor-115x173.png 115w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/li>\n<\/ul>\n<h4>Text<\/h4>\n<p>On this section, you are able to write the text you want to add within a quotation.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-55700 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor.jpg\" alt=\"\" width=\"300\" height=\"1174\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor-77x300.jpg 77w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor-262x1024.jpg 262w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-blockquote-style-elementor-44x173.jpg 44w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Text<\/h4>\n<p>You can change?<strong>Text alignment<\/strong>,?<strong>Text Color<\/strong>, or any?<strong>Typography?<\/strong>option you want.<\/p>\n<h4>Quote Symbol<\/h4>\n<p>You can show or hide?<strong>Quote Symbol?<\/strong>by enabling or disabling this option.?The?<strong>Color<\/strong> is editable and you can also change?<strong>Typography?<\/strong>options like font or font weight. The space between the symbol and your text can be increased or decreased by changing?<strong>Text indent<\/strong>. The last option in this section, is?<strong>Margin<\/strong>, which can have different values in mobile and tablet.<\/p>\n<h4>Block<\/h4>\n<p>There are five?<strong>Border Types<\/strong>\ud83d\ude15<strong>Solid<\/strong>,?<strong>Double<\/strong>,?<strong>Dotted<\/strong>,?<strong>Dashed<\/strong>, and?<strong>Groove<\/strong>. However, it is optional to add border for your quote. Besides, you can change the <strong>width<\/strong> and <strong>color?<\/strong>of this border.<br \/>\nYour block can have?<strong>Background color<\/strong>, too.<\/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<h4><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36638 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/quote-widget.png\" alt=\"quote-widget\" width=\"430\" height=\"745\" \/>Access Quote Options in SiteOrigin Page Builder<\/h4>\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] Quote<\/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 a quote to your content, you are able to customize it by available options:<\/p>\n<h4>Title<\/h4>\n<p>It is better to add a title for your quote. Such as Quote of the Day<\/p>\n<h4>Quote Text<\/h4>\n<p>Here in this field, write a text you want to display as a quote on your website&#8217;s widget area.<\/p>\n<h4>Blockquote Style<\/h4>\n<p>There are eight styles to select for your quote.<\/p>\n<div id=\"attachment_36642\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/quote-normal.png\"><img aria-describedby=\"caption-attachment-36642\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36642\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/quote-normal.png\" alt=\"quote-normal\" width=\"150\" height=\"200\" \/><\/a><p id=\"caption-attachment-36642\" class=\"wp-caption-text\">Quote Normal<\/p><\/div>\n<div id=\"attachment_36643\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/blackquote-normal.png\"><img aria-describedby=\"caption-attachment-36643\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36643\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/blackquote-normal.png\" alt=\"blockquote-normal\" width=\"150\" height=\"200\" \/><\/a><p id=\"caption-attachment-36643\" class=\"wp-caption-text\">Blockquote Normal<\/p><\/div>\n<div id=\"attachment_36644\" style=\"width: 144px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/blockquote-bordered.png\"><img aria-describedby=\"caption-attachment-36644\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36644\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/blockquote-bordered.png\" alt=\"blockquote-bordered\" width=\"134\" height=\"200\" \/><\/a><p id=\"caption-attachment-36644\" class=\"wp-caption-text\">Blockquote Bordered<\/p><\/div>\n<div id=\"attachment_36645\" style=\"width: 250px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro.png\"><img aria-describedby=\"caption-attachment-36645\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36645\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro.png\" alt=\"intro\" width=\"240\" height=\"200\" \/><\/a><p id=\"caption-attachment-36645\" class=\"wp-caption-text\">Intro<\/p><\/div>\n<div id=\"attachment_36646\" style=\"width: 160px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro-hero.png\"><img aria-describedby=\"caption-attachment-36646\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36646\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro-hero.png\" alt=\"intro-hero\" width=\"150\" height=\"200\" \/><\/a><p id=\"caption-attachment-36646\" class=\"wp-caption-text\">Intro Hero<\/p><\/div>\n<div style=\"clear: both;\"><\/div>\n<div id=\"attachment_36647\" style=\"width: 181px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro-with-splitter.png\"><img aria-describedby=\"caption-attachment-36647\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36647\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/intro-with-splitter.png\" alt=\"intro-with-splitter\" width=\"171\" height=\"200\" \/><\/a><p id=\"caption-attachment-36647\" class=\"wp-caption-text\">Intro with Splitter<\/p><\/div>\n<div id=\"attachment_36648\" style=\"width: 159px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/pullquote-normal.png\"><img aria-describedby=\"caption-attachment-36648\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36648\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/pullquote-normal.png\" alt=\"pullquote-normal\" width=\"149\" height=\"200\" \/><\/a><p id=\"caption-attachment-36648\" class=\"wp-caption-text\">Pullquote Normal<\/p><\/div>\n<div id=\"attachment_36649\" style=\"width: 159px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/pullquote-colorized.png\"><img aria-describedby=\"caption-attachment-36649\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-36649\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/pullquote-colorized.png\" alt=\"pullquote-colorized\" width=\"149\" height=\"200\" \/><\/a><p id=\"caption-attachment-36649\" class=\"wp-caption-text\">Pullquote Colorized<\/p><\/div>\n<div style=\"clear: both;\"><\/div>\n<h4>Text Align<\/h4>\n<p>Text alignment can be Left, Right, or Center.<\/p>\n<h4>Insert Quote Symbol<\/h4>\n<p>To show?a start and end quotation marks, switch this on.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>This option allows you?to have your customized. To customize the widget style, you should write the style on?your CSS file. After that, you can add the class name of that style in this field.<\/p>\n","type":"solution"}