Draggable Div - Movable Website Content

Masonry Layout Movable Website Content


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:

  1. Draggable & Movable Content
  2. Fully Responsive Grid
  3. Easy Integrate to Existing Design
  4. Easy Integrate to Custom Design
  5. Smart Website Content
  6. Grid Image Gallery
  7. Team Member Grid
  8. Timeline Grid
  9. CSS Flip Box
  10. Grid Features Area
  11. Amazing Movable Effects
  12. Modern & Unique Feature
  13. Cross Browser Optimization
  14. Font Awesome Icons
  15. SEO Friendly Coding
  16. Valid HTML5 & CSS3
  17. Easy to Setup
  18. Easy to Customize
  19. Step by Step Documentation
  20. And Much More!

Browser compatibility:

img

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


Draggable Div - Movable Website Content v1.0.0


Version 1.0.0 – 21 Jan 2017
- Initial release.

Support


With browsing Draggable Div - Movable Website Content you will get first class support! Please feel free to contact with us by email at any time if you run into problems.

Email Us: hitechparks@gmail.com

You need to confirm your purchase from codecanyon.net to get any support.

Credits


Credit Goes to...

  1. Packery
  2. Bootstrap
  3. Font Awesome
  4. jQuary