ThemeForest Solid - WordPress Theme

A Guide to Implementing ThemeForest Solid for a Roofing Company Website

This guide to ThemeForest Solid will help you prepare WordPress and Elementor for kit import, build a clear home page for a roofing service, configure global styles and navigation, and then test the public-facing site using a real inquiry. We will cover the path from a clean installation to a page where visitors can see the relevant service, trust the proof of work, and understand how to request an inspection or estimate.

ThemeForest Solid is not a standalone WordPress theme or a complete company website with a populated customer database. It is an Elementor Template Kit: a collection of coordinated layouts for a roofing repair, replacement, and maintenance website. That distinction shapes the entire workflow. First, the site needs an environment where the kit can run correctly; then you import global styles and the required templates; finally, you replace demo text, images, and contact details with the company’s real information.

The main risk with a kit like this is not the editor itself, but expecting an instantly finished website. The demo already has a strong composition: a close-up dark roof, a light content area, a red accent, a direct call to action, and trust-building sections. But visitors to an actual company website need different proof: service areas, types of work, crew photos, a clear contact method, legal information, and honest visit terms. What matters most is not mechanically replacing the words, but preserving the way the service is presented.

This guide is intended for a small service-business owner, marketer, Elementor specialist, or agency that needs to launch a landing page quickly without losing control over the content. If you need a complex portal with customer accounts, custom estimates, a product catalog, or a large number of bespoke integrations, a Template Kit does not remove the need for separate architecture and development. Its sensible role is to speed up the creation of a visual foundation and repeatable service pages.

What the Solid Kit Provides and Where It Adds Value

The value of Solid goes beyond a single above-the-fold section. The product page lists more than sixteen templates, including a home page, service pages, projects, pricing, an about page, workflow, testimonials, contacts, a header, a footer, and several forms. This means the kit provides a consistent page language: visitors see the same buttons, spacing, cards, and contrast between work photography and text whether they arrive on the home page or a specific service page.

For a real roofing company website, that consistency solves a practical problem. Ads, business listings, referrals, and search results often lead visitors not to the home page, but directly to a repair, inspection, or roof-replacement page. If each page is built separately in a different style, it becomes harder for people to understand that they are still on the same website and feel confident submitting an inquiry. Solid provides a repeatable framework: the page hero explains the service, followed by reasons to get in touch, work stages, examples, social proof, and the next step.

Tasks You Can Cover with Ready-Made Pages

The kit is especially useful when services share a similar structure but differ in content. For example, a company may need separate pages for local repairs, pre-purchase inspections, full roof replacement, emergency visits, and scheduled maintenance. Instead of building five disconnected landing pages, you can use one visual system and adjust the heading, short explanation, image, work list, trust section, and inquiry form for each service. It is faster, but more importantly, it reduces the chance of forgetting an important section on one of the pages.

• The home page helps explain the company’s specialty, present the main call to action, and guide visitors toward services.
• Service pages work well for describing repairs, inspections, replacements, and preventive maintenance separately without mixing different visitor intents.
• Projects and testimonials provide space for evidence: the property type, the original issue, the work completed, and a clear outcome.
• Contact templates and forms make the path to an inquiry visible without forcing users to hunt for a phone number in the footer.

That said, a ready-made grid should not dictate the business process. You do not have to keep every suggested page or section. If the company does not publish prices before an inspection, the pricing page should be reworked into an explanation of the factors that determine an estimate. If there are not enough verified cases, do not fill the projects section with fictional properties. The layout can serve as a presentation format, but the content must remain verifiable and match the actual service.

Who Solid Works for Without Major Rework

The kit works best for a local service company that has already defined its services, cities or areas served, contact channels, and the person responsible for the copy. It also suits a contractor launching a new site who first wants a clear page structure and then plans to gradually add original photos and detailed work stories. In these situations, Elementor’s strength - visually editing sections without manually changing markup - genuinely shortens the path from a draft to a verifiable public page.

For an agency, Solid is convenient as a starting point for several subpages within one project. It is important to create one approved version of global colors, fonts, and buttons first, rather than copying different edits between pages. Then changing the red accent or the overall heading size does not become an hours-long manual search. The kit claims that fonts and colors can be configured in one place, but the actual path and available settings depend on the installed Elementor version and the contents of the imported kit. Always compare the result on the website itself, not only in the editor panel.

When the Kit Is the Wrong Choice

