Health Insurance - WordPress Theme

Theme Documentation


Introduction

Thank you for purchase!

- This is documentation for "Health Insurance - WordPress Theme". Documentation consists of sections. Every section explains specific part of theme or functionality. List of sections is in left side of screen.

- If you are new to WordPress, it is recommended to read official WordPress documentation first.

- Please read theme documentation and follow instructions for demo theme content setup.

- Use search (ctrl+f keyboard shortcut to find specific words on page).

- If you have questions please send message here using account that you purchased theme with to confirm purchase.

- Before asking for support please read more about general support for themes and item support policy.

Demo theme content setup

Steps for demo theme content setup
1.
Unzip main_file.zip that you downloaded, find „healthinsurance.zip“ and „healthinsurance-child.zip“ files and uplad it to WordPress dashboard.
2.
In WordPress dashboard go to appearance/themes and activate theme „Health Insurance“.

3.
Install and activate all recommended and required theme’s plugins

When plugin's instalation and activation is finished you will see new post types (left dashboard side) for galleries, testimonials etc.

4.
Go to tools/import and import demo.xml file.

Demo.xml file is in "main_file.zip/demo_content" folder.

If you want to import all widget content at once it is recommended to use (install in dashboard and activate) this plugin:
https://sr.wordpress.org/plugins/widget-settings-importexport/
Activate it and import widgets_data.json file from demo_content folder.

Image placeholders (blurred images) will appear instead of images. Theme demo images are not included in download. That is explained in theme description on Themeforest. Please add your images instead of placeholders.


5.
Go to appearance/menus and set demo content menus.

More about menus read in section "menus".


6.
Go to appearance/customize and set static page (front page) for home page

Set other theme options as well. More about theme options you can read in section "theme options".


7.
To set slider, click on "Revolution slider" in dashboard and upload revslider1.zip file that contains demo slider content. revsolider1.zip file is in main_file.zip/demo-content/revslider1.zip

Official plugin page: http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
More details in "slider revolution" section.

8.
If you want to import all widgets from theme demo widget areas (header, footer), activate this plugin https://wordpress.org/plugins/widget-importer-exporter/ and import widgets.wie file from demo-content folder.
9.
Basic installation is finished. For more details and functions please see sections list in left side of screen.

Posts

- Posts are default WordPress functionality.

- When single post is open, excerpt field should be visible. If you don't see it, activate it in screen options (button that appears in top right side of screen when single post is open). Click on "screen options" and mark checkbox "excerpt". Excerpt field is useful for adding short text that will appear in posts short outputs like e.g. post boxes on demo homepage instead of text from text editor. It will also appear in search result instead of text from text editor. If excerpt is left blank, text from text editor will appear.

- This theme has 1 additional custom option for single posts:

a) Option for add/remove sidebar from post (this option appears in all other custom post types as well).

General information about custom post types

All custom post types have default WordPress fields. That includes: title, text editor, featured image. When Rt healthinsurance functions plugin is activated, the custom post type appear in dashboard.

Testimonials

About single testimonials post.

- Testimonials is theme specific custom post type. (code for testimonials and other custom post types is in rt-healthinsurance-theme-functions plugin, that is bundled with theme).

- It has fields for title, text editor and featured image.

- It has no single post available.

How all testimonials posts can appear on specific pages?

- To have testimonials posts appear on pages, use Elementor's page builder element "testimonials" and it's settings.

Gallery filter

About single "gallery filter" post.

- "gallery filter" is theme specific custom post type. (code for "gallery filter" and other custom post types is in rt-healthinsurance-theme-functions plugin, that is bundled with theme).

- It has 1 custom (option for sidebar).

- It has 1 more custom option named "Gallery icons".

- It has excerpt field. Read about excerpt in "posts" section.

- It has category field. Every category is one link in filtering menu.

- This is code snipped from "gallery icons" field (if you imported demo.xml file, the code is already there):

<p><a class="fa fa-search" title="zoom image" href="#" data-elementor-lightbox-slideshow="yes" data-lightbox="example-set">­</a> <a class="fa fa-external-link" title="see more" href="#">­</a></p> <h2>Project title</h2>

- Customize it. Instead of # add absolute URL for image from "media" tab in dashboard, list of icons is here: http://fontawesome.io/icons/

