Uberflip Pages: Create and edit a page

Follow

If you don’t know about Uberflip Pages, check out Uberflip Pages explained. But if you do, and you’re ready to create a page, this article will show you how.

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 a new page

Creating pages is easy, so let’s dive right in.

  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 it won’t appear on the page.
    Screen Shot 2023-07-25 at 1.37.52 PM.png
  4. Choose a use-case template to use as a starting point, or choose a “Blank page” to start from scratch.

Your new page has just popped into existence! It’s not much yet, and it’s not published, but you’re well on your way now. Let’s build your page.

 

Design your page:

Tip

If you’re unfamiliar with page building UIs like the one in Uberflip Pages, check out: Uberflip Pages: Get to know the page builder UI.

Good to know

All changes you make to a page will be saved automatically, but not published. You can preview your changes at any time, but the change won’t be live for your visitors until you publish (or republish) the page.

This section will outline how to build, and customize a page.

 

Add page Elements

To build a page, you’ll be using prebuilt components and sections. We call these elements. To add an element, click the Screen Shot 2023-07-25 at 3.52.15 PM.png (+) button to open the Add Elements panel.

This panel has 2 tabs: Sections and Components

  • Sections:
    Sections are edge-to-edge containers for components. You can start with an empty section and fill it with the components you want to use. Or choose from prebuilt sections containing component groupings frequently used on the web, sections like: headers, footers, hero banners, content collections, and more.
  • Components:
    Components are the individual elements of a page. Components live within sections. Components include elements like: buttons, text blocks, images, and of course Item tiles, and tile grids.

How you build your page is up to you. From the Add elements panel, drag & drop the sections or components you want onto the page canvas.
Jul-25-2023 13-42-08.gif

Note

Every component needs to live within a section. If there is no section where a component is dropped, a blank section will be added automatically.

Tip

Build faster by copy & pasting elements you've already customized to other areas of your page.

 

Position elements

Rearrange page elements by dragging them to a new position, within or between sections. line-guides will appear as you drag to show you where you're dropping the element in relation to the nearby elements.
Jul-25-2023 14-04-56.gif

Rearrange sections by drag & dropping those as well. Or by using the up/down arrows that appear in the section element when selected.

Note

Sections are always edge-to-edge, so they can’t be placed beside each other. But you can rearrange elements within them to achieve the same effect.

Each section has a 12 column grid you can snap elements to. Components can be placed side-by-side and will space out automatically depending on how many components are in a section.
Screen Shot 2023-07-25 at 2.11.48 PM.png

Example: If there are 3 components side-by-side in a section, each will occupy ⅓ of the page width (4 columns) automatically.  

You can adjust how wide an element is by selecting the section and dragging the column handles side to side to choose how many column widths that element will occupy. The surrounding elements will adjust automatically.
Jul-31-2023 16-13-22.gif

 

Align elements within a section

When an element is selected, use the Align Element settings in the properties panel to choose where the element should be aligned within the sectioned area it occupies.

 

Delete elements

To delete any component or section, click on it in the canvas, then click the trash icon Screen Shot 2023-07-25 at 4.05.17 PM.png that appears over the element.

You can also use the backspace/delete key on your keyboard to delete the element when it's selected.

 

Customize page elements

Each page element has several properties that can be changed and customized for your brand and your prospect.

Click any element on the page canvas and the Properties side panel will show the available options and settings for that element.

Depending on the element, you can modify elements in various ways, including: size, padding, colors, labels, alignment and more.

Tip

Sections and components are both elements. This means you’ll have elements within elements.

When you click any element, the properties panel will show the available properties for that selection, either the component, section, or page.

 

Preview your page

Want to see how the page will look when published? This can be done at any time by clicking Preview in the Status bar.

The page preview will open in a new tab.

 

Publish your page

If your page is ready for prime time, click Publish in the Status bar.

This will open the publishing modal. Here you can choose which of your account domains to publish the page on, and the URL slug to publish it to (i.e. https://yourdomain.com/page/URL-slug). 

Note: The URL always contains a /page/ path before your chosen slug.

 

What’s next?

Now that you’ve have some pages published, learn how to manage your pages in: Uberflip Pages: Managing your pages 

Curious how to add Uberflip specific elements like Streams and Items to your page? Check out: Uberflip Pages: Add Items and Streams to a page

Want to see Pages in action? Check out the Pages demo video in the Uberflip Academy.

 



1 out of 1 found this helpful