ThemeForest Beautispa - WordPress Theme

ThemeForest Beautispa Elementor Template Kit Setup Guide

This guide to ThemeForest Beautispa will help you prepare WordPress for the kit import, build a cohesive site for a salon or spa, configure its pages, header, footer, and forms, and check the public-facing site before launch. We’ll focus on the Elementor kit workflow, from a clean test environment and its dependencies to a real-world setup with services, booking, a team page, and contact information.

ThemeForest Beautispa is not a standalone WordPress theme. It’s a collection of ready-made Elementor layouts. That distinction shapes the entire setup process. Your theme still provides WordPress with its basic framework, while the kit supplies designs for pages and site sections: the home page, service pages, booking, reviews, FAQs, blog, contact page, header, and footer. So the outcome depends on more than a single import button. You’ll need to connect the imported layouts to your menu, static pages, images, forms, and the settings of your existing site.

Beautispa has a distinctive design language: a soft cream background, a deep teal-green accent, refined headline typography, large service photos, and plenty of space between sections. In the demo’s upper section, a slim green announcement bar sits above a light logo row and understated menu. Below that are a large hero section and a service grid. There’s no need to copy every phrase or photo. Preserve the visual hierarchy, and replace the salon’s demo content with your own.

What the kit handles and what WordPress still handles

Beautispa is useful for a studio owner, marketer, or site builder who needs a cohesive service-business website without designing every page from scratch. The kit provides layouts for an introduction to the salon, service lists and individual service pages, specialists, reviews, pricing, FAQs, locations, booking and subscription forms, and more. That page map matters more than the number of files: it can guide visitors from their first impression to choosing a treatment, understanding whether it’s right for them, finding a way to get in touch, and submitting a request without making the site feel like a collection of unrelated pages.

The kit doesn’t supply your business information, though. It doesn’t know how long treatments take, what your cancellation policy is, where you operate, when your specialists are available, what consent is needed to process booking requests, or where notifications should go. And don’t assume the demo photos are cleared for ongoing commercial use just because they appear in the preview. The kit description notes that demo images require a separate license or should be replaced with your own. Prepare your content first, then add it to the layouts. That way, you won’t end up with an attractive but empty storefront.

WordPress is still where you create pages, set the home page, manage permalinks and content, and control users. Elementor provides the visual editor and the imported template library. Beautispa lists Elementor, ElementsKit Lite, Gum Elementor Kit, and MetForm as dependencies. Don’t take that list as a reason to enable everything on your live site. Treat it as a list of dependencies the layouts may expect: first check which widgets the imported pages actually use, then keep only the add-ons you need active.

Practical rule: Start by importing Beautispa to a site copy or test domain. The kit may add pages, templates, and settings, so a test environment gives you room to replace demo content, test the form, and start over if needed without putting real customer inquiries at risk.

Who this site structure works for

The kit is best suited to service businesses where visitors need to get a feel for the business and its specialty, compare treatments, learn the details, and then book. That could be an aesthetics practice, facial-care studio, massage salon, upscale hair salon, spa, or small wellness business. The service, review, team, location, and booking sections support that visitor journey. If your business offers several types of services, use each service page to explain the outcome, duration, preparation, and how to get in touch, rather than repeating the price list.

The kit may not be a good fit if you need a complex store with a large catalog, a customer account area, medical records, synchronization with a proprietary scheduling system, or many regional versions. Beautispa could still serve as the site’s public-facing layer, but you’ll need to choose the core functionality separately and check compatibility. Be especially careful with claims of "online booking": a booking page or form doesn’t mean the kit includes a calendar with available time slots. Decide whether you only need to collect requests or need full scheduling with availability and notifications.

Which pages to plan before importing

Before you upload the archive, sketch a simple map of the site you want to build. Beautispa includes templates for Home, About Us, Service List, Service Single, Booking, Booking Form, Our Team, Review, FAQ, Locations, Contact Us, Our Blog, Single Post, Pricing, Header, and Footer. You don’t have to publish them all. A compact site with complete pages looks stronger than a menu of ten links leading to demo content.

• Home page: A clear promise, key services, a credible sign of quality, and a sensible next step.
• Service pages: Who each treatment is for, what it includes, how to prepare, what happens after an inquiry, and how to ask a question.
• Team and trust: Real specialists, their experience, and ways to get in touch, without unsupported medical claims.
• Booking and contact: A path to submit a request, business hours, location, privacy information, and a clear backup way to get in touch.
• FAQ and blog: Include these only if someone can keep the answers and posts up to date.