Solid will not replace planning if the site’s main product is a complex calculator, a property-management portal, a large filtered property database, or custom booking by service area. In those cases, you can use the initial visual layer, but decisions about data structure, roles, form protection, and integrations must be made separately. The kit also cannot fix weak source materials. A photo of a random roof, a vague service list, and unverified numbers do not become trustworthy simply because they appear in a polished section.

This option is also not a good fit when a company intentionally wants a very different identity: for example, a premium architecture firm with long authored case studies, or a business that sells materials exclusively through a catalog. Solid’s presentation is built around direct service messaging, high-contrast work photography, and quick contact actions. The further the future task moves away from that rhythm, the more changes it will require and the less benefit will remain from using a ready-made kit.

A practical guideline: first decide which single request a visitor should make after seeing the first page - request an inspection, ask about an emergency visit, or get an estimate. Then keep only the Solid sections that lead to that action and demonstrate why it makes sense.

Responsibility Boundaries: the Template, Elementor, and Content

It is useful to separate three layers in advance. The Template Kit defines the arrangement of blocks, visual rhythm, typographic character, and demo materials. Elementor handles editing containers, widgets, templates, and global settings. WordPress stores pages, menus, media files, and the selected theme. This separation helps with diagnosis. If text cannot be replaced, you usually need to open the specific page or saved template in Elementor. If the required page does not open at its URL, check WordPress publication and reading settings. If elements shift only on a phone, start with the container settings and Elementor’s responsive mode.

Do not edit kit files inside the archive or attempt to replace WordPress or Elementor core files with them. It is safer to back up the site, import on a staging copy, and then edit content through the standard editor. This approach lets you undo an unsuccessful template or global-setting replacement without risking an already functioning public page.

Preparing WordPress Before Importing the Roofing Kit

It is better to begin an import not by clicking Upload, but by completing a short environment check. A Template Kit brings in many templates and may change global design settings, so an error on a live site can affect more than a test page - it can affect the header, footer, and existing posts. This is less risky for a new project, but even then it makes sense to document the starting state: which plugins are active, which theme is enabled, who has access to the admin area, and where the backup is stored.

The Solid kit is designed for Elementor. Its product page says it is optimized for the free Hello Elementor theme and can be used with themes that support Elementor. That is not the same as promising an identical outcome with every active theme. A theme may add its own containers, heading styles, header widgets, or width rules. For a predictable first launch, use a neutral environment, then move to an existing theme only after testing one page and one header template.

Create a Test Point, Not a Copy of the Problem

If the site already receives inquiries, start with a copy at a staging URL or in a separate hosting environment. It should use the same WordPress, PHP, Elementor, and key plugin versions as the production site. A useful copy includes the current theme, permalinks, pages, and media library, because these elements most often affect how a page behaves after import. A staging environment is not intended for indexing or ad traffic. Its purpose is to provide a place where you can test the header, footer, forms, and responsiveness without pressure.

Before importing, save a backup of the files and database using the method provided by your host or the tool already used by the project. Separately note which theme was active and which plugins handle forms, caching, security, and email. If something stops working after a change, this prevents guesswork about the cause. First restore a known working state or disable only the most recent change rather than randomly removing plugins and styles.

Check Basic Compatibility

Open Elementor > System Info in WordPress and make sure the editor is not displaying critical server warnings. On the server side, sufficient memory limits and the ability to process archives are especially important, but do not choose values at random. If the import stops with a server error, ask your host to check the error log and support for the PHP Zip extension. Envato documentation directly links archive error messages to the file format and the presence of the Zip extension, making this one of the first specific items to investigate.

Next, update WordPress, Elementor, and the active theme to a compatible state within your site’s update policy. Do not turn updating into an automatic habit immediately before an import: if the core, editor, theme, and kit all change at the same time, it becomes difficult to determine which part changed the outcome later. It is safer to update the staging copy first, open several existing pages, and only then proceed with the import. After every major step, check the public-facing site in a regular browser window.

The table does not replace testing. Once the checks are complete, open any regular page on the site and make sure it loads, the menu opens, and an existing form sends an email. This simple check prevents you from mistaking an old issue for an import consequence.

Choose a Clear Import Method

Template Kits may use different import paths, and you should not mix them in one session without understanding the format. Current Envato guidance describes uploading a Template Kit ZIP through the Template Kit Import plugin: after installing the required components, the archive is uploaded in Tools > Template Kit. The same guidance separately describes the newer Full Site Kit format, which is imported through Elementor > Tools. So the first question after receiving the file is not "where should I drag it?" but "which exact format is specified in the file name and supplier instructions?"

