Medin WordPress Theme

Premium WordPress Theme

  • Created: February 2019
  • By: p-themes - Envato author Profile
  • Current theme version 1.8.3

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.

Installation

27223 Customisation video

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:

  1. FTP Upload

    Unzip the downloaded package and upload the theme directory /medin/ into your WordPress themes directory /wp-content/themes/.

  2. 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! After importing layout all demo data of the corresponding layout will be imported: blocks, images, texts

NOTE! If you need to install the other Medin layout reset all data by using WP Reset plugin. Go in Tools -> WP Reset

Activation

Please, 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 the license code from the old domain: remove the license in the Customizer, press the save button.
After this please write to us. We'll reset it.

Don't activate any of caching plugins till your theme's version is activated!

Activation process

Go in admin: Appearance -> Customizer -> Medin Activation Code

Write your purchased code given from Envato and press the Publish button

Activation Problems

Please, keep attention if you see any problems with activation they can be caused by some reasons which are not connected with theme's files:

  • One license on two sites

    You've entered your license code in one site or even on local hosting, for example, for development process. Then you're trying to enter the same code in the other site which will be your final site.

    In such case you should remove the code from your development site, press the save button in the Customizer. Later you should write us on the forum to reset your code from the old site

  • Old theme's version

    Please always check do you have the latest version of our theme.

    During development process we make a review of theme's code, fix the issues and speed up activation process to ensure it on slow or non-optimised servers

    After theme's update clean full browser cache or see your site in the incognito browser tab. Or check your site in an other computer/mobile device

  • Mess of domain names

    Activation works for the current domain (domain name).

    Pay attention if your site and admin panel have different addresses - this can cause problems with activation.

  • Using of caching plugins before license code entering

    Firstly be sure that activation is done. Than activate a cache plugin.

Update

  1. Backup all your themes files and database before any changes making

  2. Upload all files from our theme's folder to the theme's folder on your server

    This loading of files doesn't change your existing pages/posts/media files

    This loading of files doesn't effect on Custom css which can be written on your site in Appearance -> Customize

  3. If you haven't used Child theme and made changed directly in our theme's files you have to notice all of them.

    After uploading of files from our latest version you will have to add your changes again

    To detect and keep all your changes, compare them with a new code you can use any versions control software as GitHub or some svg systems.

    So, you will check all actions in theme's package

  4. The other step is to update the plugin Medin Core

    Don't reinstall it (don't make deactivation and activation of the plugin)

  5. The latest version of the Medin Core plugin is located in the theme's folder: \medin\inc\libs\tgm-plugin-activation\plugins\theme-shortcodes.zip

    Copy this package to your computer and unzip it

  6. You will get the folder [theme-shortcodes] on your computer

    Upload all files from the folder to the folder of the Medin Core plugin on your server

    This path is /wp-content/plugins/theme-shortcodes/

  7. Refresh a full browser cache by pressing twice Ctrl + F5

    Or check your site in some new browser/mobile device

  8. Update of WPBakery composer

    Don't reinstall it (don't make deactivation and activation of the plugin)

    Unfortunately, you're unable to update the plugin in the admin.

    The latest version of it you can always find in our theme’s package: Medin_Package/Plugins/wpbakerybuilder.zip

    Just unpack this package on your computer and upload all file by ftp from it on your site: /wp-content/plugins/js_composer/

    Wait till all files from the plugin are uploaded. Don’t touch anything while it is uploading.

Quick Menu

  1. Creating/editing of the menu

    Do this after you have finally decided what layout will be used.

    If you arranged all Quick Menu settings and need to reset layout by using the WP Reset plugin all changes you will have to implement again.

    Go in admin: Appearance -> Menus -> Medin Quick Links Menu

    Open each item, add icon and QuickLinks Submenu Page Content

  2. Original demo parameters:

    Menu itemIcon html codeChoose pageCSS
    "Location" icon-placeholder-2 "01 QuickLinks - Location" p-0
    "Working Time" icon-clock "02 QuickLinks - Working Time"
    "Request Form" icon-pencil-writing-on-notebook "03 QuickLinks - Request Form"
    "Doctor Timetable" icon-calendar "04 QuickLinks - Doctor Timetable"
    "Quick Pricing" icon-price-tag-1 "05 QuickLinks - Quick Pricing"
    "Emergency Case" icon-emergency-call "06 QuickLinks - Emergency Case"

  3. Original code for pages in Quck Menu

    • Page: "01 QuickLinks - Location"

    • Page: "02 QuickLinks - Working Time"

    • Page: "03 QuickLinks - Request Form"

    • Page: "04 QuickLinks - Doctor Timetable"

    • Page: "05 QuickLinks - Quick Pricing"

    • Page: "06 QuickLinks - Emergency Case"

