Welcome 🔗

Thank you for choosing StrivioThemes. Every theme in our catalogue is built on the same foundation — the Elementor page builder plus our own ST Elementor Addons plug-in — so the instructions in this guide apply to all of our themes, whichever niche you purchased.

This is a common documentation. Wherever you see [Theme Name], substitute the theme you bought — for example st-ai-agency-pro or st-fitness-pro. Theme-specific notes (extra widgets, unique demo pages) are covered in the short read-me file included inside your theme package.

How to use this guide

• Search — use the search box in the header to jump to any term; use the up/down arrows to move between matches.
• Sidebar — every section and sub-section is listed on the left, and highlights as you scroll.
• Copy link — hover any heading and click the 🔗 icon to copy a direct link to that topic (handy when raising a support ticket).
• Screenshots — placeholder slots marked with a dashed border show where a screenshot belongs; the file name to use is printed inside each slot.

The StrivioThemes Family 🔗

All StrivioThemes products share one architecture, so skills you learn on one theme transfer directly to the next. A selection of current themes:

Licence 🔗

StrivioThemes products are sold directly from striviothemes.com. Your purchase includes a licence key, which you will find in your account dashboard and in your purchase confirmation email.

In plain language

• You may build websites for yourself and for paying clients, modify the code, and keep the site running forever.
• You may not redistribute, resell, sub-licence or publish the theme files — including on template marketplaces, "GPL club" sites, or in a SaaS product that hands the files to end users.
• Licence keys are per-purchase. Moving to a different domain? See Theme Licence Activation for how to release the key.

Images & Demo Content 🔗

The photographs, illustrations and videos shown on our live demos are for demonstration purposes only. They are licensed to StrivioThemes for the demo site and are not distributed with the theme package.

After importing the demo, image placeholders are replaced with neutral stand-ins. Swap them for your own media via Media › Library or directly inside Elementor.

Recommended royalty-free sources

• Pexels — photos and videos
• Pixabay — photos, vectors, illustrations
• Unsplash — high-resolution photography
• unDraw — customisable SVG illustrations

Bundled & Compatible Plug-ins 🔗

Your theme ships with a curated plug-in stack. Required plug-ins must be installed and active for the demo to render correctly; recommended plug-ins power specific demo sections.

Also tested and compatible

Contact Form 7 · WPForms · WPML · Polylang · Loco Translate · Yoast SEO · WP Rocket · LiteSpeed Cache · W3 Total Cache · WP Super Cache · Wordfence · Complianz · CookieYes · YITH WooCommerce Wishlist · The Events Calendar.

Support Policy 🔗

Every StrivioThemes purchase includes 12 months of item support and 6 months of theme updates. When either period ends your website keeps working exactly as it is — you simply stop receiving new versions and can no longer open new tickets. Both can be renewed at any time from your StrivioThemes account.

• Support channelEmail — support@striviothemes.com
• Response timeUsually within 24–48 business hours
• HoursMonday to Saturday, 9:00 am – 7:00 pm IST
• Included support12 months from purchase date
• Updates6 months from purchase date, via your account dashboard

What's Covered 🔗

Raising a Ticket 🔗

Tickets that contain the information below are typically resolved in a single reply. Tickets that do not usually take three or four exchanges.

1. Search this documentation firstUse the search box at the top. A large share of questions are answered in FAQs or Troubleshooting.
2. Collect your detailsTheme name and version, WordPress version, Elementor version, ST Elementor Addons version, PHP version, and your purchase/licence key.
3. Describe the problem preciselyWhat you expected, what actually happened, and the exact steps to reproduce it. "The header is broken" is hard to act on; "the sticky header overlaps the hero section on mobile below 480px" is easy.
4. Attach evidenceScreenshots or a short screen recording, plus the URL of the affected page. If the site is not public, tell us so and we will arrange access.
5. Email usSend it to support@striviothemes.com with the theme name in the subject line.

WordPress Basics 🔗

Our themes require a working WordPress installation. If you do not have one yet, most hosts offer a one-click WordPress installer in cPanel or their control panel. These official resources cover the rest:

• How to install WordPress — manual and automated installation
• First steps with WordPress — dashboard orientation
• Installation FAQ — common install problems

Server Requirements 🔗

Elementor-based themes are more demanding than a basic blog theme, mostly during the demo import. The ST Demo Importer checks these values for you and shows a System Requirements panel at the top of the import screen if anything falls short.

Checking your current values

Go to Tools › Site Health › Info › Server, or Elementor › System Info. Both show your live PHP configuration.

Raising the limits yourself

If your host allows it, add the following to wp-config.php, just above the line that reads /* That's all, stop editing! */:

define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

And to your .htaccess file (Apache / LiteSpeed only):

php_value memory_limit 512M
php_value max_execution_time 300
php_value max_input_time 300
php_value max_input_vars 5000
php_value post_max_size 128M
php_value upload_max_filesize 128M

Your Download 🔗

Download the theme from striviothemes.com › My Account › Downloads. You receive a single ZIP file named after the theme — for example st-ai-agency-pro.zip.

Plug-ins, demo content and theme settings are not shipped inside the download. They are installed and imported for you by the ST Demo Importer once your licence is activated, which the next three sections cover.

Installing the Theme 🔗

There are two ways to install. The dashboard method is easier; FTP is the fallback when your host caps upload size.

Option A — WordPress dashboard

1. Open the themes screenGo to Appearance › Themes and click Add New Theme.
2. UploadClick Upload Theme, choose the [theme-name].zip you downloaded, then click Install Now.
3. ActivateWhen the upload completes, click Activate.
4. Follow the noticeA banner appears at the top of the dashboard prompting you to install the required plug-ins. Continue to Plug-ins Installation.

