Frontly - Build Apps With A No-Code Drag-And-Drop Builder

Summary

Patrick introduces Front Ley's new drag-and-drop page builder, showcasing its ability to visually arrange items on a page. He demonstrates adding rows, positioning elements like buttons, and adjusting layouts with ease. The builder simplifies complex page designs with intuitive drag-and-drop functionality, enhancing speed and flexibility. Patrick also highlights new features like layout grid lines and visible padding to assist in visualizing page structure, inviting users to explore and share their creations.

Takeaways

• 🎉 Patrick from Front Ley announces a new drag and drop page builder feature.
• 🔄 Users can visually drag items around within a page for a more intuitive editing experience.
• 📦 The feature includes a horizontal container (row) for placing various items.
• 📍 Dragging items shows a dashed border indicating where they can be dropped on the page.
• 🔵 A blue bar appears when dragging, indicating the position of the item relative to others.
• 🔲 Users can place items inside rows or columns, enhancing the organization of page elements.
• 🎨 Customization options like changing background color and adding padding are available for items.
• 🔄 The drag and drop feature simplifies rearranging complex layouts with nested rows and columns.
• 🖥️ The builder mode allows working without the sidebar, providing more space for page manipulation.
• 🛠️ New settings like 'show layout grid lines' and 'add visible padding' help visualize the structure and spacing of rows and columns.
• 🌟 The update aims to make page building faster, easier, and more efficient for users.

Q & A

What is the main feature Patrick is announcing in the video?

Patrick is announcing a brand new drag and drop page builder that allows users to visually drag items around within a page.

How does the new drag and drop feature improve the user experience?

The new feature improves the user experience by enabling users to easily move items around on a page with visual feedback, making the process of building pages faster and more intuitive.

What does the dashed border indicate when dragging an item over the page background?

The dashed border indicates that you can drop the item directly into the page background, similar to adding it to the main page layout.

What is the purpose of the blue bar that appears when dragging an item over another block?

The blue bar indicates the position where the item will be placed relative to the other items, showing whether it will be above or below in the block hierarchy.

How can you add a button inside a row using the new page builder?

You can add a button inside a row by dragging the button over the row and placing it in the middle when the indicator shows it's within the row's boundaries.

What does Patrick do to make the button more visually obvious after adding it to the row?

Patrick changes the background color of the button and adds padding to the row to make the button more visually obvious.

How does the drag and drop feature handle adding items side by side?

The feature allows you to drag an item to the left or right side of another item, and it will automatically position the new item beside the existing one.

What is the benefit of not having the sidebar open while using the new page builder?

The benefit is that you have more space to drag items around and rearrange the page layout without the sidebar taking up screen real estate.

How does the 'show layout grid lines' setting help when building pages?

The 'show layout grid lines' setting helps by providing subtle dotted outlines around rows and columns, making it easier to visualize the structure and placement of elements on the page.

What is the purpose of the 'add visible padding' setting in the page builder?

The 'add visible padding' setting automatically adds padding around the outsides of rows and columns, helping to clearly define their boundaries and improve the visual separation of elements.

What does Patrick encourage the viewers to do after trying the new page builder?

Patrick encourages viewers to experiment with the new page builder, create cool layouts, and share their creations with the community.

Outlines

00:00

🛠️ Introduction to the New Drag and Drop Page Builder

Patrick from Front Ley introduces an exciting new feature: a drag and drop page builder. This tool allows users to visually arrange items on a page, enhancing the user experience by providing a more intuitive way to design web pages. Patrick demonstrates the feature by adding a row to a page and then dragging a button into the row. He explains how the new builder shows options when dragging items, with visual cues like dashed borders and blue bars indicating where items can be dropped. Patrick also shows how to add items inside rows and change their positions relative to other items. He emphasizes the improved speed and ease of building pages with complex layouts, mentioning that the drag and drop feature simplifies the process. The video continues with Patrick moving items around to showcase the flexibility of the new builder.

05:02

🎨 Enhancing Builder Mode with Design Settings

In the second paragraph, Patrick returns to a test page to highlight additional features that aid in the building process. He discusses the 'show layout grid lines' setting, which provides a visual outline of rows and columns, making it easier to understand the structure of the page. Patrick also introduces the 'add visible padding' setting, which automatically adds space around rows and columns for better visualization. These features are designed to assist users in quickly and easily building apps with Front Ley. Patrick encourages viewers to experiment with the new tools and share their creations with the community, expressing excitement to see the layouts users will build. The video concludes with Patrick thanking viewers for watching and promising further updates soon.

