Getting started

This page shows where the Page Builder lives on the edit form, how to add a component, how to fill it in, and what happens when you save. Every other page in APB Basics assumes you have read this one.

What is a component?

A component is a self-contained block that you add to a page: an accordion, a carousel, a gallery, a list of links, a video, and so on. A page is built by stacking components in the order you want. Most components contain items — the individual panels of an accordion, the slides of a slideshow, the cards of a feature box.

Aero Page Builder ships fifteen components:

Component	What it is for
Accordion	Stacked panels that open and close; good for FAQs and long lists of details.
Carousel	Several cards shown side by side, scrolled with arrows.
Feature Box	A grid of image cards with a title, text and optional link.
Image Gallery	A grid of thumbnails that open in a lightbox.
Infinite Logos	A continuously scrolling strip of logos (sponsors, partners).
Links	A list or grid of links, buttons or icon links.
Overlay Content	Teasers that open their full content in an overlay window.
Profiles	People cards (photo, name, role) with an optional detail pop-up.
Read More	A short text that expands to show the rest.
Simple Content	Free-form rich text arranged in regions, with optional backgrounds.
Slideshow	Full-width slides with text over images, played one at a time.
Special List	A styled list (icons, numbers, checkmarks).
Tabs	Content split into tabs.
Video	One or more videos (uploaded or from YouTube/Vimeo).
Views	Embeds a Drupal View (a dynamic list of content) inside the page.

Each component has its own page in the Components section of this documentation. This section, APB Basics, covers the settings they all share.

Where is the Page Builder?

Edit a page whose content type has the Page Builder enabled (on most sites: Basic page; your administrator may enable it on other content types). Below the usual Title and Body fields you will find a blue Page Builder bar. Everything under that bar is APB.

Adding a component

1. Scroll to Add new content and click the button of the component you want, for example Add Accordion.
2. A new card appears at the end of the list, already expanded. Give it a Section Title so you can recognise it later (see Section Title and Intro Text).
3. Fill in the component’s own fields and add its items (see below).
4. Save the page. Components are saved together with the page; there is no separate save button for a component.

You can add as many components as you need and mix different kinds on the same page. Components are displayed in the order of the cards, from top to bottom, unless you move them elsewhere with Target Placement.

Anatomy of a component card

From top to bottom, a card contains:

• Header — the component type, the Section Title (once you have typed one), and the red Remove button. Click anywhere on the header to collapse or expand the card.
• Section Title row — Section Title, Show Section Title and the Published switch. See Section Title and Intro Text.
• Config row (light blue) — the layout settings: Target Placement, Component Width, Columns and Column Gap, Color Style, Custom Class, plus a few options specific to the component (for the Accordion: Open first item).
• Intro Text — collapsed by default; an optional paragraph shown under the section title.
• Items — the table of the component’s items with Add new … and Add existing … buttons.
• Access Control — when present, lets you restrict who sees the component. See Advanced settings.
• Container Settings — collapsed by default; spacing, border and background of the box around the component. See Container Settings.

Adding items to a component

1. Inside the card, click Add new … (for example Add new Accordion Item). A small form opens inside the card.
2. Fill in the item’s title and content and click the green Create … button at the bottom of that form. The item is added to the table.
3. Repeat for each item. Drag the handle at the left of a row to reorder items.
4. Use the Edit, Duplicate and Remove buttons in the Operations column to change an item later.

Add existing … lets you reuse an item that already exists on another page (start typing its title). This is handy for items that must be identical everywhere, such as a standard disclaimer panel. Editing a shared item changes it on every page that uses it.

Items are saved only when you save the page. If you leave the edit form without saving, new items are lost.

Reordering, collapsing and removing components

• Reorder — drag the handle at the left of a card up or down. If you prefer numbers, click Show row weights at the top right of the Page Builder and set a weight per card (lower numbers first).
• Collapse / expand — click the card header. Collapsed cards still save normally; collapsing is only for your convenience while editing.
• Publish / unpublish — the Published switch in the Section Title row hides the component from visitors without deleting it. Use it to prepare a component in advance or to take one down temporarily.
• Remove — the red button in the header removes the component from the page. The card is replaced by a notice with a Restore button until you save; after saving, the removal is permanent.

Saving and checking the result

Click Save at the bottom of the edit form as usual. Open the page to check the result. If a component does not appear where you expected, the usual causes are:

• its Published switch is off;
• its Target Placement points at an area that does not exist on this page (the component is then hidden);
• its Access Control excludes the role you are browsing with;
• the component has no items yet.

Where to go next

• Section Title and Intro Text — name the component and add an introduction.
• Component Width and Columns and Column Gap — control the layout.
• Target Placement — move a component out of the body.
• Container Settings — spacing, borders and backgrounds.