Option B — FTP / SFTP

1. Connect to your serverUse FileZilla, Cyberduck or your host's file manager.
2. Unzip the themeExtract [theme-name].zip on your computer so you have a folder named [theme-name] containing style.css, functions.php and so on. This step is only needed for FTP — the dashboard method takes the ZIP as it is.
3. Upload the folderPlace the whole [theme-name] folder inside /wp-content/themes/.
4. ActivateIn WordPress go to Appearance › Themes and activate the theme.

Activating your Theme Licence 🔗

Your licence key unlocks the demo import, the premium widgets, the Theme Builder, the Popup Builder and automatic updates. Activate it before anything else — the setup wizard will not let you install plug-ins or import the demo until the key is verified.

Where to activate it

Licence activation lives inside the ST Demo Importer, not in the theme options. After you activate the theme, a welcome panel appears at the top of Appearance › Themes:

1. Find your licence keySign in at striviothemes.com and open My Account › Downloads. Your key is shown alongside the theme, and is also in your purchase confirmation email.
2. Open the importerGo to Appearance › Themes and click Get Started with St Demo Importer. This opens ST Importer › Import, which is also available directly from the ST Importer menu in the WordPress sidebar.
3. Enter the keyWhile the licence is unverified the screen reads Theme License Key is not activated!. Paste your key into the License Key field and click Activate.
4. Confirm and continueThe heading changes to Theme License is Activated!, the key is masked, and three buttons appear: Deactivate, Change Key and Next. Click Next to move on to the setup wizard.

Deactivating a licence

To free the key so it can be used on another site, go to ST Importer › Import on the site you are leaving and click Deactivate. Use Change Key if you only want to swap one key for another on the same site.

Installing Plug-ins 🔗

Once the licence is verified, the setup wizard takes over. It runs in four tabs across the top of the screen: Introduction → Install Plugins → Import Demo → All Done. You can leave at any point and pick up where you stopped by returning to ST Importer › Import.

1. Start the wizardOn the Introduction tab, click Start Now.
2. Review the plug-in listThe Install Plugins tab lists everything the demo needs, each marked Installation Required until it is present:
   • Elementor — the page builder every layout is built with
   • MetForm — the forms used on the contact and enquiry pages
   • ST Elementor Addons — the widgets, editor extensions and Theme Builder
3. Install themClick Install Plugins. The wizard downloads, installs and activates each one in turn; the status labels update as it goes.
4. Wait for all threeDo not navigate away until every plug-in is installed. When the list is clear, the wizard moves on to Import Demo.

Installing plug-ins manually

If the wizard cannot reach our servers, install Elementor and MetForm yourself from Plugins › Add New — both are free on the WordPress.org repository. Then return to ST Importer › Import; the wizard detects them and carries on with ST Elementor Addons.

Importing the Demo 🔗

The final two tabs of the wizard rebuild the demo site — pages, posts, menus, Elementor templates, theme settings and placeholder media — in one run.

Before you start

• Your licence must be activated and all three plug-ins installed.
• Check the System Requirements panel at the top of the screen; clear anything marked Action needed if you can.
• Take a full backup if the site already has content — importing merges with what is there rather than replacing it.
• Use a fresh WordPress install wherever possible.

1. Open the Import Demo tabThe wizard advances to it automatically once the plug-ins are in place.
2. Start the importClick Import Demo and leave the tab open. A full import usually takes 2–10 minutes depending on your host.
3. Wait for confirmationThe All Done tab appears with the message Your demo content has been imported successfully.
4. FinishClick Looked Up to view the result, or Finish to close the wizard and return to the dashboard.

After the import

1. Permalinks — Settings › Permalinks › click Save Changes once to flush rewrite rules.
2. Homepage — Settings › Reading › confirm Your homepage displays is set to A static page, with Home and Blog selected.
3. Menus — Appearance › Menus › confirm the imported menu is assigned to the Primary and Mobile locations.
4. Regenerate CSS — Elementor › Tools › Regenerate Files & Data.
5. Clear caches — purge your caching plug-in, server cache, CDN and browser cache.

Updating the Theme 🔗

Updates deliver new widgets, WordPress and Elementor compatibility fixes, and security patches. Always update on a staging copy first if the site is business-critical.

Option 1 — Automatic update (recommended)

With your licence activated, theme and plug-in updates appear under Dashboard › Updates and on the Themes/Plugins screens, exactly like any WordPress.org update. Click Update Now.

Option 2 — Manual update via the dashboard

1. Download the latest versionFrom striviothemes.com › My Account › Downloads.
2. Activate a default theme temporarilySwitch to Twenty Twenty-Five so the parent theme can be deleted.
3. Delete the old themeDeleting the theme does not delete your content, media or Customizer settings — those live in the database.
4. Upload the new versionAppearance › Themes › Add New › Upload Theme.
5. Re-activateActivate the newly uploaded theme.
6. Update the plug-insUpdate ST Elementor Addons and ST Elementor Addons Pro to the matching versions.
7. Regenerate & clearElementor › Tools › Regenerate Files & Data, then purge every cache.

Option 3 — Manual update via FTP

1. Download and unzip the new theme.
2. Connect over FTP and rename /wp-content/themes/[theme-name] to [theme-name]-old.
3. Upload the new [theme-name] folder.
4. Check the site, then delete the -old folder.

How This Theme Is Configured 🔗

Everything you will actually edit lives in one of three places:

Elementor Site Settings 🔗