This map also works as an editorial filter. If a section doesn’t help someone choose a service, understand the terms, or contact the salon, you can leave it out of the initial import. It’s easier to launch a small but complete visitor journey first, then add pages after reviewing inquiry patterns and the questions people ask your administrator.

How to approach the steps in this guide

We’ll look at four layers separately: WordPress readiness, importing layouts, customizing them in Elementor, and checking the published site. This helps prevent common mix-ups. A missing header, for example, may mean the global template hasn’t been assigned, not that the page is broken. A form that doesn’t work may be missing an email recipient, not a button color. And a mobile layout that looks uneven may need a few spacing values or column positions adjusted, not a complete rebuild of the kit.

Don’t edit the demo layouts during the import process. First finish the import, create or rename the pages you need, assign the header and footer roles, and save a restore point. Only then start filling in the pages. This order makes your changes reversible and helps you pinpoint when an unwanted change appears.

Prepare WordPress before importing Beautispa

The most common mistake with an Elementor template kit is treating its archive like a regular theme and trying to use it to replace all of WordPress. Beautispa requires a working WordPress site, a compatible base theme, Elementor, and administrator access. The exact import steps depend on what’s included in the archive and on the method specified by the kit provider. The product page explicitly says this is not a WordPress theme and that the kit is installed using the Template Kit Import plugin for WordPress or Elementor’s own tools where the format allows it. If you see a format error, don’t keep trying to upload the same file through unrelated dashboard sections. First match the import method to the instructions for that specific archive.

Before any import, back up your files and database or create a test copy. This isn’t a formality. An import may add templates, pages, styles, and demo content, and it’s almost impossible to restore the previous state from memory. On a live site, also note your active plugins, current home page, and menu assignments. Then you can compare the site before and after testing instead of guessing what changed.

Minimum technical requirements

Start with an up-to-date WordPress installation, the current version of Elementor, and a standard theme that doesn’t impose its own heavy visual builder. Individual Elementor pages often need a layout without a sidebar or with full width enabled. This matters for Beautispa: its hero section and service cards are designed for a wide layout, so a theme’s narrow fixed-width container can throw off the spacing before you change a single setting.

Check that the server supports ZIP archives and has enough memory and request execution time. Elementor’s official help associates a blank page during import with environment limits, file permissions, disabled ZipArchive, or a memory limit that’s too low. If a large import times out, don’t raise server limits blindly based on a public guide. Give your host the exact symptom and error log. On a test site, you can also import the kit in parts if your import tool lets you choose content types.

Decide how you’ll handle images upfront. When replacing the hero photo, choose an image with enough open space for text, then check its crop on both wide and phone screens. In the demo, attention is shared between an atmospheric photo, a large headline, and a restrained button. A random portrait inserted into the same container may pull too much focus or leave the text without enough contrast. Rather than matching the original image file’s shape, match the role it plays in the layout.

Kit dependencies and activation order

The Beautispa product listing names Elementor, ElementsKit Lite, Gum Elementor Kit, and MetForm. Elementor builds the pages; the other add-ons may supply specific widgets, global sections, and forms. Install them from a trusted source, activate them on a test copy, and only then import the templates that depend on them. If you’ve already imported the kit and see a blank area or a notice that an element is unavailable, don’t immediately replace it with a similar widget. First identify which plugin provides the missing element. Replacing it at random can change the layout, behavior on narrower screens, and button styling.

In this kit, ElementsKit Lite is mainly needed for the header and footer setup described by the developer. The steps start at ElementsKit > Header Footer: create a new template, turn on the Activate/Deactivate switch, then insert the imported section from My Templates. Don’t confuse this with editing the content of each page. The global header should be assigned once and have clear display conditions. Otherwise, visitors may see different menus on the service and booking pages.

MetForm is used for form layouts. A polished Booking Form section doesn’t guarantee that the form is connected to the right recipient. The kit’s documented form setup starts by opening a page in Elementor, finding the MetForm widget in the Navigator, selecting Edit Form, creating a blank form, opening My Templates, inserting the imported template, and saving with Update. Button labels may differ slightly in your installation, so follow the intent of each step. Don’t change the form on a published page before testing it.

Why you shouldn’t publish demo content

The Beautispa demo uses photos, service names, and copy to set a mood. Those aren’t your medical, legal, or business details. Before publishing, replace the brand name, logo, phone number, email, address, business hours, social links, form sender name, and all background images. Pay particular attention to the Error, Footer, Header, Questions Form, and Subscription Form pages and sections. They’re easy to overlook in an initial review, so they’re common places for someone else’s contact details or empty links to remain.

