Menu


            Home  /  How to Use  /  Portfolio

How to apply the Portfolio

We’ve included a simple way to display a great-looking, shareable photo gallery. Just copy and paste the following code into an HTML module and edit to your liking:

  1. <div class="full-width portfolio portfolio-four"><!-- Navigations for categoery class="active shows active category. <a data-filter=".Category1" can be used for categoery its can be any as you wish just make sure you are suing it same for portfolio-item -->
  2. <ul class="portfolio-tabs clearfix">
  3. <li class="active"><a data-filter="*" href="#">All</a></li>
  4. <li><a data-filter=".Category1" href="#">Category 1</a></li>
  5. <li><a data-filter=".Category2" href="#">Category 2</a></li>
  6. <li><a data-filter=".Category3" href="#">Category 3</a></li>
  7. <li><a data-filter=".Category4" href="#">Category 4</a></li>
  8. <li><a data-filter=".Category5" href="#">Category 5</a></li>
  9. <li><a data-filter=".Category6" href="#">Category 6</a></li>
  10. </ul>
  11. <!-- Categoery end --> <!-- Portfolio content / start All content should be under <div class="portfolio-wrapper" -->
  12. <div class="portfolio-wrapper"> <!-- Portfolio content /imagestart<div class="portfolio-item Category3 " Category3 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this-->
  13. <div class="portfolio-item Category3 ">
  14. <div class="image"><a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="video_screen2" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-1.jpg" /> </a>
  15. <div class="image-extras">
  16. <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Donec Ornare Turpis Eget" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Donec Ornare Turpis Eget" src="/portals/0/images/finder-ico.png" /></a>
  17. <h3>Donec Ornare Turpis Eget</h3>
  18. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  24. <div class="portfolio-item Category1 ">
  25. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Screen Shot 2012-06-01 at 3.51.37 PM" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-3.jpg" /> </a>
  26. <div class="image-extras">
  27. <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --><a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Mauris Fringilla Voluts" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Mauris Fringilla Voluts" src="/portals/0/images/finder-ico.png" /></a>
  28. <h3>Mauris Fringilla Voluts</h3>
  29. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  35. <div class="portfolio-item Category2 ">
  36. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="bla" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-5.jpg" /> </a>
  37. <div class="image-extras">
  38. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Proin Sodales Quam" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Proin Sodales Quam" src="/portals/0/images/finder-ico.png" /></a>
  39. <h3>Proin Sodales Quam</h3>
  40. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- Portfolio content /image End --><!-- Portfolio content /imagestart<div class="portfolio-item Category2 " Category2 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  46. <div class="portfolio-item Category4 ">
  47. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port3" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-7.jpg" /> </a>
  48. <div class="image-extras"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup -->
  49. <div class="image-extras-content"> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Nam Viverra Euismod" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Nam Viverra Euismod" src="/portals/0/images/finder-ico.png" /></a>
  50. <h3>Nam Viverra Euismod</h3>
  51. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category4 " Category4 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  57. <div class="portfolio-item Category5 ">
  58. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="DSBE" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-11.jpg" /> </a>
  59. <div class="image-extras">
  60. <div class="image-extras-content"> <!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --><a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur Malesuada Lorem" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur Malesuada Lorem" src="/portals/0/images/finder-ico.png" /></a>
  61. <h3>Curabitur Malesuada Lorem</h3>
  62. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category5 " Category5 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  68. <div class="portfolio-item Category6 ">
  69. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_4" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-9.jpg" /> </a>
  70. <div class="image-extras">
  71. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Suspendisse Pharetra Urna" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Suspendisse Pharetra Urna" src="/portals/0/images/finder-ico.png" /></a>
  72. <h3>Suspendisse Pharetra Urna</h3>
  73. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category6 " Category6 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  79. <div class="portfolio-item Category2 ">
  80. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_10" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-6.jpg" /> </a>
  81. <div class="image-extras">
  82. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Quisque Sit Amet Unte" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Quisque Sit Amet Unte" src="/portals/0/images/finder-ico.png" /></a>
  83. <h3>Quisque Sit Amet Unte</h3>
  84. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category2 " Category2 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  90. <div class="portfolio-item Category3 ">
  91. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="video_screen3" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-2.jpg" /> </a>
  92. <div class="image-extras">
  93. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Morbi Inta Nisiut" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Morbi Inta Nisiut" src="/portals/0/images/finder-ico.png" /></a>
  94. <h3>Morbi Inta Nisiut</h3>
  95. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category3 " Category3 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  101. <div class="portfolio-item Category1 ">
  102. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="full_width" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-4.jpg" /> </a>
  103. <div class="image-extras">
  104. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vestibulum Sodales Ante" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vestibulum Sodales Ante" src="/portals/0/images/finder-ico.png" /></a>
  105. <h3>Vestibulum Sodales Ante</h3>
  106. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category1 " Category1 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  112. <div class="portfolio-item Category4 ">
  113. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="port_slide_12" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-8.jpg" /> </a>
  114. <div class="image-extras">
  115. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vivamus Semper Euismod" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Vivamus Semper Euismod" src="/portals/0/images/finder-ico.png" /></a>
  116. <h3>Vivamus Semper Euismod</h3>
  117. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category4 " Category4 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  123. <div class="portfolio-item Category5 ">
  124. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Nike_shoe_3_by_gormelito" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-12.jpg" /> </a>
  125. <div class="image-extras">
  126. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Ligula Urna Varius" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Ligula Urna Varius" src="/portals/0/images/finder-ico.png" /></a>
  127. <h3>Ligula Urna Varius</h3>
  128. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <!-- Portfolio content /image End --> <!-- Portfolio content /imagestart<div class="portfolio-item Category5 " Category5 is used for portfolio categoery whch is same form any navigation categoery item , you can add more than 1 categoery here e.g<div class="portfolio-item Category1 Category2 ortoher" like this -->
  134. <div class="portfolio-item Category6 ">
  135. <div class="image"> <a href="/Portals/0/images/Vivid-1.jpg"> <img width="220" height="161" alt="Screen Shot 2012-06-01 at 3.51.37 PM" class="attachment-portfolio-four wp-post-image" src="/portals/0/images/Portfolio-10.jpg" /> </a>
  136. <div class="image-extras">
  137. <div class="image-extras-content"><!-- <a href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> this used for link to any page of your site or for other resource<a rel="prettyPhoto[gallery]" href="http://avenger.t-worxsites.com/Portals/0/images/AvengersGroup.jpg" class="icon"> This used for gallery shows in popup --> <a href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur In Tristique" src="/portals/0/images/link-ico.png" /></a> <a rel="prettyPhoto[gallery]" href="/Portals/0/images/Vivid-1.jpg" class="icon"><img alt="Curabitur In Tristique" src="/portals/0/images/finder-ico.png" /></a>
  138. <h3>Curabitur In Tristique</h3>
  139. <h4><a rel="tag" href="/Portals/0/images/Vivid-1.jpg">Title Here</a></h4>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <!-- Portfolio content /image End --> </div>
  145. </div>