Open any page with Elementor, click the hamburger menu at the top-left of the panel, and choose Site Settings. The panel is grouped into three parts:

• Design SystemGlobal Colors and Global Fonts — the named tokens every widget on every imported page refers to.
• Theme StyleTypography, Buttons, Images and Form Fields — default styling for elements that are not individually styled.
• SettingsSite Identity, Background, Layout, Lightbox, Page Transitions, Custom CSS and Additional Settings.

Global Colours 🔗

Site Settings › Global Colors. Every imported page references these tokens rather than hard-coded hex values, so changing one here recolours the whole site instantly.

System Colors

Four tokens that Elementor itself applies as defaults:

Custom Colors

Each theme also ships a full named palette so sections, cards and overlays stay consistent. In ST AI Agency Pro that runs from Orange 900 Deepest through Orange 100 Tint, then Cream Base, Cream Deep, White, Ink, Ink Soft, Ink Card, Muted Text, Muted Light and Muted On Dark. Other themes use the same structure with their own hues.

Rebranding in two minutes

1. Switch on the preview overlaySet Show global settings to Yes at the top of the panel. The canvas is temporarily replaced by a style guide showing every colour and font, so you can see the effect of each change.
2. Change Primary and SecondaryThese two carry most of the brand. Update them first and check the overlay.
3. Work down the rampReplace the numbered shades (900 down to 100) with tints and shades of your own brand colour so gradients and hover states stay coherent.
4. Save ChangesThen switch the overlay back to No and review a few real pages.

Global Fonts 🔗

Site Settings › Global Fonts. Same idea as colours, applied to type. Each entry stores a family, weight, size, line height, letter spacing and transform, with separate responsive values for desktop, tablet and mobile.

System Fonts

Primary (headings), Secondary (sub-headings), Text (body) and Accent.

Custom Fonts — the type scale

The themes ship a complete, named scale so every page uses the same sizes. Editing one entry updates every element that uses it:

Typography 🔗

Site Settings › Typography (under Theme Style). This sets the defaults for plain HTML output — body text, links and H1 to H6 — which matters most inside blog posts and any content not built widget by widget.

• BodyText colour, typography and paragraph spacing for all body copy.
• LinkColour and typography, with separate Normal and Hover tabs.
• H1 – H6Colour and typography for each heading level. These apply wherever a heading is not individually styled — most importantly inside post content.

Buttons & Form Fields 🔗

Site Settings › Buttons sets the default appearance of every button that has not been styled individually — which is most of them.

• TypographyUsually linked to the Button global font, shown by the small globe icon beside the control.
• Normal / HoverTwo tabs. Set the resting appearance on Normal and the hover appearance on Hover — do not forget the second one.
• Text Color, Background Type, ColorSolid colour or gradient. Pick a global colour via the globe icon rather than a raw hex value.
• Border Type & Border RadiusOur demos use a fully rounded pill — radius 100 on all four corners. Set all four to 0 for square buttons, or something like 8 for softly rounded ones.
• PaddingControls the button's size. The demos use roughly 20 top and bottom, 34 left and right.

Images and Form Fields

The two remaining Theme Style entries work the same way. Images sets default border, radius, opacity and hover behaviour for image widgets. Form Fields sets the typography, colours, border and padding of every input, textarea and select — including MetForm fields — so your forms match the rest of the site without styling each one.

Layout & Containers 🔗

Site Settings › Layout controls the overall canvas.

