Versana

Versana Theme Options - Versana WordPress Block Theme
,
junaidte14@gmail.com
8–12 minutes

Versana Theme Options: Complete Guide to Every Setting and Feature

Master all Versana theme options. Configure header, footer, blog layouts, integrations, and optimizations. Complete settings guide.

Introduction to Versana Theme Options

While the WordPress Site Editor handles visual customization (colors, fonts, layouts), Versana Theme Options control functional settings like:

  • Header and footer behavior
  • Blog and archive layouts
  • Third-party integrations (Google Analytics, etc.)
  • Performance optimizations
  • Advanced CSS customization

Think of it this way:

  • Site Editor = How it looks
  • Theme Options = How it works

In this guide, we’ll explore every tab and setting in Versana Theme Options so you can configure your site exactly how you need it.

Accessing Theme Options

Location: Appearance → Theme Options

You’ll see a tabbed interface with:

  • Header
  • Footer
  • Blog
  • Integrations
  • Optimizations (if Companion plugin active)
  • Advanced

Each tab contains related settings. Let’s explore them all.

Header Tab

Controls your site’s header behavior and appearance.

Header Layout

Setting: Header Layout dropdown

Options:

  • Default (Logo Left, Menu Right): Traditional layout, logo on left, navigation menu on right. Best for most sites.
  • Centered (Logo & Menu Centered): Logo centered above menu, menu items centered below. Best for minimal, creative sites.

When to use each:

  • Default: Business sites, blogs, e-commerce
  • Centered: Portfolios, photographers, minimal designs

How to change:

  1. Select your preferred layout
  2. Click “Save Settings”
  3. View your site – header updates immediately

Note: You can further customize header in Site Editor → Template Parts → Header

Sticky Header

Setting: “Make header stick to top on scroll” checkbox

What it does: When enabled, header remains visible at top of screen when scrolling down. Users can always access navigation without scrolling back up.

Benefits:

  • Improved navigation accessibility
  • Professional appearance
  • Better user experience on long pages
  • Higher conversion rates (always-visible CTA)

Considerations:

  • Uses slightly more screen space on mobile
  • Can distract on very short pages
  • Disabled by default (less intrusive)

Recommendation: Enable for business sites, corporate sites, e-commerce. Disable for blogs where reading flow is priority.

How to enable:

  1. Check the “Sticky Header” box
  2. Save settings
  3. Scroll down any page – header sticks to top

Footer Tab

Configure footer functionality and copyright information.

Back to Top Button

Setting: “Show back to top button” checkbox

What it does: Adds a floating button (usually bottom-right corner) that scrolls user back to top of page when clicked.

When it appears:

  • User scrolls down more than one screen height
  • Button fades in
  • Click button → smooth scroll to top
  • Button fades out at top

Benefits:

  • Better user experience on long pages
  • Encourages content exploration
  • Professional touch
  • Standard on modern sites

Enabled by default: Yes

How to disable:

  1. Uncheck “Show back to top button”
  2. Save settings

Copyright Text

Setting: Text input field for footer copyright

Default: © {year} {site_name}. All rights reserved.

Dynamic Placeholders:

  • {year}: Automatically updates to current year
  • {site_name}: Replaced with your site’s name

Examples:

© {year} {site_name}. All rights reserved.

Copyright {year} by {site_name}. Powered by WordPress.

{year} {site_name}. Built with Versana Theme.

© 2020-{year} {site_name}. Licensed under CC BY 4.0.

Best Practices:

  • Keep it simple and professional
  • Always include year placeholder (auto-updates)
  • Include site name placeholder
  • Optional: Add theme credit
  • Check annually that it updated

How to customize:

  1. Enter your preferred text
  2. Use {year} and {site_name} placeholders
  3. Save settings
  4. Check footer on your site

Blog Tab

Control blog and archive page layouts.

Blog Layout

Setting: Blog Layout dropdown

Options:

  • Standard List: Traditional single-column blog layout. Posts stacked vertically, full-width within content area.
  • Two Columns Grid: Posts in 2-column grid. More compact, fits more posts above fold.
  • Three Columns Grid: Posts in 3-column grid. Magazine-style, maximum content density.

When to use each:

  • List: Long-form content, detailed excerpts, traditional blogs
  • 2 Columns: Balanced layout, visual content, modern design
  • 3 Columns: Lots of content, image-heavy, news/magazine sites

Preview before deciding: Check how your actual post titles and images look in each layout.

Affects: Homepage blog section (if showing posts), category archives, tag archives

Sidebar Position

Setting: Sidebar Position dropdown

Options:

  • Right Sidebar: Sidebar on right, content on left. Traditional.
  • Left Sidebar: Sidebar on left, content on right. Less common.
  • No Sidebar (Full Width): No sidebar, content spans full width. Modern, minimal.

