{"id":15765,"date":"2025-05-27T13:22:16","date_gmt":"2025-05-27T07:22:16","guid":{"rendered":"https:\/\/helpdesk.spider-themes.net\/docs\/advance-accordions\/content-elements\/accordion-default-styles\/"},"modified":"2025-05-27T13:22:16","modified_gmt":"2025-05-27T07:22:16","slug":"accordion-default-styles","status":"publish","type":"docs","link":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/docs\/advance-accordions\/content-elements\/accordion-default-styles\/","title":{"rendered":"Global Default Styles"},"content":{"rendered":"\n<p>The <strong>Global Default Styles<\/strong> allow you to define the <strong>site-wide appearance<\/strong> for all accordion blocks. These styles are automatically applied whenever a new accordion is added \u2014 helping you keep design consistent and save valuable editing time.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Create Stunning Accordions in WordPress Instantly \ud83d\udd25| Use Global Default Styles \ud83d\udca5\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/IxTuXzZhnFM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udee0\ufe0f How to Access Default Styles<\/strong><\/h3>\n\n\n\n<p>Before using the default styling system, make sure the <strong>Advanced Accordion Block<\/strong> plugin is <strong>installed and activated<\/strong>.<\/p>\n\n\n\n<p>Go to:<br><strong>Dashboard \u2192 Plugins \u2192 Installed Plugins<\/strong><br>Ensure that <strong>Advanced Accordion Block<\/strong> is marked as <strong>Active<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd39 Step 1: Open the Default Style Sidebar<\/h4>\n\n\n\n<p>In the block editor (Gutenberg), you\u2019ll see an accordion icon in the top toolbar.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e82ac0c28e5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e82ac0c28e5\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2025\/05\/Screenshot_431.png\" alt=\"\" class=\"wp-image-15837\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Click this icon to open the <strong>Default Style Sidebar<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e82ac0c2e99&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e82ac0c2e99\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2025\/05\/Screenshot_430.png\" alt=\"\" class=\"wp-image-15838\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83c\udfa8 Step 2: Configure Your Styles<\/h4>\n\n\n\n<p>Within the sidebar, you&#8217;ll find all the global design options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding<\/strong><\/li>\n\n\n\n<li><strong>Colors<\/strong> (background, text, border)<\/li>\n\n\n\n<li><strong>Font size<\/strong><\/li>\n\n\n\n<li><strong>Spacing<\/strong><\/li>\n\n\n\n<li><strong>Borders and shadows<\/strong><\/li>\n<\/ul>\n\n\n\n<p>These styles will be applied to <strong>all new accordion blocks<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e82ac0c33fc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e82ac0c33fc\" class=\"wp-block-image size-full is-style-default wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2025\/05\/Screenshot_432.png\" alt=\"\" class=\"wp-image-15839\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udcbe Step 3: Save to Apply the Default Styles<\/h4>\n\n\n\n<p>Once you&#8217;ve configured your styles, click the <strong>Save<\/strong> button.<\/p>\n\n\n\n<p>\u26a0\ufe0f If you don\u2019t save, your changes won\u2019t be applied.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e82ac0c3852&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e82ac0c3852\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2025\/05\/Screenshot_433.png\" alt=\"\" class=\"wp-image-15840\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>After saving:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The editor will automatically <strong>reload<\/strong>.<\/li>\n\n\n\n<li>All accordion blocks using default styles will <strong>update instantly<\/strong>.<\/li>\n\n\n\n<li>You must <strong>manually save the page\/post<\/strong> afterward to keep these changes.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83e\uddca Step 4: Manual Overrides Stay Safe<\/h4>\n\n\n\n<p>If an accordion block has been styled <strong>manually<\/strong>, it will <strong>not be affected<\/strong> by the global default styles.<\/p>\n\n\n\n<p>Only blocks using default styles will be updated.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd01 Step 5: Reset to Initial Default Styles<\/h4>\n\n\n\n<p>At the bottom of the sidebar, you\u2019ll find a <strong>Reset<\/strong> button.<\/p>\n\n\n\n<p>Clicking <strong>Reset<\/strong> will bring back the original default style configuration (initial state).<br>Then you must click <strong>Save<\/strong> again to apply the reset.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e82ac0c3d7b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e82ac0c3d7b\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-content\/uploads\/2025\/05\/Screenshot_429.png\" alt=\"\" class=\"wp-image-15841\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<pre class=\"wp-block-verse\">\ud83d\udcdd <strong>Important Note<\/strong>: After every Save (whether style update or reset), the editor reloads. To make your changes permanent on the page, remember to <strong>Save the post\/page manually<\/strong>.<\/pre>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udde0 Why Use Default Styles?<\/h3>\n\n\n\n<p>The <strong>Default Style System<\/strong> is designed to make your workflow faster, more consistent, and scalable \u2014 especially when working across multiple pages or with a team.<\/p>\n\n\n\n<p>Here\u2019s why it matters:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Save Time on Repetition<\/strong><br>You don\u2019t need to reapply the same styles every time you add an accordion block. Set it once \u2014 it\u2019s applied everywhere by default.<\/li>\n\n\n\n<li>\ud83c\udfa8 <strong>Maintain Visual Consistency<\/strong><br>Consistent padding, colors, and typography are crucial for a clean, professional look. Default styles ensure your design remains uniform across all pages.<\/li>\n\n\n\n<li>\ud83d\udd04 <strong>Ideal for Teams and Clients<\/strong><br>Default settings create a \u201cdesign baseline,\u201d so even non-designers or content editors can add accordion blocks that match your site\u2019s branding \u2014 without needing to touch styling options.<\/li>\n\n\n\n<li>\ud83d\udee1\ufe0f <strong>Preserve Manual Customizations<\/strong><br>Any accordion block you manually styled won&#8217;t be overwritten. This ensures flexibility without compromising consistency.<\/li>\n\n\n\n<li>\ud83d\ude80 <strong>Boost Productivity for Repetitive Content<\/strong><br>Whether you&#8217;re building FAQs, documentation pages, or sectioned layouts \u2014 having a default look speeds up content creation significantly.<\/li>\n\n\n\n<li>\ud83e\udde9 <strong>Easy to Reset or Reconfigure<\/strong><br>With the built-in <strong>Reset<\/strong> and <strong>Save<\/strong> controls, you can confidently test or revise your styles knowing you can always return to a clean base.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Global Default Styles simplify your workflow by applying consistent site-wide accordion block designs. Configure options like padding, colors, font size, and spacing once\u2014then reuse them across pages. Save your changes, reset defaults anytime, and preserve manual overrides for ultimate flexibility in content creation.<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":12120,"menu_order":25,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-15765","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/15765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/comments?post=15765"}],"version-history":[{"count":0,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/15765\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/12120"}],"wp:attachment":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/media?parent=15765"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=15765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}