If your salon offers treatments with medical considerations, have a qualified professional review the wording and check local requirements. A service page can explain the general steps involved in making an inquiry, but it shouldn’t promise a guaranteed outcome or replace a consultation. Likewise, a booking form should collect only the information needed for an initial contact. The fewer unnecessary fields it has, the easier it is to test delivery and explain what happens after submission.

A safe import sequence

1. Create a test copy and note the current home page, menu, and active add-ons.
2. Install Elementor and only the dependencies listed for the kit, if the templates you plan to import actually need them.
3. Upload the archive through the importer recommended for its format, not through the theme installer.
4. Wait for the import to finish, then check the template library, created pages, and any notices about missing widgets.
5. Import the core sections and one page first, then bring in the remaining layouts if the tool supports selective imports.
6. Don’t set an imported page as the home page until you’ve replaced the demo content and checked the layout at several screen widths.

At this point, you don’t have a finished website, but you do have a controlled foundation. Next, turn the template library into a clear page structure while preserving the global styles that make the kit feel like a unified design system.

Set up your design system before editing pages

Beautispa feels cohesive not because every page uses the same photo, but because its header, headings, buttons, service cards, and footer reuse the same design choices. The demo shows this in its light background, muted green accent, refined large headings, and clear rectangular buttons. If you customize each page separately, the home page, booking page, and contact page may soon look like three different sites. After importing the kit, establish a few shared rules before you start filling in the layouts.

Open one imported page in Elementor and hold off on editing the text. Note which values repeat: the primary button color, neutral background, body text color, heading font, card radius, vertical spacing, and link style. Then decide which belong in Elementor’s global settings and which should remain specific to an individual section. Brand colors and the primary typeface usually belong in one place. A soft background used only for the review section or a special hero photo are local choices, not global rules.

What to preserve in Beautispa’s design

The top of the original layout uses a calm contrast: a slim colored bar, light navigation, a large hero image, a transparent overlay to keep the text readable, and then a transition to treatment cards. Preserve that order of attention. Visitors should understand what the salon specializes in within seconds, see where to go next, and find evidence that it offers specific services. If you replace the hero with a five-image collage, add several flashing buttons, or place the menu over a busy background, you may keep the section names but lose the purpose of the design.

You can adapt the palette to your brand, but avoid replacing it with a collection of unrelated bright accents. Choose one primary action color, one light background, one dark text color, and one or two secondary neutral shades. Check the contrast of buttons and text on more than a desktop preview. A photo with a dark area may work well in the hero but make a small card caption hard to read. In that case, change the caption background, add a subtle dark overlay, or choose another photo rather than increasing the size of all the text indiscriminately.

Typography needs the same discipline. The demo’s large decorative headings convey a premium feel, but a long service name in another language can take up twice as much space as a short English phrase. Don’t shrink it until it’s hard to read just to keep it on one line. Shorten the heading, move the clarification into a subheading, or allow a clean two-line wrap. Body copy and form fields, on the other hand, need to be practical: visitors are reading terms and entering their contact details, not studying the composition.

Global sections: header, footer, and page assignments

Think of the imported Header as a site-wide section, not a block you need to add manually to every page. If you’re using ElementsKit Lite as described for the kit, create a new entry at ElementsKit > Header Footer, give it a clear internal name, enable it, open the content editor, and insert the appropriate template from My Templates. Before publishing, check the display conditions: the same template should be assigned to the pages that need the same top navigation.

If Elementor Theme Builder is available on your site, you may be able to manage global sections there. Don’t use both systems without a reason. Choose one method for a given header and footer, note it in your project’s technical documentation, and check which template is actually being displayed. Two active templates can create duplicate headers, an extra footer, or unpredictable differences between pages. Don’t hide a duplicate with CSS. Find where each template is assigned and remove the extra assignment.

The Beautispa header menu should support the visitor’s service-selection journey. For a small site, links to the home page, services, about the salon, team or reviews, contact page, and booking are usually enough. Don’t publish Our Blog, FAQ, or Locations menu items if those pages still contain demo content. The header button can lead to the booking page or a form anchor, but its label and link should work consistently across screen sizes. After saving, open the menu in a new private window to rule out the effects of administrator access and the editor cache.

When to use a full-width page layout

For the home, service, and booking pages, an Elementor layout will often need to use full width or at least avoid a sidebar added by the theme. Open the settings for the page and choose an option provided by your theme, such as Elementor Full Width. The label matters less than the result: the header doesn’t conflict with the canvas, the hero section isn’t squeezed into a narrow container, and the footer doesn’t appear twice. Try the setting on one test page, save it, and compare it with the same template in the default layout. Choose the option that gives you predictable rendering without hiding elements through CSS changes.