If you open an importer and it says that the kit is intended for another workflow, do not try to bypass the message by uploading the same archive again. Save the warning text and switch to the appropriate Elementor tool. The wrong importer can create templates only partially: some pages appear, but global settings or site parts are not applied. Later, this can look like a mysterious design defect when the real cause is an incorrect installation step.

For some modern Envato kits, it is recommended that you enable Flexbox Container in Elementor > Settings > Features first. Do not enable other experimental features just because they are nearby. Turn on only what the kit explicitly requires or what is already used by the project, save the changes, and make sure Elementor opens a clean test page. This gives you a clear reference point: if pages begin behaving differently, you know which setting was added.

Why You Should Not Extract the ZIP in Advance

Some importers expect the original archive and read its structure themselves. Manual extraction, repackaging, or renaming can alter that structure and cause a format error. If your importer’s instructions specifically require uploading a ZIP, leave the file in its original form. If the editor offers to import individual templates, follow its on-screen instructions and do not rely on steps remembered from another method.

Prepare Real Materials Before Editing

To avoid leaving the demo in place longer than necessary, gather a working content set in advance. For Solid, you will need a brief company description, a list of services, service areas, a phone number, email address, inquiry-handling hours, work photos you have permission to publish, and form details. It is helpful to prepare at least three real use cases: urgent repair, scheduled inspection, and full replacement. For each one, define the customer’s problem, what the team does, and what outcome can be shown honestly.

Photos are especially important in the roofing niche. Solid’s hero is built around a roof and a specialist, so replacing it with a random stock image weakens trust. If you do not yet have many original photos, use neutral images as temporary placeholders, but mark that in an internal task list. Do not label a generic photo as a completed company project or publish customer numbers, timelines, or ratings that cannot be verified.

Also decide in advance who will receive inquiries. A form without a verified recipient creates a more serious issue than an unfinished service section. If the site uses a separate form plugin, its fields, email notifications, and spam protection are configured in that plugin, while Solid provides the visual container and the user path to the form. Separating these roles avoids the false expectation that a Template Kit will configure email delivery on its own.

Required step: prepare a staging copy and a verified channel for handling inquiries before importing. A polished layout without a backup state and a form recipient cannot be considered ready to publish.

Importing Solid: From a ZIP Archive to Your First Published Template

Once the environment is ready, the import task is not to receive all pages at once, but to load dependencies, global settings, and templates in sequence. This order matters for Solid because the kit’s visible consistency depends on its shared palette, typography, header, footer, and recurring elements. If you insert the home page first and then change styles several times, buttons and headings may end up looking different across blocks that have already been assembled.

First identify the archive format and import path. If you use Template Kit Import, open Tools > Template Kit in the WordPress admin area, select ZIP upload, and choose the original file. Do not upload several archives in succession while the first is still processing. Wait for the importer message, read the list of required add-ons, and install only the listed requirements. If Elementor Pro is among them, the corresponding parts of the kit may require an installed and active Pro version. Do not replace that requirement with another visually similar plugin.

The Correct Import Order for Kit Components

Envato guidance recommends importing Global Kit Styles before individual templates. In practice, this is convenient: global colors, fonts, and site settings become the foundation, while the home page and internal pages can already use that foundation. After styles, move to site parts and then pages. Where the importer shows individual items, start with the header and footer, continue with the home page and target service pages, and add forms and supporting blocks only after it is clear where they are actually needed.

1. Upload the archive in the appropriate importer and wait for extraction to finish.
2. Install verified requirements if the importer lists them for the kit.
3. Import Global Kit Styles to bring in the shared color and typography foundation.
4. Import the header and footer, but do not assign them across the entire live site until they have been tested.
5. Import the home page and one service page to check how containers, images, and buttons behave.
6. Create or open a WordPress page, insert the needed template through the editor, and save it as a draft.
7. Check the page in a separate window, then publish only after replacing the demo content.

The sequence has a practical purpose. If existing site pages change appearance after importing global styles, do not continue adding pages. First assess the scope of the changes. In a staging environment, this is a reason to identify which global settings conflict with the active theme. On a live site, it is safer to restore the previous state or limit the new kit to templates that have not yet been assigned as global site parts.

Where to Find Imported Components