Landing Menu

If you import, for example, Medera Layout you will see the Landing menu added after the layout importing.

Go in Appearance -> Menus, tab Manage Locations. Set in the Location Medin Header Menu - Medera Landing Menu. Press Save Changes button

You can alsow create a Landing menu manually by using the other layout in Appearance -> Menus

To redirect the menu items to some block from the page you should write in the menu the symobol #and the id selector of the corresponding block to which you need to redirect the menu item,
for example, a link #test_block

Then in some section you should add the id selector as id="test_block"

Go to the corresponding page, open the outer element and add the name in the field Row ID

HEADER: Blocks in Header

  1. Logo, Favicon - go in admin left menu: Appearance -> Customise -> Site Edentity -> Logo / Site Icon

  2. Top Menu - go in admin left menu: Appearance -> Menus -> choose Medin Header Menu (Medin Header Menu) and edit it following the standard WordPress procedure.

  3. Quick Menu - read Quick Menu

  4. 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

  5. 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]

  6. 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]

  7. Header Language Button

    • Go in admin left menu: Appearance -> Widgets -> Theme Header Right Buttons

      Add 2 widgets named as Medin Demo Widget in the Theme Header Right Buttons. Names for widgets are not required.

    • Enter the following codes respectively for both widgets:

      First wrapper html code:

      Second wrapper html code:

    • To add languages we recommend to use, for example, Polylang plugin

      After installing and activating it the widget Language Switcher will appear

      Insert it between mentioned widgets

Homepage

27223 Customisation video

Original Homepage demo blocks for all layouts

Please, keep in mind that you will have to insert in blocks your own images.

Advanced Main Slider

To edit/add the Advanced Slider: Images, Texts, Videos go in Appearance -> Pages

