24. December 2017

Make it Special - New Jimdo Theme Tjörn

Make it Special

Edit here your fullwidth image

Tjörn is a multi-purpose Jimdo theme based on custom layout, you can use it for creating business website for agency or promoting your services and comes with power full features, advanced Matrix themes option panel to help you easily customize it the way you want to fit your need. Find out all new features and design details of the latest release of Tjörn theme.

Creative Animated Navigation

Custom header

You can choose the default dark or custom white header for your website by simply adding the body class "has-custom-header"

See details

Fullwidth version

By default, Tjörn theme has boxed layout which can be changed for full width by adding the body class "fullwidth-version"

See details

Make you images fullscreen

Now you can decide to use in header the original image size of fullscreen

See details

Check the demo

Multi purpose

Multilingual

Explosion

Example of Tjörn theme

How to use Custom header

If you wish to display the white header in specific page, just go to Settings > Edit Head > Pages and add the body class 'has-custom-header'

To setup globally the white header in all pages, the body class 'has-custom-header' needs to be added to the following line in HTML ( custom layout > HTML )


 <div class="global-colors brand-bg brand-link large-inner has-custom-header">
 ...

How to add fullwidth version

To change the boxed layout for fullwidth version, you need to add the body class 'fullwidth-version' to the following line in HTML ( custom layout > HTML )


 <div class="global-colors brand-bg brand-link large-inner fullwidth-version">
 ...

Example of using fullscreen header

Additional class 'is-fullscreen" will make your image fullscreen


 <!-- ************* Fullwidth image ************* -->
<div id="image-fullwidth">
    <div class="item is-fullscreen">
        <div class="hs-overlay bg-gradient">
        </div>
        <div class="btm-arrow">
        </div>
        <img src="https://u.jimcdn.com/cms/o/se69ebd3074c91d80/userlayout/img/tjorn-header.jpg?t=1513509996" alt=""/>
        <div class="carousel-caption animated fadeInLeft">
            <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
                </h1>
                <br/>
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>