Unfortunately, I am currently not accepting new clients.

Just installed your template? You're in the right place.

A Step-By-Step Walkthrough on Getting Started

How to Setup and Customize your Website Template

By Kameron Tracy

Welcome to this step-by-step walkthrough to help you get started personalizing your website template.  Following these steps in order should guarantee a smooth setup process and put you in a comfortable position to be able to manage your website moving forward. However, if you do run into any trouble at some point, you can check out my list of frequently asked questions or submit a support ticket here.

Share on facebook
Facebook
Share on email
Email
Share on print
Print
Last updated February 13, 2022

1) WordPress Settings

The first step to customizing your website will be adjusting the WordPress settings. This will help to organize your website.

i. General Settings

To get started, head to settings > general. Once there, make sure your Site Title and Tagline are filled out correctly.

ii. Connect Instagram

Instagram Feed > Add New > Next > Add Source > Login with Instagram > Allow > Select the checkbox with your Instagram name next to it.

Underneath the customize tab, you will need to disable the Header, Load More Button, and Follow Button. After clicking on each section, you will see a blue slider titled “Enable”. Simply switch that to the grayed-out “off” position.

Then go under the “Feed Layout” section. Find your template and change the number of posts and columns to the appropriate numbers: *{insert chart with each templates layout}

iii. User Information

Head to the “Users” tab on the left-hand side menu. Under your user, select “edit”. Fill out the First Name, Last Name, Nickname, and Display name publicly as boxes. Once done, hit the blue “Update Profile” button at the bottom.

iv. Menu Structure

On the left-hand side menu, go to Appearance > Menus. From here you can personalize which pages you want to be displayed on your website.

On the right column titled “Menu structure”, you can rearrange, rename and delete the menu items that are being displayed. You can click the drop down menu on each one to rename or delete it. You can also drag and drop them in the order you prefer. You can move a menu item slightly to the right to make it a submenu item of the one above it.

You can add pages to your menu from the left side underneath “Add menu item” by checking them off and selecting “Add to Menu”. Select “View All” to see a full list.

*NOTE: For the Simplicity Organizing template only: 

You will have 3 different menus; Header Menu Left, Header Menu Right and a Mobile menu. You can switch between the 3 under “Edit Menus” where it says “Select a menu to edit”.

The left and right header menus should be evenly distributed (or close to even) in terms of how many menu items are in each. The mobile menu should have every menu item included, as it will only be displayed on the mobile version of the website.:

Once finished, select “Save Menu” at the bottom.

v. Pages

On the left-hand side menu, go to “Pages”. At this point, you should have a broad idea of which pages you want to use for your website. 

For any page that you don’t want:
Hover over the page title and select “Trash”. You can restore this page from the trash by going to the Trash tab and selecting “Restore”.

For any page that you might want to use in the future:
Hover over the page title and select “Quick Edit” > Status > Change to “Draft”. Once you want to publish this page, change the state back to “Published”

For any page you know you will never use:
Hover over the page title and select “Trash”. This will move the page to the trash section above. You can go to the trash and select “Restore”. This will turn it back into a draft. You will then need to go publish it again to make it live. If you select “Delete Permanently” then the page will be gone forever.

vi. Delete filler content

On the left-hand side menu, go to “Posts”. Select the checkbox next to “Title” > Click Bulk Actions > From dropdown, select “Move to Trash” > Apply.

Next, go to “Categories”. This will be on the left hand-side menu underneath “Posts”. Delete Category 1, 2 and 3.
Lastly, go to “Tags”. This will be on the left hand-side menu underneath “Posts”. Delete Tag 1, 2 & 3.

2) Elementor Branding

Here you will be adding in all of your brand’s colors, logos and fonts to truly make Your website your own.

i. Header

Go to “Templates” > All > Hover over “Header” > Edit with Elementor. This will bring you to the Elementor editor.

NOTE: Everytime you want to save changes, hit the green “Update” button at the bottom left of the screen. 

a. Header Logo

Click on the template logo in the editor. Select the “Choose Image” box and upload your own logo.

IMPORTANT: To make sure that your logo fits the header properly, upload a logo that is 60px tall. (NOTE: For the Free Your Photos Template, upload a logo that is 90px tall)

Don’t be afraid to simplify your logo here. You might notice there are a lot of modern websites that use a simplified version of their main logo for their website header. This is common in order to make sure that things are simple, clean, professional and modern looking. An overly complicated logo with tiny lettering and miniscule intricate details can both detract from the focal points of the website and the professional, sleek, modern look that will set your website apart from the rest.

b. Social media links

Click on the social media icon in the header. On the editor on the left side, you can edit, add, delete, and reorder your social icons. Drag and drop to reorder, click the “X” to delete, select “Add Item” to add an icon. In the editor, click on a social icon to expand and edit. You can choose a new icon by clicking on the icon box and selecting from the preexisting list of icons in the Elementor builder, and paste your link in the “Link” box.

