Streaming live at 10am (PST)

Laitart - Responsive Webflow Template


#1

Dear Webflow users!

I present you the website template I did using Webflow. Template was sent on market but because it didn't pass verification I decided to show&tell it here smile All links are given below!

Laitart Webflow Template
Laitart Template Playground


Symbols

There are few symbols that really speed up creating new pages!

  • Hero + menu is a whole top of the page giving you a chance to create slider and menu instantly on new page!
  • loader is a loader that is currently toggled off but can be easily added. It is showing a loading screen until the content is
    loaded.
  • Breadcumbs - This is a cool feature wink I wanted to create something like breadcumbs in here that are generated automatically. If you go to the website playground and select the breadcumb you will see that there is a "sitename" instead of the page name. Because I decided to make breadcumbs a symbol I wanted to have a control over their content. It is generated automatically using some neat scripts in Custom Code.
  • footer - Footer as a symbol. Just.

Custom Code Features!

I wouldn't be myself if I didn't write some javascript in Custom Code section, huh? ;D There are only few but still great functions in there.

1200px width fix

function bk_fixed1200() {
    if($(window).width() >= 1200) {
        $('.w-container').css('max-width', '1200px');
    }
    if($(window).width() >= 992 && $(window).width() < 1200) {
        $('.w-container').css('max-width', '940px');
    }
}

Loader

function bk_loader() {
    $('.loader').fadeOut(1000);
}

Breadcumbs

function bk_breadcumbs() {
    $('#breadcumb-sitename').text(window.location.pathname.replace('/', ''));
}

Aaaaaaand here is the trigger section:

// when document is ready:
$(document).ready(function() {
    // 1200px width fix
        bk_fixed1200();
    // dynamic breadcumbs
        bk_breadcumbs();

    // when window is resized:
    $(window).resize(function() {
        bk_fixed1200();

    });

    // when window is scrolled:
    $(window).scroll(function() {

    });
});
// when all of the content is loaded
$(window).load(function() {
    bk_loader();
});

Ah sharing is caring wink Hope you enjoy all of this! smile Our portfolio is coming up too, so stay tuned! smile It will be a great wesbite full of amazing features. Want a sneak peak? Dynamic loaded content should be the MOST important one! I love it ;D And so you will smile At least that's what we hope.

Take care!
Bartosz


#3

Sweet stuff! What's the trigger for? (Newbie = me!) stuck_out_tongue


#4

Well... it triggers the functions. like bk_fixed1200(), bk_breadcumbs(); etc that are found within $(document).ready(function() { ... });, $(window).resize(function() { ... }); and $(window).load(function() { ... });,


#5

the breadcrumbs... sweet smile


#6

Very sweet template indeed and thank-you for sharing!


#7