Elements

Alignment – Horizontal and vertical alignment

Using percentage values to make things placed in the center of browser window no matter of its size.

Demo

1. Webflow Designer

1. Add any type of element.

Give it a class.
Style it the way you want but these settings are needed:

margin-top: auto
width and height: auto
position:absolute
top 50%.

2. Go down to Effects

Select Transform and the property of Translate.
Style it:

Move up: –50%

Column - Arrange columns “right to left”

Default, western style is left-to-right, but this is usefull for arabic influenced design where content in columns need to be arranged right-to-left.

1. Custom code | Head code

1. Paste code

.w-col { float: right !important; }

Form - Remove default form styles in iOS

Removes the default glare and rounded style assigned to forms in iOS. Beware that the property of “-webkit-apperarance” will make checkboxes disappear in Safari desktop. In mobile they're still visible.

1. Custom code | Head code

1. Paste code

input, textarea {
-webkit-appearance: none;
border-radius: 0; }

Form - Change placeholder text color in forms

In the Webflow designer, you can't affect the color of the placeholder text. With this custom code you can.

1. Custom code | Head code

1. Paste code

.w-input::-webkit-input-placeholder { /* WebKit browsers */    color:    #6f7787;}
.w-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color:    #6f7787;    opacity: 1;}
.w-input::-moz-placeholder { /* Mozilla Firefox 19+ */    color:    #6f7787;    opacity: 1;}
.w-input:-ms-input-placeholder { /* Internet Explorer 10+ */    color:    #6f7787;}

List – Custom images as bullets

Replace the default list bullet with custom background images.

Demo

1. Webflow Designer

1. Create a list.

Style everything the way you want it. Be sure to tick the box No Bullets in the settings area.

2. Select the list item (not the list itself!)

Add a background, position it where you want it to be and add some padding to prevent the content from overflowing the background image.

Maps – Custom Google maps

Customized Google maps with Snazzy Maps themes. BEWARE! This map is not visible on the ****.webflow.io subdomain due to Google security reasons. It’s only visible on websites attached to a custom domain.

1. Mapbuilder tool

1. Create map and select appearance (themes from Snazzy Maps)

Go to Mapbuildr and create a new map. Do not close the pop-up Your map code.

2. Webflow Designer

1. Create a Section or DIV. Give it a class and an ID of map:

In the designer give it the desired styles.

2. Fetch code from Mapbuildr

Click Get Code. In the code window pop-up, remove <div id='map'></div> and remove Copy Close.
If you want to save your map, you have to log in or sign up. It’s free.

3. Custom code | HEAD code

1. Paste code

*Paste all styles here

4. Custom code | FOOT code

1. Document Write-in

An error message will be shown when pasting the code, so a document Write-in needs to be inserted instead.

[ORIGINAL CODE]

script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyDGh_pfKG3qM_zNbOWqolFkGsuV9DoCXIM&sensor&sensor=false&extension=.js

[REPLACE ORIGINAL CODE WITH]

<script language="JavaScript”>

</script>

2. Replace API Key

Replace API key, where key= starts: https://maps.googleapis.com/maps/api/js?key=AIzaSyDdrBtUru0fUEDbCI5Ag_Jy7um4j8iHWt8&sensor=false&extension=.js

Pop-up – Modal window with slide or fade effect

A modal pop-up window built from scratch in Webflow.

Demo

1. Webflow Designer

1. Important

Classes must be UNIQUE and NOT NESTED.

2. Create a section

Give it a class of Modal Background.
Give it a transparent black background.
To make the modal stay in the same place when scrolling on the page, style it:

position:fixed (full
z-index: 1 (or a value high enough to cover all contents including navbar)

3. Create a Div

Place the div inside the section of it and give it a a class of Modal Window.
To give width and center it, style it:

margin-left: auto
margin-right: auto
width: 70%

Drop any elements the modal will consist of.

4. Create modal Close-button

Add a Link Block with an “X”- icon or a "Close" text link.
Give that link the class Modal Close Link and style it any way you want.

5. Select Modal Background

Make it:

display: none

6. Create a button

Add a button to act as a trigger to open the modal and call it Modal Open Button.

7. Make it scrollable and more mobile-friendly

You can tweak the width of the Modal Window so it's not so squeezed in on mobile devices.
To allow users to actually scroll down to see all of the content inside the modal set the Modal Background to:

overflow: scroll

8. Customize the Modal Window

You can also add interactions to the Modal Window for different effects when the modal opens.

2. Custom code | FOOT code

1. Variations of effects

You can choose wether you want your modal to slide in or fade in. There's also a few tweaked versions where the modal is visible from the start when loading up a webpage, disabling body scroll when modal is visible and preventing the webpage to scroll to top on mobile devices when the modal opens.

2. Fade-in

$(document).ready(function() {
$('.modal-open-button').click(function() {
$('.modal-background').fadeIn();

});

$('.modal-close-link').click(function() {
$('.modal-background').fadeOut(); }); });

3. Slide-in

$(document).ready(function() {
$('.modal-open-button').click(function() {
$('.modal-background').slideDown("slow");

});
$('.modal-close-link').click(function() {
$('.modal-background').slideUp("slow");
});
});

4. Visible on webpage load

$(document).ready(function() {
$('.modal-background').fadeIn();
$('.modal-close-link').click(function() {
$('.modal-background').fadeOut(); }); });

5. Prevent that webpage scrolls to top when opening the modal (happens occasionally)

$(document).ready(function() {
$('.modal-background').fadeIn();
$('.modal-close-link').click(function() {
$('.modal-background').fadeOut(); }); });

6. Makes body unscrollable when modal is visible

$(document).ready(function() {
$('.modal-open-button').click(function() {
$('.modal-background').fadeIn();
$('body').css('overflow', 'hidden');
});
$('.modal-close-link').click(function() {
$('.modal-background').fadeOut();
$('body').css('overflow', 'auto');
});
});

Pop-up – Slide in/out modal

A modal window that slides in and out. This example uses the Contact modal you see on the right of this website.

Demo

1. Webflow Designer

1. Important

Classes must be UNIQUE and NOT NESTED.

2. Create a Div

Give it a class of Main Sidebar.
Style it as you want, but in this particular case:

width: 20%
height: 100%
position: fixed (right)
z-index: 1 (or a value high enough to cover all contents including navbar)

3. Create a Button

Place the Button inside the Main Sidebar.
Style it as you want, but in this particular it is horizontally centered on the modal:

position: absolute
top: 50%
left: *a value making it sit on the outer border of the Main Sidebar Div

4. Create a Div

Give it a class of Main Page Sidebar Wrapper and place it inside the Main Page Sidebar.
Style it as you want, but this setting is needed:

height: 100%

5. Create a Div

Give it a class of Main Page Sidebar Content and place it inside the Main Page Sidebar Content Wrapper.
Place all contents in this Div and style it as you want but this setting is needed:

height: 100%

2. Interactions

1. Create interaction for Main Page Sidebar

Select Main Page Sidebar and add an interaction.
Select Initial Appearance and style it:

move right: 100%
display: block

2. Create interaction for Button

Select the Button that will trigger the sliding and add an interaction.
Select trigger of Click and style it:

First Click – Step 1

move: to origin
display: block

Second Click – Step 1

move: right 100%
display: block

Pop-up – Page loader

A simple full page loader with an animate GIF.

Demo

1. Webflow Designer

1. Create a Section.

Give it a class of Page Loader Section.
Style it the way you want but these settings are needed:

position:fixed
width: 100%
height: 100%
z-index: 10000

2. Create a Div. Place it inside Page Loader Section

Give it a class of Page Loader Contents.
Style it as you want but these settings need to be set:

display: inline-block
position: absolute
top: 50%
transform up: –50%

3. Add contents inside Page Loader Contents

Add the elements of your choice like a heading and an animated GIF file.

2. Interactions

1. Select Page Loader Section

Add an interaction. Select the trigger Load.
Select Wait for assets to load.
Add these settings:

Step 1

opacity: 0% and 1000ms transition

Step 2

display: none

Transform – Skewed Sections

This creates angled line instead of a straight line for elements like sections, divs or images.

Demo

1. Webflow Designer

1. Create a section. Give it a class

Give it a class.
Style it the way you want but these settings are needed:

overflow: hidden
position: relative

2. Inside the section, create a div. Give it a class

Style it:

height: your choice
width: 130%
position: absolute (bottom or top - your choice)
transform --> rotate: angle of your choice.

3. Adjust positioning

Change the numeric positioning values to fit the angled div in the section. Use percentage values.

Codes & Tutorials

by Steven Persson

Elements

Alignment – Horizontal and vertical alignment

1. Add any type of element.

2. Go down to Effects

Column - Arrange columns “right to left”

1. Paste code

Form - Remove default form styles in iOS

1. Paste code

Form - Change placeholder text color in forms

1. Paste code

List – Custom images as bullets

1. Create a list.

2. Select the list item (not the list itself!)

Maps – Custom Google maps

1. Create map and select appearance (themes from Snazzy Maps)

1. Create a Section or DIV. Give it a class and an ID of map:

2. Fetch code from Mapbuildr

1. Paste code

1. Document Write-in

2. Replace API Key

Pop-up – Modal window with slide or fade effect

1. Important

2. Create a section

3. Create a Div

4. Create modal Close-button

5. Select Modal Background

6. Create a button

7. Make it scrollable and more mobile-friendly

8. Customize the Modal Window

1. Variations of effects

2. Fade-in

3. Slide-in

4. Visible on webpage load

5. Prevent that webpage scrolls to top when opening the modal (happens occasionally)

6. Makes body unscrollable when modal is visible

Pop-up – Slide in/out modal

1. Important

2. Create a Div

3. Create a Button

4. Create a Div

5. Create a Div

1. Create interaction for Main Page Sidebar

2. Create interaction for Button

First Click – Step 1

Second Click – Step 1

Pop-up – Page loader

1. Create a Section.

2. Create a Div. Place it inside Page Loader Section

3. Add contents inside Page Loader Contents

1. Select Page Loader Section

Step 1

Step 2

Transform – Skewed Sections

1. Create a section. Give it a class

2. Inside the section, create a div. Give it a class

3. Adjust positioning

Got some cool stuff to be listed here? Get in touch!