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.
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.
- Log into Uberflip, and click Pages in the topbar menu
- Click Create a page
- Enter an internal name in the modal that opens, then click Next
This name is required, but it won’t appear on the page.
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:
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 (+) button to open the Add Elements panel.
This panel has 2 tabs: Sections and Components
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 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.
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.
Build faster by copy & pasting elements you've already customized to other areas of your page.
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.
Rearrange sections by drag & dropping those as well. Or by using the up/down arrows that appear in the section element when selected.
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.
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.
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.
To delete any component or section, click on it in the canvas, then click the trash icon 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.
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.
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