This theme provides a number of settings for each module position. You can apply different background colors and vertical paddings and remove horizontal padding. Each block can have a default, large or full width layout and can be aligned to the left or right.
Edge provides three custom Widgetkit 2 plugins to match the theme – the Slideshow Panel, Slider and Slideshow.
The Slideshow Panel Edge applies an offset to the content, so that the panel overlaps the image. Media can be aligned to the left, right or top of the content. The conjoint slidenav can be placed at the top or bottom of the image.
The Slider Edge widget links the item’s title inside the overlay. Additionally you can select a custom button that appears centered inside the overlay.
This Slideshow places the content inside a custom panel on top of the image instead of the overlay. The panel can be aligned to the left or right.
Edge theme features four different layouts for the main navigation. The menu can be centered and aligned to the left or right. Additionally, it can be centered with the logo above the menu. You can apply a sticky navbar on desktops and on mobile devices, so it will remain fixed at the top of the window when scrolling. Another option extends the dropdown to the width of the entire browser window.
Logo on top
Edge theme comes with an optional blog layout. You can now decide whether your image will be positioned to the left or to the right of your content. The title and meta data of the article are enhanced with a border that slightly overlaps the image.
To set apart headings or other text elements, add the
.tm-text-highlight class to a
<span> element. Add the
.tm-text-highlight-contrast class, so it will work on dark backgrounds.
As a little visual extra, Edge features the
.tm-image-border class. Adding it to a container element with an image inside, will apply an offset border that matches the panel box styling.
<div class="tm-image-border"><img src=""/></div>
You can apply the same border style from the blog layout to any other heading. Just add the
.tm-title-border class to a container element. We also provide responsive alignment classes, e.g.
.tm-title-border-small-left to overlap image and heading inside a grid until they stack.
<div class="tm-title-border tm-title-border-medium-left"> <h1>...</h1> </div>
||Add this class to a
||Add this class to create an offset to the right.|
||Add this class to create an offset to the left.|
||The offset to the right only affects device widths of 480px and higher.|
||The offset to the left only affects device widths of 480px and higher.|
||The offset to the right only affects device widths of 768px and higher.|
||The offset to the left only affects device widths of 768px and higher.|
||The offset to the right only affects device widths of 960px and higher.|
||The offset to the left only affects device widths of 960px and higher.|
More Custom Classes
||Add this class in the General section of your widget to display a rectangular on top of the image as a graphic element.|
||This class will transform your text to capital letters.|
||Add 80px top and/or bottom margin to elements.|