Pages

INTRO In this lesson, we’ll discuss Pages. Pages let you build the screens your customers see in your app. We’ll start from scratch: adding a page, adding sections, and then exploring the three builders. No‑Code Element, Drag & Drop, and Code. Let’s get started. ADDING A PAGE To add a page, go to the Platfio Editor, click Pages, press Add, and choose Blank. Give the page a clear name—for example, “Home”—then press Save. This will take you to the Page editor. ADDING A SECTION Next, we’ll add a new section to the page. Inside the Page Editor, press Add and choose Blank. Name this section “Section 1” and press Save. Now that we’ve added a section, it’s important to understand there are three ways to build each section of your app: with no‑code elements, with the Drag & Drop builder, or with code components. ELEMENT BUILDER Let’s start with no‑code elements. Set Builder to Element, then go to Display. We can customize how each element is displayed, but let’s start with a grid layout. Add 5 elements so we can see them in a grid layout. Now let’s go back to the page editor and add another section called “Section 2.” In Display, let’s set the layout this time to Slide, then add three elements. We now have elements in both grid and slide layouts. Next, go to Display and customize the color. The color picker shows your app’s primary, secondary, and tertiary colors set up in the Theme Editor, as well as neutral colors like black and white. Once you’ve chosen a color, press Save. Now let's make the slides a little smaller by setting two and a half slides per view. Now that we’ve changed that, we can also add icons to the slides. Let’s go to element Let’s choose slide 1, click on icon and pick an icon, then press save.

How about the grid? Let’s customize it to look nicer. First. Let’s go back to section 1 then display, and let’s set the grid to show 2 columns per row. Note that the settings in display affect all elements, but each individual element can be customized for a more interesting user interface.

To do this, you can go to a specific element, and for this example let’s use Grid 1. Let’s rename it to Yoga Merch. Then click on formatting. The settings we change here will only affect the individual element we have chosen. Let’s remove this from the card and set the grid column to 1 column per row. Next let’s make the heading a little bolder. Click on the text option and set the heading weight to 7. Let’s also add a button, change the shape to outline and let’s make the size small and save the changes. To make sure that the button is working, let’s set the link and choose the Yoga Merch Product Once we’re satisfied with the changes, save it so that we can see what it looks like. We can also add images to the grid sections. Click on the element, then click image, and choose the image then press save. Let’s repeat this for the other 3 remaining elements.

Element’s are extremely powerful, you can create any user interface or experience with display and elements settings. Elements are also extremely robust, It’s difficult to break them and easy to maintain, which is why they are the default builder for your app. That said, we also support the drag & drop builder.The drag and drop builder is great for situations with heavily formatted text and image like blog posts,or e-learning experiences.

DRAG & DROP BUILDER Now let’s add a Drag & Drop section. Go back to the Page Editor and add a new section; call it “D&D,” then set the Builder to Drag & Drop. Press Blocks and add a Drag & Drop block. Drag an Image block, double‑click it, and select an image. Then drag a Heading block and a Paragraph block. You can edit the Heading and the paragraph text, and rearrange them as needed, then press Save. Additional block properties will be added over time, but the basic flow is the same.

However, if your idea pushes past what Elements and Drag & Drop can handle—think complex interactions, custom animations, or deep API integrations—you can always switch to the Code builder. Writing components directly in code gives you total control and lets you craft features exactly the way you envision them.

CODE BUILDER Next, let’s add a new section and try the Code builder. First let’s use Pro Mode. Go back to the Page Editor, add a new section, name it “Pro” and switch the Builder to Code. Press Components, add a component, Name it Pro, and choose a mode.Let’s use Pro Mode which gives you full control. Let’s add a new component, then click on Body, then click on the hammer icon. Let’s create a button, click on the button option and then click on where that button will lead to, let’s select “Profile for this one”, then press add and then save. Click on the button and see if it works. The pro mode of code allows you to polish and refine the way that your code works. Next, let’s use Vibe Mode to create code with the help of AI. go back to the page editor Add a new section and name it “Vibe”. Go to Components, add a component and click on “Vibe Mode”. Let’s create a button using AI with Vibe Mode. Click “Let’s Vibe,” enter the prompt to make the button and press Generate.

You can edit the component as needed, and when you’re satisfied, press Save. Click the button and make sure that it works. Prompt: “Make me a block button with fill outline and when I press the button it should launch a modal and inside the modal it says, “Hello Platfio!”

ADDING DYNAMICS (OPTIONAL) Best of all, you can dynamically create elements, blocks, or components using data from the database. To add a dynamic element, let’s go back to the pages editor and create a new section, and name it Dynamics. Set the builder to Element, and toggle on dynamics. Then go to the Dynamics tab, use the path selector to choose your data—In this example, let’s get the quotes. Then Fetch the demo data, Let’s add the Author name on the Heading, and then add the quotes on the description. Then press Add.

Let’s make it look nicer, go back to display, and let’s set the layout to slide. And change the color to make it different from the rest. Note that dynamics work the same way regardless of what builder you are using. Dynamics is best used whenever a section needs to pull live data from your database, so it auto-updates straight from your database.

OUTRO Thanks for watching!