How to make sure visitors can find your pages

After importing, WordPress may create pages as drafts, publish them with temporary names, or leave them out of the menu. Check Pages: every page you plan to use should have a meaningful title, a correct permalink, an assigned author if needed, and a clear status. Then set the home page in Settings > Reading, but only when it’s ready. Don’t point the global booking button to a test page too early, or real visitors may end up on an unfinished form.

Order for replacing content on an imported page

Work from top to bottom, one content layer at a time. First replace the logo, navigation, and contact details in the header. Then update the hero text, button, and background image. After that, edit the service cards, trust section, reviews, team section, booking call to action, and footer. This order lets you review the page as a visitor after each step. If you start by changing dozens of small text fields across Elementor tabs, demo content is more likely to slip through and it becomes harder to review your work.

Keep each service card focused on one thing: a short name, a clear description, an obvious next step, and, if needed, a link to a detailed page. Don’t turn a card into an advertisement, price list, set of instructions, and FAQ all at once. That’s what Service Single is for. Its page can explain who the treatment is for, any relevant restrictions, how to prepare for a visit, and how to contact the salon. The home page can then serve as a guide instead of becoming a wall of text.

Reviews, team details, and locations need real content. If you don’t have evidence or permission to publish a review yet, it’s more honest to hide the section than to leave generic phrases and photos of people you don’t know. Use only verified information for addresses and business hours. Map links, phone numbers, and booking buttons should go straight to the right destination. Before saving the page, click Update, open a preview, and compare it with a new browser window without the Elementor panel.

Quick recap: At this point, you’re not just decorating pages; you’re building a manageable system. Shared rules create a consistent look, while individual layouts support a specific visitor journey. If the browser view doesn’t match the editor, first check the template assignment, page width, and cache rather than rewriting a section you’ve already refined.

Set up key pages and forms after importing

Once the page structure and global sections are in place, it’s time to turn the kit into a website for a specific salon. Work from the visitor’s questions, not the list of files. On the home page, they’re asking, "What kind of place is this, and which treatment might I need?" On a service page: "What does it include, how should I prepare, and how can I ask a question?" On the booking page: "How do I share my contact details, when will someone reply, and what happens to my information?" Each Beautispa template has a design purpose, but it needs real answers, not just a few word changes in demo paragraphs.

Make the home page a path to booking

Open Home in Elementor and first map the sections in the order visitors will see them. In the supplied example, a large hero section follows the header, then comes a heading about comprehensive services and a grid of treatment cards with photos, numbers, short descriptions, features, and buttons. This sequence works when the hero text explains the main specialty and the grid below turns that promise into a clear set of choices. The top of your page should name the salon or explain the type of help it offers, not repeat a vague phrase like "beauty and care."

Choose a call to action that fits how your business works instead of using one generic button. If an administrator needs to clarify details first, direct visitors to a short inquiry form. If your schedule is available through a separate service, the button can take them there safely. If online booking isn’t set up yet, don’t create a calendar with time slots that don’t exist. Link the button to a form that clearly explains when they can expect a reply. After changing the link, check it on the published copy of the page, not just in the editor.

If three or four services get most of the inquiries, focus the card grid on those. Give each card a photo, a short title, one or two outcomes without medical guarantees, and the same kind of call to action. A card that leads to a dedicated page needs a working link. One that opens a form needs to point to an existing anchor or page. Visitors notice inconsistency: the first card teaches them what to expect from the rest.

Service pages: turn polished sections into useful explanations

Fill in the Service Single layout using a repeatable structure. Start with the service name and the reason people seek it out. Then explain what a typical visit includes, what information you need for an initial inquiry, who may need to check something in advance, and how clients can contact the salon. If the details depend on the specialist or the client’s situation, be clear about the limits: a qualified professional makes the final decision after a consultation. This helps avoid promises the page can’t support.

Don’t turn a service page into an endless price list. If prices change often or depend on other factors, explain how they’re calculated and provide a button to ask for details. If your prices are fixed, decide who will keep them current after publication. In Elementor, build one card with a verified structure, then copy that structure and replace the link, image alt text, and content. This keeps the service list consistent without duplicating pages.

Content to replace first

