Draggable Div - Movable Website Content

Masonry Layout Movable Website Content

Created: Jan-2018
By: Hi-Tech Parks
Email: hitechparks@gmail.com

Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!

Explanation

Draggable Div - Movable Website Content Features:

Draggable & Movable Content
Fully Responsive Grid
Easy Integrate to Existing Design
Easy Integrate to Custom Design
Smart Website Content
Grid Image Gallery
Team Member Grid
Timeline Grid
CSS Flip Box
Grid Features Area
Amazing Movable Effects
Modern & Unique Feature
Cross Browser Optimization
Font Awesome Icons
SEO Friendly Coding
Valid HTML5 & CSS3
Easy to Setup
Easy to Customize
Step by Step Documentation
And Much More!

Browser compatibility:

Draggable Div - Movable Website Content will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation

Installation Draggable Div - Movable Website Content

Please follow all the steps carefully...

Step 1: Download the Zip file which you have purchased.

Step 2: Extract the zip file.

Step 3: Copy all plugin CSS, JS and image files (you can find that's inside of customs and plugins folders inside of assets), and paste it your own website css, js and images folder.

Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Draggable feature).

-----

Step 5: Choice your draggable template page .html file, whose Layout or section you wont to use.

Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).

Step 7: Copy the draggable grid content section from draggable template and paste it where you need to show this in your website template body.
(That's commented inside of the template you can find it easily.)

Step 8: Save your own website template. It's done!

Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.

Customization

If you wont to customize this Responsive movable grid images, icon or etcetera then flow this instruction carefully...

Step 01 - Add or Remove Movable Grid Item: If you need to add or remove grid content item then you have to just copy or delete some code and class (That's commented inside of movable grid content)

Step 02 - Change Item Icon: If you need to change the item icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!

A. Go to the Font Awesome Library and find the icon that you need.

B. Click over the icon and get the iconic code below the symbol.

C. Just copy this code and paste it inside the item contact area.

Step 03 - Change Gallery Thumbnail Image: If you need to change the gallery thumbnail image then you have to just replace the image source or url . Just drop your image inside the img folder then update the image source(img src="image_location/image_name.image_type")!! Do it very simply for make it awesome!!!

Step 04 - Make Custom Movable Content Area: If you want to make a movable grid area with custom content or your existing website content, then you have just make a movable content container area by using this class class="draggable-grid-area". Then you have to add your content single item inside this single item div class class="single-grid-item" . Do it very simply for make it awesome!!!

Step 05: Now save it. Let's go It's ready to use!

How To Use

Click on any item then drag it to move and drop it anywhere inside the content area.

Update