When to use:

  • Right: Most sites, traditional blogs, expected by users
  • Left: Uncommon, use for specific design reasons
  • None: Modern minimalist sites, long-form content, distraction-free reading

What goes in sidebar: Using widgets or Site Editor → Template Parts → Sidebar, add:

  • Recent posts
  • Categories
  • Tag cloud
  • Search
  • Newsletter signup
  • Ad space

How to populate sidebar:

  1. Go to Appearance → Editor
  2. Templates → Single Post or Archive
  3. Add/edit sidebar blocks
  4. Save

Archive Layout

Setting: Archive Layout dropdown

Options: Same as Blog Layout (List, 2 Columns, 3 Columns)

Applies to:

  • Category archives
  • Tag archives
  • Date archives
  • Author archives

Separate from Blog Layout: You can have:

  • Blog homepage: 3 columns
  • Category archives: Standard list
  • Or any combination

Recommendation: Match blog layout for consistency, or use slightly different layout to differentiate homepage from archives.

Integrations Tab

Connect third-party services to your site.

Google Analytics

Setting: Text input for Google Analytics ID

Formats Accepted:

  • Google Analytics 4: G-XXXXXXXXXX
  • Universal Analytics: UA-XXXXXXX-X (legacy, still works)

What it does: Automatically adds Google Analytics tracking code to your site. Tracks:

  • Page views
  • User behavior
  • Traffic sources
  • Conversions
  • Demographics

How to get tracking ID:

  1. Go to analytics.google.com
  2. Create account/property
  3. Copy tracking ID (starts with G- or UA-)
  4. Paste in Theme Options
  5. Save settings

Verify it’s working:

  1. Visit your site
  2. Open Google Analytics
  3. Go to Real-Time → Overview
  4. You should see your visit

Privacy consideration: Add privacy policy mentioning Google Analytics usage.

Google Tag Manager

Setting: Text input for GTM container ID

Format: GTM-XXXXXX

What it is: Container for all tracking codes (analytics, ads, pixels, etc.). Manage all tracking in one place without editing code.

Benefits over direct Analytics:

  • Add/remove tracking without code changes
  • Centralized management
  • Advanced tracking (scroll depth, clicks, etc.)
  • Easier for non-technical users

How to get container ID:

  1. Go to tagmanager.google.com
  2. Create account and container
  3. Copy container ID (GTM-XXXXXX)
  4. Paste in Theme Options
  5. Save

Adds code to:

  • <head> section
  • Right after <body> tag

Use GTM OR Analytics directly, not both (or you’ll double-count visits).

Facebook Pixel

Setting: Text input for Facebook Pixel ID

Format: 15-16 digit number

What it does: Tracks visitors for Facebook Ads:

  • Retargeting campaigns
  • Conversion tracking
  • Audience building
  • Ad performance measurement

How to get Pixel ID:

  1. Go to business.facebook.com
  2. Business Settings → Data Sources → Pixels
  3. Create pixel or copy existing ID
  4. Paste in Theme Options
  5. Save

Verify installation:

  1. Install Facebook Pixel Helper (Chrome extension)
  2. Visit your site
  3. Extension icon shows green checkmark if working

Privacy: Disclose pixel usage in privacy policy. May require cookie consent banner in EU.

Header Scripts

Setting: Textarea for custom scripts in <head>

Who can access: Only administrators with unfiltered_html capability

What it’s for:

  • Custom tracking codes
  • Third-party integrations
  • Meta tags
  • Schema markup
  • Font loading scripts

Security restriction: Not visible to editors/authors (security precaution)

Example uses:

html

<!-- Hotjar Tracking -->
<script>
    (function(h,o,t,j,a,r){...})(window,document,...);
</script>

<!-- Custom Meta Tags -->
<meta name="twitter:creator" content="@username">

<!-- Preload Critical Font -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>

Best practice:

  • Include <script> or other tags as needed
  • Test thoroughly after adding
  • Document what each script does
  • Remove unused scripts

Footer Scripts

Setting: Textarea for custom scripts before </body>

Similar to Header Scripts, but loads at bottom of page.

Better for:

  • Analytics that can load last
  • Chat widgets
  • Non-critical scripts
  • Scripts that don’t need to load immediately

Why footer is better:

  • Doesn’t block page rendering
  • Faster initial load
  • Better PageSpeed scores

Recommendation: Put scripts in footer unless they specifically need to be in header.

Optimizations Tab

Available when Versana Companion plugin is active

Lazy Load Images

Setting: “Enable lazy loading for images” checkbox

What it does: Images load only when user scrolls near them, not all at once on page load.