• Photos: Replace demo images with licensed assets or your own photos, and make sure you have the right to use them.
• Button labels: Name a specific action, such as requesting a consultation, choosing a time, or learning more about a treatment.
• Contact details: Check phone numbers, email, address, messaging app, and business hours in the header, footer, and contact page.
• Social links: Remove empty links and include only channels you actually maintain.
• Legal information: Add the required consent text and a link to the relevant privacy policy next to forms, if your process requires them.

Set up the booking form with MetForm

An imported form layout is only the starting point. Beautispa includes templates for Booking, Booking Form, Questions Form, and Subscription Form, so decide what each one is for. Don’t put four identical forms on the site. One could collect booking inquiries, another could collect questions before someone chooses a service, and a third could handle signups for useful updates. Different purposes call for different fields, recipients, and post-submission messages.

To connect the form layout, open the page in Elementor, find the MetForm widget in the Navigator, and choose the form editing option. The setup sequence specified for this kit is to create a blank form, open My Templates from the gray folder icon, select the imported template, and click Insert. Once the form fields appear, save the form and return to the page. It’s easy to assume everything is working at this point: Elementor will show a polished form even if email delivery isn’t configured or the recipient field is wrong.

Keep only the fields you need: name, preferred contact method, selected service or inquiry topic, and an open comment field. Add a date field only if you can treat the date as a preference rather than a confirmed appointment. Don’t hide extra promises in the consent text. Visitors should understand that they’re submitting an inquiry, how you’ll contact them, and where to read about how their contact details are handled. The success message should be specific too, such as explaining that the inquiry was received and the administrator will reply through the selected channel.

Three checks every form needs to pass

1. Field validation: Leave a required field empty, enter an invalid address where one is required, and check that the prompt is clear and stays visible long enough to read.
2. Email delivery: Submit a test request from a new browser window and confirm it reaches a real address you can check. Don’t rely only on the message shown on the page.
3. Phone usability: Fill out the form at a narrow screen width. Check the keyboard, button visibility, and whether the consent text is cut off.

If the email doesn’t arrive, first note the exact time of the test, the recipient address, and the message shown on the page. Then check the form’s notification settings, the recipient’s inbox, and WordPress email configuration. Don’t replace the form with another builder just because the email didn’t arrive. The cause is often in the site’s or host’s email delivery. Until it’s fixed, provide a backup contact method near the form, but don’t present that as a fix.

Set up the header, footer, and mobile menu

After the form, review the global sections. In the header, check the logo against contrasting backgrounds, the depth of the menu, the active link state, and the booking button. Don’t use a logo that’s readable only on light backgrounds if some pages place the header over a photo. In the footer, include brief contact details, links that actually work, and a clear path to the privacy policy. The footer doesn’t need to duplicate the main menu; it should help visitors find their way after scrolling down the page.

At mobile widths, it’s not just a matter of scaling things down. Open Elementor’s responsive preview and check the column order: the main heading and call to action should come first, followed by the image or other secondary detail. For service cards, choose a layout that keeps the title close to the button and doesn’t make the photos too tall. Don’t reduce every margin and padding value to zero. Open space is part of Beautispa’s design, but it should leave enough room for reading and tapping.

Check the page: When the home page, service page, form, header, and footer are ready, a visitor should be able to answer three questions in a minute: what the salon does, which service to choose, and how to get a response. If they have to search the whole site for contact details, keep refining the structure instead of adding another decorative section.

A practical example: launch a skincare studio site without empty pages

Imagine a small studio that offers facials, massage, hair care, and relaxing spa treatments. It doesn’t need a complex online store, but it does need a site that explains its services, conveys the atmosphere, helps visitors choose a treatment, and collects inquiries. Beautispa suits this use case because its demo kit includes coordinated service, team, review, FAQ, booking, contact, header, and footer layouts. The steps below aren’t the only way to use it; they’re a safe way to turn those starting points into a small but functional website.

Goal and preparation

The goal is a home page with four service categories, two detailed pages for the most popular treatments, a contact page, and one inquiry form. Before you start, prepare short hero copy, photos you have the right to use, real contact details, business hours, the name of the inquiry recipient, a link to your privacy policy, and a service list. For each category, write one sentence that explains the client’s need rather than an abstract benefit. For example, instead of "premium care," explain that the page covers what the treatment includes and how to ask the administrator a question.

On the test site, import only the layouts needed for this journey: Home, Service List, two copies of Service Single, Booking or Booking Form, Contact Us, Header, and Footer. Don’t rush to delete the review, team, FAQ, and blog layouts, but leave them unpublished until you have real content. This reduces the risk of demo names and photos showing up in the menu.

Step 1: Build the home page one section at a time

