The Customization Guide - Lunatek Marketing

Customization

Guide

Thank you for selecting one of our amazing template collections! Your purchase is deeply appreciated and we want you to get the most out of your templates, so we’ve compiled this guide to quickly get you through the customization of the content areas. We also include several pointers throughout this guide including tips on image selection, copywriting suggestions and the user experience. We believe that your website can and should do impressive things to help your business flourish. These templates should put you on the fast track to a stunning website that will surely impress your audience.

Setting things up:

Assuming your website is already on WordPress, and you’ve already installed at least the free version of the Elementor plugin, we’ll move right into how to importing templates and creating your new pages…

1. Download, unzip and move your new template collection’s folder to your preferred location on your computer.

2. Determine your image needs before importing your .json page templates. Some designs use both free stock images (curated from Unsplash) and custom graphics, (such as the floral line-art in the Afterglow Collection).

• • • If you do not need the stock images or custom graphics: you can proceed directly to step 3 and begin uploading your new templates and adding in your own images and graphics. You should notice in the areas where we placed images, that there are grey placeholder blocks that maintain the pre-set image settings and positioning, so you simply need to click on the grey blocks (to activate them for editing) and select the image you want to place in that section from your media library.

• • • If you do want the demo images to be included: you will need to take a couple additional steps because Elementor does not automatically pull images through and populate them into your media library for templates designed by independent developers. Our preferred workaround is to use a trusted WordPress plugin…

* Install and activate: Unlimited Elements plugin.

* Retrieve your design’s Demo Images: https://lunatekmarketing.com/stock-images/

* Import your Stock-Images.Zip file (and the Custom-Images.Zip file, if your design has one). In the WordPress dashboard’s left sidebar, under ‘Templates’, use the feature: “Import Template With Images” instead of “Import Template”.

(This method will upload the images into your media library and will then populate them accordingly into the .json templates when you import them).

Please Note: To ensure we adhere to the licensing terms of the free stock images, we do not include the stock images in the purchased Zip file. Instead, we make it available as a complimentary instant download. After importing the demo images, you can uninstall the Unlimited Elements plugin if you don’t intend to use its other features.

3. Create Your Pages ~ If you don’t already have your pages created, go to your WordPress Dashboard > Pages > Add New and select ‘Elementor Full Width’ under the Page Attributes toggle. Repeat for each page needed.

• • • If you purchased the 7-Page Kit, create a main page for the Hybrid template (this page is essentially a hybrid of a home, about, products/services, & contact info page). Also create a Social page, Landing page, Tripwire page, Sales page, Upsell page and Thank-You page as needed.

• • • If you purchased the 12-Page Kit, create the traditional Home page, About page, Products and/or Services pages, Contact page, Social page, and the funnel pages (Landing, Tripwire, Sales, Upsell, Thank-you) as needed. Use the Inner page template (or any of the other ones that better suit your needs) as a base for any other types of pages.

4. Upload Your Templates ~ Open the first page you want to work on from the Dashboard > Pages > and select the ‘Edit With Elementor’ link. Once the page is open for editing in the Elementor editing interface, locate the round icons on the main area of the page and click on the right-side icon (grey with a folder).

• • • Check the template’s settings because the “default” layout will automatically populated if you choose “no” in the popup box asking if you want to import the page settings when you upload each template. Choose either Elementor Canvas (to ignore your theme’s header & footer options and use the template’s design), or Elementor Full Width (to keep pulling the header & footer options from your base theme, but utilize the template design in between the header & footer). If you choose Elementor Full Width, adjust any padding or margins associated with menus that are on the top of the page if your purchased design has one placed there, as they are primedfor the Elementor Canvas layout.

• • • A template library will pop up and you need to select the icon at the right side with an arrow pointing upward inside of a circle to import your templates. Once you click the arrow-up icon, a box will appear with a button to search for the template on your computer.

• • • Select (double click) the specific page template you want to import from wherever you have the zip file (unzipped) on your computer. The template will then appear in the library under the ‘My Templates’ tab. Repeat this import process until you’ve imported each of the individual page templates that you intend to use.

• • • Some businesses may not utilize every template, but we’ve also created several individually templated content block sections to utilize if a particular template doesn’t quite meet your needs.

• • • When you install the templates, you are prompted to import the page settings (no or yes button options). If you select no, the custom code is excluded. If you select yes, the custom code and any other page settings, such as a base background color if a demo is using this setting, are included. If you load a template onto your pages and any background color areas don’t display as you want them, you probably selected no when loading the template. You can edit these settings in the editing panel, via the small settings (gear) icon at the bottom left of the pane.

