Widgets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Widgets
A quick way to display content in the Sidebar, Footer or any other preferred location on the page.
Gallery Widget
Code Snippet For Widget
<h6 class = "mt-2 mb-4">Gallery Widget</h6>
<div id = "wdpk-light-gallery-1" class = "card-columns wdpk-light-gallery">
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-1.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-1.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-2.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-2.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-3.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-3.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-4.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-4.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-5.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-5.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-6.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-6.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-7.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-7.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-8.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-8.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-9.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-9.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
</div>
$wdpk-card-columns-gap: .15rem !default;
$wdpk-card-columns-margin: .15rem !default;
$wdpk-card-border-width: 0px !default;
$wdpk-card-border-radius: 0px !default;
$wdpk-light-gallery-icon-size: .7rem !default;
$wdpk-light-gallery-icon-padding: 7px !default;
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-light-gallery").length !== 0)
{
let obj = {
selectorID: 'wdpk-light-gallery-1',
thumbnail: true,
animateThumb: false,
showThumbByDefault: false
};
require(["app/shortcodes/wdpkLightGallery"], function (e)
{
e.publicCall(obj);
});
}
});
Social Share
Code Snippet For Widget
$wdpk-social-sharing-theme: 'flat' !default;
$wdpk-social-sharing-border-radius: 40px !default;
$wdpk-social-sharing-horizontal-padding: .5rem !default;
$wdpk-social-sharing-vertical-padding: .5rem !default;
$wdpk-social-sharing-font-size: 0.8rem !default;
$wdpk-social-sharing-line-height: 0.8rem !default;
jQuery(document).ready(function ()
{
if (jQuery("#wdpkSocial").length !== 0)
{
let obj = {
shares: [
"facebook",
"twitter",
"googleplus",
"linkedin",
],
url: "https://uneebox.com/woodpecker-html/",
text: "WoodPecker is an HTML theme that is modular and fast",
showLabel: false,
showCount: false,
shareIn: "popup",
selectorID: 'wdpkSocial',
on: {
click: function (e)
{
},
mouseenter: function (e)
{
},
mouseleave: function (e)
{
},
}
};
require(["app/shortcodes/wdpkSocialShare"], function (e)
{
e.publicCall(obj);
});
}
});
Search Bar
Code Snippet For Widget
<div class = "wdpk-menu-search">
<input type = "email" class = "form-control form-control-sm" id = "wdpkSearchInput"
aria-describedby = "SearchInput" placeholder = "Search">
</div>
// No Changes to default SCSS
// No Changes to default JS
List Groups
Code Snippet For Widget
<div class="list-group wdpk-list-group">
<a href="/demos/main-demo/shortcodes/accordion-light.html" class="list-group-item list-group-item-action ">
<span class="wdpk-list-group-text">
Accordions
</span>
</a>
<a href="/demos/main-demo/shortcodes/alerts-light.html" class="list-group-item list-group-item-action ">
<span class="wdpk-list-group-text">
Alerts
</span>
</a>
<a href="/demos/main-demo/shortcodes/animations.html" class="list-group-item list-group-item-action ">
<span class="wdpk-list-group-text">
Animations
</span>
</a>
<a href="/demos/main-demo/shortcodes/audio-player.html" class="list-group-item list-group-item-action ">
<span class="wdpk-list-group-text">
Audio
</span>
</a>
<a href="/demos/main-demo/shortcodes/blockquotes.html" class="list-group-item list-group-item-action ">
<span class="wdpk-list-group-text">
Blockquotes
</span>
</a>
</div>
$wdpk-gray-100: #f8f9fa !default;
$wdpk-gray-200: #e9ecef !default;
$wdpk-gray-300: #dee2e6 !default;
$wdpk-gray-400: #ced4da !default;
$wdpk-gray-500: #adb5bd !default;
$wdpk-gray-600: #6c757d !default;
$wdpk-gray-700: #495057 !default;
$wdpk-gray-800: #343a40 !default;
$wdpk-gray-900: #212529 !default;
$wdpk-listgroup-top-radius: .3rem !default;
$wdpk-listgroup-bottom-radius: .3rem !default;
$wdpk-listgroup-background-color: $wdpk-gray-100 !default;
$wdpk-listgroup-hover-background-color: $wdpk-gray-300 !default;
$wdpk-listgroup-font-color: $wdpk-gray-600 !default;
$wdpk-listgroup-font-hover-color: $wdpk-gray-700 !default;
$wdpk-listgroup-vertical-padding: .6rem !default;
$wdpk-listgroup-horizontal-padding: 1rem !default;
$wdpk-listgroup-border: solid 1px !default;
$wdpk-listgroup-border-color: $wdpk-gray-200 !default;
// No JS Code needed
<div id = "wdpkSocial"></div>