- Code should be added in "text" tab. See screenshot above.

- If you have problem configuring your custom code snippet for icons, please send support message and you will get help with that.

How "gallery filter" all posts can appear on specific pages?

- To have "gallery filter" posts appear on pages, use page builder element "gallery filter shortcode RT" and it's settings.

Menus

Theme has 1 custom menu locations.
- Default multipage menu (multipage website).
When demo.xml is imported, custom menu for all menu locations are imported. You only need to assign it. See image for details and section "demo theme content setup".

Contact form

Everything related to contact is achieved with Contact form 7 plugin plugin. Those are official plugin pages: https://sr.wordpress.org/plugins/contact-form-7/
This is code for contact form styling:

<div> [text* your-name placeholder "Your Name"] [email* your-email placeholder "Your Email Address"] [text* your-subject placeholder "Subject"] [textarea your-message placeholder "Please leave us a message."] [submit "Send"] </div>

Quote forms

Quote forms are created with Contact form 7 plugin.
This is code snippets for quotes form styling (add your shortcodes if needed):

Quote form 1:

<div style="padding: 50px;"> <div class="row form1" style="padding-right:25px;"> <div class="col-md-12"> <h2>Insurance quote form</h2> </div> <div class="divider-space1"> </div> <div class="col-md-12"> <label>Your monthly rate?</label>[text text-910 id:range11 class:rangeexample] </div> <div class="col-md-6"> <div style="margin-bottom: 62px;"> <label style="margin-bottom: 6px;">Do you smoke?</label> [radio radio-102 label_first default:1 "No" "Yes"] </div> <label>Your age?</label> [select* menu-993 "18-25 years" "26-35 years" "36-45 years" "46-55 years" "56-65 years" "65 years and more"] </div> <div class="col-md-6"> <label>Your name</label>[text* text-340] <label>phone</label>[tel tel-105 placeholder "Phone number"] </div> <div class="col-md-12"> [textarea textarea-570 placeholder "message..."] </div> <div class="col-md-12"> [submit "submit"] </div> </div>

Quote form 2:

<div class="row form1" style="padding-right:25px;""> <div class="col-md-12""> <h2>Insurance quote form</h2"> </div"> <div class="divider-space1""> </div"> <div class="col-md-12""> <label">Your monthly rate?</label">[select* menu-377 "100$" "200$" "300$" "400$" "500$ and more"] </div"> <div class="col-md-6""> <label">How many family members you have?</label">[select* menu-377 "1" "2" "3" "4" "5 and more"] <label">Your age?</label">[select* menu-993 "18-25 years" "26-35 years" "36-45 years" "46-55 years" "56-65 years" "65 years and more"] </div"> <div class="col-md-6""> <label">Your name</label">[text* text-340] <label">phone</label">[tel tel-105 placeholder "Phone number"] </div"> <div class="col-md-12""> [textarea textarea-570 placeholder "message..."] </div"> <div class="col-md-12""> [submit "submit"] </div"> </div">

Quote form 1 popup:

<div class="row" style="padding: 12px 12px 0 0"> <div class="col-md-12" style="margin-bottom: 12px;"> <label>Insurance type: </label>[radio radio-186 label_first default:1 "Personal insurance" "Family insurance" "Group insurance"] </div> <div class="col-md-12"> <label>Your monthly rate?</label>[text text-910 id:range25 class:rangeexample] </div> <div class="col-md-6" style="padding-right: 6px;"> <label>Your age?</label>[select* menu-993 "18-25 years" "26-35 years" "36-45 years" "46-55 years" "56-65 years" "65 years and more"] </div> <div class="col-md-6" style="padding-left: 6px;"> <label>Your name?</label>[text* text-340] </div> <div class="col-md-12"> [tel* tel-353 placeholder "contact phone"] [submit "submit"] </div> </div>

Pages and page templates

Every page has option for set single page menu instead of default menu and list of page templates. Some of page templates will display only blog posts if set. See screenshot:

Theme options

All theme options are in appearance/customize. Options for logo, color, title background etc...

Elementor page builder

This is official plugin page: https://elementor.com/

Slider Revolution