Templates may appear in Templates > Saved Templates, while site parts using Elementor Pro features may appear in Templates > Theme Builder. Do not treat these sections as two identical libraries. A saved template normally needs to be inserted into a specific page, while a header or footer template may have display conditions. Before editing, review the type of each item and give it a clear name, such as "Solid - Header," "Solid - Home," or "Solid - Roof Repair." This does not affect visitors, but it greatly simplifies future maintenance.

To create a page from an imported template, open Pages > Add New, enter a working title, and click Edit with Elementor. The editor provides a library of installed elements. Select the required template and insert it into the new page. If the interface asks whether page settings should also be applied, do not accept automatically. First assess which settings will be replaced. When the goal is to create a separate service page on an already configured site, it is often safer to keep page settings under project control rather than import them from a demo file without review.

Assigning the Home Page Without Rushing

An imported home page does not automatically become the WordPress front page simply because it is named Home. After editing and publishing it, open Settings > Reading and check the front-page display setting. If the site uses a static page, select the exact version you reviewed on the public-facing site. This may sound obvious, but staging installations often contain two similar pages: one created by the importer and another created manually. As a result, one version is edited while visitors see another.

After selecting it, open the site URL in a new private window. This reveals not only the current administrator session data, but also the actual browser cache, lack of editor permissions, and redirect behavior. Check the hero section, buttons, main menu, contact link, and footer. If everything works correctly at the staging URL, proceed with editing rather than moving it to the live site immediately.

Initial Testing After Each Import

It helps to give the first check a narrow purpose. Open at least one imported page in Elementor and on the public-facing site. In the editor, review Navigator: containers should open and widgets should not display obvious errors. On the page, verify that images have not disappeared, headings do not overlap buttons, and background areas have not become empty. If the editor displays the layout correctly but the browser does not, do not immediately make dozens of CSS changes. First clear the cache, resave the page, and compare the state for a logged-out user.

When using Elementor, the editor’s built-in CSS file regeneration may be useful after an import, but it should not be used as a universal remedy. It is appropriate when editor changes do not appear on the website or styling is loading in an outdated state, and only after checking the cache. If the outcome becomes worse, return to the last clearly understood change: disable the new cache, restore the backup on the staging site, or remove the template assignment. The exact command sequence depends on the installed Elementor version and hosting environment, so follow your installation interface and activity log.

Signs of a Successful First Launch

• Imported templates are visible in the library with clear purposes.
• One draft page opens through Edit with Elementor without a critical error.
• The browser preserves the kit’s hero, card, and button proportions.
• A menu link leads to a published, verified page rather than a demo URL.
• No existing inquiry channel has changed without verifying its recipient.

At this stage, you do not need to complete the entire website. Success means one working page appears in a controlled way and you understand where every component lives. That outcome makes further configuration faster because you already know whether an issue belongs to the editor, global settings, a template, or WordPress publication.

If the Import Stops or Some Layouts Do Not Appear

Record the error message and the point where the process stopped. A ZIP error usually requires checking the source file, server access to the Zip extension, and the selected import method. Partial template appearance requires checking whether the import was interrupted after the requirements were installed. A blank page is more often related to a template not being inserted into a page or the page not being published. These causes differ, so repeating the same import attempt rarely helps in every case.

Do not delete the whole library until the cause is clear. First check whether the required component is in Templates > Saved Templates, create a clean draft page, and insert one template. If it appears, the problem is not the archive but the assignment or selected page. If it does not appear and there is a dependency message, return to the kit requirements. This check preserves data and provides a basis for a safe next step.

Brief takeaway: after importing, you should not have a collection of unclear pages, but a chain of "global styles - site parts - specific page - public test." That is what makes Solid a manageable template instead of a random archive.

Configuring the Global Style and Building Blocks Behind Solid

After a successful import, the most important part of the work begins: turning a generic demo language into the language of a specific company. Solid is recognizable for its combination of a dark photographic hero, white typography, a red accent, compact buttons, and light sections with large headings. If you change every element individually, the site quickly loses consistency. It is far more reliable to start with settings that repeat on every page: colors, fonts, containers, buttons, and global site parts.

In Elementor, global settings are normally available through the editor menu in Site Settings. The available items depend on the version and the data included with the kit, but the principle remains the same: establish the color and typography system first, then edit individual widgets. Do not replace every shade with the company color in a single action without checking contrast. In Solid, the red accent works as an action signal on a dark background and as a small navigation marker on white. If the company’s primary color is light, a button with white text may become unreadable.

