Medin WordPress Theme
Premium WordPress Theme
- Created: February 2019
- By: p-themes - Envato author Profile
- Current theme version 1.5.1
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our support forum Support. Thank you very much!
Lets take a closer look at theme's functionality.
Before beginning the installation and configuring of your new theme, you must first have WordPress already installed on a server.
If you are struggling, here is a very detailed guide at Wordpress Codex that will walk you through every step.
1) Installing The Theme
Once you have setup a copy of WordPress, there are two ways you can go about installing the theme:
Unzip the downloaded package and upload the theme directory /medin/ into your WordPress themes directory /wp-content/themes/.
WordPress Automatic Installation
This is definitely the easier route for most. Simply navigate to Appearance > Themes > Add New > Upload Theme. Click the 'browse' button and locate the still zipped theme folder. The theme will be uploaded and installed in a matter of seconds.
Then you need to activate installed theme.
Click Activate or go in admin left menu: Appearance -> Themes and activate Medin
Once you have installed and activated our theme you will be promted to install theme's plugins. Activation of them will be done automatically.
2) Import Layout
Import layout. Go in Appearance -> Medin Import Demo. Import any layout
NOTE! If you need to install the other Medin layout reset all data by using WP Reset plugin. Go in Tools -> WP Reset
3) Add Landing Menu (For Landing Layouts)
Go in Appearance -> Menus, tab Manage Locations. Set in the Location Medin Header Menu - Medera Landing Menu. Press Save Changes button
Firstly, plese, keep in mind that one license of our theme can be used on one domain only. If you need to move your license from one domain to another you should remove it from the old domain and write to us. We'll reset it.
Go in admin: Appearance -> Customizer -> Medin Activation Code
Write your purchased code given from Envato and press the Publish button
After some layout installed you can edit all original forms in the admin left menu: Contact -> Contact Forms
Here you can change parameters to yours
Original demo code for forms
Form: Footer Newsletter
Form: Book an Appointment
Form: Ask the Experts
Form: Contact us
Form: Request Form
HEADER: Blocks in Header
Logo, Favicon - go in admin left menu: Appearance -> Customise -> Site Edentity -> Logo / Site Icon
Top Menu - go in admin left menu: Appearance -> Menus -> choose Medin Header Menu (Medin Header Menu) and edit it following the standard WordPress procedure.
Quick Menu - read Quick Menu
Top Panel in the Header - Contacts, Social accounts.
If for some reasons you have an empty Top Panel you can add widgets with code manually.
- Go in admin left menu: Appearance -> Widgets -> Theme Top Panel
Add 2 widgets names as Medin Demo Widget in the Theme Top Panel
You may not name them. Nevertheless, if you need to name add the symbol ! before Title
So, the titles will not be displayed on FrontEnd (because there is no enough space for titles)
Enter the following codes respectively for both widgets:
For block Top Panel Contacts
For block Top Panel Socials
Header Top Cart
If you don't see this block or need to remove it go in admin left menu: Appearance -> Widgets -> Theme Header Right Buttons, add the widget Medin Demo Widget in it add/remove shotrcode: [theme_mini_cart]
Header Search Button
If you don't see this block or need to remove it go in admin left menu: Appearance -> Widgets -> Theme Header Right Buttons, add the widget Medin Demo Widget in it add/remove shotrcode: [theme_search_header]
Original Homepage demo blocks for all layouts
Please, keep in mind that you will have to insert in blocks your own images.
To edit the Slider: Images, Texts go in Appearance -> Pages -> Dental Home Page (correspondingly to your layout)
Press Backend editor (if it wasn't pressed before)
Edit Theme Main Slider block using VC editor
Original common pages for all layouts
Please, keep in mind that you will have to insert in pages your own images.
Simple Gallery Page
The page used element developed for using with WPBakery composer: Theme Galleries
Example of this block with settings done you can find on the pre-maded page Simple Smiles Gallery
Add the block and choose in the field Type of Gallery - Tabbed Simple Gallery
Please, keep attention to the number of images added and the number of rows in the field Linking of Images Blocks to Tabs
If the number of linking will be not the same as images, so, you will see not all images on store front in this block.
Blog Post Page
Post format - Image:
If you set this option Featured Image will be shown in the top of Blog post page.
Post format options:
- Post Social Buttons HTML
- Post Additional Content
- Featured this post
- Disable Featured Image in Blog Posts Page
- Disable Featured Image in Single Post
- Disable Post Additional Content in Blog Pages
Block with Post Author
To have this block you should fill all profile information: at least Profile Picture and Biographical Info.
Go in admin left menu: Users -> Your Profile -> Biographical Info, Profile Picture
Theme Options: Color scheme and Blog Type
Go in left menu: Appearance -> Customize -> Medical Theme Options
Here you can set color scheme of some of 3 layouts and choose Blog type
Go in left menu: Appearance -> Customize -> Medical Theme Colors
Here you can set Theme main colors. Don't forget to check "Use of custom colors"
About importing forms , please, read chapter INSTALLATION -> FORMS ARRANGEMENT
Medin WordPress Theme uses simply and flexible icon library IcoMoon.
From v.2.2.x icons are inserted in view of svg codes.
How to Add the New Icon(s)
icon - required! full list of icon types you can find here - MAIN ICONS LIST
Firstly, search icon view here. If there is no such icon, so, search it in the new icons list.
Some of new icons which are added to Landing page Medera here - NEW ICONS LIST
link - not required parameter. If you add it you will see icon wrapper in view of
class - not required parameter. If you add only it and no link you will see an icon in div wrapper
Examples of possible icons view:
Icon code Frontend html [medin_icon icon="icon-facebook-logo"] [medin_icon icon="icon-facebook-logo" class="hovicon"] [medin_icon icon="icon-facebook-logo" link="www.facebook.com" class="hovicon"]
If you need to have some new icon which isn't available in the ICONS LISTS, from item 1 you can manually add your icon as shortcode
If you have your icon in png format image you can convert it to svg by using online PNG to SVG converter
After convertion you have an image file with .svg extension. Open it in any text editor, for example, Notepad
From svg file copy only code between tags: <svg ...></svg>
Open on your server the file from plugin: wp-content/plugins/theme-shortcodes/theme-shortcodes.php
Find in it the code:
$ch_icons = array (
Add directly after it the code:
Map in Quick Menu item "LOCATION"
Go in Pages -> 01 QuickLinks - Location
Press Backend editor button if it wasn't pressed. Open VC element and make own changes
Map on "Our Contacts" page
Open Pages -> Our Contacts page.
Arrange the map in the same way using VC element Google maps
There are two plugins which can help you with fast translation of our theme. We've checked and used them on our demo.
This plugin is used to translate theme's pages, posts, widgets,some strings
This plugin is useful to translate local constants which are located in the theme's folder: languages/medin.pot file
You can use either this plugin or Poedit program.
We recommends Loco Translate plugin because it allows to make translation and save them in admin interface. Without local opening of the file.
Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net. After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /languages/ folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP.
You have to create each form for each language. Go in admin: Contact -> Contact Forms. Create the new form, translate all texts and copy the shortcode of the corresponding form.
For each page you have to create separate pages. So, go to the page with new language and insert the copied shortcode.
THEME'S FILES: General HTML Structure of the theme
The body part of the HTML file is divided in three main sections: header, content and footer.
Header HTML structure:
Default menu HTML structure:
Navigation menu in resolution more than 991px looks like horizontal navbar. And navigation menu is collapsed for smaller viewports:
Main Slider HTML structure:
Each sliders item has individual style of the animation: the transition style (data-animation) and the animation delay (data-animation-delay).
You can use any the animation transition type from the site https://daneden.github.io/animate.css/.
Content HTML structure:
Section TilteSection Content
Footer toggle HTML structure:
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
|span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1||span 1|
|span 4||span 4||span 4|
|span 4||span 8|
|span 6||span 6|
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Grid System Rules
Some Bootstrap 4 grid system rules:
- Rows must be placed within a
.container-fluid(full-width) for proper alignment and padding
- Use rows to create horizontal groups of columns
- Content should be placed within columns, and only columns may be immediate children of rows
- Predefined classes like
.col-sm-4are available for quickly making grid layouts
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three
- Column widths are in percentage, so they are always fluid and sized relative to their parent element
- The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as equal width columns. Example: Three elements with
.col-smwill each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
Read more about bootstrap 4 grid here: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
Custom JS file is located at theme's js folder. All external JS plugins are located at js/vendor folder.
If you need more information about external plugins, please visit plugins official sites.
Sources and Credits
We have used the following files as listed.
- Bootstrap - Bootstrap by Twitter
- Instagram Feed - jQuery Tooltips and Popovers plugin
- Slick - jQuery carousel plugin
- Isotope - jQuery plugin filter & sort plugin
- Images Loaded - jQuery plugin for detect when images are loaded
- jQuery Validation Plugin
- Waypoint - jQuery 'inview' event plugin
- Magnific Popup - jQuery popup plugin
- CSS Animation Library
- jQuery Scroll Ease
- jQuery TwentyTwenty Plugin - Plugin for showcase the visual differences between two images
Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
If you are satisfied with Medin WordPress Template please go to your downloads section on ThemeForest.net and rate Medin WordPress Theme with 5 stars.
Otherwise, SEND A EMAIL and I will try to find nice and easy solution for you :)
Hope that you will enjoy in Medin WordPress Template as much as I've enjoyed designing this template.
If you have any questions, please do not hesitate to use our SUPPORT FORUM - We are happy to help!