• Content WidthMaximum width of the centred content area. Our demos run wide — ST AI Agency Pro uses 1600 against Elementor's 1140 default.
• Container PaddingDefault inner spacing of every container (Elementor's default is 10px).
• GapsDefault space between widgets, as separate Column and Row values. The demos use 20 / 20.
• Page Title Selectorh1.entry-title. This is what lets the "Hide Title" switch in Page Settings work — leave it as it is.
• Stretched Section Fit Tobody. Leave as it is so full-width sections stretch correctly.
• Default Page LayoutThe template applied to new pages. Changes only show in the preview after the page reloads.
• BreakpointsTablet and mobile breakpoints. Leave at the defaults unless you have a specific reason — changing them re-flows every imported page.

Boxed vs full width, per container

Site-wide width is only half the story. Each individual container has its own Content Width control in the Layout tab, set to either Boxed (constrained to the width you specify) or Full Width (edge to edge). That is how a hero image can bleed to the screen edges while the text inside it stays aligned with the rest of the page.

• Container Layout — Flexbox or Grid.
• Direction, Justify Content, Align Items — standard flexbox alignment for the widgets inside.
• Gaps — spacing between the items in this container only.
• Wrap — whether items stay on one line or break onto multiple lines. Setting this to Wrap is often the quickest fix for a row that breaks on tablet.

Site Identity & Favicon 🔗

This is the one job the WordPress Customizer still does. Go to Appearance › Customize › Site Identity.

• Site IconUse this. Click Select Site Icon and upload a square image at least 512×512 px. It becomes your browser-tab icon, bookmark icon and mobile app icon.
• Site Title & TaglineWorth setting because WordPress uses them in the browser tab, RSS feeds and some SEO output — but they are not displayed by the theme.
• LogoIgnore this field. The logo you actually see on the site is an Image widget inside the Header template. See Editing the Header.

Menus 🔗

Menu items are still managed by WordPress. Go to Appearance › Menus.

1. Create the menuGive it a name — the demos ship one called Menu 1 — and click Create Menu.
2. Add itemsTick pages in the Pages panel and click Add to Menu. Use Custom Links for external URLs or one-page anchors, and Categories for blog sections.
3. Order and nest themDrag to reorder. Drag an item slightly to the right to make it a sub-item — one level of nesting produces a dropdown.
4. SaveClick Save Menu (or Create Menu the first time).
5. Point the header at itOpen STE Addons › Theme Builder, edit the Header template, select the ST Nav Menu widget and choose your menu in Select menu. See Editing the Header.

Header, Footer & Templates 🔗

Everything structural — the header, the footer, the blog listing, single posts, archives, search results, the 404 page and WooCommerce layouts — is a template you edit visually in Elementor through the ST Addons Theme Builder.

That is covered in full in Section 5.7, Theme Builder, with step-by-step walkthroughs for the header and the footer.

Addons Dashboard 🔗

STE Addons in the WordPress admin menu. The left column of the dashboard holds these tabs:

Widget Management 🔗

STE Addons › Widgets

Every widget can be switched on or off individually. Widgets that are switched off do not load their CSS or JavaScript, so disabling what you do not use makes the Elementor panel tidier and pages lighter.

1. Filter the listUse the All / Basic Widgets / Theme Builder / WooCommerce Widgets tabs.
2. Toggle widgetsFlip the switch on any widget card. Changes save immediately.
3. Bulk switchUse Enable All or Disable All to reset the whole list.
4. Refresh ElementorReload the Elementor editor to see the change in the widget panel.

Basic Widgets 🔗

Found in the Elementor panel under the ST Elementor Addons category.

Working with a widget

1. Open the page in ElementorEdit any page and click Edit with Elementor.
2. Find the widgetSearch its name in the widget panel, or scroll to the ST Elementor Addons category.
3. Drag it inDrop it into a container on the canvas.
4. Configure itEvery widget uses Elementor's three-tab structure:
   • Content — what it displays: text, images, queries, links, item repeaters.
   • Style — how it looks: typography, colours, spacing, borders, shadows, hover states.
   • Advanced — margin, padding, motion effects, responsive visibility, custom CSS and CSS classes.
5. Check responsiveUse the device icons at the bottom of the panel to review tablet and mobile, and adjust any value that has a device-specific override.
6. PublishClick Publish or Update.

Theme Builder Widgets 🔗

Pro These widgets output dynamic content from the post currently being viewed. They only make sense inside a Theme Builder template (single post, archive, product) — on a normal page they fall back to that page's own data.

WooCommerce Widgets 🔗

These widgets appear once WooCommerce is installed and active. They let you build shop, product, cart and checkout layouts entirely in Elementor.

Extensions 🔗

STE Addons › Extensions — features that apply across the whole Elementor editor rather than to one widget. Each can be toggled on or off.

Using Dynamic Tags

Any field with a small database icon beside it supports dynamic content. Click the icon, choose a source (for example Post Title or ACF Field), and set a fallback value for posts where the data is empty.

Using per-element Custom CSS

Select the element, open the Advanced tab and find the Custom CSS box. Use the selector keyword to target the element itself:

selector {
    backdrop-filter: blur(8px);
    border-radius: 18px;
}

selector:hover .st-icon {
    transform: translateY(-4px);
}

Theme Builder 🔗

STE Addons › Theme Builder

This is the most important screen in the whole theme. The Theme Builder replaces the PHP templates WordPress would normally use with layouts you design visually in Elementor — your header, your footer, your blog listing, your single post, your 404 page. Each template carries display rules that decide where it applies.

Creating a template

1. Open the Theme BuilderGo to STE Addons › Theme Builder.
2. Add a templateClick Create Template on the card you need, then give the layout a clear name such as "Header — Transparent (Home only)".
3. Design itBuild the layout in Elementor, using dynamic widgets like Post Title and Feature Image where the content changes per post.
4. Set the previewClick the eye icon › Settings and pick a real post to preview against.
5. Publish and set conditionsClick Publish, then define display conditions — for example Include: Entire Site, or Include: Front Page plus Exclude: Singular / Posts.
6. Verify on the front endOpen the affected pages in a private window and confirm the right template is applied.

Managing your layouts

Every template you create is listed under STE Addons › Theme Builder › Layouts, with its Type (Header, Footer, Singular, Archive) and its Display Rules in plain language — Entire Website, All Posts, All Posts Archive, 404 Page and so on. Use Add New Layout to create one directly from this screen, or click a name to edit it.

Editing the Header 🔗

Your logo, navigation menu and header button all live inside the Header template. This is where you change them — not in the WordPress Customizer.

1. Open the Header templateGo to STE Addons › Theme Builder, find the layout named Header in the Layouts list, and click it to open it in Elementor.
2. Find the piecesOpen the Structure panel (the small icon at the top-right of the canvas). A typical header container holds three widgets: Image (the logo), ST Nav Menu and Button.
3. Change the logoSelect the Image widget. Under Choose Image, click the current logo and upload your own. Set Image Resolution to Full for a crisp result, and use Link › Custom URL to point it at your homepage.
4. Change the menuSelect the ST Nav Menu widget and pick your menu under Select menu. Adjust Horizontal menu position, Dropdown open as (Hover or Click) and the Submenu Indicator Icon as needed.
5. Change the buttonSelect the Button widget and edit its text and link. Its colours come from Site Settings › Buttons unless you override them here.
6. Check mobileSwitch to the mobile view using the device icons at the top. The menu collapses to a hamburger; style it under Mobile Menu Settings in the ST Nav Menu widget.
7. UpdateClick Update. The change applies everywhere the template's display rule covers — normally the entire website.

Editing the Footer 🔗

The footer works exactly like the header — open the Footer layout from STE Addons › Theme Builder and edit it in Elementor.

A typical footer is built from nested containers so the columns line up. In the demos you will find:

• NewsletterThe signup strip at the top of the footer, usually a MetForm widget. See MetForm.
• Footer MainThe main body, holding the brand column and the link columns.
• Brand columnImage (footer logo), Text Editor (the short description) and Social Icons.
• Link columnsOne container per column — Solutions, Company, Sectors, Get in touch. Edit the headings and links directly on the canvas.
• Divider & copyright rowThe thin rule and the bottom bar with your copyright line and legal links. Edit the copyright text in its Text Editor widget.

Popup Builder 🔗

STE Addons › Popup Builder

The Popup Builder lists every popup you have created, with an Add New Popup button at the top. Each popup opens in Elementor like any other template.

Design popups, slide-ins, notification bars and full-screen overlays with the same Elementor widgets you use everywhere else — including forms, countdowns and product grids.

Trigger options

• On page load — after a configurable delay.
• On scroll — after a percentage of the page, or when a specific element becomes visible.
• On click — from a button, link or CSS selector.
• After inactivity — when the visitor has been idle for N seconds.
• On exit intent — when the cursor moves toward the browser chrome.

Advanced rules

• Show up to N times, or once per session / per visitor.
• Show only to logged-out users, first-time visitors, or visitors from a specific referrer.
• Show only on selected devices.
• Stop showing after the visitor converts (submits the form or clicks the CTA).

Saving & Reusing Templates 🔗

Saving a section you want to reuse

Built a hero, a pricing row or a call-to-action you will want on other pages? Save it once and drop it in wherever you need it.

1. Select the containerIn the Elementor editor, click the container handle (the six-dot icon) of the section you want to keep, so the whole container is selected and not just one widget inside it.
2. Right-click › Save as TemplateChoose Save as Template from the context menu.
3. Name itGive it a clear name — Home hero, Pricing 3-column, Contact CTA — and click Save.

Where saved templates live

Saved templates are stored in Elementor, not in the theme. To find them, open the Elementor editor, click the hamburger menu in the top-left of the panel, then:

Elementor › Editor › Templates › Saved Templates

From that screen you can rename, preview, export (as a .json file), import and delete your templates.

Inserting a saved template into a page

1. Open the page in ElementorEdit any page or Theme Builder template.
2. Open the libraryClick the folder icon on the canvas (it sits next to the “+” that adds a new container).
3. My TemplatesSwitch to the My Templates tab — your saved blocks are listed there.
4. InsertClick Insert. The block drops into the page and picks up your global colours and global fonts automatically.

Creating a Page 🔗

1. Add the pageGo to Pages › Add New Page and give it a title.
2. Choose the templateIn the right-hand sidebar, set Template to Elementor Full Width (your Theme Builder header and footer, edge-to-edge sections) or Elementor Canvas (a completely blank canvas — no header, no footer).
3. Publish firstClick Publish before opening Elementor. This avoids losing work if the editor session drops.
4. Edit with ElementorClick Edit with Elementor and build the page, or drop in a block you have already saved as a template.

Page Settings 🔗

Inside Elementor, click the gear icon at the bottom-left of the panel to open Page Settings.

Settings tab

• TitleThe page title. Also used in menus and search results.
• StatusDraft, pending review, private or published.
• Featured imageUsed in blog listings, related posts and social share previews.
• Hide titleHides the WordPress page title so your Elementor hero section is the first thing visitors see. Enabled on most demo pages.
• Page layoutDefault, Elementor Full Width, Elementor Canvas or Theme layouts with a sidebar.

Style tab

• Body styleBackground colour, image, gradient or video for the whole page.
• PaddingTop/right/bottom/left padding of the page content area.

Advanced tab

• Custom CSSCSS scoped to this page only.
• ExcerptShort summary used in listings and some SEO snippets.

There is no separate theme options box

Everything that controls a page is in the Elementor panel above. These themes do not add their own metabox below the editor, and the WordPress Customizer does not affect individual pages.

To vary the header or footer on one page, you do not change a setting on the page — you create a second template in the Theme Builder and give it a display rule limited to that page. The more specific rule wins over the site-wide one.

Page Templates 🔗

One-Page Sites 🔗

A one-page site is a single page whose menu scrolls to sections instead of loading new pages.

1. Give each section an IDIn Elementor, select a section or container, open Advanced and set CSS ID — for example about, services, contact. Use lowercase, no spaces, no #.
2. Create the menuGo to Appearance › Menus and create a new menu named "One Page Menu".
3. Add custom linksOpen the Custom Links panel. For URL enter #about, for Link Text enter About. Repeat for each section.
4. Assign itTick Primary and Mobile under Menu Settings, then save.
5. Offset for the sticky headerA sticky header covers the top of each section when it scrolls into view. Add a scroll offset in your CSS:

/* Stop a sticky header from covering section headings */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* match your header height */
}

