Customising Konstra Design | Konstra - Documentation | JoomShaper


Updated Last: 22 June 2021

Customising Konstra Design

The template introduces a handful of new custom CSS class in the template. You can take over their control and create your very own creative design. Following is their description and guideline on how to use them. stripped lines

Vertical Lines On/Off

 To remove vertical-stripped lines go to template settings: Basic > Body > Enable Border: On/Off

enable vertical lines

How to remove three stripes on slideshow 

 To remove three stripes on slideshow pictures please custom CSS:

.main-slider .sppb-container > div::before { display: none; }

They were built using (/images/shaper.svg) file, it means that you can replace them with your own image as well.

Stroke Text White

the template introduces a new style for text content. In this new style, you can apply a whitish-transparent effect on your font. To apply this design to any addon. you can use this class: .stroke-text  Note: applying this style to any addon will change the entire text style.


To apply this effect only to certain words, you need to put it in a span. Have a look at the following screenshot

span txt

To use this effect on a page title, you just need to put the words in a curly brace. 

Stroke Text Black

A similar reverse effect has also been used in the template. To use this style use .stroke-text-black as the class name in your addon's CSS Class field. 

black Stroke

Normal Text Hover

If you've used either of the above styles you can make a special hove effect to make them more elegant. You need to use the .col-animatio class name in the parent column of the addon to apply this special hover effect. 

Section Overlap

Normally the entire template has been designed in a way that the grid/columns overlaps all the rows/addon (basically the entire design) but if you want to make any Row overlap the default grids. You can use .border-backward class to make this happen. To do so, go the Row settings, under the General tab you'll see a CSS Class field. Type in .border-backward in that filed and you're done. 

Feature Hover

A special effect has been used to highlight the "features" of the Feature Box addon to make them more stylish. You can enable/disable this special effect by using .feature-hover class in the custom CSS Class field.