Press Backend editor (if it wasn't pressed before)

Add WP Bakery composer element: Theme Advanced Slider

Keep attention to parameters which can be used in the Content for all Slides field.

  1. {slide}

    This term divides Main slider to separate slides

  2. Only one of this terms should be used in one Slide

    {image} - if you need to add an Image write this term and add images in the field Images of element

    {video} - for video code, for example, in *.mp4 format. Write video code after the term

    {youtube} - for YouTube embedded code. Write a code after this term

    {vimeo} - for vimeo videos. Write a code after this term

  3. {text}

    Write each time this term even if there are no texts in a slide

Examples of composing of Advanced slider:

  1. Slider with 3 slides:
    1 slide with image without text
    2 slide with image and with text
    3 slide with image without text

    {image}{text}
    {slide}{image}{text}<h4>text</h4>
    {slide}{image}{text}

  2. Slider with 2 slides:
    1 slide with image and text
    2 slide with vimeo video

    {image}{text}
    {slide}
    {vimeo}<iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=1&autoplay=0&id=217885864" width="980" height="520" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    {text}

  3. Full example of the slider code - 5 slides:
    2 slides with images 3 slides with different video types: vimeo,youtube, simple video

    Quick page creating with full-width Advanced Slider

    1. Create a new page, press the Text tab in Content

    2. Insert whole code below. Press the save button.

      For your convenience it is a possibility to change your slides content directly in the following field. When all is ready you just copy the content.

      But keep in mind that such changes are saved till you reloading the page

      For good visual understanding the code is made with spaces and line breaks but we would recommend to copy whole code and compress it in one line.
      You can do this, for example, by using such service Compress HTML

    3. Open the element and add your images (2 image in this example). Press save button.

    4. To see full-width slider we recommend in the right block to choose Page Attributes -> Template -> Medin Template

Usual Main Slider

To edit the Slider: Images, Texts go in Appearance -> Pages

Press Backend editor (if it wasn't pressed before)

Edit Theme Main Slider block using VC editor

Slider texts have to be divided by the word: {slide}

Demo examples for each layout see here ORIGINAL HOMEPAGE DEMO BLOCKS FOR ALL LAYOUTS , item 1 in all layout

Instagram widget

Facebook has changed privacy policy for their users and the Instagram doesn’t work for now with current library codes.
We’re working on the problem now.
We hope it will be resolved in the next theme’s update.

  1. As a temporary solution we recommend such plugin 10Web Social Photo Feed

  2. For sure, you can try other plugins. But we have checked this one and detected that it works correctly without conflicts with the themes’ scripts.
    So, for now we can recommend using it.

  3. Also as a temporary solution you can use a clean HTML for the Instagram HTML

Blog Posts Element

Go in Pages, activate Backend Editor (if it isn't enabled before), press Add Element Theme Elements -> Theme Posts Slider, press Edit.

By default block is stretched to full width and has 3 slides

You can copy original content of pre-made Blog Post block from our demo.

Surgery Layout: full-width carousel, item 11

Medical Layout: Blog Posts block + other block in one line, item 9

If you need to change visible number of posts in carousel and their width pay attention to parameters in it:

  1. Number of posts to show

    Go to the tab: Slider Options -> Slides to show - visible number of blog posts in carousel

  2. Width of one single post in carousel

    Go to the tab: General -> Blog post grid class name

    By default posts number is 3. So, css is written for 3 grids. Full number of grids is 12.

    So, we have css: col-md-6 col-lg-4 that is 12/3 = 4

    If you need, for example, set 4 visible slides you should write the css as col-md-6 col-lg-3

  3. Full number of posts in carousel

    General -> Common Count of Posts - full number of posts which will be added to Posts carousel

  4. General ->All block outer class name

    To see full width carousel you should add css: blog-grid-carousel-full js-blog-grid-carousel-full blog-grid-full

    Keep attention to the word "-full" here

Inserting block from other layout

All original blocks from all layout you can find here

You can copy any block from here and insert it in another layout. To do this safe and not to lose the code we recommend to follow the order:

  1. Copy the desired block fully from here . You can open it in any text Editor and change texts. Or do this later after inserting.

  2. Open a page where you need to insert the block in Appearance -> Pages

  3. Disable the WPBakery composer and press the Text tab. Don’t use visual mode because you have to work with the code

  4. In the same end of a page insert the copied code and press the SAVE button

    Check how the block looks. Maybe you will have to arrange css also.

  5. When you are fully satisfied with the new block position backup full page code.

  6. Activate Visual mode of the Editor and drag the inserted block in the desired place

    You can drag the block in any place by using the Editor drag button.

    If something goes wrong you can always restore saved page backup and try dragging again. Pay attention to what place the block is dragging.

  7. When you’re dragging a block check that it moves between existing sections not in the inner part of some section elements.

Homepage preloader

To activate a preloader go in Appearance -> Customize -> Theme settings: General -> Using of preloader

In the field Preloader html enter own html to be used in the Preloader in the Main Slider or use the theme's premade html

Demo code html:

  1. Layout - DentCo

    <div class="inner-circles-loader"></div>

  2. Layout - Ophtalmology

    <div class="loader-circle"></div>

  3. Layout - Laboratory

Pages/Posts

  1. Page title, subscription, some css

    Open a page in the admin, scroll to the bottom Page Format Options

    Here you can hide the title of a Page, subscription text and some css

  2. General recommendation about woking with pages

    • We recommend to backup your pages content before any changes making

      For example, you've done some changes in a page content and checked that all looks correctly you should copy all pages code and save it.
      This can be done either in a text editor or in some test page.

    • All pages are composed by using of WPBakery visual composer. You can open each element, change texts, images, backgrounds in it.

    • To edit some page go in admin: Pages.

      Press on a page title or press the Edit button

      We don't recommend pressing the button Edit with WPBakery Page Builder. It works only when you create a page from the scratch fully by the Composer elements and no using of theme's developed elements and theme's css/html arrangement.
      There is an additional functionality is added to the Composer which works correctly on storefront. But it is not recognized by the Composer's admin decoration.

    • To work in easy visual mode with WPBakery Composer you should enable it by pressing Backend Editor button (if it wasn't enabled before).

      If you see Classic Mode button it means that Editor is activated

    • If Editor is activated you're able move blocks by their positioning

      You can change texts, add own image/replace existing images

      Also you can change/add background image and (or) background colors of blocks

    • Our theme has own html/css structure, so, in all blocks we reset default WPBakery grids structure by filling such term in the field:
      Clean Classes Box: clean

      If you need to use default stucture of composer blocks just remove this term here.
      But this can broke the theme's structure. So, we recommend to not use this term only if you create own blocks, not in theme's pre-made blocks.

    • Please keep attention!
      Our theme has specific blocks which have developed specifically for the best design look. Some css/html structure was developed to achieve such design. If you don't have enough css/html skills we recommend to not make changes in css of the blocks.
      And to not move them to other pages.
      The best way in such case - to change only, texts, images, backgrounds and other options which can't broke page structure.
      If some block is fully not match your site - just remove it fully. And create a new block by using Visual composer functionality.
      It is fully compatible with the theme. None of it functinality is changed in the theme
      About working with the Composer you can read in its default manuals.

    • Also please keep in mind that some of options as colors, fonts, backgrounds you can easy change in Appearance -> Customize

      All details here

Original common pages for all layouts

Please, keep in mind that you will have to insert in pages your own images.

Blog Post Page

  1. Post format - Image:

    Image
    If you set this option Featured Image will be shown in the top of Blog post page.

  2. Type of Blog:

    go in Appearance -> Customize -> Theme settings: General -> Type of Blog Posts Page

    You can set different types of Blog Posts page: Column Posts, Grid Posts Without Column, Grid Posts With column

    Image
    Grid Posts Without Column

  3. Each Post has options in admin left menu -> Posts:

    - 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

  4. 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

Cost Calculator

Our theme uses the plugin Cost Calculator WordPress

Example of the plugin work from our demo Dentist Cost Calculator

Original code of the page from the Dentist demo - Code, item 11

Maintenance Mode

  1. To activate go in admin left menu: Appearance -> Customize -> Theme settings: General -> Set maintenance mode

  2. The default color of the page blocks you can change in Appearance -> Customize -> Theme settings: Colors -> General Colors -> Color main theme

  3. Example from the demo

  4. If you have at least basic css/html skills and you need to change the html structure of blocks you can work with the file from the theme's folder:
    medin-maintanence-mode.php

Theme Options: Colors, Fonts Sizes, Google fonts

  1. Firstly, enable using of custom Colors, Fonts

    go in Appearance -> Customize -> Theme settings: General -> tick "Use of custom options"

    Also you can set color scheme of some of 3 layouts and choose Blog type

  2. COLORS

    Go in left menu: Appearance -> Customize -> Theme settings: Colors

  3. FONTS SIZES

    Go in left menu: Appearance -> Customize -> Theme settings: Fonts sizes

  4. GOOGLE FONTS

    Go in left menu: Appearance -> Customize -> Theme settings: Google Fonts

Forms

Please, keep in mind firstly that sending of emails is connected not with theme's files but with hosting mailing options.
So, you should check if a mailing service is included in your hosting.

In the theme we use plugin Contact Form 7

If you have any not clear moments about forms work and parameters in them you should read the official manuals of the plugin.

There are no changes of the core plugin functionality in our theme.

Pay attention to form configuration

  • Open some form in admin: Contact -> Contact Forms, tab Mail -> Message body

    The code in it outputs a mail which will be seen to your after client writes something

  • For example we have such code:
    From: [your-name]-[your-email],
    Message Body:
    [your-message]

    There are 3 variables: your-name, your-email, your-message

    Each of them has to be placed in the code of corresponding form

  • So, open tab Form and insert each of variable

  • You can use more variables, create more form fields and write them in the Message body for your convenience

Original demo code for forms

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

  1. Form: Footer Newsletter

  2. Form: Book an Appointment

    • Button code

      After clicking a popup window will appears

    • Pages Form code

      This code includes outer modal window code, CLOSE button code. It should be inserted in admin: Appearance -> Pages

      In a page editing field press the Text button and add the above code in the same end of a page.

      After code inserting press SAVE button.

      If you need to edit the original popup modal window activate WPBakery Composer mode (if it hasn't been activated before). And press the Visual button in a page field.

    • Form code itself

      This code includes form fields and submit button. It should be inserted in the plugin section in Contact -> Contact Forms

  3. Form: Ask the Experts

    • Button code

      After clicking a popup window will appears

    • Pages Form code

      This code includes outer modal window code, CLOSE button code. It should be inserted in admin: Appearance -> Pages

      In a page editing field press the Text button and add the above code in the same end of a page.

      After code inserting press SAVE button.

      If you need to edit the original popup modal window activate WPBakery Composer mode (if it hasn't been activated before). And press the Visual button in a page field.

    • Form code itself

      This code includes form fields and submit button. It should be inserted in the plugin section in Contact -> Contact Forms

  4. Form: Contact us

    • Pages Form code

      It should be inserted in admin: Appearance -> Pages -> Contact

      After code inserting press SAVE button.

    • Form code itself

      This code includes form fields and submit button. It should be inserted in the plugin section in Contact -> Contact Forms

  5. Form: Request Form

Captcha in forms

To use captcha functionality in your forms we recommend such plugin - Really Simple CAPTCHA
It is developed by the same developers as forms plugin which we use for our forms (Contact form 7). So, it can be easy to integrated in each form.

The plugin requires SSL management on your site. To do this you can use such plugin - Really Simple SSL

Examples of forms with captcha:

  1. Form: Book an Appointment

  2. Form: Ask Question

  3. Form: Make an Appointment

  4. Form: Contact Us

Payment Module

We recommend to use such plugin to add payment module on your site.

Example of its work you can see after pressing "PAY ONLINE" buttons:

By default these buttons are not connected with plugin. To use the plugin you should replace default code with shortcodes.

  1. Open Homepage, scroll to the page, open element Single Image, field Additional html, press the Text button

  2. Replace all code which is highlighted to such code:

  3. If you want to use a button with a form popup write such html code

Icons

Medin WordPress Theme uses simply and flexible icon library IcoMoon.

From v.2.2.x icons are inserted in view of svg codes.

Shortcode example:

Shortcode parameters:

  1. icon - required! full list of icon types you can find here - ICONS

  2. class - not required parameter. If you add only it and no link you will see an icon in div wrapper

  3. link - not required parameter. If you add it you will see icon wrapper in view of

  4. name - not required parameter, works if an icon outer wrapper is link. Set in the link as title attribute.

  5. target - not required parameter, works if an icon outer wrapper is link. It has the same parameters as the default HTML target attribute

    Attribute Values

    Value Description
    _blank Opens the linked document in a new window or tab
    _self Opens the linked document in the same frame as it was clicked (this is default)
    _parent Opens the linked document in the parent frame
    _top Opens the linked document in the full body of the window


  6. Examples of possible icons view:

    Icon codeFrontend 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"]

  7. 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>

    • To ensure correct code inserting compress this svg code in any converter service, for example, Compress HTML

    • 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: array("icon-youricon",'<svg class="icon icon-youricon" ...></svg>'),

    • Keep attention: you should add the css class "icon". So, icons will have common theme's style of icons.

Google Maps

  1. 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

  2. Map on "Our Contacts" page

    Open Pages -> Our Contacts page.

    Arrange the map in the same way using VC element Google maps

Translation

Recommended plugins

There are two plugins which can help you with fast translation of our theme. We've checked and used them on our demo.

  • Polylang

    This plugin is used to translate theme's pages, posts, widgets,some strings

  • Loco Translate

    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.

Examples

  1. Forms
    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


Header HTML structure:

	
	

        

            

            

            

        

        

            

                ...
            

        

        

            

                

                    
                    

                        
                    

                    

                        

                            ....

Header Navigation

Default menu HTML structure:

Navigation menu in resolution more than 991px looks like horizontal navbar. And navigation menu is collapsed for smaller viewports:



Slider

Main Slider HTML structure:

						
						

                            

                                

                                    

                                    

                                        

                                            

                                                Slider Content
                                            

                                        

                                    

                                

                                

                                    ...
                                

                                

                                    ...

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

Content HTML structure:

	
	

        
        

            

                

                    
Section Title

                

                Section Content
            

        

        
        ....
        
        

            

                
Section Tilte

                Section Content

FOOTER

Footer toggle HTML structure:

	
	

        

            

                

                    

                        

                            
                            

                                ...
                            

                        

                        

                            

                                ...
                            

                        

                    

                

                

                    ...
                

                

                    ...
                

            

        

        

            

                ...

Grid System

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
span 12

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 (fixed-width) or .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 .row and .col-sm-4 are 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 .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
  • 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-sm will 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

JavaScript

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.

FAQ

  1. INSTALLATION: Why I see the red screen after moving site to another domain?

    Please, 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 the license code from the old domain: remove the license in the Customizer, press the save button.
    After this please write to us. We'll reset it.

    About possible problems with activation you can read here - Activation problems
    ​Please check, do you have the latest version of the theme?
    If not, could you update it following the instructions - Update

  2. INSTALLATION: Why there are too much time when Medin Core plugin installation and the plugin is finally not installed?

    This is connected with slow speed of your server working: maybe, it is slow itself, or maybe some arrangement is done not correctly. Installing of the plugin Medin core adds some demo blocks, uploads some images. So, it doesn't work on your hosting.

    You should ask about speed from your hosting manager. Because the speed can effect on work of your site in the future.

    Also you can do some changes manually. But this will cause uploading of not all content from the theme.
    Please, remove the line of code:
    register_activation_hook( __FILE__, 'medin_add_common_demo_elements' );
    ​ in the file of the plugin in wp-content/plugins/theme-shortcodes/theme-shortcodes.php

  3. INSTALLATION: Why after I've installed the layout Surgery there is no Quick Links Menu?

    Yes, all is correct.
    Our design concept is so, that this blocks is hidden for Layout 2.
    So, if you have chosen Layout, surgery you will not see this block.
    Nevertheless, if you need to display this block we can write you instructions how to do this.

  4. GENERAL: How to optimise my store?

    Unfortunately, speed isn’t connected fully with the theme’s files. We can give only general recommendations.
    Some changes should be done on a hosting side, some on a site.
    In common cases, the easy way is to use some cache plugins.
    We can recommend reading, for example, such article for details

    Also, please, pay attention to the options which can be set in the .htaccess file

    Finally, the speed is connected with images number, their quality and compression.
    For images optimization try, for example, such service - https://tinypng.com/

  5. GENERAL: How to add new Google Font?

    Firstly, you find the desired font in font.
    Add it in the theme’s file -\medin\inc\medin-functions\medin-enqueue-scripts.php in view of
    wp_enqueue_style('medin-your-font', 'absolute path to google font', array(), false, 'all' );
    For example,
    wp_enqueue_style('medin-your-font', 'https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i', array(), false, 'all' );
    Choose desired parameters for your chosen Google font.
    Then open files
    -\medin\assets\css\medin-dev.css
    - \medin\assets\css\style.css
    find
    font-family:'Poppins', sans-serif !important;
    And replace with your font name, for example,
    font-family:Open Sans, sans-serif !important;

  6. GENERAL: Why I have problems with forms sending?

    Firstly, you have to check if your hosting is arranged to send mails. You can simply try to change email in Settings -> General. But search mails in spam folders too. Than you have to be sure that all form settings are done. And there are no errors in Contact form like this

    To configure forms correctly, you can create some new form and copy all settings from it to all your forms. Keep attention to the tab Mail, all variables in it

  7. HEADER: How to remove the search field in the Header?

    Remove the code: get_search_form(); in the file header.php

    To disable search without editing files, just install the plugin

  8. HOMEPAGE: Why the Main slider doesn't work?

    Some of your custom changes/3rd party plugins can cause this.
    Firstly, please, check if you have the plugin All in One SEO installed on your store.
    We've analyzed the plugin All in One SEO. There is the problem with the main slider and the plugin. Also, the conflict is in other blocks.
    This is connected with the mode of work of the plugin.
    The plugin moves to the top scripts, which are added to the slider as localize script. The default WP function is used for this purpose: wp_localize_script();
    But main libraries, in this case the slick slider library, is placed lower in the code. So, the main slider can't be generated.
    I can advise you to find in the plugin the option to not move the script's position. Or you can ask such question from the plugin support team

  9. HOMEPAGE: How to change images in the block General Services?

    Go to Home page, scroll to block and edit 2 texts blocks like this

    Or press Text to see the page code. And find in the code

    Change in data-bg your path to images

  10. PAGES: How to remove breadcrumbs on all pages fast?

    Please, write such css: .breadcrumbs-wrap {display:none}
    You can write it in the Child theme. Or in the admin Appearance -> Customize -> Additional CSS

  11. PAGES: How to change the images in page SCHEDULE/DOCTOR TIMETABLE?

    Go to Pages, Doctor timetable page, activate the WPBakery composer if it isn’t activated.
    Open the Text element and change images paths to yours

Sources and Credits

We have used the following files as listed.

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.

Kind Regards,
p-themes

If you have any questions, please do not hesitate to use our SUPPORT FORUM - We are happy to help!