FREEBIE

Medical Divi Layout

By Richard Pruzek

View the Demo

Download File

Buy Me a Coffee

Already subscribed? Enter your email, you won’t be added again
These days, doctors from all around the world have been fighting the coronavirus. I decided to give away a free layout that you can use for your clients from the healthcare industry. It’s my sort of “thank you” for all of them who keep the system in our countries running and risk their lives and lives of their families.
The layout uses Font Awesome free icons which can be further extended by the premium version with almost 8,000 icons (over 1,500 are free). You’ll find the instructions on how to include Font Awesome to your page below in this post. For forms, I used the free version of Caldera forms. I’m also giving the form for download as part of this freebie. You’ll find the instructions below in this post.

Here are the instructions on how to import the freebie:

1. Create a new page and use the Divi Builder

2. Click on Import/Export icon and choose your downloaded .json file for import

2. Give your menu item a cta class

3. Install Caldera Forms plugin and import the downloaded forms (optional)

4. Sign-Up on fontawesome.com and paste the script to Divi → Theme Options → Integration (optional)

Questions You Might Want To Ask

What website content width do you use?
My website content width is 1200px – I recommend the same value for this particular layout. You’ll find the setting in Customize → General Settings → Layout Settings
I cannot add a class to my menu item
Go to Appearance → Menus and click on “Screen Options” at the top-right corner. Make sure that “CSS Classes” is selected.
Where do I get the script needed for Font Awesome?
You can easily get the script here
How can I use Font Awesome Icons on my website?
Find your favourite icon and copy the code (it should look like this: <i class=”fas fa-laptop-medical”></i>)

Create a new module on your page and in the text area, choose “Text” tab instead of “Visual”. Paste the code there. You can change its color and size as normal text in the design tab.

Where is the custom CSS located?
The code module with the custom CSS is located as the last module in the layout.
How can I change the color of menu button and form buttons?
The color is set up via CSS. Find the code module with custom CSS on the page and change the color.
Should I use the Theme Builder for the header and footer?
If you’d like to use the header and footer from the layout as well, I recommend to copy the sections and paste them to the Theme Builder and delete them from the actual page (just for SEO purposes).
The blog module doesn't show correctly.
Make sure you have at least two blog posts with posts on your website.
I have more questions!
You can write me here

Let me introduce myself...

My name is Richard and I created my first website early at high school. I love the world of web design as well as the amazing and supportive Divi Community. As for the services I offer, I mostly work with firms and take care of their online presence but I also work as a sub-contractor for other web design studios.