5. We added a snippet of custom css code to our demos for better text formatting for the specific theme system we use on our main website. If you selected “no” while loading the template and later decide you want to use the snippet, you can copy and paste the following code into the page settings’ custom css area. You can also edit this code to suit your needs.

.elementor-text-editor p, h1, h2, h3, h4, h5, h6 {line-height: 1.3em;margin:1px; font-weight: 300;}

6. Note: There are a few sections in the demo that are using Elementor Pro features, such as: the email subscription opt-in section, the countdown, the testimonials carousel, etc. (If you are not using Elementor Pro, you can use alternatives via various WordPress plugins found throughout the WordPress Plugin Repository.) We’ve included a section for a menu with a transparent background (for users who are using WordPress themes that do not support a transparent header menu.) We highly recommend using a theme such as Astra that offers a transparent header, as it’s a much more sleek option. You can simply delete the menu from the templates and adjust the top padding in the header as needed to suit your needs.

Setting things up:

Assuming your website is already on WordPress, and you’ve already installed at least the free version of the Elementor plugin, we’ll move right into how to create your new pages from the templates…

1. Download, unzip and move your new template collection’s folder to your preferred location on your computer.

2. Create Pages ~ If you don’t already have your pages created, go to your WordPress Dashboard > Pages > Add New and select ‘Elementor Full Width’ under the Page Attributes toggle. Repeat for each page needed.

3. Determine if you want to include the images from our demo.

• • • If you do not need the demo stock images, you can proceed directly to step 4 and begin uploading your new templates. You will notice in the areas where we placed images, there are grey placeholder bars that maintain the image settings and positioning, so you simply need to click on the grey blocks (to activate them for editing) and select the image you want to place in that section.

• • • If you do want the demo images to be included when you upload the templates, you will need to take an additional step because Elementor does not natively pull images through and populate them into your media library automatically for independent developers like Lunatek. Our preferred workaround is to use the Unlimited Elements plugin. Add the plugin first and then select “Upload With Images” when uploading your templates.

If you choose not to include the images, but later decide you want any of the images, we have also created a page for you to retrieve the images from each of our demos. This page includes the free stock images and any custom content created specifically for certain themes, such as background floral graphics. You can find your design’s specific image collection here: https://lunatekmarketing.com/stock-images/

4. Upload Templates ~ Open the first page you want to work on from the Dashboard > Pages > and select the ‘Edit With Elementor’ link. Once the page is open for editing in the Elementor editing interface, locate the round icons on the main area of the page and click on the right-side icon (grey with a folder).

5. We added a snippet of custom css code to our demos for better text formatting for the specific theme system we use on our main website. If you selected “no” while loading the template, you can copy and paste the follow code snippet into the page settings’ custom css area. You can also edit this code to suit your needs.

.elementor-text-editor p, h1, h2, h3, h4, h5, h6 {line-height: 1.3em;margin:1px; font-weight: 300;}

Begin Customizations:

1. Change the content images and background images to your own.

2. Change the headlines, subheadlines and text areas to suit your needs.

3. Use the featured Items areas to briefly highlight special content.

4. Remove any content that doesn’t suit your needs. You can make section templates out of any of the content blocks to reuse them on any pages you wish to utilize them.

5. Edit the testimonials if you have positive reviews available. If you do not have applicable testimonials, you can either remove the section from pages that contain it, or swap it out with another content section that better meets your needs.

6. Include strong call-to-action statements or headlines to compel viewers to react. Edit the button links and the button-text to your chosen destinations and phrases.

7. Depending on your ecommerce platform, insert the href link to your product in the Add To Cart buttons, for example: WooCommerce = href=”http://yourdomain.com/add-to-cart=25”

8. The FAQ section is made with dropdowns, so be sure to edit the text contained inside the dropdown as well as the item title.

9. In the lower area of many of the templates you’ll find an area for your business contact details.

* The phone number button is set up for a click-to-call action, just edit the numbers to yours. (Leave the “Tel:” portion as-is).

* Update the social media icons with your own account links.

* Update the email button in the footer to your own mailto: link.

* Update any opt-in submission forms to connect to your preferred email marketing software.

You will most likely not need to make adjustments to the layouts or positioning. Elementor is very intuitive for most images, however if your images are an unusual size, you may need to make some adjustments to the settings in the editing sidebar.

Change the text sections to suit your business needs. The “HEADLINE” text sections are better for Titles or primary phrases of section topics, and “SUBHEADLINE” sections are best for taglines or explanatory/supportive phrases. Some templates may contain greyed out text areas for mobile, so be sure to edit these as needed.