Start with a Compact Palette, Not Dozens of Shades

A practical set includes a base dark color for the hero and footer, a light background for content sections, an accent color for the primary action, neutral dark text, and one muted gray for explanations and borders. That is enough to preserve Solid’s character while making the page feel branded. For a new site, create a document with color names and usage rules. For example, use the accent color only for the primary button, active navigation item, and key numbers. Secondary buttons should not compete with it at the same intensity.

Check more than a beautiful palette in the editor panel - check actual states. Open a photo-based hero, a light-background section, a service card, and a form. On every background, read the heading, body text, and button label. If text is visible only on a high-brightness monitor, that is not enough. If necessary, slightly darken a photo with a background overlay, but do not hide the meaningful work image beneath it. The first section should help visitors understand what the company does and where to click, not show maximum photo saturation.

How Global Styles, Sections, and Page Content Work Together

Solid’s visible output is built from several layers. Global styles define colors, fonts, buttons, and some layout settings. Containers and widgets on a specific page determine where the heading, photo, card, and form appear. Saved headers and footers provide repeatable navigation. Finally, WordPress assigns the page to the required URL and connects it to menus. As a result, the same change can have a different reach: changing a global heading affects many places, while replacing text in a hero affects only that page.

This explains a common situation: a designer changes a color in one widget, then creates a service page, but the new page still uses the old color. The cause is not necessarily an import error. The first element may have received a local override, while the new one uses the global value. Choose one method for each task. If a color is part of the brand, configure a global token rather than duplicating it in dozens of widgets. If you need deliberate contrast for one emergency service, apply a local change and document it in the working file.

Configure Typography for Easy Reading

In Solid’s original design direction, large headings are short and direct, while explanatory text appears in brief paragraphs. Keep that rule when inserting your own content. Do not turn a large hero heading into a list of five services or the block below it into a lengthy legal explanation. For the above-the-fold area, it is enough to name the main benefit, clarify the region or specialty, and provide one expected next step. Move details to the services section, FAQ, or a separate page.

Check the selected font’s Cyrillic support before replacing the entire site. Sometimes a kit looks good with a Latin heading, but Russian characters have unusual proportions, poor bold-weight support, or awkward line breaks. Create one test section with a long Russian service name, two lines of body text, and a button. View it on a wide and narrow screen. If wrapping is difficult, first adjust the size and line height, and only then change the font family.

One Primary Action Rule

Solid’s hero includes a prominent primary button, while more contextual invitations repeat further down the page. Use that pattern deliberately. For most service pages, one primary action is enough: "Request an Inspection," "Ask About a Repair," or "Get a Consultation." A second action is acceptable when it does not distract from the goal, such as a link to work examples. Several equally bright buttons - "Call," "Message," "Buy," "Calculate," and "Order" - do not create freedom of choice; they create doubt.

A link or button should lead to a place where the user can actually take the promised action. If it is a form, make sure it is on the same page or opens in an understandable way. If the company accepts calls only during business hours, do not imply that a form guarantees an immediate response. An honest note beside the form and a verified path are more valuable than an aggressive call to action.

Header, Menu, and Footer as a Unified Navigation System

In the attached Solid example, the header is compact: a logo, several menu items, and a noticeable action button. When adapting it, do not expand the menu into a second row simply because there are many pages. Keep the top level for the home page, services, projects or examples, company information, and contacts. You can connect additional materials from service pages and the footer. If navigation no longer fits, solve the problem through information architecture, not by shrinking the font to an unreadable size.

In WordPress, menus are usually created and assigned through Appearance > Menus or through the relevant interface of the active theme. Because a Template Kit does not configure navigation identically in every theme, check after import which placement the header template is attached to and which menu it uses. Create a test item for one service page, save it, and then open the site while logged out. If the link does not appear, do not duplicate the menu in several places at once: first determine which header template is active.

The footer should complete the journey. It is a suitable place for a brief description, repeated contact details, links to important pages, and required legal information. Do not copy the entire home page text there. If Solid contains demo social icons or an address, replace them only with real channels. Do not leave a clickable number that does not belong to the company or promise 24/7 availability if it is not part of the service.

Service Cards and Trust Sections Without Template Claims