Keywords

💡Drag and Drop Page Builder

A 'Drag and Drop Page Builder' is a user interface design tool that allows users to create web pages by dragging and dropping pre-designed elements onto a page without needing to write code. In the context of the video, this tool is a new feature that has been added to the platform, enabling users to visually arrange items on their web pages with ease. Patrick demonstrates how to add a row and then drag a button into different positions on the page, showcasing the flexibility and simplicity of this feature.

💡Horizontal Container

A 'Horizontal Container' refers to a layout element that holds other elements in a horizontal arrangement. In the video, Patrick uses a horizontal container, or 'row,' as a space where he can add various items such as buttons or text blocks. This concept is crucial for understanding how to structure the layout of a web page using the drag and drop feature.

💡Dashed Border

The 'Dashed Border' is a visual cue used within the page builder to indicate where an item can be dropped. When Patrick hovers over the page background while dragging an item, the dashed border appears, signaling that he can drop the item there. This feature helps users understand the spatial relationships between different elements on the page.

💡Block Hierarchy

The 'Block Hierarchy' refers to the order or arrangement of different blocks or elements on a web page. Patrick mentions this when discussing how the blue bar indicator shows where an item will be positioned relative to other items. Understanding block hierarchy is essential for creating a structured and organized web page layout.

💡Background Color

The 'Background Color' is a styling option that allows users to change the color behind the content of a web page element. In the video, Patrick changes the background color of a button to make it more visually distinct. This is an example of how the page builder allows for visual customization to enhance the appearance of web page elements.

💡Padding

Padding refers to the space between the content of a web page element and its border. Patrick adds padding to a row to create more visual space around the button, which helps with the overall layout aesthetics. Padding is an important design element that contributes to the cleanliness and readability of a web page.

💡Column

A 'Column' is a vertical container used to organize content in a multi-column layout. Patrick adds a column inside a row and drags buttons into it, demonstrating how to create a more complex layout with multiple columns. Columns are a fundamental part of responsive web design, allowing content to be displayed in an organized manner.

💡Blue Bar Indicator

The 'Blue Bar Indicator' is a visual aid within the page builder that shows where a dragged item will be placed in relation to other items. Patrick uses this indicator to position buttons side by side, illustrating how it helps users to precisely place elements on the page.

💡Responsive Analytics Dashboard

A 'Responsive Analytics Dashboard' is a web page designed to display analytical data in an interactive and user-friendly manner, adjusting its layout to fit different screen sizes. Patrick mentions creating a responsive dashboard as an example of a complex page that benefits from the new drag and drop builder, highlighting its utility for creating intricate and data-rich web pages.

💡Design Mode

In the context of the video, 'Design Mode' is a setting within the page builder that allows users to edit and preview their web page layouts without affecting the live version of the app. Patrick discusses toggling on 'show layout grid lines' and 'add visible padding' in design mode to help visualize the structure of the page. This mode is crucial for providing a safe space to experiment with layout changes.

Highlights

Introduction of a new drag and drop page builder feature.

Ability to visually drag items within a page for a more intuitive user experience.

Demonstration of adding a horizontal container to the page.

Explanation of how to drag and drop items into the page background.

Showcasing the blue bar indicator for precise item placement.

Adding a button inside a row and customizing its appearance.

Adding another button beside the first to demonstrate side-by-side positioning.

Introduction of adding containers and organizing items within them.

Enhanced speed in building pages with the new drag and drop feature.

Solving complexity in building pages with nested rows and columns.

Demonstration of moving items within a complex dashboard layout.

Ability to move entire rows and rearrange page elements efficiently.

Introduction of new settings in the page builder for better visualization.

Showcasing the 'show layout grid lines' feature for clearer row and column boundaries.

Explanation of the 'add visible padding' setting for easier row and column distinction.

Encouragement for users to experiment with the new builder and share their creations.

Closing remarks and anticipation for community engagement with the new feature.

Transcripts

hey this is Patrick from front Ley today

I'm excited to announce our brand new

drag and drop page builder so we've

added the feature that everybody's been

wanting for a long time which is the

ability to visually drag items around

within your page and I'm just going to

jump right into the demo so you can see

what I'm talking about so if you look at

my page I'm going to start by just

adding a row this is just a horizontal

container that I can put any other item

in now with the new page builder drag

and drop I can just click on let's say a

button and when I start to drag I have a

few different

options if I hover over the background