This is official plugin page: https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
This is premium plugin and it is bundled with theme. Plugin documentation is bundled with theme as well in "documentation" folder.
Import revslider1.zip file in "import slider" (see screenshot). When it is imported and demo.xml file is imported as well, slider should appear on homepage. If there are issues, click on "slider revolution/embed slider", copy slider's shortcode, and paste it in page where you want slider to appear. See screenshot.

Popups


Popup feature is created with Popup maker plugin: https://wordpress.org/plugins/popup-maker/
To add popup in button as it is in header widget, add popup's class to button code snippet. If theme demo is imported all is already set.
Popup code snippets:
- popup quote form 1

<div class="row"> <div class="col-sm-4"> <img class="alignnone size-full wp-image-2466" src="LINK TO IMAGE HERE" alt="" width="465" height="667" /> </div> <div class="col-sm-8"> [contact-form-7 id="2256" title="quote form 1 popup"] </div> </div>

If needed, add your contact form 7 plugin's shortcode instead of one from example

- popup quote form 2

<div class="row"> <div class="col-sm-4"> <img class="alignnone size-full wp-image-2466" src="link to your image here" alt="" width="465" height="667" /> </div> <div class="col-sm-8"> [contact-form-7 id="2256" title="quote form 1 popup"] </div> </div>

Code snippets


- Code snippets shoult be added in text editor in "text" field.
- This is code snippet for text in text box homepage.
<div class="cta"> <h2>Health insurance for you, your family and employees.</h2> <h3>Information about health insurance available 24h/7d.</h3> <h4>PERSONAL PLAN / FAMILY PLAN / GROUP PLAN</h4> </div>
- This is code snippet for list in "about" section on homepage.
<h2>WHY US?</h2> <h4>what we offer to you</h4> <ul class="special-list"> <li> <div class="nu">1</div> Feature number one iisque no vaiestatis ericula sapientem .</li> </ul>

Plugins

Slider revolution premium plugin, bundled with theme. https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380

Rt Healthinsurance Theme Functions plugin - theme functions and custom post types plugin, bundled with theme.

Elementor page builder free plugin. https://fuc.wordpress.org/plugins/elementor/

Meta boxes free plugin. https://wordpress.org/plugins/meta-box/

Contact form 7 free plugin. https://sr.wordpress.org/plugins/contact-form-7/

Breadcrumbs free plugin. https://wordpress.org/plugins/breadcrumb-navxt/

Popup maker free plugin. https://wordpress.org/plugins/popup-maker/

Easy social icons https://wordpress.org/plugins/easy-social-icons/ WooCommerce

Widgets

- Widgets are default WordPress feature. To find widgets go to appearance/widgets in dashboard. Official WordPress documentation: https://codex.wordpress.org/WordPress_Widgets
- Theme has 2 widget areas in header, 4 in footer, 1 in sidebar.
- Theme demo uses Easy social icons plugin for social icons in widget.
- This is code snippet for top header widget1:
<ul class="widget-address"> <li> <i class="fa fa-phone"> </i> <div> (123) 36-236-2361 </div> </li> <li> <i class="fa fa-clock-o"> </i> <div> 09-17h every day </div> </li> <li> <i class="fa fa-map-pin"> </i> <div> Street 123, City </div> </li> </ul> - This is code snippet for top header widget2 (popup button):
<div class="button1 color1 small text-right popmake-2236"> <a href="#"> Get a quote <i class="fa fa-long-arrow-right"> </i> </a> </div> - This is code snippet for top footer widget4 (address):
<ul class="widget-address2"> <li> <i class="fa fa-phone"> </i> <div>(123) 36-236-2361 </div> </li> <li> <i class="fa fa-clock-o"> </i> <div> 09-17h every day </div> </li> <li> <i class="fa fa-map-pin"> </i> <div>Street 123, City </div> </li> <li> <i class="fa fa-map-pin"> </i> <div>Street 124, City </div> </li> </ul>

How to set permalinks

- Permalinks are in dashboard/settings/permalinks.
- It is recommended to have this permalinks structure (see screenshot):
- If you get "404 page no found" error when trying to open page or post, after theme switch or plugin deactivation it is recommended to "reset permalins".
How to reset permalinks?
- Set permalinks to default (plain) and click button "save changes".
- Set permalinks to "post name" and click button "save changes".
- Done.

