JD Medical - Responsive Health & Medical Joomla Template
JD Medical is a responsive Joomla 3.8 template exclusively developed for health, medical, clinic, dental or veterinary services websites. It is powered by Helix framework (Helix won the J.O.S.C.A.R for the best Joomla template systems.) and built with SP Page Builder Pro (You are saving $49) which helps you to develop pages by just drag and drop element. It makes easy to create page even you don't have any coding skills.
JD Medical include an appointment form which allows your visitors to book an appointment online. Also, there are multiple page layouts for the inner pages and home page. JD Medical include Smart Slider 3 Pro (You are saving flat $25) which allow you to create the beautiful sliding element on the pages.
Most Powerful Features
- Sp Page Builder Pro Integration (Save $49).
- Smart Slider 3 Pro (Save $25). Smart slider 3 is the next generation visual editor to create responsive, animated Sliders and Blocks. JD Medical comes with Smart Slider 3 pro. So you are saving $25 instantly.
- JD Medical is a fully responsive Premium Joomla template which adapts to all computer, tablet and Smartphone screens.
- You get a choice of 3 predefined unique color styles.
- It comes with custom CSS styles, and HTML overrides for the popular K2 content extension.
- JD Medical is fully Compatible with all latest version of Modern browsers like Firefox, Google Chrome, Safari, Opera and Internet Explorer.
- Off canvas Effects
- RTL Language Ready
- Light and fast loading
- SEO Friendly
- Wide, Boxed and one-page layout with background image
- 20+ Module Positions(With any hustle, you can add more)
- Addition exclusive page builder addons.
- Compatible with Joomla 3.8
- Module Layout Manager
- 700+ Google Fonts with update button
- CSS and JS compression options
- Social Share
- Integrated Social Comments
Installing Template Only
Log into the back-end of your site (www.your-site.com/administrator/)
Click on: Extensions -> Extension Manager
On this page, we have an option to install Templates, Plugins, Modules, Components, and Languages. You will have three options:
- Upload Package File - (Install/ select a package from your PC, upload and install it)
- Install from Directory - (get in the path where the package is located on your web server)
- Install from URL - (get the URL to the package)
Option 1 requires you to download the extension to your PC. Option 2 requires you to unzip and move the folders/files to your webserver. All options require the webserver to have write access to the webspace.
Here, we choose the second method: Upload Package File
Select the package from your PC and click the button Upload File & Install
If there are no errors while installing, you’re done. Also, get the success message see below:
How can we verify if we have successfully installed the template?
Here are the steps to follow to verify template install:
Go from tab Install to tab Manage
Set the Type filter to Template
The installed template should appear in the list. If you can find yours under the list of templates, it has been successfully installed.
The Last step is to set the template to default. You can set the template to default when clicked on the star next to it.
Installing Quickstart Package
Some of our new users must be wondering what quick start is? If yes, let’s know bit more about it.
Quickstart is a full demo site that includes: templates, databases, extensions “(are used to extend the functionality of Joomla), images and everything we see on the demo websites. Now, we are aware what quick start is?
Let’s go ahead and see how we can install it.
Step 1- Start with the package download.
The first step is to download the quickstart package from site Joomdev.com
Step2- Localhost or your hosting?
Once you have the package, extract the downloaded package.
If you’re working on localhost…copy the extracted folder to…\xampp\htdocs. If not “xampp” you can try “wamp” and copy the same extracted folder to …\wamp\www
Make sure you have the package downloaded properly from the site.
Okay, now please extract the downloaded package and upload all folders in the folder that you just extracted to the (public_html)
Note* using FileZilla (FTP)
Step3- Create Database
For creating a database, navigate to the cPanel. And, create a new database.
Step 4- Install Quickstart
Run the template installation wizard
- Open your web browser and go to the folder that you uploaded your quickStart Package.
Now click next on the very first step.
There are few settings to edit before we can set quickstart to life.
See the screenshot below for configuration.
- Select the Database Type to “MySQLi (preferred)”
- Type in Database server hostname to “localhost”
- We should always set the Username to “root” and leave the Password “BLANK” If
- The Database name is very important. In the earlier steps, we have created a new database and called it ”demotest” so type in same the database name here.
- Hit NEXT
As soon as we are done with our configurations and hit next, we would see something like, in the screenshot below:
When above process is complete. A small pop box will appear with the message
The database restoration was successful and click next.
We are doing pretty well till now. Let’s move to the next step. Once, we have the restoration done successfully. A Screen will look like this:
On the same screen. Please put the following details under SuperUser Settings
You can set the password you like or can leave it blank as well. If leave blank we should have the default username and password i.e.
The last and final step is to remove the installation directory. We are Almost there!!!!
The moment we hit the remove directory, it should bring a pop up on our screen to visit site frontend.
01. JD Tab
JD Tab is an exclusive add-on for SP page builder pro developed by us especially for JD Medical Template. This add-on allows you to create tab and add doctors/staffs according to the departments in tabs. You can define how many staff members you want to show in one row. You can show maximum 6 members in a row. JD Tab allows you to upload custom icons for tab, add Staff images, and add their other details like name and designation and profile page links.
02. JD Timing
JD Timing is an exclusive add-on for SP page builder pro. This add-on allows you to show operating hours for your hospital/firm. You can add a heading, Monday to Friday Timing, Saturday Timing, and Sunday timing. You need to add all the timings manually.
03. JD Member
JD Member is another exclusive add-on for SP page builder pro developed by us especially for JD Medical Template. This add-on helps you to create staff member profile. You can add Staff Image, job title, their contact information easily. And the most important thing that you can add the available schedule for the member and add a call to action button. Screenshot
Don't update extensions via Joomla's updater, because some of the extensions are "Pro" versions or "Advanced" versions and if you update them, you will downgrade extension to "free" version, with limited features. The Best example of that is SP Page Builder, "pro" version. If you update "automatically" using Joomla updater, you will downgrade it to "free" version. You probably don't have this license key from the developer (Joomshaper), and it is not a Themeforest license.
The best way is to update extensions using Joomla's installer (Extensions > Install, in back-end administrator). Again, do not update "automatically" using update feature, but rather choose required extension from "Extensions" folder of your downloaded package from Themeforest.
- SP Page Builder - update only via Joomla's installer (Extensions > Install).
- Smart Slider 3 - update only via Joomla's installer (Extensions > Install).
- K2 - update only via Joomla's installer (Extensions > Install).
These four extensions should be updated this way, from "Extensions" folder of your downloaded package. SP Page Builder, for example, is "pro" version and you cannot update it automatically because you don't have a license key. That is why we included SP Page Builder in "Extensions" (required extensions) folder of your downloaded package.
There is an option where we can changes the styling choices like Background Shading, Text shading, Hover shading, Drop down menu shading. Change these styling options for desired design. Also, we have 3 different type of presets available for now, which can add varieties to our template.
Mega menu is a simple and easy to use tool for styling our menu's in different visuals. Provided screenshot below explains about different options we can select from to customize our menu.
Menu Type: There is three type of options present here Mega Menu & Off Canvas , Mega Menu, and Off Canvas.
- Mega Menu & Off Canvas: When we have mega menu and off canvas selected.
- Mega Menu: If we select mega menu from the menu type we should be able to see our menu like in the screenshot below:
- Off Canvas: Menu type Off Canvas
In basic setting, we have few thing important to take care off. We will go ahead and have a look one by one. Before we move ahead with the documentation of our template JD Medical.Let's take a look what are the important features we cover here.
Here, we can have different option to present whether we want our header to be sticky meaning if we scroll down the header will scroll down along with the page.
Why use sticky header?
To provide better usability to the user. With the sticky header, it's easy to navigate from one to another when you have a menu and the logo always on top of the screen.
We can manage the sticky header with one click. If we don't need (header) to scroll down with the page. There is an option in the backend where we can turn off/on the header with single a click.
A favicon is included in the header. Must be wondering what favicon is?
Favicon is a small icon on the top of every website basically found in the URL tab. It's associated with the website planned to be used when we bookmark our page.
How we replace default Joomla favicon. We need to upload ico, gif or png graphic file for it.
A boxed layout is a form of layout where we can set the boundaries for our main body, or it is used to define the main body clearly. We can provide width to the template manually by using a custom width.
Wide layout (if No) is perfect for you, if you like airy websites, with no visible borders or page edges. A boxed layout (if Yes) is a form of layout where the boundary of the main body is clearly defined, and you can choose to have the background be a custom image.
A page preloader can be anything an image or an icon. Page Preloader is a nice and skillful way to show loader before the page is loaded completely. This can be handy when your website is bulky or contains a lot of data for the customers even when you have everything optimized.
A Logo is a mark of graphic, emblem or symbol commonly used to distinguish our website from others.
- Logo type: We can represent the logo with an Image or Text.
- Module Position: Logo can be place on any available module position present.
- Logo: Select/Upload logo image for the non-retina device. A Logo can be (PNG, GIF or JPG).
- Retina Logo: Upload a double size of your logo to keep look great of higher resolution devices like retina or 5k display.
- Mobile logo: This logo will be shown in mobile view instead of default logo. Leave blank if you do not want to show different logo for mobile devices.
Body Background Image
Body Background image is an option which allows us to set the background image for < main body > without adding any custom code CSS to it.
- Select image: (JPG, PNG, GIF) image format will be used as the background.
- Background Repeat: By default, a background image is none or no repeated and the image is placed at the top left corner. Options available No Repeat, Repeat All, Repeat Horizontally, Repeat Vertically, Inherit from default settings.
- Background Size: Set the size of the background image. The Default value is cover - is means scale the background image to be as large as possible so that the background area is completely covered by the background image.
- Background Attachment: An option where we can set whether a background image attachment is fixed or scrolls
- Background Position: Sets the initial or starting position of a background image.
There is an extra feature we can add Social Icons can be localized anywhere on the template. Also, 12 icons can be linked to popular social media networks.One addition icon is the custom if we wish to add a custom link. We can mouse over to see the description or little steps describing how to add.
We can also add the contact information anywhere on the website depending on the module position we select from, which includes a phone number and e-mail address.
JD Medical introduces a Coming Soon page which allows you to display a stylish page indicating that your site is either being worked on or under construction.
Error Page implies that asked for a page that does not exist. This could be because the client has entered the wrong URL or that the address that client have asked for references assets that have been moved. Another probability is if a site has moved a page or asset yet did as such without diverting the old URL to the new one, particularly after relocation. At the point when that happens, you'll get a 404 mistake as opposed to being consequently steered to the new page. Presently you can help a tiny bit more yours "lost" clients.
Also, you can add module using "404" position.
All you have to do is add a new module(s) and publish it on "404" position. It can be very useful because you can add their search module, menu or custom code module.
In this section, we can preview Google Maps using their API code. Please add the API code as highlighted in the section below
At this moment utilizing Google Font is significantly much simpler we additionally want to present an "Update Font List" feature. It enables us to revive the list Google text styles. So if there are any new ones, this catch enables you to update fonts with just one click and all new ones will be automatically added to the Helix v3 framework.
Typography settings enables you to pick font and its settings for extensive HTML tags: body, h1, h2, h3, h2, h5, h6 and navigation. All settings are from layout settings, so we have now a simple and productive approach to insert Google font to our site with a couple clicks of our mouse.
Custom font allows us to use custom Google font for selected CSS selector. We just need to turn on an option from font settings.
Note: We are using the font manually in custom.less file. So if you want to use the code from the backend. Need to comment the code from custom.less file.
Let's say I want to use the font for h1 from the backend. Steps to follow below.
- Open custom.less file.
- Look for ".h1 , h1 , h1.sppb-add-on-title"
- Lastly, comment/remove the code.
Be sure you have Compile LESS to CSS file enabled in the template advanced setting.
We can simply customize template built for Joomla 3.7 with our custom code, for example, CSS, JS, meta tags, links and verification code by using the custom fields in that section of settings.
Before < / h e a d >
The Final result on front-end HTML5 code generated by browser engine. That line you can see on the image below was put by JD Medical engine before ending < / h e a d > section and before < b o d y > will start, it means it's fully W3C correctly solution.
Before < / b o d y >
Any code you place here will appear in the bottom of the body section of all pages of your site. This is useful if you need to input a tracking code for a state counter such as Google Analytics or Clicky.
This is useful if you need to input a tracking code for a statistics counter (such as Google Analytics(GA), Piwik, Woopra or Clicky. This tracking code will be available on every page of your Joomla 3.7 website.
You can use custom CSS to add your styles or overwrite default CSS of a template or extension. This option is good small changes in the stylesheets. For more extensive changes (more than 10 lines of code) we suggest to using the custom.css file.
As you can see CSS code was added in Custom CSS section and what is more important is it works smoothly.
Note! Please do not edit the template.css, legacy.css any other CSS file from the JD Medical template. The reason being that all of your changes will be overwritten by template engine. Instead, we suggest using a custom.css file where you can override the default CSS code.
This segment of 'JD Medical' settings enables us to lessen the size of loaded template files. By speeding up a template, we offer a superior better experience for our clients, enhance your page speed and make your CMS seem more steady and expert.
Compile LESS to CSS - JD Medical is developed with LESS system built-in. When customizing our site, we suggest working with LESS files. All our changes in the LESS files will be systematized into the final CSS files, located in our_root/templates/JD Medical/css folder. It will override previous changes.
JD Medical also allows you to Export-Import its settings from “Advanced” tab. It means that you have to download generated text file (by clicking “Export Settings” button), then open in any text editor and paste inside Import field. It includes all basic settings of Template only!. If you're using Quickstart you don't have to do this, default settings are already there.
JD Medical is present with 7 post designs worked in for blogging: Standard, Video, Gallery, Audio, Link, Quote, and Status post organize. With somewhat of code, we can embed module, iframe, HTML, or "Incorporate Component" like Page Builder's page into our blog. Each can be altered in the Article Manager to individualize vibe for blogging and make pleasant looking blog entry without utilizing additional extensions like K2 or EasyBlog.
Comment Setting: This built-in option adds three type sections to our website there are as follows
Social Share: Enable this option to social share buttons in Joomla blog list or a single article.
Next setting is Image Sizes, and we have got set of different options to play around. If we mouse over on the labels, there is a small piece of information available to us.
Image Sizes: Those sizes especially "Thumbnail Image Size" is also used for featured images in "Helix Blog Options" in article edit mode.
Sources and Credits
We've used the following images, icons or other files as listed.
- jQuery - http://jquery.com
- Bootstrap - http://getbootstrap.com
- K2 - https://getk2.org
- Smart Slider 3 - https://smartslider3.com
- Helix 3 framework - http://www.joomshaper.com/helix
- SP Page Builder - https://www.joomshaper.com/page-builder
- ChronoForms - https://www.chronoengine.com/downloads/chronoforms
Fonts / Icons:
- Lato (free)- http://www.google.com/fonts/specimen/Lato
- Open Sans (free) - https://www.google.com/fonts/specimen/Open+Sans
- Font Awesome Icon Font - http://fortawesome.github.io/Font-Awesome
Need More Help?
If you couldn't find an answer for your question in this documentation, feel free to contact us. For technical support, you can contact us via forum here
We’re in UTC-05:00 (Eastern Time Zone), and we aim to answer all questions within 24 hours in weekdays. In some cases, the waiting time can be extended to 48 hours. Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.
Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating this theme.
+ Added - Removed ^ Changed # Fixed
+ Initial Release
29-August-2017 : v1.1
^ Joomla v3.7.5
^ K2 v2.8.0
^ Smart Slider v3.2.4
^ ChronoForms v6.0.7
^ SP Page Builder v2.5.2
^ Helix3 v2.1
# Responsive issue fixed
# Box layout header width
# Coming soon page
# Error page