Introduction

Introducing Homedroid, the premier WordPress theme designed specifically for home service businesses, spanning HVAC, plumbing, cleaning, pest control, and beyond. Engineered for lightning-fast performance and seamless cross-browser compatibility, Homedroid ensures your online presence thrives. With built-in SEO features, your website is primed for success from the start. Customization is effortless with Homedroid, allowing you to tailor your site to perfection. Drive conversions with strategically placed CTAs and seamlessly integrate social media for maximum engagement. Plus, Homedroid seamlessly integrates with the WordPress native editor, offering you unparalleled flexibility in content creation. Stay ahead of the curve with Homedroid’s regular updates, ensuring your site performs at its peak at all times. Elevate your business’s online presence with Homedroid and set yourself apart from the competition.

Install and Activating Homedroid Theme Documentation

There are 2 ways to install Homedroid: 

  1. Installing using ZIP file:
  • Download the Homedroid theme installation file from here by clicking the Download button from here theme page.
  • Login to your WordPress website and go to Appearance > Themes
  • Click on the Add New button and then click on the Upload Theme button
  • Chose the .zip file you downloaded (for example homedroid.zip)
  • Click on the Install Now button
  • After the theme is installed, click on the Activate button.

    2. Installing using WordPress Theme Directory

  • Go to Dashboard > Appearance > Themes
  • Click on the Add New button. In the search field, type Homedroid and hit the Enter key.
  • Now, click on the Install button and then the Activate button to install and activate the theme.

Recommended Plugins

You must install and activate the following plugins to get the best out of the Smartversity theme.

  • Cozy Blocks: Provide 30+ advanced blocks for FSE and Gutenberg editor.
  • Cozy Essential Addons: It provides basic skeletal for the custom post type. It gives base functionality of custom post type so that we will extend the features and layout for our products like plugins and themes.
  • Advanced Import (To import demos): It is a  powerful data importer plugin. It has several features that make it more manageable and convenient for WordPress user to import their WordPress site data from another website.

Importing Demo

After you install and activate the theme and the plugins, follow the steps below to import demo content:

  • Go to Appearance > CT Demo Import
  • Click on the “Import” button of the demo you want to import
  • Read the confirmation message and click on “Yes, Import Demo!”
  • You may need to wait a while because it may take some time.
  • That’s all, your demo will successfully be imported and you can start editing your content.

Customizing Header

  • Log in to your WordPress Dashboard.
  • Click “Edit Site” at the top.
  • Under areas, click on the header section to customize it.
  • Save your changes.

OR

  • Go to “Appearance” in the Dashboard.
  • Click “Editor.”
  • Choose the “Patterns” tab.
  • Under template parts, select “Header” to customize it.
  • Save your changes.

Typography Settings

To customize the typography:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • You will see an option for typography, click on it. 
  • You can now edit the typography from this section.

Color Settings

To change the theme’s colors or to add your own custom colors,

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • Now, click on the colors tab and go to the palettes section.
  • You can now choose whichever color you like or even add your own custom colors.

Global Styles Switching

To switch the global styles of the theme,

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • You will see an option to browse styles, click on it.
  • Choose whichever global style you feel suits your website.

Adding/Editing Logo/Brand

You can add/edit the site logo of your website by following these steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the template part where you want to add/edit your logo
  • Click on the blue ‘+’ symbol on the top left
  • Search for ‘site logo’ and add it
  • Now, upload your site logo

  • You can edit the logo from the dashboard on your right.

Adding/Editing Site Icon/Favicon

To add/edit the Site icon/favicon, follow these simple steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • You can also choose your site logo to be your site icon by clicking on the site logo and enabling the ‘Use as site icon’ option.

     

use as site icon

  • If you want to use a different favicon than your site icon then click on ‘Site icon settings’

     

favicon setting

  • This will redirect you to a new tab where you can add your site icon/favicon

  • Now, set your site icon from here.

Adding/Editing Navigation

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Go to Navigation and select the navigation you would like to edit
  • You can add, remove, or update your navigation from this dashboard.

Customizing Templates

    • Log in to the WordPress admin Panel.
    • Go to Appearance > Editor
    • Go to Templates and select the template you would like to edit and start customizing

Customizing Templates Parts

    • Log in to the WordPress admin Panel.
    • Go to Appearance > Editor
    • Go to patterns and at the bottom, you will see template parts.
    • Select the template you would like to edit and start customizing

Customizing dynamic Query Loop

You can add a dynamic query loop to your website by following these steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the template part where you want to add a query loop
  • Click on the blue ‘+’ symbol on the top left
  • Search for ‘query loop’ and add it
  • You can now choose a pattern for your query loop or start from scratch.
  • Choose from this range of patterns for query loop or create your own.
  • Now to customize the dynamic query loop, select the query loop and disable ‘Inherit query from template’.
  • Now, by going into display settings, you can customize your query loop.
  • You will also find other customization options on the right side of the editor.

Reset/Restore default layout for Templates/Template Parts

To reset or restore the default layout for templates or template parts, follow the steps below:

  • Go to Admin Dashboard > Appearance > Editor
  • Now, click on the ‘Templates or Template Parts’, whichever you would like to restore
  • You will see three dots around the template or template parts you have modified
  • Click on the three dots and you will get an option to clear customization.
  • Click on the button to restore the default layout for templates or template parts.

Adding Animation on Scrolling

To add animation on scroll effect for any section of block, follow the steps below:

  • Go to Admin Dashboard > Appearance > Editor (Or you can access direct from top bar with clicking on “Site Edit” )
  • Click on any blocks like group, columns or paragraph where you want to add animation effect on scroll.
  • Click on “Advanced” at the bottom of the right sidebar panel.
  • Add the following animation classes on “Additional CSS Classes field” (type space for multiple class name) 

Animations Class Name:

 

  • Fade animations:

    • homedroid-fade
    • homedroid-fade-up
    • homedroid-fade-down
    • homedroid-fade-left
    • homedroid-fade-right
    • homedroid-fade-up-right
    • homedroid-fade-up-left
    • homedroid-fade-down-right
    • homedroid-fade-down-left

  • Flip animations:

    • homedroid-flip-up
    • homedroid-flip-down
    • homedroid-flip-left
    • homedroid-flip-right

  • Slide animations:

    • homedroid-slide-up
    • homedroid-slide-down
    • homedroid-slide-left
    • homedroid-slide-right

  • Zoom animations:

    • homedroid-zoom-in
    • homedroid-zoom-in-up
    • homedroid-zoom-in-down
    • homedroid-zoom-in-left
    • homedroid-zoom-in-right
    • homedroid-zoom-out
    • homedroid-zoom-out-up
    • homedroid-zoom-out-down
    • homedroid-zoom-out-left
    • homedroid-zoom-out-right
 

Easing functions:

 

  • homedroid-linear
  • homedroid-ease
  • homedroid-ease-in
  • homedroid-ease-out
  • homedroid-ease-in-out
  • homedroid-ease-in-back
  • homedroid-ease-out-back
  • homedroid-ease-in-out-back
  • homedroid-ease-in-sine
  • homedroid-ease-out-sine
  • homedroid-ease-in-out-sine
  • homedroid-ease-in-quad
  • homedroid-ease-out-quad
  • homedroid-ease-in-out-quad
  • homedroid-ease-in-cubic
  • homedroid-ease-out-cubic
  • homedroid-ease-in-out-cubic
  • homedroid-ease-in-quart
  • homedroid-ease-out-quart
  • homedroid-ease-in-out-quart