Child theme

- Basic child theme for this theme is in main_file.zip.
- Official WordPress documentation about Child themes: https://codex.wordpress.org/Child_Themes
- It is recommended to activate child theme if you make code customizations and to copy/paste all files from parent theme that have custom changes in code in child theme.

How to change color

New! Recommended way to change color. Theme version 1.1.9 global colors added in Customizer. Open "Global colors" settings in Customizer, be sure to choose second option and then change global theme colors. Colors are unlimited. It is recommended that the color that is added instead of default one has similar lightness and saturation to default color to better fit design.

Below is explained how to change color with less file, requires coding knowledge
Steps for color change
a) Activate Child theme.
b) Install and activate this plugin: https://sr.wordpress.org/plugins/wp-less/ or this: https://wordpress.org/plugins/lessify-wp/.
c) Go to "appearance/customize/add style.less file" and mark second checkbox "add style.less file" (this will add style.less file in theme).
d) Open style.less file from child theme in your hosting C-panel or via FTP.
e) In that file find HEX code for color and replace it with HEX code for color you want to have on site.
f) Save changes. New color should appear on site.

g - optional) Now, you can leave it that way and continue use Theme if you're more comfortable that way (you don't like to work with code) or (that is recommended) go to one of less-to-css online compilers like: http://less2css.org/ and copy in that all code from child theme style.less file, paste into editor and convert into css code. Then, open child theme style.css file and copy/paste converted css code from compiler into it. (don't delete anything that is in child theme css file, the links and comments). After this, wp-less plugin can be (and should be) deactivated and style.less file removed from site in "appearance/customize".

- There will probably be parts of site where color is added via page builder element so it will need to be changed manually in that page builder element.

- To find HEX value for color you can use Photoshop or other software for graphic or take a look at this online color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

- In theme demo site, colors assigned to these color variables are: @first-color: #2AB69D; @second-color: #E65848; @third-color: #343844;.

- to change HEX code to RGBA code go to this site: http://hex2rgba.devoth.com/

Other option: If you are comfortable with css code you can change css hex code in main1.css file in parent theme and copy/paste in child theme style.css file, or just parts of code that are changed.

Theme translation

Theme has pot file included, that means text strings in dashboard can be translated. Activate translation plugin (can use Polylang, tested with theme). https://wordpress.org/plugins/polylang/ Check if "languages" tab in settings appears. In theme folder "languages" default pot file is included. To translate text strings in theme, please rename candidates.pot file to "language code" for language you want to translate in, for example if you translate to Portugales language code is "pt_BR" so candidates.pot should be renamed to "pt_BR.po". Then open the file with Poedit and translate text strings. http://poedit.net/ More details about WordPress translation here :http://codex.wordpress.org/WordPress_in_Your_Language http://codex.wordpress.org/Installing_WordPress_in_Your_Language

How to reorder posts

- Install and activate this plugin: https://wordpress.org/plugins/post-types-order/
- It adds "reorder posts" button for all posts and custom post types and you can manually reorder them.

Favicon

Upload favicon in appearance/customize/site identity/site icon. Official documentation: https://codex.wordpress.org/Creating_a_Favicon

Sources and credits

TGM plugin activation https://github.com/thomasgriffin/TGM-Plugin-Activation
Meta boxes https://wordpress.org/plugins/meta-box/
Slider Revolution plugin,
Elementor page builder plugin,
Bootstrap css framework,
Font Awesome font icons, Simple line icons,
Flickity.js,
Isotope.js,
Google fonts,
King Composer plugin,
jQuery.js,
free WordPress plugins listed above,
Demo images credit

Images are not included for download. Images are slightly transformed to fit design. Images and icons credit: Photodune, Dreamstime, http://flaticon.com/
© Andresr | Dreamstime.com - Insured Woman Photo © Rido | Dreamstime.com - Doctor Desk With Tablet Photo © Opolja | Dreamstime.com - Happy Young Female Business Leader Standing In Front Of Her Team Photo © Karandaev | Dreamstime.com - Office Desk Table With Computer, Supplies, Flower And Coffee Cup Photo
go to top

Copyright RayoflightThemes.com 2017.