01

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

02

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

03

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

04

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

05

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

06

This is a title

Sriracha normcore lo-fi ascot mixtape. Pop-up copper mug shabby chic salvia prism whatever locavore neutra slow-carb farm-to-table fixie farm-to-table raw denim banh mi kitsch.

Note: This slide out contact menu is designed to be opened from a custom link. Following the instructions in the modal’s link settings toggle to add a link to a page which opens the modal. All styling for the menu content is defined within the individual info boxes. This advanced text block you are reading is the current trigger for the modal. View on the front end and click this block to open the menu.

01

This is a title

Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen.

Icon

02

This is a title

Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen.

Icon

03

This is a title

Taxidermy gochujang quinoa edison bulb chillwave succulents waistcoat. Austin viral celiac twee adaptogen.

Icon
Shop
Basket
Checkout
Shop
Basket
Checkout
Shop
Basket
Checkout

Note: These progress bars are designed to be added to your shop, basket and checkout pages when you have WooCommerce installed. You can copy and paste the relevant row into each page and it will display above the WooCommerce page content. Don’t forget to set the links on each info box so they direct to the correct pages on your site.

Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Background colours are defined in the front and back row background settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

Jenny Green

Web designer

Skills:

HTML, CSS, Javascript, UX/UI design.

Jane Black

Web Developer

Skills:

PHP, Ruby, Python, React.

Jessica White

Content Creator

Skills:

Ascot enamel pin tattooed franzen.

John Brown

Product Support

Skills:

iceland keffiyeh selvage snackwave.

Flexed info boxes

These info boxes sit in a 4 column row. CSS is added in the custom CSS box of the row to make all the info boxes the same height and align the buttons to the bottom regardless of the amount of content.

Learn More

Works with any number of columns

You can change the row layout to any number of columns you wish and the info box will automagically adapt its height to the tallest box.

Learn More

Margin & transform

CSS transform is used to move the icon so half of it overlaps the background colour set in the section, and negative margin is added to the bottom of the icon to compensate for the shift up. Padding is added to the section to create the coloured banner.

Learn More

Adopts your native styles

Fonts and colours are set in the customiser, so once you import the block layout, the content will adopt your site’s styling. Oh, and they’re mobile ready too!

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Note: These circle info blocks are responsive and will retain their shape as long as your content can be contained within the size of the circle. You should adjust the font size for the media number and title text for each device size to avoid forcing the circle into distorting.

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Note: The CSS in the Custom CSS box of the main row only ensures each card stays full height regardless of the content. All everything else is controlled within the block settings.

01

Your Title

Fingerstache ennui pork belly celiac fanny pack. Jean shorts fam copper mug man bun vibecession.

02

Your Title

Enamel pin gatekeep shaman iPhone readymade selfies.

03

Your Title

Four loko seitan leggings vexillologist, hoodie palo santo quinoa microdosing crucifix adaptogen viral.

04

Your Title

Seitan pitchfork brunch neutra enamel pin photo booth put a bird on it forage.

Note: The background colour of the title and text is controlled via CSS. If you would like to change the colour find the following section of CSS is the Custom CSS box of the parent row:

.bb-cta-infobox-1 .kt-infobox-textcontent {
position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 3;
background: var(–global-palette7);
}

Change the background variable colour value.

Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Background colours are defined in the front and back row background settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

1

Title

These info boxes sit in a 3 column row. CSS is added in the custom CSS box of the row to make all the info boxes the same height and align the buttons to the bottom regardless of the amount of content.

Learn More
1

Title

You can change the row layout to any number of columns you wish and the info box will automagically adapt its height to the tallest box. The row layout within each section has a bottom divider applied to create the angled effect.

Learn More
1

Title

The gradient backgrounds are defined in the row layout background settings of each section within the parent row. The number, title, and learn more colours are all define in the info box settings

Learn More

Note: The CSS for these shaped info box icons is in the Custom CSS box in the parent row advanced settings. Each section of CSS is labelled with the name of the shape it relates to, so you can use the CSS only for the shape you want and delete the rest.