c. Top announcement bar

To edit the text in the announcement bar, simply click on the text and edit it within the editor on the left side.

To hide the announcement bar, hover over the bar and select the blue middle tab from the top. In the Elementor editor, go to the Advanced tab > Responsive > Visibility > Toggle the “Hide on Desktop”, “Hide on Tablet” & “Hide on Mobile” options to “Hide”. When you want to show the top announcement bar again, simply toggle it back to “Show”.

ii. Site Settings

In the Elementor editor, select the hamburger menu in the top left corner > Site Settings.

NOTE: Everytime you want to save changes, hit the green “Update” button at the bottom left of the screen. 

a. Global Fonts

Go to “Global Fonts”. Ideally, your website should have 2-3 fonts. Stylistically, a popular design trend is to have 1 serif font, 1 sans serif font, and optionally 1 script font (if your logo/aesthetic permits). When editing these fonts, change the “Family” option to your font.

It is best to stick with the free Google fonts that Elementor offers. This ensures that your font will load correctly and will not slow down your website. Choose fonts that are used in your logo or similar. If the fonts used in your logo are not free Google fonts, you can find similar ones by searching “google fonts similar to {font name here}”.

Primary:
This will be your main font. The majority of the headings on your website will be displayed with this font in a large size throughout your site, so make sure it is legible, clear and interesting. I personally like to use a serif font, as the serifs can provide more captivating visual interest.

NOTE: It is only necessary to change the font family’s. Changing the size, weight, etc… may mess up your website’s design.

Secondary:
This should be your script font (if you want to use one). The script font will provide more visual interest and be used for decorative headings throughout. If you don’t want a script font on your website, then change this font family to be the same as your primary font.

Text:
This will be the font used for all paragraphs, buttons, and some minor headings throughout. This should be easy to read, especially at smaller sizes.

Accent:
Make this font the same as the Text font.

b. Global Colors

Go to “Global Fonts”. When deciding which of your brand’s colors go where, it is best to organize your brand’s colors like so:

Color A: 1 primary color
Color B: 1 accent color – a different hue than the main color
Color C: 1 tertiary color – a slightly different shade/tint than Color B

Fill in your colors in the appropriate spots:
{ CREATE TABLE AND INSERT IMAGE }

c. Site Identity

Go to “Site Identity”. Make sure the Site Name and Site Description are accurate.

Site Logo:
Upload your logo within the dimensions of 350×100 pixels as suggested below. This will be the logo that will appear in the footer of your website. Make sure that the background is transparent.

Site Favicon:
Upload a favicon with the exact dimensions of 350×100 pixels. (It is important to make these dimensions exact in order to avoid warping or distortion of the image). The favicon is an extremely simplified version or a single element/graphic from your logo that will be displayed in the browser tab at the top of your screen.

To exit Elementor, hit the “X” in the top of the Elementor editor next to “Site Settings” (If you have unsaved changes, you will be prompted to either save or discard your changes). Next, select the hamburger menu in the top left corner > Exit to Dashboard.

iii. Footer

Go to “Templates” > “All > Hover over “Footer” > Edit with Elementor. This will bring you to the Elementor editor.

NOTE: Everytime you want to save changes, hit the green “Update” button at the bottom left of the screen. 

a. Bottom info

Click on the text editor containing the “Copyright ©” information. Go ahead and replace the text so that it accurately reflects your business or LLC name and current year. Keep the text containing the name of the website’s designer. Gotta give credit where credit is due!

b. Newsletter

Click on any text to customize it in the content tab on the left.

FloDesk: To learn how to integrate your form with Elementor click here
Mailchimp: To learn how to integrate your form with Mailchimp click here
For any other newsletter providers, look into how to integrate it with Elementor forms.

To hide the newsletter section, hover over the section and select the blue middle tab from the top. In the Elementor editor, go to the Advanced tab > Responsive > Visibility > Toggle the “Hide on Desktop”, “Hide on Tablet” & “Hide on Mobile” options to “Hide”. When you want to show the top announcement bar again, simply toggle it back to “Show”.

c. Instagram

Scroll up to the Instagram feed. If your template has it, click on the instagram handle to edit the text. In the Elementor editor on the left, replace the text with your correct instagram handle.

To hide the Instagram feed, hover over the section and select the blue middle tab from the top. In the Elementor editor, go to the Advanced tab > Responsive > Visibility > Toggle the “Hide on Desktop”, “Hide on Tablet” & “Hide on Mobile” options to “Hide”. When you want to show the top announcement bar again, simply toggle it back to “Show”.

To exit Elementor, hit the “X” in the top of the Elementor editor next to “Site Settings” (If you have unsaved changes, you will be prompted to either save or discard your changes). Next, select the hamburger menu in the top left corner > Exit to Dashboard.

Table of Contents