of the page you can see that the outside

becomes a dashed border and that shows

me that I can drop this right into the

background and it would be just like if

I added it to the page so if I do that

it'll just go somewhere on the page um

but if instead let me delete that block

if I want to put it somewhere

specifically I can do that so when I

hover over another block while I'm

dragging I'll see this blue bar appear

to show me where it's going to appear on

the page relative to the other items so

in this case the bar at the top tells me

it's going to be positioned above that

item in the in the block hierarchy and

if I go down to the bottom bar here you

can see it's going to go below now if I

want it to go inside this row then I

have to place it in the middle and

that's what this indicator means so I'll

do that and now you can see my button is

inside this row so just to make it a

little more visually obvious I'm going

to add a background and I'm going to add

some padding to this row now we just

have a little more space to show off

this feature so I'm going to add well

first I'm going to change the background

color of this button just so it's a

little more obvious now now I'm going to

add another button but in this case I

want to add this button beside this

other button so you can see just like

the container over here we have this

blue indicator that's showing me where

I'm dropping it if I want to put it to

the left side of this button I can just

drop it right there now that I've

dropped it I can still just click and I

can drag it and put it wherever I want

so this is essentially um you know

infinite what I can do with this now I

can start adding other containers so let

me add a column inside here I can add a

few more buttons and now I can have some

fun dragging things around and really

just um a huge Improvement to our page

builder in terms of speed building pages

and especially if you have some complex

uh row column setups where you have lots

of rows inside each other uh it gets a

little complicated and the new drag and

drop Builder pretty much solved that I

think so let's let's try moving some

stuff around so I want to move this

button into my row so I can do that I

can move this button inside this column

and I can move it in a very specific

spot or if I just drop it um somewhere

like on the left or right then it's

actually going to move it just to the

other side of the column inside the the

container so might take a few minutes to

just get used to how these Blue Bar

indicators work and and what they mean

for where the the block is going to be

dropped but I think once you get used to

it you'll really appreciate the flow

that you can have with building pages so

I'm going to jump to a slightly more

complicated page which is this dashboard

this responsive analytics dashboard that

I created it's got a ton of items on it

and this is the kind of um the kind of

page that I think would be previously

very difficult to work with uh so let's

let's just I as you can see I closed my

Styles Tab and the settings tab so I

could just have this full page um all

the space to drag things around and

that's one of the real benefits here is

you don't have to have the sidebar open

just to move stuff around so um yeah

let's let's just say I want to take this

profit margin chart and I just want to

swap it well not swap it but I want to

put it to the right side so I'm just

going to click and drag you can see I

can I can insert it if I put it here it

won't move because it's still staying in

this spot if I put it right here it's

going to swap places with this gross

mark margin and I can uh yeah I can

start really moving things around if I

want I can even take this entire column

I think this isn't no this is a row so I

can take this entire row and drag it and

put it somewhere over here maybe I want

to put it um between these two and

obviously there are repercussions of

where you drag and drop things but uh

it's pretty pretty quick now to just

move things around so you can really

start to build these more elaborate

layouts and hopefully with ease um so

one thing that uh I want to show you is

I'm going to go back to my I'm going to

go back to my test page here so I'm

going to open the page settings and I'm

going to click oh I'm going to open the

Styles as well so there's a new setting

here that is kind of helpful uh while

you're in the Builder mode it won't

change anything in the live app so you

don't have to worry about that but it's

called uh well design mode is the

section and this first setting is called

show layout grid lines so when you turn

that on you can see these very subtle

lines it might not even be that obvious

in this video CU they're very subtle but

each row and column just the rows and

columns have a little dotted outline

around them in light gray just to

visualize for you um exactly what's

going on so let me add another row

inside this uh column and I'll drag a

text Block in there and I'll drag a

button in there um so when I deselect it

and I I put my grid lines on there you

go so I've got I've got my column and my

row and it makes it a little more uh

obvious what's going on and there's also

a new setting called add visible padding

which all it does again only for the

admin mode is it just automatically

forces there to be I think it's a 10

pixel maybe 15 uh 10 pixel padding

around the outsides of the rows and

columns so again it just helps you see

the separation because in this case

without that um it's harder to tell

exactly where the row starts and where

the column begins and and and whatnot so

you can turn those on just one more tool

in your uh tool belt for building apps

quickly and easily with front Le um I

highly suggest you play around with it

and build some really cool layouts and

please share them with the community

because we're all excited to see what

you build anyway thanks for watching

we'll talk soon