For example, the triangle shape only requires the following CSS:

/* Triangle */
.bb-info-tri .kt-blocks-info-box-media {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

This is a triangle

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a rhombus

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a pentagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a hexagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a hexagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is an octagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

Note: The CSS for these shaped info box icons is in the Custom CSS box in the parent row advanced settings. Each section of CSS is labelled with the name of the shape it relates to, so you can use the CSS only for the shape you want and delete the rest.

For example, the triangle shape only requires the following CSS:

/* Triangle */
.bb-info-tri.border :is(.kt-blocks-info-box-media-container, .kt-blocks-info-box-media) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.bb-info-tri.border .kt-blocks-info-box-media-container {
background: var(–global-palette3);
border: 3px solid var(–global-palette3);

}

.bb-info-tri.border .kt-blocks-info-box-media {
transform: translateY(1px);
}


The CSS highlighted in white is where you can change the colour and width of your border. You need to change both the background colour and the border colour. Everything else is managed in the block settings.

Important! Do not add any margin to the icon in the info box media settings as this will break the shape of the border.

This is a triangle

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a rhombus

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a pentagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a hexagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is a hexagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

This is an octagon

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund.

Eyebrow text

Our Services/Products

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Our Services/Products

Craft a compelling description of your business’s offerings and how they can benefit your customers. Highlight the value you bring, the problems you solve, and why your services stand out.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Our Services/Products

Craft a compelling description of your business’s offerings and how they can benefit your customers. Highlight the value you bring, the problems you solve, and why your services stand out.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Eyebrow text

Our Services/Products

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Eyebrow text

Our Services/Products

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Learn more

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Learn more

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Learn more

Eyebrow text

Our Services/Products

Craft a compelling description of your business’s offerings and how they can benefit your customers. Highlight the value you bring, the problems you solve, and why your services stand out.

Call to action

Product / Service

Learn More

Product / Service

Learn More

Product / Service

Learn More

Product / Service

Learn More
Call to action

Eyebrow text

Our Services/Products

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind. Let’s lure them in with all the awesome perks they’ll get from using your product.

Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Background colours are defined in the front and back row background settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

Service 1

Service 2

Service 3

Service 4

Service 5

Service 6

Note: These info box tabs use minimal CSS to add some shadows for depth. All other styling is controlled within the blocks.

The coloured strip on the right is set in the section’s background gradient and the width of the strip is set in the right padding.

If you change the size of your icon or its padding, you may need to also adjust the icon’s negative left margin. If you do this, add the same positive margin value to the info box’s left margin field.

01

Title

These info boxes sit in a 4 column row. CSS is added in the custom CSS box of the row to make all the info boxes the same height regardless of the amount of content.

02

Title

You can duplicate the sections, and they will wrap onto a new row and everything will stay perfectly aligned.

03

Title

You can change the row layout to any number of columns you wish and the info box will automagically adapt its height to the tallest box.

04

Title

The background gradients and reflections are defined in the background settings of each section inside each main section.

Note: The CSS contained in the parent row only controls the ‘shake’ effect on hover. Everything else is defined in the block settings.

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

This is your title

Eyebrow text

Our Services/Products

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Product / Service

Craft a snappy, friendly blurb about your product with your ideal customer in mind.

Note: You can adjust the background colour of the text content area by editing the CSS in the Custom CSS toggle of the parent row.

At the bottom you will find this CSS:

.bb-info-box-window-1 .kt-infobox-textcontent {
background: var(–global-palette7);
}


Change the global palette value to between 1-9

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

Learn More

Note: Change the images in the section background settings and the height in the section structure settings. The overlay on hover colour is defined in the CSS in the parent row’s CSS toggle. Change the RGBA value in the background property of this section:

.bb-info-box-slide-1 .kt-blocks-info-box-text {
align-items: center;
transform: translateX(-100%);
transition: all 0.5s ease;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
}

Restaurant menu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

View menu →

Bar menu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

View menu →

In-room menu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

View menu →