On the Home page, start with the hero. Replace the logo, background photo, main heading, subheading, and button link. Make sure the heading fits at a phone-width screen size and the button leads to the booking page. Don’t crowd the hero with competing calls to action. If you have an important seasonal offer, place it in a separate section below and include an end date only if you’re ready to update the copy on time.

Next, set up the service grid. Keep the structure of the demo cards: image, number or visual marker, title, concise copy, and action. Order the four categories according to your actual inquiries. Don’t list a treatment if there’s no specialist available to provide it or no description ready. Each button should lead either to the corresponding detail page or to a general form with the inquiry topic selected. After replacing each link, check it in the preview, because Elementor may not display an invalid permalink the same way the published site does.

Add one trust section below that you can substantiate: a brief explanation of your approach, real photos of the space or team, a review you have permission to publish, or a clear explanation of the first contact. You don’t need to fill every section in the kit. Aim to keep the page moving in a clear sequence: promise, service choices, evidence of trust, action. When you add a section, ask whether it helps visitors feel more certain about what to do. If it doesn’t, keep more open space and preserve Beautispa’s calm rhythm.

Step 2: Turn one service layout into a repeatable standard

Open the first Service Single layout and set the page URL. Update the cover image, title, and short description. Then add a "Before you contact us" section with real details, such as a request to share a question in advance or check appointment availability. Add a "What happens next" section that promises only what your team can deliver. Finish with a button to the form. Don’t copy diagnostic or medical wording onto the page unless it applies to the service and has been reviewed by a qualified professional.

After completing the first page, duplicate it for the second service and update more than the visible heading. Check the browser title, permalink, image alt text, button links, and the content in each section. If these elements stay the same, visitors may feel they’re looking at duplicate pages, and search engines and editors will see nearly identical content. Reuse the order of the explanation, not the same wording.

How to check that a card links to the right page

Open the home page as a regular visitor, click each service button, and make sure the page shows the right title, image, and call to action. Use the browser’s Back button: the page should return to a predictable position, and the menu should remain consistent. Then open the detailed service page in a new private session. If you get a 404, check the page’s status and permalink in WordPress, not just the URL shown in Elementor.

Step 3: Make the form part of the visitor journey

Place the form near the top of the booking page, with one or two sentences beforehand explaining what happens after submission. For a studio, name, contact details, selected service, and a comment should be enough. Don’t collect a birth date, unnecessary personal details, or information the administrator won’t use. If a visitor chooses a service on a card, you can pass that choice into the page copy or provide a clear selection field. Don’t present a prefilled topic as a confirmed booking.

In MetForm’s settings, create a notification for one or more responsible recipients, then test it with an address you can check. Submit a request from both a computer and a phone. If the form clears after submission but no email arrives, it hasn’t passed the test. Save the exact test details, check the spam folder, review the recipient settings, and verify the site’s email delivery. The public page should report the actual status: show "Request sent" only after the form handler returns a successful response.

Step 4: Assign the menu and home page

Once the pages are ready, create a WordPress menu using the published pages. Order the links to support a practical visitor journey: Home, Services, About the Studio or Team, Contact, and Booking. Give the header button its own purpose instead of using it to duplicate every menu item. Then set the home page in WordPress’s Reading settings. Open the site’s root URL in a private window. If you see a post archive or the old home page instead, fix the assignment in Reading settings rather than trying to solve it with a link inside Elementor.

Step 5: Check responsiveness as a visitor would

Elementor’s responsive mode is useful for a first look, but it doesn’t replace checking the site in a real browser. Start with a wide screen: the header shouldn’t overlap the hero text, service-card images should have consistent heights, and buttons should look like actions of the same priority. Then check tablet width. Columns often feel cramped there, even when they look fine on a phone. Finally, test on a phone, paying attention to section order, tap target size, contrast, and horizontal scrolling.

At narrow widths, don’t try to preserve every decorative detail from the original layout. Keep the heading, key copy, well-cropped photo, and button first. Secondary icons, long lists of benefits, and decorative spacing can be reduced or hidden if they get in the way of reading. Hide a section intentionally; don’t let it disappear accidentally because of a device setting. After making a change, check the desktop layout too, since Elementor’s values may not inherit the way you expect.

What counts as a completed setup

The setup is complete when you have more than imported pages: you have a cohesive public-facing journey. The home page has a clear offer and service categories. Every active card leads to the right page or form. The header and footer are consistent wherever they should be. The contact details are real, the form delivers a test request, and the site is readable on a phone. Only after checking those things should you move on to other Beautispa templates, such as the team page, reviews, FAQ, and blog.