You will also note that all of the typography has been pre-set to specific fonts, (that were stylistically selected), rather than leaving the fonts set to default. We do this because some users experience weird font issues depending on the theme they are using and how intuitively it works with Elementor. We have found it loads better for majority of users if the fonts are preset. You can change every text section to fonts of your choice from the editing panel under Style > Typography. If you need templates with the fonts set to “default”, please contact us and we’re happy to provide you with applicable templates.

You’ll also see that we included advice on what to write in several of the text areas to help you maximize your viewers’ experience and to help you persuade your potential buyers into committing to a transaction. You’ll see some sections have traditional ‘Lorum Ipsum’ text as placeholders, but essential messaging areas will have suggested content tips, such as:

* “Include an introduction paragraph here that provides details to the viewer. Keep this section to no more than four or five lines of text since viewers tend to prefer brief sections of information.”

* “An action-driven descriptive sentence should be placed here. It should frame the benefits that will be listed below.”

These suggestions help you frame the information you are providing to your viewers so that they are moved throughout key areas in the most effective manner and to control the flow of information and supporting imagery that the viewers will see. We have designed the layout of the template pages to have the most impact on your conversion goals.

These templates were designed to offer you variety and flexibility in creating your content sections., so keep in mind that you can reuse any of the templates on additional pages, and can rearrange the content sections or make new content-block templates as needed.

Now let’s get started with your customizations…

Specific Page Considerations:

Social Landing Page:

Certain social media platforms limit your flexibility with posting outgoing links. Having a dedicated page that directs incoming social followers to where you want them to go is a fantastic tool to utilize in controlling your user flow. Edit the links, add more as needed and place any content on the page that you feel is most relevant to your incoming social media traffic.

Hybrid Page:

The Hybrid Page is intended to combine the most important aspects of traditional webpages into a single, sleek, primary page. This condenses your general information and is best suited for businesses that need a central page as a sort of “home base page” and then a robust system of marketing funnel pages. As with any type of home or landing page, the first impression you make will determine if your site visitors will stay and explore. Implement images and copywriting that moves your visitors through an introduction, about info, any products and/or services you’d like to feature, recommended blog or other content, and your contact info.

Home Page:

The Home Page is the first impression you will make on many of your site visitors. They’ll decide whether your site is worth staying on in a matter of seconds. It’s very subliminal and happens far too quickly, so it’s not something to leave it to chance. It’s important to move visitors through a specific sequence, to grasp and maintain their interest, as well as propel them forward on the buyer’s journey.

About Page:

Use this page to inform your audience of any relevant details that may persuade them into feeling more connected to your brand and more aligned with your messaging. This is also a great area to place testimonials if you plan to include them.

Product Page:

We’ve designed a visually appealing page to display your products as an alternative to the standard shop page style that most websites use. If you sell products online this is a great way to stand out amongst your competition and present your viewers with the product you want them to purchase. If you offer a large number of products, we recommend that you feature your more popular items on this page and then link to a separate page that itemizes your full product catalog.

Services Page:

If your business is service based, this page can highlight your service offerings, answer general questions, provide contact information and prompt visitors to reach out to you to retain your services.

Inner Page:

This page can be utilized as a general content page, a gallery or portfolio or other custom page you might need. The layout of the page allows for easy integration of any of the pre-designed content blocks included in the template collection.

Contact Page:

Providing a convenient way for your site visitors to reach you is crucial for any business. We recommend offering several ways for your audience to reach out to you, such as a physical address (or at least your city/region), phone, email and social media pages, as well as a contact form. We also suggest that you include general details such as your hours of operation or other relevant/helpful information to your viewers.

Landing Page:

The first page in the funnel can be used for a variety of offers. Whether you are aiming for lead generation or immediately presenting an offer, this page can be altered to suit your campaign objectives. Please note: if you are directing ad-traffic to this page as part of a marketing campaign, this may be the first time some viewers will land on your website, meaning this page will be the first impression they receive, (rather than the homepage), so it is an important consideration to keep in mind.

Tripwire Page:

In conjunction with the Landing Page offer, (especially if the lead generation transaction is a free item in exchange for an email address), the tripwire is designed to garner a low priced transaction to immediately convert your new lead into a new customer. This is an important factor to aim for in your early relationship with your leads/customers, because once even a minor transaction is conducted, the buyer subliminally crosses a threshold of trust in your business, making later purchases significantly more likely. If your Landing Page includes a purchasable transaction, (instead of a free item), offering an associated item for purchase can work well as a tripwire.

