Uberflip Pages: Get to know the page builder UI


If you're unfamiliar with page building tools, or you want to know the specifics of the page builder in Uberflip Pages, this article will outline everything you need to know about the user interface (UI). 

Don't see Pages in your account yet?

Pages started rolling out in August 2023, but is not available in all accounts just yet. To ensure a smooth onboarding for all accounts, Pages is being rolled out slowly throughout the rest of 2023.

We understand that some users are keen to get their hands on this new feature. If you have any questions about the rollout, please reach out to your Account Manager, or Uberflip Support to discuss.  

Browser restriction

In its initial release, Pages is only officially supported in the latest version of Chrome. Using other browsers at this time may result in a poor user experience. Further browser support will be added soon.


Open the page builder

To access the page builder:

  1. Log into Uberflip, and click Pages in the topbar menu
  2. Click Create a page
  3. Enter an internal name in the modal that opens, then click Next
    This name is required, but don’t worry, it won’t appear on the page.
    Screen Shot 2023-07-25 at 1.37.52 PM.png

Your new page has just popped into existence and you’re now in the page builder. Let’s take a quick look at the UI in the page builder so you know what’s what. 


The page builder UI:

The page builder experience may be familiar if you’ve used other drag & drop webpage editors in the past. But if not, here’s a quick rundown of what you’ll be using.

The status control bar

Untitled design.png

Across the top of the page builder you’ll see the status control bar. This is where you’ll see and change the status of your page. It contains the following information and controls: 

  • Exit button (to return to the page list)
  • The current page status
  • The preview button
  • The publish button
  • A meatball menu where you can archive the page
  • Undo & redo buttons


The elements sidebar

Using the elements sidebar, you can:

  • Add elements (components and sections)
  • See the overall structure of your page at a glance


Add Elements:

Click the + button (Screen Shot 2023-07-25 at 3.52.15 PM.png) to open the Add Elements panel. Then choose between the Sections or Components tabs. There you’ll find all the pre-built components and sections you can drag & drop into your page. We’ll talk more about the specific elements and page design in the next section. 

View page structure:

Click Structure Screen Shot 2023-07-25 at 4.35.36 PM.png to see a list view of all the elements of your page.
This gives you a structural overview of the page, showing a stacked view of the sections and the components within them. Click an element in this view to select it on the canvas.


The canvas

Front and center in the page builder you’ll find the page canvas. This is where you’ll build your page.

Starting with a blank canvas, you’ll drag & drop elements from the Add elements panel directly onto the canvas to add them. Then you can drag elements around the canvas to arrange them however you’d like. 

The canvas also acts as a dynamic preview, so you know what the page will look like when published.Jul-25-2023 13-42-08.gif


The properties panel

The properties panel is always open. This panel is dynamic, meaning for whatever element you click on, it’ll change to show the editable options for that element. This is where you’ll customize the elements to your brand and audience. 

Depending on the elements, you’ll have options to modify: text, colors, padding, radius, alignment and much more. 


What’s next?

You're ready to start creating pages! We suggest making a test page and playing around. This is the best way to learn Uberflip’s Pages feature. 

But for a step-by-step on creating and publishing a page, check out: Uberflip Pages: Create a new page

Or, check out the Pages demo video in the Uberflip Academy.

0 out of 0 found this helpful