A service card in this system should answer three simple questions: what problem it solves, what type of property it suits, and what happens after the inquiry. A short card does not need to retell the entire repair process. Its job is to provide an entry point to a dedicated page. On that page, you can explain signs of the problem, the scope of the inspection, work options, and the next step. This helps both visitors and editors: copy does not spread across the home page, and the structure remains clear.

Trust sections from the demo require special care. They may contain counters for years, ratings, number of properties, or customer logos. Keep only what the company can verify and has the right to publish. If the fact is unavailable, replace the block with useful evidence: a list of inspection stages, a photo of completed work with an explanation, or an answer to a common question. Trust does not come from a red number, but from clarity about what the customer will see before, during, and after the work.

Result check: open one home page and one service page side by side. Users should recognize the same site through its palette, buttons, and navigation, while immediately seeing the different purposes through the heading, photography, and content. If pages differ only by one replaced word, the configuration is still too superficial.

Practical Use Case: A Roof Inspection and Repair Page

To keep configuration from becoming a collection of general rules, let us build a specific practical example. Assume the company receives inquiries from homeowners who have noticed a leak, damaged roofing material, or want an inspection before the season. The page goal is not to sell an abstract "service," but to help visitors connect their issue with a clear next action: leave their contact details for an inspection. Solid suits this goal because its hero, service block, social proof, and form are already arranged in a sequence that can be populated with real data.

Step 1. Define the Page Goal Before Opening the Editor

First, write down the visitor’s single main question. For this page, it may be: "Can I understand the cause of a leak and get a work plan before repairs begin?" Now prepare the answer not as a marketing promise, but as content: what signs to mention when getting in touch, what the specialist inspects, what the next contact includes, and what depends on the roof’s condition. This content will determine the headings and make it possible to remove unnecessary demo sections.

Prepare materials for four points on the page. The first is an original or legally usable roof photo that does not interfere with text readability. The second is a short list of typical signs: a leak after rain, damaged roofing material, or moisture marks in the attic. The third is a real explanation of inspection stages. The fourth is a form or contact block with a working recipient. This set is enough to build a page where every visual block answers a specific concern.

Step 2. Rework the Hero While Preserving Its Purpose

Open the imported page in Edit with Elementor and find the top container through Navigator. In Solid, the above-the-fold area is built on the contrast between a large heading and roofing photography. Keep that principle, but replace the demo copy with a short heading about inspection or repair. For example, instead of a broad statement about quality, name the situation: "Roof Inspection Before Repairs." Add one or two sentences below the heading: the specialist reviews symptoms, assesses visible areas, and agrees on the next step. Do not place a complete technology list and every service area in the initial viewport.

The primary button should lead to a form further down the page or to the contact section. If you use an anchor, test it in the published version: a click should move smoothly to the required container without hiding the form heading behind a fixed header. If an anchor is not needed, link to a separate contact page, but keep the action label honest. Do not use a button labeled "Get an Estimate" if the company actually performs an inspection first and does not provide an estimate before it.

Replacing a Photo Without Losing Readability

The background photo should support the heading rather than repeat it. Open the container settings and replace the demo image with the prepared photo. Then check the overlay, focal point, and positioning at different widths. On mobile, a person or meaningful roof area may end up behind the text or outside the crop. If that happens, do not try to stretch the image. It is better to choose a different background position for the narrow screen, adjust the container height, or use a crop with more open space for text.

Avoid photos where a specialist is shown in an unsafe situation or where the image creates a misleading impression of the work. For a service page, a clearly visible roof, a tool detail, or a meaningful inspection photo is more useful. Do not insert random construction-equipment images just to fill space: visitors should recognize the exact service they are reading about.

Step 3. Turn Cards into a Customer Journey

Keep three or four cards below the hero, but give each one a role. The first explains when an inspection is needed. The second shows what happens during a condition assessment. The third describes how work is agreed upon. If there is a fourth, it can lead to the inquiry form. This order shows how the situation develops rather than simply listing benefits. Inside each card, use a short heading, one explanation, and a single link or button only when it leads to additional content.

Do not copy the full text from a dedicated service page into the cards. A card should provide orientation, while detailed material should answer questions for someone who is already interested. If the company has several similar services, create one base card, duplicate it in Elementor, and then replace only the content, photo, and link. Do not accidentally change shared spacing, corner radii, or button styles. A repeatable component is valuable precisely because it remains recognizable.

Step 4. Configure Proof and the Form

