Image

Showcase

Templates

Design

CMS

Publish

All you need

to know

Learn with our tutorials made just for you

Get started - it's free

See Pricing

Image
Image
Image

Courses

Introduction to Bondlayer
1.Overview

1.1 Intro to the Bondlayer Editor

1.2 Editor Overview - Web Workspace

1.3 The Settings Panel

1.4 Multilingual Design

1.5 Multilingual CMS

1.6 The Styleguide Panel - Edit Colors, Typography, and More Across your Entire Project

1.7 Create and Add Pages

1.8 Exploring The Project Library: Symbols, Shared Styles and Modules

8

Videos

2. Structuring Your Website

2.1 Basic Homepage Layout - Adding a Menu, Slider, List and a Footer Section

2.1.1 Creating Visual Elements - Adding a Button to your Layout

2.1.2 Create a Custom Layout and CMS

2.2. The Sizing and Spacing Panel - Edit Sizes, Padding and Margins

2.3. Managing Elements using Flexbox

2.4 Typography - Adding Fonts and Creating Shared Styles

2.5 Image and Background Image Elements

2.6 Image Presets - Optimize and Format your Images

2.7 Adding Shadows

9

Videos

3. Element Formatting & Responsive Design

3.1 Create Links

3.2 The Different Element States and How To Customize Them

3.3 The Positioning Panel and Properties - Auto, Fixed, Absolute and Relative

3.4 Creating Transitions

3.5 Add and Edit Breakpoints

6

Videos

4.Dynamic Lists

4.1 Creating Dynamic Lists with the Bondlayer CMS

4.2 Data Binding

4.3 Filter Lists and Highlight Specific Content - Adding a Boolean Attribute

4.4 Connect Slider Highlight/ CMS /Detail Pages

4

Videos

5. The Bondlayer CMS - Collections, Detail Pages and Integrations

5.1 The CMS - Create Collections, Entries and Attributes

5.2. Conditional Visibility

5.3 Add Data Fields and Visual Elements to your CMS (Embed Spotify App)

5.4 Bind Data Fields and Visual Elements (Embed Spotify App)

5.5 Adding Share Buttons

10

Videos

6. Create Filters, Pagination, Sorting and Search

6.1 How to Create Filters

6.2. Add Pagination

6.3 How to Sort Lists

6.4 Create a Search Area

10

Videos

7. App Development - Advanced Native Features

7.1 Transitions Between Screens (Mobile Development)

7.2 Create Offline Content (Mobile Development)

7.3 The Favorites Elements - Create a Dynamic List with the User's Favorites

7.4 How to Create an Alert Messages System (Mobile Development)

4

Videos

9. Advanced Layout Features

9.1 Creating Dynamic Lists with Different Configurations - Repeat All Items in Flexbox

9.2 Create Triggers

9.3 The Snippet Element - Create Dynamic Overlays, Pop-ups, Etc.

9.4 Create a Composition Using Relative Position

9.5 How to Add Custom Functions and Code

4

Videos

8. Preview and Publish your Projects

8.1 Test you Website - Preview, Staging & Production

8.2 Setting the SEO & Open Graph

8.3 Preview and Publish your Website

12

Videos

Learning with "The Game"
A. Homepage

1. Introduction

2. Building the Base Homepage Layout

3. Dynamic Data and Content

4. Finishing the Homepage - Altering the Structure and Adding Elements


4

Videos

B. Article Detail

5. Create the Detail Pages Master Layout and a Link from the Homepage

6. Create and customize share buttons

2

Videos

C. Articles List

7. Building a New Page with Sort, Search and Pagination

8. Building a new Layout with Sort, Search & Pagination

9. Creating Filters

10. Pagination

4

Videos

D. Essentials List

11. Building a new Layout with Sort, Search & Pagination

12. Creating Filters

2

Videos

City Guide App
1. Building a Basic Structure with Modules

In this video, we'll build a base structure for a homepage using modules, while customizing them and adding new elements. Modules speed up the construction process, allowing you to build a base structure very quickly.

1

Video

2. Editing Modules: an Introduction

In this series of videos we’ll customize and rebuild the modules that make up the homepage we built in the first video.

1

Video

3. Editing Modules: Banner

In this lesson we’ll begin to customize our modules, starting with the banner.

1

Video

4. Editing Modules - Horizontal List

Now that we’ve customized the banner, we'll move on to the remaining modules, editing the first horizontal list module and its flex layout. We’ll be customizing typography, positioning, background, etc.


1

Video

5. Applying Shared Styles

Shared styles  allow you to easily add the same values to various elements and any change made on them will automatically be applied to the elements they are used in. 

1

Video

6. Adding Background Images, Dynamic Content and Filters

Learn how to set up dynamic content, how to filter a collection with a boolean attribute in order to choose which items are shown on a list, and also how to link two collections with a single-reference attribute.


1

Video

7. Creating Horizontal Scroll Sections: Flex Layouts, Data Binding and Dynamic Content

In this lesson we’ll be setting up the dynamic content for our remaining horizontal scroll flex layouts.

1

Video

8. Sorting a List by Distance

After altering a few details, we’ll create a list showing the locations closest to the user. 

You’ll learn how to sort a list by distance, enabling the option which asks the user for geolocation permission and using a geolocation attribute in the collection.

1

Video