Post Settings 🔗

Blog posts carry the same per-page options, plus a few of their own.

• Categories & tagsAssign at least one category. Categories are the broad structure; tags are specific topics.
• Featured imageRequired for grid and list layouts. Use a consistent aspect ratio — 16:9 or 3:2 — across all posts so cards line up.
• ExcerptWrite one manually for better listings. Without it, WordPress trims the first N words, which often cuts mid-sentence.
• Post formatStandard, gallery, video, audio, quote or link, where the theme supports formats.
• LayoutThe overall post layout — author box, share buttons, related posts — comes from your Single Post template in the Theme Builder, not from settings on the individual post.

Homepage & Blog Page 🔗

1. Create two pagesOne called Home and one called Blog. Leave the Blog page completely empty — WordPress fills it automatically.
2. Open reading settingsGo to Settings › Reading.
3. Set a static homepageSelect A static page, choose Home for Homepage and Blog for Posts page.
4. SaveClick Save Changes.

General Settings 🔗

• Enable buttonMaster on/off switch for the whole site.
• Button URLWhere the button leads. Use tel:+911234567890 to dial, mailto:hello@example.com to open email, or https://wa.me/911234567890 for WhatsApp.
• Open in new tabRecommended for external destinations such as WhatsApp or a booking system.
• Button textShort and action-led — "Get a Quote", "Book Now", "Call Us". Two or three words read best on mobile.
• Select iconChoose from Cart, Phone, WhatsApp, Arrow, Star, Heart, Mail or Chat.

