Before you begin
What you should know before you get started with customizing a hub front end
Who this handbook is for
This handbook is designed for front end developers who need to learn how the Uberflip hub front end works, and how to customize it. It is primarily intended for developers working with brand new/not yet launched Uberflip hubs, but the information in this handbook can also be applied to customizing existing hubs.
Even if you are not a developer, you can still find useful information in this handbook if you have some development skills or knowledge. You can use this information to make basic modifications to a hub front end yourself, or to help you direct customizations that will be implemented by others (such as your in-house developer, your agency team, or an Uberflip partner).
What you'll learn
Use this handbook to learn:
- How the Uberflip hub front end is structured
- About the standard page types and page components that make up a hub front end
- How to identify and target particular page types and page components in the DOM
- Which Uberflip-specific events you can use to manipulate the DOM
- How to implement customizations, including options for hosting and executing your code
Your skill level
To get the most out of this handbook, you should have experience with developing website front ends. At minimum, you should have a strong understanding of HTML and CSS. For more advanced customizations, you will also need to know JavaScript.
This handbook assumes that you already know how to work with a website front end, so it does not provide any "how-to" guidance in this area. Instead, it is designed to help you apply your existing development skills to an Uberflip hub front end by providing you with the necessary reference information.
To illustrate what this means, imagine there is a button element you'd like to customize: this handbook will show you which CSS selector to use to target that button, but it will not explain how to change its color, font, margins, placement, etc.
What you'll need
To begin developing, you will need:
- An Uberflip hub that is enabled for Front End V2.
- An active account for that hub's backend, with either Content Manager or Account Administrator access.
What you should know before getting started
Before you begin learning about the inner workings of the Uberflip hub front end, we strongly recommend that you familiarize yourself with the Uberflip platform in general:
- To get a feel for what a typical hub looks like, how it's organized, and what the various page components are, try browsing a hub such as Uberflip's Resource Hub at https://hub.uberflip.com/.
- Note: The Uberflip Resource Hub uses Front End V1. While it has a page structure, page types, and page components that are generally the same as a hub using Front End V2, the underlying HTML is different, and not representative of a Front End V2 hub.
- Explore the Uberflip backend at https://app.uberflip.com/ to gain an understanding of how content created by Uberflip users translates into the pages of the hub front end.
Helpful Resources
- Uberflip custom code: You will use Uberflip's built-in custom code blocks functionality to implement your code. To learn how to use it, see this article.
- Appearance settings: Learn more about the various built-in appearance settings that can be configured on the hub you will be working with in this section of the Uberflip knowledge base.
- Image size guidelines: See Uberflip's guidelines for the optimal dimensions for all images used in a hub front end in this article.
Updated almost 3 years ago
Next, learn about the overall structure of the hub front end, and its individual parts.
Or, if you're working with an existing Front End V1 hub, learn what you need to know about transitioning to Front End V2.