A projects block is useful when each example can be explained. Instead of the label "Roof Repair," specify the type of task without unnecessary personal details, for example: "Localized Roofing Restoration After an Inspection." Briefly describe the initial symptom, the completed action, and the observed outcome. If the project has not yet been confirmed by photos or customer permission, do not publish it as a case study. Temporarily replace the block with a work sequence or answers to common questions.

A form visually integrated into Solid requires a separate technical check. Open the form widget or plugin in use and determine which fields are required, where the message is sent, who receives the notification, and whether protection against automated submissions is enabled. A minimum set usually includes a name, a contact method, and a description of the issue. Do not request unnecessary documents, an exact address, or a large number of technical details during the first inquiry if they are not needed for a callback. State when and how someone will get in touch only if the company truly follows that process.

Step 5. Configure the Page in WordPress and Test the Journey

After editing in Elementor, click Update or Publish, then return to WordPress and make sure the page has a clear title and permalink. Do not publish a URL containing the imported template’s technical name if visitors will see it. Connect the page from the main menu or from the home page through a service card. Then walk through the entire path as a new customer: home page - inspection page - form - successful submission message. If any transition is unclear, fix not only the link but also the text beside it.

Separately verify that visitors see a clear confirmation after clicking Submit and that the message actually reaches the recipient. Do not consider the task complete if the form displays a nice check mark but the email goes to spam or is not delivered. Send a test inquiry from an external address, wait for the notification, and verify that an employee can reply to it. This test concerns the inquiry-handling process rather than the kit’s appearance, but it is critical for a service page.

Step 6. Check Responsiveness Before Filling Every Page

In Elementor, open responsive mode and review desktop, tablet, and mobile in sequence for the hero, cards, menu, and form. Containers let you change element size and order at breakpoints, but that does not mean you need to manually build a separate website for every device. First identify meaningful problems: a heading that is too long, a button outside the tap area, an image covering text, cards losing their even rhythm, or a menu that does not fit. Then make the smallest change that removes the cause.

For the hero, heading wrapping and photo position are usually most important. For cards, the number of columns and spacing between them matter most. For the form, field width and button visibility are key. Do not hide a critical contact block on mobile just to make the layout look cleaner. It is better to reduce a secondary decorative section than to remove the way to contact the company.

Brief scenario takeaway: a page is complete when it leads from a clear symptom to a meaningful service, shows real proof of work, and lets visitors submit a verifiable inquiry. Moving the hero, cards, and form without that chain remains only a cosmetic adaptation.

How to Test the Public-Facing Website After Configuration

The Elementor editor shows the page construction, but it does not eliminate the need to test the real site. The public output depends on the selected theme, WordPress settings, connected plugins, cache, images, and visitor permissions. It is therefore better to review the site as a series of short user journeys rather than a single glance at the home page. Your goal is to make sure a person without admin access understands the service, finds the needed section, and can complete the action safely.

Check the Page as a Visitor, Not an Editor

Open the site in a private window or another browser. Start at the home page URL, then navigate to a service through the menu, go back, and try reaching contacts from the footer. This route quickly reveals whether demo links lead to empty pages, technical names remain in the menu, and the sticky header works. Some issues may be hidden from an administrator by authentication or cache, so the editor tab cannot serve as the only proof.

Read the page aloud from the above-the-fold area to the form. It sounds simple, but this method reveals unnecessary repetition and gaps effectively. Visitors should understand what task the company solves, which work or conditions will be clarified, what supports the company’s approach, and what happens after they get in touch. If they have to guess whether a card refers to repair, full replacement, or maintenance, change the heading and first sentence rather than only the color and spacing.

Visible Output Checklist

After every fix, return to the original journey. Do not evaluate only the area you changed. For example, reducing a heading size may solve a mobile problem while weakening the hero’s visual weight on desktop. Elementor containers make it possible to configure settings at the required breakpoint, but a change remains meaningful only after comparing all variants.

Checking Speed Without Unverified Promises

Solid’s product page emphasizes fast loading, but actual site speed is not determined by one Template Kit. It is affected by photo size, number of active plugins, the theme, fonts, form scripts, caching, and the server. Do not promise a customer a specific metric based only on a layout. Instead, after replacing demo materials, open the home page on a normal connection, check when the main heading appears and the button becomes available, then review the diagnostic tool used by the project.

The safest way to improve the page is to start with your own images. Upload prepared files at reasonable sizes, use clear names in the media library, and do not add several nearly identical photos to one view. If the page includes video or an external map, make sure they genuinely help visitors decide. Every added widget should justify its weight: explain the service, prove the work, or help someone get in touch.