Quick recap: You don’t need to publish every layout in the kit at launch. Start with a complete path from home page to service to inquiry to response, then expand with real content. This keeps visitors away from empty pages and makes the site easier to maintain.

Troubleshoot imports, global sections, and forms

With Elementor kits, problems usually show up as a specific symptom rather than one general error: the imported page is blank, some sections look different, the header is duplicated, a button doesn’t lead to the form, or an inquiry never arrives. It’s more effective to trace the cause from the symptom to the relevant layer than to reinstall plugins and import the archive again at random. First note the page, device, and action that trigger the issue. Then check the last step you took before changing a setting.

The import stops or produces a blank page

Symptom: The process doesn’t finish, the page remains blank, or the imported kit doesn’t appear in the library. Possible causes: not enough request execution time or memory, missing ZIP support, file permissions, or the wrong import method. When an import produces a blank result, Elementor recommends checking ZipArchive, the memory limit, server error logs, and the editor’s loader method.

What to check: First confirm that you’re using the right importer for the kit format. Don’t assume every Envato kit should be uploaded through an Elementor menu item: Elementor’s help notes that Envato kits may use a different packaging method. Next, check your hosting control panel’s error log or ask your host to review execution time and server limits. If the tool supports selective imports, separate the core templates from the content and import them in two stages. That’s more useful than retrying the entire process several times.

How to fix it: Address the environment limit or import in parts on a test copy, then check the library. When to roll back: If the import has already added incomplete templates and you can’t confidently identify their state, restore the test copy from a backup instead of trying to delete unknown internal records by hand. Move only a repeatable, successful process to the live site.

A page shows an unfamiliar widget or broken layout

Symptom: A section is missing, a notice says an element is unavailable, cards lose their formatting, or a form becomes a blank area. Cause: The add-on that provides the widget isn’t active, or the kit was imported before its dependencies were installed. For Beautispa, check Elementor, ElementsKit Lite, Gum Elementor Kit, and MetForm. Don’t install other extensions with similar names at random.

What to check: Open the affected page in Elementor and identify the missing widget. Compare it with the kit contents and its documentation. Check whether the required plugin is active and whether an optimization tool is blocking it. Once the add-on is enabled, clear the site cache and reopen the page in a new window. How to fix it: Install only the confirmed dependency, update the page, and compare it with a working test copy. When to roll back: If enabling the add-on breaks a significant part of the site, deactivate it, restore the backup, and ask the kit provider or support team which version is compatible.

The header or footer appears twice

Symptom: A page shows two menus, the footer is repeated, or the imported header appears on only part of the site. Cause: The global section is assigned through the theme, Theme Builder, and ElementsKit at the same time, or the template was inserted into the page itself instead of assigned globally. What to check: List every active header and footer template, its display conditions, and the pages where it’s used. View the page in a new window without the admin bar.

How to fix it: Use one system and one clear assignment for each global section. If the header is meant to be global, remove any manual copy from the page content. Then clear the cache and check the home, service, contact, booking, and error pages. When to roll back: If changing the conditions removes navigation across the site, restore the previous working assignment and test changes one at a time. Don’t hide the second section with CSS; that workaround often breaks after an update.

The form looks right, but the email never arrives

Symptom: Visitors see a thank-you message, but the recipient never receives the inquiry. Cause: The notification address is wrong, WordPress email delivery is failing, a mail filter is involved, or the form settings weren’t saved. What to check: Test from a private window, note the time and address entered, check the spam folder, and compare the form notification settings with the address that should receive the inquiry.

How to fix it: Correct the notification settings, check the site’s email configuration, and run another test. If sending email requires technical work, ask the site administrator to handle it rather than changing the form’s markup at random. When to roll back: If a new setting causes a submission error on the page, restore the last working configuration and provide a clear backup contact while you continue troubleshooting.

The mobile layout changes the order or cuts off text

Symptom: An image covers the heading, a card gets too narrow, a button runs past the edge, or horizontal scrolling appears only on phones. Cause: Inherited spacing values, a fixed width, the wrong column order, or longer localized text. What to check: Open Elementor’s responsive mode, then repeat the check in a real browser. Look at neighboring sections too, not just the affected block: the source of horizontal scrolling may be above or below the visible area.

How to fix it: Replace a fixed width with a flexible value, adjust the column order, reduce secondary decorative elements, and check how the heading wraps. When to roll back: If a local change makes the desktop layout worse, undo it and set the value only for the screen width that needs it. Don’t remove key copy just to make the layout symmetrical.

