Page Templates & Widget Examples
This page demonstrates different layouts and widget combinations. Each example shows the shortcode and its live result.
Hero Section Styles
Hero Style (Full-Width Banner)
Best for landing pages and promotional sections.
[thevpn_service_stats style=»hero» title=»Your VPN Brand» subtitle=»Secure Internet Access for Everyone»]
[thevpn_service_stats style=»hero» title=»Your VPN Brand» subtitle=»Secure Internet Access for Everyone»]
Card Style (Vertical Card)
Great for sidebars and compact areas.
[thevpn_service_stats style=»card»]
[thevpn_service_stats style=»card»]
Minimal Style (Inline Compact)
Perfect for headers and navigation areas.
[thevpn_service_stats style=»minimal»]
[thevpn_service_stats style=»minimal»]
Authentication Widgets
Login Widget
Shows Telegram login or user info based on authentication status.
[thevpn_login]
[thevpn_login]
User Info Card
Displays user profile with avatar (only visible when logged in).
[thevpn_user_info]
[thevpn_user_info]
Dashboard Components
Full Dashboard
Complete user dashboard with all features in one shortcode.
[thevpn_dashboard]Individual Components
[thevpn_subscription]
[thevpn_subscription]
[thevpn_balance]
[thevpn_balance]
[thevpn_traffic]
[thevpn_traffic]
Pricing Plans
3-Column Grid (Default)
[thevpn_plans columns=»3″]
[thevpn_plans columns=»3″]
2-Column Grid
[thevpn_plans columns="2"]4-Column Grid
[thevpn_plans columns="4"]VPN Keys
[thevpn_keys show_apps=»yes»]
[thevpn_keys show_apps=»yes»]
Apps Directory
With Platform Filter
[thevpn_apps show_filter=»yes»]
[thevpn_apps show_filter=»yes»]
Customization Tip: Override CSS variables in your theme to match your brand colors. See the Shortcodes Guide for details.