Colours & Typography 🔗

Colours

• Text colourColour of the button label.
• Icon colourSet independently from the text for a two-tone effect.
• Background colourThe button's resting background.
• Hover backgroundBackground on hover or tap.
• Hover text / icon colourLabel and icon colour on hover.

Typography

• Font familyDefault (Theme Font), Montserrat, Roboto, Open Sans, Lato or Poppins. Choosing Default keeps the button consistent with the rest of the site and loads no extra font files.
• Font weightRegular (400), Medium (500), SemiBold (600) or Bold (700).
• Font sizeIn pixels. 14–16 px suits most designs.
• Letter spacingIn pixels. A small positive value (0.3–0.6 px) makes uppercase labels easier to read.

Position & Live Preview 🔗

Choose where the button sits on screen: Top Left, Top Right, Center Left, Center Right (the default), Bottom Left or Bottom Right.

• Center Right — a vertical tab on the edge of the screen. Unobtrusive and always visible.
• Bottom Right — the conventional position for chat and support buttons.
• Bottom Left — useful when a cookie banner or chat widget already occupies the bottom right.

The Live Preview panel at the bottom of the settings screen updates as you type, so you can check contrast and label length before saving.

MetForm 🔗

Our demos use MetForm, a drag-and-drop form builder that runs inside Elementor — so form fields are styled with the same controls as every other widget.

1. Create a formGo to MetForm › Forms › Add New, name it, choose a starting template (or Blank) and click Edit Form.
2. Add fieldsDrag field widgets onto the canvas: text, email, phone, textarea, select, radio, checkbox, date, file upload.
3. Set validationSelect a field and mark it Required, set the placeholder, label and validation message.
4. Configure the formClick the gear icon › Form Settings to set the success message, redirect URL and admin email notifications.
5. Save & updateClick Update & Close.
6. Place it on a pageEdit the page in Elementor, drag in the MetForm widget and select your form from the dropdown.

Entries & Email Delivery 🔗

Submissions are stored in the database at MetForm › Entries, so nothing is lost even if an email fails to send.

Why form emails do not arrive

By default WordPress sends mail with the PHP mail() function, which most inboxes treat as spam because it is unauthenticated. This is the single most common form problem, and it is not a theme fault.

The fix: send through SMTP

1. Install an SMTP plug-inWP Mail SMTP, FluentSMTP or Post SMTP from Plugins › Add New.
2. Choose a providerBrevo, SendGrid, Mailgun, Amazon SES, Google Workspace or your host's own SMTP server.
3. Use a matching from-addressSend as noreply@yourdomain.com, not a Gmail or Yahoo address. Providers reject mail that claims to be from a domain it was not sent by.
4. Add SPF, DKIM and DMARC recordsYour provider supplies the exact DNS records. Without them, even correctly configured SMTP lands in spam.
5. Send a testEvery SMTP plug-in has a test-email tool. Send one to an address on a different provider than your own.

Exporting entries

Open MetForm › Entries, select the form, and use the export option to download submissions as CSV for your CRM or spreadsheet.

Marketing Integrations 🔗

MetForm can push submissions straight into your marketing platform. Configure under MetForm › Settings › Integrations, then enable the integration per form under Form Settings.

Google Maps & reCAPTCHA 🔗

Google Maps

Elementor's Google Maps widget works without an API key for basic embeds. Styled maps, custom markers and multiple pins need a key.

1. Create a project in the Google Cloud Console.
2. Enable Maps JavaScript API and Geocoding API.
3. Create an API key and restrict it to your domain (HTTP referrer restriction).
4. Paste the key where your theme or map widget asks for it.

reCAPTCHA & spam protection

1. Get your keysRegister the site at google.com/recaptcha/admin. reCAPTCHA v3 is invisible and better for conversions.
2. Add them to WordPressEnter the site key and secret key under MetForm › Settings › reCAPTCHA (or Elementor › Settings › Integrations for Elementor forms).
3. Enable it on the formTurn on reCAPTCHA in the individual form's settings.
4. Add a honeypot as backupA hidden field that humans never fill in stops most simple bots with no impact on real users.

Store Setup 🔗

1. Install WooCommerceFrom Plugins › Add New, search for WooCommerce, install and activate.
2. Run the setup wizardSet your store address, currency, the product types you sell, and your tax and shipping basics.
3. Confirm the pagesWooCommerce creates Shop, Cart, Checkout and My Account. Verify they are assigned under WooCommerce › Settings › Advanced › Page setup.
4. Add payment methodsWooCommerce › Settings › Payments — Stripe, PayPal, Razorpay or bank transfer. Test each one in sandbox mode before going live.
5. Configure shippingWooCommerce › Settings › Shipping — create shipping zones and rates.
6. Add productsProducts › Add New. Set a price, at least one category, a featured image and a gallery.
7. Force HTTPSA checkout served over plain HTTP will be flagged as insecure by every modern browser.