Troubleshooting principle: Change one layer at a time. Start with the environment and import, then check dependencies, global templates, forms, content, and responsive settings. That helps you find the cause without creating a new problem on top of the old one.

Check quality, speed, and safe customizations

A polished template doesn’t prove the site is ready to use. Before publishing, test ThemeForest Beautispa as a visitor journey: someone arrives on the home page, sees what the salon specializes in, opens a service page, understands what to do next, submits a form, and can expect a response. For this review, make a page checklist and go through it in two modes: as an administrator who can edit content and as a new visitor without a cache, account, or knowledge of the site’s internal structure.

Check the site before moving it to the live domain

Start in a private window. Open the root URL, every header link, each button in the hero section, the service cards, the form, and the footer links. Watch for four kinds of problems: demo copy or contact details, a button leading to a 404, different headers on different pages, or no response after form submission. Then repeat the journey on a phone or at a narrow screen width. On a phone, the most important things are access to the menu, readable headings, tappable buttons, and fully visible form fields.

Check the Error page if you plan to use it. Someone who reaches a nonexistent URL should see a calm message and a way back to the services or home page, not a demo page with another brand’s name. Check search results too if your theme or plugins display them in a separate template. Beautispa includes ready-made designs, but how they’re applied depends on your base theme and Elementor settings. Don’t assume every system page has been replaced until you’ve checked it on your own site.

You don’t have to strip away the kit’s design to improve speed. Start with the assets you control: resize uploaded photos to match their containers, use modern formats where supported, don’t add video just for movement, and keep inactive any plugins the published site doesn’t use. After each optimization, open the public page and check that the important images, form, and menu still look right. A cache may show an old version, so check in a new window after clearing the caches your site uses.

A small, reversible change to improve button contrast

If the text on the hero or service-card buttons loses contrast after you change the background or brand color, first try to fix it in Elementor. Set the text color, background, and hover state for the individual button. If you need to give only specific call-to-action buttons a consistent look, a small CSS change may be appropriate in a child theme or in the custom CSS area provided by your setup. This uses standard CSS, not an undocumented feature of the kit.

First, add the separate class beautispa-action to the appropriate Elementor button in its advanced settings. Don’t apply it to every button on the site if one of them triggers a deletion or starts checkout in another section. Then add the following code in a safe location for custom CSS, such as the one provided by your theme or child theme:

.beautispa-action {
  background-color: #0b8077;
  color: #ffffff;
  border: 1px solid #0b8077;
}

.beautispa-action:hover,
.beautispa-action:focus {
  background-color: #08665f;
  color: #ffffff;
  border-color: #08665f;
}

After saving, check the default state, mouse hover, and keyboard focus. The colors are an example of a muted green palette close to Beautispa’s demo style, not a required color scheme. If your brand uses other shades, change them and check the contrast again. To roll back, remove the class from the button or delete the CSS block. Don’t edit Elementor files, the theme, or the kit archive directly. Updates can overwrite those changes and make the site harder to maintain.

Maintain the site after launch

After publishing, keep a brief maintenance log: who updates the service descriptions, who receives inquiries, how photos are refreshed, who checks links after plugin updates, and where the backup is stored. For a small salon, it’s enough to review the home page, a service page, the form, and contact details once a month as a regular visitor would. After updating Elementor or its dependencies, repeat the same journey on a test copy first. No kit can be guaranteed to work the same way with every combination of theme, cache, and add-ons; safe maintenance means checking your specific site.

If you’re building a blog, use the Our Blog and Single Post templates only if you have a publishing plan. Useful articles can answer real questions about treatments, explain how to prepare, or clarify the terms of an inquiry. They shouldn’t repeat the service cards just to add more content. If you’re not maintaining a blog yet, leave it out of the menu. The same applies to the team, reviews, and location pages: add them when you have verified content, and keep their fonts, photos, and buttons consistent with the rest of the site.

When ThemeForest Beautispa is a good fit

Choose ThemeForest Beautispa if you need an Elementor kit with a ready-made structure for a salon, spa, or wellness studio, and you’re prepared to replace the demo content carefully with your own. Its strength isn’t just one attractive home page, but a coordinated set of service, form, contact, team, review, FAQ, header, and footer templates. The kit can speed up your work if you prepare the environment first, assign the global sections, map out the visitor journey, and test every active step.

If this matches your needs, the next safe step is to download ThemeForest Beautispa, set it up on a WordPress test copy, and follow the minimal journey in this guide. Don’t try to publish everything in one evening. First make sure the home page, service page, and form answer people’s real questions. Then expand the site with sections your team can maintain, both editorially and technically.