{"id":90,"date":"2026-03-04T10:09:52","date_gmt":"2026-03-04T10:09:52","guid":{"rendered":"https:\/\/versana.codoplex.com\/content-strategy\/"},"modified":"2026-03-05T16:56:27","modified_gmt":"2026-03-05T16:56:27","slug":"customize-versana-site-editor","status":"publish","type":"post","link":"https:\/\/versana.codoplex.com\/versana-blog\/2026\/03\/04\/customize-versana-site-editor\/","title":{"rendered":"Customize Versana with WordPress Site Editor: Complete Visual Design Guide"},"content":{"rendered":"\n<p>Master WordPress Site Editor with Versana. Change colors, fonts, layouts, and templates visually. No coding required. Complete tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction to the WordPress Site Editor<\/h2>\n\n\n\n<p>The WordPress Site Editor is your design control center. It&#8217;s where you customize everything about your Versana theme &#8211; colors, fonts, spacing, templates, and more. The best part? It&#8217;s completely visual. No code required.<\/p>\n\n\n\n<p>Think of the Site Editor as Photoshop for your website. You see your changes in real-time and everything is point-and-click.<\/p>\n\n\n\n<p>In this guide, we&#8217;ll show you exactly how to customize Versana to match your brand, from changing colors to editing templates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing the Site Editor<\/h2>\n\n\n\n<p>There are three ways to access the Site Editor:<\/p>\n\n\n\n<p><strong>Method 1: From Admin Dashboard<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Appearance \u2192 Editor<\/li>\n\n\n\n<li>You&#8217;ll see the full site editing interface<\/li>\n<\/ol>\n\n\n\n<p><strong>Method 2: From the Admin Bar<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit any page on your site<\/li>\n\n\n\n<li>Click &#8220;Edit Site&#8221; in the admin bar at top<\/li>\n<\/ol>\n\n\n\n<p><strong>Method 3: From Theme Options<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Appearance \u2192 Theme Options<\/li>\n\n\n\n<li>Click &#8220;Open Site Editor&#8221; button<\/li>\n<\/ol>\n\n\n\n<p><strong>First Time?<\/strong> Don&#8217;t worry if it looks overwhelming. We&#8217;ll walk through everything step by step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Site Editor Interface<\/h2>\n\n\n\n<p>The Site Editor has several key areas:<\/p>\n\n\n\n<p><strong>Left Sidebar<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Templates (homepage, blog, single post, etc.)<\/li>\n\n\n\n<li>Template Parts (header, footer)<\/li>\n\n\n\n<li>Patterns (pre-designed sections)<\/li>\n\n\n\n<li>Styles (colors, fonts, spacing)<\/li>\n<\/ul>\n\n\n\n<p><strong>Center Canvas<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Live preview of your site<\/li>\n\n\n\n<li>Click to edit any element<\/li>\n\n\n\n<li>See changes in real-time<\/li>\n<\/ul>\n\n\n\n<p><strong>Right Sidebar<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block settings<\/li>\n\n\n\n<li>Advanced options<\/li>\n\n\n\n<li>Style controls<\/li>\n<\/ul>\n\n\n\n<p><strong>Top Toolbar<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save button<\/li>\n\n\n\n<li>Undo\/Redo<\/li>\n\n\n\n<li>Preview modes<\/li>\n\n\n\n<li>Settings<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Customizing Colors<\/h2>\n\n\n\n<p>Colors define your brand. Here&#8217;s how to change them:<\/p>\n\n\n\n<p><strong>Global Color Palette<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Styles&#8221; in left sidebar<\/li>\n\n\n\n<li>Click the palette icon (looks like a paint palette)<\/li>\n\n\n\n<li>Click &#8220;Colors&#8221;<\/li>\n\n\n\n<li>You&#8217;ll see Versana&#8217;s color palette<\/li>\n<\/ol>\n\n\n\n<p><strong>Versana&#8217;s Default Colors<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Primary: <code>#1A73E8<\/code> (Blue)<\/li>\n\n\n\n<li>Secondary: <code>#E91E63<\/code> (Pink)<\/li>\n\n\n\n<li>Tertiary: <code>#9C27B0<\/code> (Purple)<\/li>\n\n\n\n<li>Neutrals: White to Black scale<\/li>\n\n\n\n<li>Status: Success, Warning, Error, Info<\/li>\n<\/ul>\n\n\n\n<p><strong>To Change a Color<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on any color swatch<\/li>\n\n\n\n<li>Use the color picker to choose new color<\/li>\n\n\n\n<li>Or enter hex code directly<\/li>\n\n\n\n<li>Changes apply site-wide instantly<\/li>\n<\/ol>\n\n\n\n<p><strong>Pro Tip<\/strong>: Stick to 2-3 brand colors for professional look. Don&#8217;t change every color just because you can!<\/p>\n\n\n\n<p><strong>Apply Colors to Elements<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select any block in the editor<\/li>\n\n\n\n<li>Click &#8220;Color&#8221; in right sidebar<\/li>\n\n\n\n<li>Choose from your palette<\/li>\n\n\n\n<li>Options: Background, Text, Link colors<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Changing Typography<\/h2>\n\n\n\n<p>Fonts create the personality of your site:<\/p>\n\n\n\n<p><strong>Global Typography<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Styles&#8221; in left sidebar<\/li>\n\n\n\n<li>Click &#8220;Typography&#8221;<\/li>\n\n\n\n<li>You&#8217;ll see font settings<\/li>\n<\/ol>\n\n\n\n<p><strong>What You Can Change<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font Family (typeface)<\/li>\n\n\n\n<li>Font Sizes (predefined scale)<\/li>\n\n\n\n<li>Line Height (spacing between lines)<\/li>\n\n\n\n<li>Letter Spacing<\/li>\n<\/ul>\n\n\n\n<p><strong>Versana&#8217;s Font Sizes<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>XSmall: 0.75rem<\/li>\n\n\n\n<li>Small: 0.875rem<\/li>\n\n\n\n<li>Base: 1rem<\/li>\n\n\n\n<li>Medium: 1.125rem<\/li>\n\n\n\n<li>Large: 1.25rem<\/li>\n\n\n\n<li>XLarge to 4XLarge: Up to 3rem<\/li>\n<\/ul>\n\n\n\n<p><strong>Changing Fonts<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Typography&#8221; in Styles<\/li>\n\n\n\n<li>Select &#8220;Font Family&#8221;<\/li>\n\n\n\n<li>Choose from:\n<ul class=\"wp-block-list\">\n<li>System Sans-serif (default, fast loading)<\/li>\n\n\n\n<li>System Serif (elegant, traditional)<\/li>\n\n\n\n<li>System Monospace (code, technical)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Custom Fonts<\/strong>: Versana uses system fonts for performance, but you can add Google Fonts:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Site Editor -&gt; Styles -&gt; Typography -&gt; Select any Font -&gt; Install Fonts<\/li>\n\n\n\n<li>Connect Google Fonts<\/li>\n\n\n\n<li>Choose custom fonts<\/li>\n\n\n\n<li>Apply in Site Editor<\/li>\n<\/ol>\n\n\n\n<p><strong>Typography Best Practices<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use 2 fonts max (one for headings, one for body)<\/li>\n\n\n\n<li>Maintain 1.5-1.6 line height for readability<\/li>\n\n\n\n<li>Keep base font size at 16px minimum<\/li>\n\n\n\n<li>Test on mobile devices<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adjusting Spacing<\/h2>\n\n\n\n<p>Spacing makes or breaks design. Too little feels cramped, too much feels disconnected.<\/p>\n\n\n\n<p><strong>Versana&#8217;s Spacing Scale<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>3XSmall: 0.25rem<\/li>\n\n\n\n<li>2XSmall: 0.375rem<\/li>\n\n\n\n<li>XSmall: 0.5rem<\/li>\n\n\n\n<li>Small: 1rem<\/li>\n\n\n\n<li>Medium: 1.5rem<\/li>\n\n\n\n<li>Large: 2rem<\/li>\n\n\n\n<li>XLarge: 3rem<\/li>\n\n\n\n<li>2XLarge: 4rem<\/li>\n\n\n\n<li>3XLarge: 5rem<\/li>\n\n\n\n<li>4XLarge: 6rem<\/li>\n<\/ul>\n\n\n\n<p><strong>Global Spacing<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Styles&#8221; \u2192 &#8220;Layout&#8221;<\/li>\n\n\n\n<li>Adjust:\n<ul class=\"wp-block-list\">\n<li>Content Width (default: 800px)<\/li>\n\n\n\n<li>Wide Width (default: 1200px)<\/li>\n\n\n\n<li>Padding (page margins)<\/li>\n\n\n\n<li>Block Gap (space between elements)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Block-Level Spacing<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select any block<\/li>\n\n\n\n<li>Click &#8220;Dimensions&#8221; in right sidebar<\/li>\n\n\n\n<li>Adjust:\n<ul class=\"wp-block-list\">\n<li>Padding (inside space)<\/li>\n\n\n\n<li>Margin (outside space)<\/li>\n\n\n\n<li>Min Height<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Common Spacing Adjustments<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Section padding: 4xl-6rem (top\/bottom)<\/li>\n\n\n\n<li>Element margins: md-1.5rem (between blocks)<\/li>\n\n\n\n<li>Card padding: lg-2rem (inside boxes)<\/li>\n\n\n\n<li>Button padding: Custom per design<\/li>\n<\/ul>\n\n\n\n<p>&lt;!&#8211; wp:heading {&#8220;level&#8221;:2} &#8211;&gt;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Editing Templates<\/h2>\n\n\n\n<p>Templates control the layout of different page types:<\/p>\n\n\n\n<p><strong>Available Templates in Versana<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blog Home (posts index)<\/li>\n\n\n\n<li>Single Post<\/li>\n\n\n\n<li>Page<\/li>\n\n\n\n<li>Archive<\/li>\n\n\n\n<li>Search Results<\/li>\n\n\n\n<li>404 Error<\/li>\n<\/ul>\n\n\n\n<p><strong>To Edit a Template<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Templates&#8221; in left sidebar<\/li>\n\n\n\n<li>Select template to edit<\/li>\n\n\n\n<li>Make your changes<\/li>\n\n\n\n<li>Click &#8220;Save&#8221;<\/li>\n<\/ol>\n\n\n\n<p><strong>Editing the Homepage<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Templates \u2192 Homepage<\/li>\n\n\n\n<li>You&#8217;ll see your current homepage layout<\/li>\n\n\n\n<li>Add, remove, or rearrange patterns<\/li>\n\n\n\n<li>Customize content<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Common Homepage Edits<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Replace hero image<\/li>\n\n\n\n<li>Change headline text<\/li>\n\n\n\n<li>Swap out sections<\/li>\n\n\n\n<li>Adjust spacing<\/li>\n\n\n\n<li>Update colors<\/li>\n<\/ul>\n\n\n\n<p><strong>Editing Single Post Template<\/strong>: This controls how all blog posts look:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Templates \u2192 Single Post<\/li>\n\n\n\n<li>Edit:\n<ul class=\"wp-block-list\">\n<li>Post title styling<\/li>\n\n\n\n<li>Featured image size<\/li>\n\n\n\n<li>Content width<\/li>\n\n\n\n<li>Sidebar (if any)<\/li>\n\n\n\n<li>Related posts section<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Your changes apply to ALL posts automatically!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customizing Template Parts<\/h2>\n\n\n\n<p>Template Parts are reusable sections that appear on multiple pages:<\/p>\n\n\n\n<p><strong>Header Template Part<\/strong>: The header appears on every page. To edit:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Template Parts&#8221; \u2192 Header<\/li>\n\n\n\n<li>Modify:\n<ul class=\"wp-block-list\">\n<li>Logo (replace site title with image)<\/li>\n\n\n\n<li>Navigation menu<\/li>\n\n\n\n<li>Layout (centered vs left-aligned)<\/li>\n\n\n\n<li>Background color<\/li>\n\n\n\n<li>Sticky header behavior<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Adding Your Logo<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Edit Header template part<\/li>\n\n\n\n<li>Select &#8220;Site Title&#8221; block<\/li>\n\n\n\n<li>Delete it<\/li>\n\n\n\n<li>Add &#8220;Image&#8221; block<\/li>\n\n\n\n<li>Upload your logo<\/li>\n\n\n\n<li>Link to homepage<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Footer Template Part<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Template Parts \u2192 Footer<\/li>\n\n\n\n<li>Edit:\n<ul class=\"wp-block-list\">\n<li>Footer columns<\/li>\n\n\n\n<li>Navigation links<\/li>\n\n\n\n<li>Social media icons<\/li>\n\n\n\n<li>Copyright text<\/li>\n\n\n\n<li>Background color<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Pro Tip<\/strong>: Use Versana&#8217;s footer pattern as starting point, then customize.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using Style Variations<\/h2>\n\n\n\n<p>Versana includes 3 style variations matching the demos:<\/p>\n\n\n\n<p><strong>Blog Style<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pink and orange colors<\/li>\n\n\n\n<li>Serif fonts<\/li>\n\n\n\n<li>Warm, inviting feel<\/li>\n\n\n\n<li>Line height: 1.75<\/li>\n<\/ul>\n\n\n\n<p><strong>Business Style<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Blue color scheme<\/li>\n\n\n\n<li>Sans-serif fonts<\/li>\n\n\n\n<li>Professional appearance<\/li>\n\n\n\n<li>Clean, modern<\/li>\n<\/ul>\n\n\n\n<p><strong>Portfolio Style<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Purple and pink colors<\/li>\n\n\n\n<li>Bold typography<\/li>\n\n\n\n<li>Creative, artistic<\/li>\n\n\n\n<li>High contrast<\/li>\n<\/ul>\n\n\n\n<p><strong>To Switch Styles<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Styles&#8221; in left sidebar<\/li>\n\n\n\n<li>Browse style variations<\/li>\n\n\n\n<li>Click on any to preview<\/li>\n\n\n\n<li>Click &#8220;Save&#8221; to apply<\/li>\n<\/ol>\n\n\n\n<p><strong>Mix and Match<\/strong>: You can apply a style variation, then customize individual elements. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start with Business style<\/li>\n\n\n\n<li>Change primary color to your brand<\/li>\n\n\n\n<li>Keep everything else<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Customization Techniques<\/h2>\n\n\n\n<p><strong>Creating Custom Patterns<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Design a section you like<\/li>\n\n\n\n<li>Select all blocks in that section<\/li>\n\n\n\n<li>Click three dots \u2192 &#8220;Create Pattern&#8221;<\/li>\n\n\n\n<li>Name your pattern<\/li>\n\n\n\n<li>Reuse on other pages<\/li>\n<\/ol>\n\n\n\n<p><strong>Adding Custom CSS<\/strong>: For advanced users who know CSS:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Appearance \u2192 Theme Options \u2192 Advanced<\/li>\n\n\n\n<li>Add CSS in &#8220;Custom CSS&#8221; field<\/li>\n\n\n\n<li>No <code>&lt;style&gt;<\/code> tags needed<\/li>\n\n\n\n<li>Changes apply immediately<\/li>\n<\/ol>\n\n\n\n<p><strong>Responsive Design<\/strong>: The Site Editor doesn&#8217;t show mobile preview directly, but:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click &#8220;Preview&#8221; in top toolbar<\/li>\n\n\n\n<li>Test on actual mobile device<\/li>\n\n\n\n<li>Or use browser dev tools<\/li>\n\n\n\n<li>Versana is mobile-first by default<\/li>\n<\/ol>\n\n\n\n<p><strong>Reverting Changes<\/strong>: Made a mistake? You can undo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click &#8220;Undo&#8221; button (or Ctrl\/Cmd + Z)<\/li>\n\n\n\n<li>Or reset entire template:\n<ol class=\"wp-block-list\">\n<li>Templates \u2192 Select template<\/li>\n\n\n\n<li>Three dots \u2192 &#8220;Clear customizations&#8221;<\/li>\n\n\n\n<li>Resets to default<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Common Customization Recipes<\/h2>\n\n\n\n<p><strong>Recipe 1: Change Brand Colors<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Styles \u2192 Colors<\/li>\n\n\n\n<li>Change Primary to your brand color<\/li>\n\n\n\n<li>Optionally change Secondary and Tertiary<\/li>\n\n\n\n<li>Leave neutrals as-is<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Recipe 2: Add Sticky Header<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Appearance \u2192 Theme Options \u2192 Header<\/li>\n\n\n\n<li>Enable &#8220;Sticky Header&#8221;<\/li>\n\n\n\n<li>Save<\/li>\n\n\n\n<li>Header now sticks on scroll<\/li>\n<\/ol>\n\n\n\n<p><strong>Recipe 3: Change Homepage Layout<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Templates \u2192 Homepage<\/li>\n\n\n\n<li>Remove unwanted sections (select &amp; delete)<\/li>\n\n\n\n<li>Add new patterns from left sidebar<\/li>\n\n\n\n<li>Rearrange by dragging<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Recipe 4: Customize Footer<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Template Parts \u2192 Footer<\/li>\n\n\n\n<li>Edit column content<\/li>\n\n\n\n<li>Replace social links with yours<\/li>\n\n\n\n<li>Update copyright text<\/li>\n\n\n\n<li>Change background color<\/li>\n\n\n\n<li>Save<\/li>\n<\/ol>\n\n\n\n<p><strong>Recipe 5: Create Dark Mode<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Styles \u2192 Colors<\/li>\n\n\n\n<li>Change Background to dark gray\/black<\/li>\n\n\n\n<li>Change Text to white\/light gray<\/li>\n\n\n\n<li>Adjust accent colors for contrast<\/li>\n\n\n\n<li>Save as new style variation<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Performance Considerations<\/h2>\n\n\n\n<p>The Site Editor makes customization easy, but consider these tips:<\/p>\n\n\n\n<p><strong>Avoid Over-Customization<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Too many unique styles slow loading<\/li>\n\n\n\n<li>Stick to theme&#8217;s design system<\/li>\n\n\n\n<li>Use predefined spacing\/colors<\/li>\n<\/ul>\n\n\n\n<p><strong>Optimize Images<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compress images before uploading<\/li>\n\n\n\n<li>Use appropriate sizes<\/li>\n\n\n\n<li>Enable lazy loading (Versana does this)<\/li>\n<\/ul>\n\n\n\n<p><strong>Minimize Custom CSS<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use built-in options when possible<\/li>\n\n\n\n<li>Custom CSS adds file size<\/li>\n\n\n\n<li>Keep it minimal and organized<\/li>\n<\/ul>\n\n\n\n<p><strong>Test After Changes<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Run PageSpeed Insights<\/li>\n\n\n\n<li>Check mobile performance<\/li>\n\n\n\n<li>Ensure 90+ score maintained<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting Common Issues<\/h2>\n\n\n\n<p><strong>Changes Not Saving<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check browser console for errors<\/li>\n\n\n\n<li>Disable caching plugins temporarily<\/li>\n\n\n\n<li>Try different browser<\/li>\n\n\n\n<li>Clear WordPress cache<\/li>\n<\/ul>\n\n\n\n<p><strong>Can&#8217;t Find Option<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Some features in Theme Options, not Site Editor<\/li>\n\n\n\n<li>Check both locations<\/li>\n\n\n\n<li>Review this guide<\/li>\n<\/ul>\n\n\n\n<p><strong>Broke Something?<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click Undo button<\/li>\n\n\n\n<li>Or reset template to default<\/li>\n\n\n\n<li>Worst case: re-import demo<\/li>\n<\/ul>\n\n\n\n<p><strong>Styles Look Wrong<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear browser cache<\/li>\n\n\n\n<li>Disable caching plugins<\/li>\n\n\n\n<li>Check for conflicting plugins<\/li>\n\n\n\n<li>Test in incognito mode<\/li>\n<\/ul>\n\n\n\n<p><strong>Mobile Looks Different<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This is often intentional (responsive design)<\/li>\n\n\n\n<li>Test on actual device<\/li>\n\n\n\n<li>Check preview at various sizes<\/li>\n\n\n\n<li>Adjust with custom CSS if needed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices Summary<\/h2>\n\n\n\n<p><strong>Do&#8217;s<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Save frequently<\/li>\n\n\n\n<li>Test on mobile<\/li>\n\n\n\n<li>Stick to design system<\/li>\n\n\n\n<li>Use predefined values<\/li>\n\n\n\n<li>Keep it simple<\/li>\n\n\n\n<li>Maintain consistency<\/li>\n<\/ul>\n\n\n\n<p><strong>Don&#8217;ts<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Don&#8217;t use too many colors<\/li>\n\n\n\n<li>Don&#8217;t mix too many fonts<\/li>\n\n\n\n<li>Don&#8217;t over-customize spacing<\/li>\n\n\n\n<li>Don&#8217;t ignore mobile view<\/li>\n\n\n\n<li>Don&#8217;t skip saving<\/li>\n\n\n\n<li>Don&#8217;t be afraid to reset<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Next Steps<\/h2>\n\n\n\n<p>You now know how to customize Versana with the Site Editor! Here&#8217;s what to do next:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Practice<\/strong>: Make small changes and see what happens<\/li>\n\n\n\n<li><strong>Experiment<\/strong>: Try different style variations<\/li>\n\n\n\n<li><strong>Customize<\/strong>: Apply your brand colors and fonts<\/li>\n\n\n\n<li><strong>Refine<\/strong>: Adjust spacing and layouts<\/li>\n\n\n\n<li><strong>Launch<\/strong>: Publish your customized site<\/li>\n<\/ol>\n\n\n\n<p><strong>Remember<\/strong>: Versana is designed to look great with minimal customization. Don&#8217;t feel you need to change everything!<\/p>\n\n\n\n<p><strong>Need Help?<\/strong> Visit our support forum or check out our video tutorials.<\/p>\n\n\n\n<p>Happy customizing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Master WordPress Site Editor with Versana. Change colors, fonts, layouts, and templates visually. No coding required. Complete tutorial.<\/p>\n","protected":false},"author":1,"featured_media":82,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,16],"tags":[21,30,31,38],"class_list":["post-90","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customization","category-tutorials","tag-fse-customization","tag-site-editor","tag-theme-customization","tag-wordpress-editor"],"_links":{"self":[{"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/media\/82"}],"wp:attachment":[{"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/versana.codoplex.com\/versana-blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}