How it works: Uses WordPress native lazy loading (loading="lazy" attribute). No JavaScript required. Supported by all modern browsers.

Benefits:

  • Faster initial page load (50-70% faster typical)
  • Less bandwidth used
  • Better mobile performance
  • Improved PageSpeed scores (+10-20 points)
  • Better user experience

What gets lazy loaded:

  • All post/page images
  • Featured images
  • Gallery images
  • Pattern images
  • Widget images

What doesn’t get lazy loaded:

  • Above-the-fold images (first screenful)
  • Background images in CSS
  • Images in <picture> tags

Enabled by default: Yes

When to disable: Almost never. Maybe for:

  • Above-fold hero images (but WordPress skips these anyway)
  • Sites with all critical images above fold
  • Troubleshooting load issues

Performance impact:

  • Without: 100 images load on page load = slow
  • With: 5-10 images load initially = fast
  • Others load as needed = seamless

Recommendation: Keep enabled always.

Advanced Tab

For developers and power users.

Custom CSS

Setting: Textarea for custom CSS code

What it’s for: Add CSS that overrides or extends theme styles.

Examples:

css

/* Custom button color */
.wp-block-button__link {
    background-color: #FF5722;
}

/* Wider content area */
.wp-site-blocks {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Custom heading style */
h2 {
    border-left: 4px solid #1A73E8;
    padding-left: 1rem;
}

Important:

  • Don’t include <style> tags (just CSS)
  • Changes apply site-wide immediately
  • Survives theme updates
  • Can be overridden by plugins
  • Check syntax (invalid CSS breaks styling)

Testing custom CSS:

  1. Add CSS
  2. Save
  3. View site
  4. Check in different browsers
  5. Test on mobile

Debugging: If site styling breaks:

  1. Remove recent CSS
  2. Save
  3. Add back piece by piece
  4. Find problematic code

Alternative: Site Editor → Styles → Additional CSS (same thing, different interface)

Reset Options

Feature: “Reset to Defaults” button

What it does: Resets ALL theme options to default values. Like fresh installation.

What gets reset:

  • Header layout and settings
  • Footer settings
  • Blog layouts
  • All integrations
  • Custom CSS
  • Every theme option

What doesn’t reset:

  • Content (posts, pages)
  • Media
  • Site Editor customizations
  • Plugin settings
  • WordPress core settings

When to use:

  • Starting over with configuration
  • Troubleshooting weird behavior
  • Testing default settings
  • Cleaning up after experimentation

Warning: Cannot be undone! Backup settings first if you might want them back.

How to reset:

  1. Click “Reset to Defaults” button
  2. Confirm in popup
  3. All options reset immediately
  4. Reconfigure as needed

Theme Options Best Practices

Do’s:

  • Save after every change
  • Test changes on live site
  • Document custom CSS
  • Use placeholders in copyright
  • Enable optimizations

Don’ts:

  • Don’t add invalid code to scripts fields
  • Don’t use both Analytics and GTM for same tracking
  • Don’t disable lazy loading without reason
  • Don’t forget privacy policies for tracking
  • Don’t reset options without backing up

Configuration Workflow:

  1. Import demo (if desired)
  2. Configure header (layout, sticky)
  3. Configure footer (copyright, back to top)
  4. Set blog layouts
  5. Add tracking codes
  6. Enable optimizations
  7. Test everything
  8. Add custom CSS if needed

Troubleshooting Theme Options

Settings not saving:

  • Check browser console for errors
  • Disable caching temporarily
  • Try different browser
  • Check file permissions

Scripts not working:

  • Verify syntax (no typos)
  • Check browser console for errors
  • Ensure unfiltered_html capability
  • Test scripts outside WordPress first

Layout not changing:

  • Clear cache (browser and plugins)
  • Hard refresh (Ctrl/Cmd + Shift + R)
  • Check that you saved
  • Verify correct tab/setting

Tracking not working:

  • Verify ID format (G-XXX or UA-XXX-X or GTM-XXX)
  • Check in tracking platform’s real-time view
  • Clear cache
  • Test in incognito window
  • Check browser ad blockers

Next Steps

You now understand all Versana theme options:

  1. Configure header and footer for your needs
  2. Set blog layouts that match your content
  3. Add tracking codes for analytics
  4. Enable optimizations for performance
  5. Customize with CSS if needed

Remember: Theme options control functionality. Site Editor controls appearance. Use both for complete customization.

Questions? Check our documentation or support forums.

Master these settings and your Versana site will work exactly how you want! ⚙️

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

Search

Categories

Recent Posts

Tags

block patterns block theme configuration demo import fse customization fse theme lazy loading one-click import optimization page builder page speed performance settings site editor theme customization theme options versana demos versana features versana theme website setup wordpress blocks wordpress editor wordpress setup