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
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
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
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
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
6.1 How to Create Filters
6.2. Add Pagination
6.3 How to Sort Lists
6.4 Create a Search Area
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)
8.1 Test you Website - Preview, Staging & Production
8.2 Setting the SEO & Open Graph
8.3 Preview and Publish your Website
2. Building the Base Homepage Layout
3. Dynamic Data and Content
4. Finishing the Homepage - Altering the Structure and Adding Elements
5. Create the Detail Pages Master Layout and a Link from the Homepage
6. Create and customize share buttons
7. Building a New Page with Sort, Search and Pagination
8. Building a new Layout with Sort, Search & Pagination
9. Creating Filters
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.
In this series of videos we’ll customize and rebuild the modules that make up the homepage we built in the first video.
In this lesson we’ll begin to customize our modules, starting with the banner.
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.
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.
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.
In this lesson we’ll be setting up the dynamic content for our remaining horizontal scroll flex layouts.