Sales Page:

Present your core offer with a dedicated sales page. In many campaigns this page comes third in your funnel, usually when you are marketing to targeted new traffic via paid ads. However, during any subsequent campaigns to your established customer base, you may likely decide to skip the Landing Page and Tripwire Page since you have already established a familiar business-to-customer relationship with them. Keep in mind that you can create several sales pages for various offers by using the sales page template on multiple pages and rearranging certain sections of the content from the templated blocks that are included with your template collection.

Upsell Page:

To complement your sales page offer (and to boost the revenue of your offer), the upsell is designed to present your new (or returning) customer with an opportunity to make an upgrade or impulse buy at the time of checkout. Present an item that complements or supplements the core offer/item the buyer just bought. (Optional: Many businesses also add “downsell” offers as part of their funnels, in an effort to throw a last-ditch-effort type of offer to customers who decline the upsell offer. A typical downsell would be a lower priced upgrade offer). You can upload the Upsell Page Template on a separate page and link it into your funnel in the (via the link to decline the upsell offer).

Thank You Page:

The final page in your funnel is the confirmation page where you thank your customer for their purchase, redirect them to explore more of your content such as blog posts or other interesting information and provide them with resources or contact information should they have any issues with their transaction. It’s a great way to express a commitment to excellent customer service.

Other Important Considerations:

Menu Customization:

The templated menu is using a pro feature to link all of the demo pages together for display purposes. Once you have all of the pages you need customized and ready to go, you’ll need to create your own menu to link your pages together. Menus are made in your WordPress Dashboard.

If your theme supports menus, you may prefer that option instead. Keep in mind that you’ll just need to change each template’s settings to Elementor Full Width instead of Elementor Canvas.

Copywriting Tips:

To achieve optimal results from your marketing efforts, your website needs to be a high-performance powerhouse, ready to appeal to incoming viewers and push them toward the desired actions. Since effective copywriting is so essential, we’ve compiled some helpful tips to achieve your web copy goals..

• • • Click on the menu text and then use the +-dot-grid-x feature to make edits in the editing panel (under “Edit Nav Menu” > Content.) You can then create an individual template of the menu to place on your pages.

• • • Keep your writing concise. Write in short, legible concepts, rather than long droning, sentences and paragraphs. Avoid complicated words when a more clear one will evoke the same effect.

• • • Write in an active voice and talk to the reader in a personal tone. Help them envision the results they will achieve with the product or service.

• • • Write conversationally, but with a focus on scannable segments of information. Headlines do not need to be plain titles of sections. They can be key phrases (or even portions of sentences) that move the content forward or bridge areas of text that need a little help.

• • • Be informative, but stay on point. Keep the perspective of your reader in mind and answer common questions succinctly.

• • • Choose images that support your messaging. Images that evoke emotion or convey a potential result from your product or service are very powerful. Stagger images throughout text sections to keep the reader on pace and focused on your intended messaging.

• • • Go ahead and tell the reader what they should do. Not in a bossy tone, obviously, but still firmly. For many readers, too much information can dull their intent to take an action. Prompt them to partake in a specific directive with strong, assertive call-to-action headlines/sentences.

• • • Express urgency. Readers can be encouraged to act when a time limit is present. The possibility of losing out on an opportunity is a powerful tool in marketing.

• • • Be strategic in your content presentation and focus on compelling verbiage. Consider injecting keywords and keyphrases that improve your search engine optimization, but don’t scrimp on the persuasion factor. While SEO has its own inarguable value, remember that you are focusing on closing the deal with real site viewers and your primary goal should be to appeal to them first and foremost.

• • • Evaluate your visitors’ journey from various points of entry. A person arriving on your Home Page from a web search receives a different viewpoint than someone who is presented with an ad on social media and is then taken to a Landing Page, as is someone arriving via a blog post or coming in from a pinned image link. Map out where you want to direct a visitor from each entrypoint and write web copy that achieves distinct goals for each type of user journey and from various points of entry.

More Customizations:

Here are some links to Elementor tutorials on making popular customizations…

Image Credits:

Please check out our Unsplash Albums to view the images used throughout our demos. https://unsplash.com/@lunatek/collections

Advanced Support:

Please contact us for help if you are having issues with your collection. Although it’s rare, sometimes WordPress, Elementor, Theme or Plugin updates can cause weird issues, so please don’t hesitate to reach out for help if you need us. We try our best to reply within 24 hours.