Shop Templates 🔗

You have three levels of control over how the store looks:

1. Customizer — Appearance › Customize › WooCommerce sets shop columns, products per page, sidebar position and the shop page title bar. Fastest option.
2. ST WooCommerce widgets — build a custom shop page on an ordinary page using Product Grid, filters, Cart and Checkout widgets.
3. Theme Builder Pro — create Product and Product Archive templates that replace WooCommerce's own layouts sitewide. See Section 5.7.

Common shop settings

• Shop columns3 or 4 columns on desktop, 2 on tablet, 1 or 2 on mobile.
• Products per page9, 12 or 16. More products per page means fewer clicks but a slower first load.
• Related productsNumber shown on the single product page.
• Shop sidebarLeft, right or none. A filter sidebar helps on stores with many products.

Product Images 🔗

Inconsistent product images are the fastest way to make a store look unfinished. Set the sizes once, then upload everything at the same aspect ratio.

1. Open the image settingsAppearance › Customize › WooCommerce › Product Images.
2. Set the catalogue width600 px is a good minimum for the product grid.
3. Choose a cropping rule1:1 (square) is the safest default; 3:4 suits fashion; uncropped preserves the original ratio but produces ragged grids.
4. Upload consistentlyEvery product image should use the same ratio and, ideally, the same background.
5. Regenerate thumbnailsAfter changing sizes, run Regenerate Thumbnails so existing products are re-cropped.

Rank Math Setup 🔗

Our demos ship with Rank Math SEO, though Yoast SEO and SEOPress are equally compatible. Use only one SEO plug-in — running two produces duplicate meta tags and conflicting sitemaps.

1. Run the setup wizardRank Math SEO › Dashboard › Setup Wizard. Choose Easy mode unless you know you need more.
2. Set the site typePersonal blog, business, or e-commerce. This decides which schema Rank Math outputs by default.
3. Connect Search ConsoleLink your Google account so search performance data appears in the WordPress dashboard.
4. Configure sitemapsEnable the XML sitemap and exclude content types you do not want indexed (media attachments, for example).
5. Optimise each pageEvery page and post gets an SEO panel below the editor: focus keyword, SEO title, meta description and a live preview of the Google snippet.

Writing titles and descriptions

• SEO title — 50–60 characters. Lead with the primary keyword, finish with the brand.
• Meta description — 140–160 characters. Write it as ad copy, not a summary; it is what persuades the click.
• Slug — short, lowercase, hyphen-separated, no stop words. /solar-panel-installation/ beats /our-services-for-the-installation-of-solar-panels/.

Schema & Sitemaps 🔗

Structured data

Schema markup tells search engines what a page is, which enables rich results. Set defaults under Rank Math › Titles & Meta and override per page in the Schema tab of the SEO panel.

Validate your markup with the Rich Results Test before launch.

Sitemaps & indexing

1. Your sitemap is at https://yourdomain.com/sitemap_index.xml.
2. Submit it in Google Search Console and Bing Webmaster Tools.
3. Use Instant Indexing in Rank Math to ping search engines when you publish.
4. Exclude thin or duplicate content (tag archives, author archives on single-author sites) via Rank Math › Titles & Meta.

Google Tag Manager & Analytics 🔗

The GTM4WP plug-in bundled with some demos injects a Google Tag Manager container and pushes WordPress and WooCommerce data into the data layer.

1. Create a GTM containerAt tagmanager.google.com. Copy the container ID (GTM-XXXXXXX).
2. Add it to WordPressSettings › Google Tag Manager › paste the ID and choose a code placement.
3. Enable the data layerOn the Integration tab, switch on the WooCommerce data layer for e-commerce tracking.
4. Add GA4 inside GTMCreate a GA4 Configuration tag with your Measurement ID, triggered on All Pages.
5. Test in preview modeUse GTM's Preview to verify tags fire before publishing the container.

Pre-Launch SEO Checklist 🔗

Translating Theme Strings with Loco Translate 🔗

Every StrivioThemes theme is translation-ready and ships with a .pot template in its /languages/ folder.

1. Set the site languageSettings › General › Site Language. WordPress downloads its own core translation automatically.
2. Install Loco TranslateFrom Plugins › Add New.
3. Prepare the folderMake sure /wp-content/languages/loco/themes/ exists and is writable by the web server.
4. Select the themeLoco Translate › Themes › choose your theme. You should see its .pot template listed.
5. Add a languageClick New language, pick your language, and choose Custom as the location so translations survive theme updates.
6. TranslateSelect an English string, type the translation in the lower pane, and click Save. Untranslated strings appear in bold blue.
7. Repeat for the addons plug-inSome strings come from ST Elementor Addons. Go to Loco Translate › Plugins, select it, and repeat the process.

Multilingual Sites — WPML & Polylang 🔗

To serve the same site in more than one language, add a multilingual plug-in. Both of the following are compatible with our themes and with Elementor.

Typical workflow

1. Install the plug-in and define your languages.
2. Translate menus, widgets and theme strings via the plug-in's string-translation screen.
3. Translate each page — either in the plug-in's translation editor (WPML) or by duplicating the page and editing it in Elementor (Polylang).
4. Add a language switcher to the header, either as a menu item or via the plug-in's widget.
5. Confirm hreflang tags are being output — both plug-ins do this automatically.

RTL Support 🔗

Our themes include right-to-left stylesheets for languages such as Arabic, Hebrew, Persian and Urdu.

