Frontly - Build Apps With A No-Code Drag-And-Drop Builder
Summary
TLDRPatrick 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
🛠️ 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.
🎨 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.
Mindmap
Keywords
💡Drag and Drop Page Builder
💡Horizontal Container
💡Dashed Border
💡Block Hierarchy
💡Background Color
💡Padding
💡Column
💡Blue Bar Indicator
💡Responsive Analytics Dashboard
💡Design Mode
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
Ver Más Videos Relacionados
Give a New Look to Form Page Interactive Report - Part 15(A)
Adding New Pages In Asp.Net Application (ASP.Net 3 of 44)
How To Use Divi Theme | Complete Step-By-Step Tutorial for Beginners
Managing Events Using Calendar Page - Part 36
Layout Part 1A - Motivation, Divs & Spans Review
CSS Grid Layout In One Video | Complete Web Development Course #26
5.0 / 5 (0 votes)