Accessibility and Contact Clarity

Contrast is especially important in Solid because of its dark hero and red accents. Check whether text can be read over the photo, whether normal and active buttons are distinguishable, whether form-field labels remain visible, and whether keyboard focus is retained. Do not use color as the only indicator of a form error. If a required field is entered incorrectly, the message should explain in words what needs to be corrected.

Links and buttons should have specific labels. Instead of several identical "Learn More" links, use "View Roof Repair Projects" or "Go to the Inspection Form." Users understand the outcome before clicking, and editors can more easily verify that every button leads to the right place. If a hero button opens a form, it should not unexpectedly lead to a general news page.

A Careful CSS Adjustment for Long Headings

Sometimes, even after configuring the font, a long Russian heading in a card or hero looks too cramped on a narrow screen. Before adding code, try shortening the heading and reviewing the typography settings of the specific widget. If the issue remains and you understand which element needs to change, a small reversible adjustment is acceptable in Appearance > Customize > Additional CSS or another standard theme location. Below is a general example for a class that you added yourself to the required Elementor widget through Advanced > CSS Classes.

/* Add the solid-service-title class only to the required Elementor heading */
@media (max-width: 767px) {
  .solid-service-title {
    font-size: clamp(2rem, 9vw, 3.25rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
}

This adjustment uses standard CSS behavior and does not rely on undocumented internal kit features. It changes only elements with the added class, so the risk of affecting the entire site is lower than replacing a global heading. After adding it, open the page on desktop and mobile, check the hero and cards, then clear the cache if it is active. To roll back, remove the class from the specific widget or delete the entire CSS snippet. Do not place this code in WordPress, Elementor, or kit core files.

Using Solid with the Standard WordPress Structure

A practical option for most service websites is to leave WordPress responsible for pages, posts, permalinks, and menus while using Elementor with Solid for visual service pages and shared templates. This division makes maintenance easier. A content manager can update page copy in the editor, while the person responsible for site structure controls navigation and publication. This is not a separately claimed Solid integration, but a standard way Elementor works within WordPress.

To avoid a conflict in this setup, define in advance who changes the header, where the menu is edited, and which template controls each page. If the theme already creates its own header while an Elementor header is assigned at the same time, visitors may see two menus. The check is simple: open a page as a logged-out user and confirm that only one expected header appears. If there is a conflict, first disable or change the display condition for the new template in Templates > Theme Builder rather than hiding the duplicate block with arbitrary CSS.

What to Document Before Moving to the Live Site

When the staging version is ready, record a list of changes: which global styles are approved, which pages are published, which menu is assigned, who receives form submissions, and which add-ons were required for the kit. You do not need to create extensive technical documentation for a small project. A short note is enough for another employee to understand where the home page is, which header template is active, and how to test an inquiry.

Before moving to the main site, compare two states: the existing website and the prepared version. Do not transfer the entire archive blindly; move verified components in the order that has already passed testing. After every important operation, open the public-facing site again. This approach takes a little more time, but prevents a situation where a polished new hero is published together with an unfinished footer, broken menu, or a form that sends nothing.

The result check is complete when the journey "above-the-fold area - service - contact - confirmation" works for a logged-out visitor on wide and narrow screens. The editor preview is useful, but it does not replace that fact.

When ThemeForest Solid Is a Strong Foundation for a Website

ThemeForest Solid is justified when you need to build a roofing or repair-service website quickly and consistently around a real customer journey. Its strength is not magical automation, but an already considered visual hierarchy: a noticeable above-the-fold area, repeatable service pages, space for work and proof, and a clear route to contact. When you fill that foundation with trustworthy copy and test the form, it helps move from an empty WordPress installation to a manageable public page.

The best sequence remains simple: prepare a staging environment, identify the archive format, import styles and key components first, build one service page, test the menu and inquiry flow, then move the approach across the rest of the site. Do not try to create every page in one session, and do not replace a real visitor-journey check with a polished editor preview.

When the staging version passes this journey, you can download the ThemeForest Solid archive and begin implementation on a prepared site copy. Keep a backup point, change one layer at a time, and leave in the template only the proof and actions the company is genuinely ready to deliver.

ThemeForest Solid Configuration Video

This video complements the guide: a product video. Open it after the basic configuration to compare the interface and action sequence.