1. Set an RTL site languageSettings › General › Site Language › choose, for example, العربية. WordPress switches the whole site to RTL automatically.
2. Check the layoutNavigation, sidebars, icons and sliders should mirror. Review the header, footer, blog and any custom sections.
3. Fix stray elementsElementor spacing values set in the editor do not mirror automatically. Adjust padding and margins per element, or add RTL-specific CSS.
4. Use an RTL-capable fontCairo, Almarai, Tajawal or Noto Sans Arabic render Arabic far better than Latin-first families.

/* RTL-only overrides — add to Additional CSS */
body.rtl .st-feature-box {
    text-align: right;
}
body.rtl .st-icon-list__item {
    padding-right: 0;
    padding-left: 12px;
}

Performance Tuning 🔗

An Elementor site can be fast. Most slow ones share the same handful of causes, listed here roughly in order of impact.

1. Hosting

No amount of optimisation rescues an oversold shared host. Look for PHP 8.1+, NVMe or SSD storage, server-level caching (LiteSpeed, NGINX FastCGI) and HTTP/2 or HTTP/3. Managed WordPress hosting is usually worth the difference.

2. Images

• Resize before upload. A 4000 px photo displayed in a 600 px card wastes 90% of its bytes.
• Convert to WebP or AVIF — typically 25–50% smaller than JPEG at the same quality.
• Enable lazy loading (on by default in WordPress). Exclude images above the fold.
• Use an optimisation plug-in: ShortPixel, Imagify, Smush or Converter for Media.

3. Caching

Install one caching plug-in — WP Rocket, LiteSpeed Cache (if your host runs LiteSpeed), FlyingPress or W3 Total Cache. Never run two. Enable page caching, browser caching and GZIP/Brotli compression.

4. Trim what loads

• Disable unused widgets at STE Addons › Widgets.
• Disable unused extensions at STE Addons › Extensions.
• Deactivate and delete plug-ins you no longer use — deactivated plug-ins still occupy disk and get scanned.
• Enable Elementor's Improved Asset Loading and Optimized DOM Output at Elementor › Settings › Features.
• Limit the number of Google Font families and weights.

5. Fonts and third-party scripts

• Host Google Fonts locally — faster and GDPR-friendly. Elementor › Settings › Advanced › Google Fonts Load or use a plug-in such as OMGF.
• Defer chat widgets, heat-map scripts and social embeds until after first interaction.
• Replace embedded YouTube videos with a click-to-play thumbnail (a "lite YouTube" embed) — a standard embed can add over a megabyte.

6. Database & CDN

• Clean post revisions, transients and spam comments periodically (WP-Optimize, Advanced Database Cleaner).
• Limit revisions: define( 'WP_POST_REVISIONS', 5 ); in wp-config.php.
• Put a CDN in front of the site — Cloudflare's free tier is enough for most.

Security Hardening 🔗

1. Keep everything updatedWordPress core, the theme, ST Elementor Addons and every plug-in. Outdated software is the most common way sites are compromised.
2. Use strong, unique passwordsAnd enable two-factor authentication for every administrator account.
3. Avoid the username "admin"Create a new administrator with a different name, then delete the old account and reassign its content.
4. Limit login attemptsWordfence, Limit Login Attempts Reloaded or Solid Security will throttle brute-force attempts.
5. Install a firewallWordfence, Sucuri or Cloudflare WAF.
6. Force HTTPSInstall an SSL certificate and redirect all HTTP traffic to HTTPS.
7. Disable file editingAdd define( 'DISALLOW_FILE_EDIT', true ); to wp-config.php so a compromised admin account cannot edit PHP from the dashboard.
8. Take automated backupsUpdraftPlus, BlogVault or your host's backup service. Store copies off-site and test a restore at least once.
9. Review user rolesGive contributors and editors the minimum role they need. Not everyone needs to be an administrator.
10. Never install nulled softwarePirated themes and plug-ins are the most reliable way to get malware onto a WordPress site.

Common Errors 🔗

The Conflict Test 🔗

When something behaves oddly and no fix above applies, run this test. It isolates the cause in a few minutes and is the first thing our support team will ask you to do.

1. Back upFull file and database backup before you touch anything.
2. Deactivate all third-party plug-insKeep only Elementor, ST Elementor Addons and ST Elementor Addons Pro active.
3. TestIs the problem gone? If yes, a third-party plug-in is the cause — go to step 4. If no, go to step 5.
4. Reactivate one at a timeTest after each activation. The plug-in that brings the problem back is your conflict.
5. Switch to a default themeActivate Twenty Twenty-Five. If the problem disappears, it is theme-related — send us the details.
6. Report your findingsEmail support@striviothemes.com with exactly which plug-in or theme reproduces it. This typically turns a multi-day thread into a single reply.

Fonts 🔗

• Google Fonts — all demo typography. Open-source and free for commercial use. Any Google Font can be selected from Elementor's typography controls.

Icons 🔗

• Font Awesome — bundled with Elementor
• Themify Icons
• Custom SVG icon sets drawn in-house for individual themes

Images 🔗

Demo photography is licensed for demo use only and is not included in the theme package. See Images & Demo Content.

• Pexels
• Pixabay
• Unsplash
• unDraw

Scripts & Libraries 🔗

• Elementor — page builder
• Swiper — sliders and carousels
• Isotope — filterable grids
• MetForm — form builder
• Rank Math SEO — SEO
• WooCommerce — e-commerce

Thank You 🔗

Thank you for choosing StrivioThemes. We hope this documentation answers everything you need. If it does not, we would genuinely like to know — both so we can help you, and so we can improve this guide.

Support: support@striviothemes.com
Website: striviothemes.com