{"title":"Customizing Phlox Post Options","id":35086,"link":"https:\/\/env.averta.net\/en\/step\/customizing-phlox-post-options\/","parent":[35048],"content":"<p><span style=\"color: #000000;\">Phlox<strong> Post Options <\/strong><\/span><span style=\"font-weight: 400;\">allow you to customize your<\/span><span style=\"font-weight: 400;\">?posts layout, post title layout, and it also has a feature to add a background to your post. F<\/span><span style=\"font-weight: 400;\">urthermore, you can?add custom CSS and JS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To see and manage post options<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/span><\/li>\n<li><span style=\"font-weight: 400;\">Click on the <\/span><b>Posts <\/b><span style=\"font-weight: 400;\">on the <\/span><b>Dashboard<\/b><\/li>\n<li><span style=\"font-weight: 400;\">Click on the <\/span><b>Add New<\/b><\/li>\n<li><span style=\"font-weight: 400;\">On the bottom of the page, you can find <strong>Post Options<\/strong><\/span><\/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\/YkXKxgWruDk?rel=0\" frameborder=\"0\"; encrypted-media\" allowfullscreen><\/iframe><\/div>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong> Upon selecting some <strong>Post Formats<\/strong>?(Gallery, Quote, Video, Audio), a new tab will be added to?the post options box, which allows you to customize?that specific post format. <a href=\"https:\/\/env.averta.net\/en\/step\/customizing-phlox-post-formats\/?b=35052,35052\" title=\"Customizing Phlox Post Formats\">Click Here<\/a>.<\/p>\n<hr \/>\n<h3>Layout Options<\/h3>\n<p>In layout options section, there are eight?different layouts for the post sidebar.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35333 size-full aligncenter\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/postsidebarlayout-1.png\" width=\"1000\" height=\"329\" \/><\/p>\n<div id=\"attachment_35360\" style=\"width: 161px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/no-sidebar.png\"><img aria-describedby=\"caption-attachment-35360\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35360\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/no-sidebar.png\" alt=\"no-sidebar\" width=\"151\" height=\"150\" \/><\/a><p id=\"caption-attachment-35360\" class=\"wp-caption-text\">No Sidebar<\/p><\/div>\n<div id=\"attachment_35361\" style=\"width: 214px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/right-sidebar.png\"><img aria-describedby=\"caption-attachment-35361\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35361\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/right-sidebar.png\" alt=\"right-sidebar\" width=\"204\" height=\"150\" \/><\/a><p id=\"caption-attachment-35361\" class=\"wp-caption-text\">Right<\/p><\/div>\n<div id=\"attachment_35362\" style=\"width: 209px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/left-sidebar.png\"><img aria-describedby=\"caption-attachment-35362\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35362\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/left-sidebar.png\" alt=\"left-sidebar\" width=\"199\" height=\"150\" \/><\/a><p id=\"caption-attachment-35362\" class=\"wp-caption-text\">Left<\/p><\/div>\n<div id=\"attachment_35363\" style=\"width: 233px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/two-left-sidebars.png\"><img aria-describedby=\"caption-attachment-35363\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35363\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/two-left-sidebars.png\" alt=\"two-left-sidebars\" width=\"223\" height=\"150\" \/><\/a><p id=\"caption-attachment-35363\" class=\"wp-caption-text\">Left\/Primary-Secondary<\/p><\/div>\n<div id=\"attachment_35364\" style=\"width: 233px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/two-right-sidebars.png\"><img aria-describedby=\"caption-attachment-35364\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35364\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/two-right-sidebars.png\" alt=\"two-right-sidebars\" width=\"223\" height=\"150\" \/><\/a><p id=\"caption-attachment-35364\" class=\"wp-caption-text\">Right\/Secondary-Primary<\/p><\/div>\n<div id=\"attachment_35365\" style=\"width: 205px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/left-and-right-sidebar.png\"><img aria-describedby=\"caption-attachment-35365\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35365\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/left-and-right-sidebar.png\" alt=\"left-and-right-sidebar\" width=\"195\" height=\"150\" \/><\/a><p id=\"caption-attachment-35365\" class=\"wp-caption-text\">Primary-Secondary<\/p><\/div>\n<div id=\"attachment_35366\" style=\"width: 208px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/right-and-left-sidebars.png\"><img aria-describedby=\"caption-attachment-35366\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35366\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/right-and-left-sidebars.png\" alt=\"right-and-left-sidebars\" width=\"198\" height=\"150\" \/><\/a><p id=\"caption-attachment-35366\" class=\"wp-caption-text\">Secondary-Primary<\/p><\/div>\n<p><br style=\"clear: both;\" \/><p class=\"aswi-text-box box-info\"><strong>Note: <\/strong> Some layouts has two sidebars.These sidebars add two widget areas. Here is more information about widgets.?<\/p>\n<p>You can change the style of post sidebar, too.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35334 size-full aligncenter\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/postsidebarstyle.png\" width=\"1000\" height=\"329\" \/><\/p>\n<div id=\"attachment_35372\" style=\"width: 263px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/normal-sidebar.png\"><img aria-describedby=\"caption-attachment-35372\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35372\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/normal-sidebar-e1475498990479.png\" width=\"253\" height=\"200\" \/><\/a><p id=\"caption-attachment-35372\" class=\"wp-caption-text\">Normal<\/p><\/div>\n<div id=\"attachment_35371\" style=\"width: 274px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/bordered-sidebarstyle.png\"><img aria-describedby=\"caption-attachment-35371\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35371\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/bordered-sidebarstyle-e1475499023589.png\" width=\"264\" height=\"200\" \/><\/a><p id=\"caption-attachment-35371\" class=\"wp-caption-text\">Bordered<\/p><\/div>\n<div id=\"attachment_35373\" style=\"width: 265px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/filled-sidebarstyle.png\"><img aria-describedby=\"caption-attachment-35373\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35373\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/filled-sidebarstyle-e1475499094687.png\" alt=\"filled-sidebarstyle\" width=\"255\" height=\"200\" \/><\/a><p id=\"caption-attachment-35373\" class=\"wp-caption-text\">Filled<\/p><\/div>\n<p><br style=\"clear: both;\" \/><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35398\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/margin.png\" alt=\"margin\" width=\"475\" height=\"189\" \/><\/p>\n<p>Layout options also include an option to specify the title alignment, besides,?you can easily?switch on the <strong>Display Content Top Margin<\/strong> to add a space between the post title and post content.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Title Section Setting<\/h3>\n<p><span style=\"font-weight: 400;\">In this section, there is a <strong>Subtitle<\/strong>?text box. The subtitle is the second title to your post and it is optional.<\/span><\/p>\n<p><span style=\"font-weight: 400; color: #000000;\">In order to see more options,?switch on?<strong>Display Title Bar Section<\/strong>.<\/span><\/p>\n<p>Then, you can?change layout presets. There are eight?available layout presets as you can see below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-35315 aligncenter\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/titlelayoutpresets.png\" alt=\"titlelayoutpresets\" width=\"1000\" height=\"419\" \/><\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong> You are able to customize these layout ?presets?by?enabling the advanced setting. <\/p>\n<div class=\"row\"><div class=\"column col-third\">\n<div id=\"attachment_35375\" style=\"width: 270px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Parallax-Title.png\"><img aria-describedby=\"caption-attachment-35375\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35375\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Parallax-Title.png\" alt=\"Parallax Title\" width=\"260\" height=\"160\" \/><\/a><p id=\"caption-attachment-35375\" class=\"wp-caption-text\">Parallax Title<\/p><\/div>\n<\/div><div class=\"column col-third\">\n<div id=\"attachment_35376\" style=\"width: 244px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Center-Title.png\"><img aria-describedby=\"caption-attachment-35376\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35376\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Center-Title.png\" alt=\"Center Title (with BG)\" width=\"234\" height=\"160\" \/><\/a><p id=\"caption-attachment-35376\" class=\"wp-caption-text\">Center Title (with BG)<\/p><\/div>\n<\/div><div class=\"column col-third\">\n<div id=\"attachment_35377\" style=\"width: 232px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/LeftBG-Title.png\"><img aria-describedby=\"caption-attachment-35377\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35377\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/LeftBG-Title.png\" alt=\"Left Title (with BG)\" width=\"222\" height=\"160\" \/><\/a><p id=\"caption-attachment-35377\" class=\"wp-caption-text\">Left Title (with BG)<\/p><\/div>\n<\/div><\/div>\n<div class=\"row\"><div class=\"column col-third\">\n<div id=\"attachment_35378\" style=\"width: 230px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Overlapped-Title.png\"><img aria-describedby=\"caption-attachment-35378\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35378\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/Overlapped-Title.png\" alt=\"Overlapped Title\" width=\"220\" height=\"170\" \/><\/a><p id=\"caption-attachment-35378\" class=\"wp-caption-text\">Overlapped Title<\/p><\/div>\n<\/div><div class=\"column col-third\">\n<div id=\"attachment_35379\" style=\"width: 254px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/NoBG-Center-Title.png\"><img aria-describedby=\"caption-attachment-35379\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35379\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/NoBG-Center-Title.png\" alt=\"Center Title (No BG)\" width=\"244\" height=\"170\" \/><\/a><p id=\"caption-attachment-35379\" class=\"wp-caption-text\">Center Title (No BG)<\/p><\/div>\n<\/div><div class=\"column col-third\">\n<div id=\"attachment_35380\" style=\"width: 253px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/NoBG-Left-Title.png\"><img aria-describedby=\"caption-attachment-35380\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35380\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/NoBG-Left-Title.png\" alt=\"Left Title (No BG)\" width=\"243\" height=\"170\" \/><\/a><p id=\"caption-attachment-35380\" class=\"wp-caption-text\">Left Title (No BG)<\/p><\/div>\n<\/div><\/div>\n<p><br style=\"clear: both;\" \/><strong>Adding a Background to the Title?Section<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">By enabling the advanced setting and then title background, you can?manage the background setting of the title.<\/span><\/p>\n<ul>\n<li>Parallax Effect<\/li>\n<li>Background Color<\/li>\n<li>Background Size<\/li>\n<li>Background Image<\/li>\n<li>Background Video MP4<\/li>\n<li>Background Video OGG<\/li>\n<li>Background Video WebM<\/li>\n<\/ul>\n<hr \/>\n<h3>Post Background<\/h3>\n<p><span style=\"font-weight: 400;\">To?add and customize a background for your post, enable background, then customize its color?and specifies how the background image repeats. This background image can be either scrollable or fixed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also change the background image alignment, background size and background pattern just by clicking on the <strong>Add Image<\/strong> and choose your desirable image for your post.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-35332\" style=\"border: solid 1px #dedede;\" src=\"http:\/\/env.averta.net\/envato\/wp-content\/uploads\/bgtitle.png\" alt=\"bgtitle\" width=\"1000\" height=\"1051\" \/><\/p>\n<p class=\"aswi-text-box box-important\"><strong>Important: <\/strong> This option will overwrite the theme&#8217;s default background setting. <\/p>\n<hr \/>\n<h3>CSS &amp; JavaScript Codes<\/h3>\n<p>At the end, you can?go to <strong>Advanced Setting<\/strong> to add custom CSS and JS codes.<\/p>\n","type":"solution"}