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.

Every component starts with the same three fields — Section Title, Show Section Title and Published — and most also offer an optional Intro Text. Together they give the component a heading and a short introduction.

Section Title

A short plain-text heading for the component, for example Frequently asked questions or Our partners. It is used in two places:

• In the editor, the title appears in the card header next to the component type, so you can tell your components apart when they are collapsed. This works even if the title is not shown on the page.
• On the page, when Show Section Title is Yes, the title is displayed as a heading directly above the component, inside its container. The heading uses the page’s standard section heading style (an h2), so it lines up with other headings on the page.

Always fill in a Section Title, even when you do not want it displayed. A page with five components all labelled just “Accordion” is much harder to maintain.

Show Section Title

A required Yes/No choice that controls whether the Section Title is printed on the page.

• No (default) — the title is kept for the editor only. Use this when the component follows a heading you already wrote in the Body, or when the component speaks for itself (a slideshow, a logo strip).
• Yes — the title is printed above the component.

The title is styled by the site theme. If you set a Text color in the container settings, the section title takes that color as well.

Published

The switch at the right of the row. When it is off, the component is kept on the page but is not shown to visitors. Editors still see it in the edit form. Use it to draft a component before it goes live, or to hide one temporarily without losing its content.

Intro Text

A collapsed Intro Text section sits just below the Config row on most components. It holds an optional rich-text introduction that is printed between the section title and the component’s items.

• Click the Intro Text heading to expand the section; it is collapsed to keep cards short.
• You can use paragraphs, bold and italic, lists, links and even images, exactly as in the Body field. Keep it short: one or two sentences that explain what the component contains.
• Intro Text is printed even when Show Section Title is No.
• Intro Text follows the same Text color as the section title when one is set in the container settings.

Components that do not have an Intro Text section: Overlay Content, Read More and Special List. Their own fields cover that need.

What it looks like on the page

With Show Section Title = Yes and an Intro Text, the component renders in this order inside its container:

1. Section Title (heading)
2. Intro Text
3. The component’s items (accordion panels, slides, cards, …)

All three sit inside the same box, so a background or border set in Container Settings wraps the title and the intro as well as the items.

Component Width decides how much of the available horizontal space a component occupies. At 100% it fills the content area; at any smaller value it becomes narrower and is centered automatically.

Where to find it

In the light-blue Config row of the component card. The drop-down offers eleven values:

Value	Typical use
100% (default)	Almost everything. The component takes the full width of the content area.
90%, 80%, 75%, 70%	A slightly narrower block that stands out from surrounding text, e.g. a video or a quote-like feature box.
66%, 60%, 50%	Narrow blocks such as a single-column links list or a small gallery, centered under the text.
40%, 33%, 25%	Very narrow; use with care — text inside becomes hard to read on medium screens.

Overlay Content is the only component without this setting; it always uses the full width.

How it behaves

• Percent of the content area, not of the screen. If the page has a sidebar, 100% means the main column, not the whole window. If you move the component with Target Placement, the percentage applies to the area you moved it to.
• Always centered. A component narrower than 100% gets equal empty space on its left and right. There is no left- or right-aligned option.
• Items adapt. When a component uses Columns, the item width is calculated from the component width: three columns at 50% are half as wide as three columns at 100%.
• Small screens ignore it. On screens up to 680 pixels wide (phones) every component is displayed at full width, whatever the setting, so that content stays readable.
• Container settings follow the component. Backgrounds, borders and padding apply to the narrowed box, not to the full content area. The empty space on both sides stays transparent.

Example

The two feature boxes below come from the same page; the first is set to 100%, the second to 90%. Notice the equal margins on both sides of the second one.

Tips

• Keep most components at 100% and use a narrower width only to make one block stand out; alternating widths on every component makes the page look ragged.
• For side-by-side arrangements use Columns inside one component rather than two narrow components — two components are always stacked, never placed next to each other.

Components that show several items in a grid let you choose how many items sit side by side (Columns) and how much space separates them (Column Gap).

Which components have these settings

Carousel, Feature Box, Image Gallery, Links, Profiles, Simple Content, Special List, Video and Views. Components that stack their items vertically by nature (Accordion, Tabs, Read More, Slideshow, Infinite Logos, Overlay Content) do not have them.

A few components interpret the settings in their own way — for a Carousel, Columns is the number of cards visible at once; for Views it applies only in the Boxed Card display. The component pages give the details.

Where to find them

Both drop-downs are in the light-blue Config row of the card, next to Target Placement and Component Width.

Columns

• Choose from 1 column to 10 columns. The field is required; each component has its own sensible default (Feature Box and Profiles: 3 columns; Links: 2 columns).
• Items are placed left to right; when a row is full the next item starts a new row. Six items in three columns make two rows; seven items make three rows with a single item on the last one.
• All columns have the same width. The item width is worked out automatically: (component width − gaps) ÷ number of columns. A narrower Component Width therefore makes every column narrower.
• Pick the number of columns from the content, not the other way round: three or four cards with images, six to eight small logos or icons, one or two for text-heavy items.

Column Gap

• The space between neighbouring items, both horizontally (between columns) and vertically (between rows). Values run from 0px (items touch) to 64px.
• Defaults vary per component (Feature Box: 30px; Profiles: 32px; Links: 16px). Values around 16–32px suit most designs.
• The gap is not added on the outside of the grid; the first and last columns stay flush with the component edges. Use Padding if you want space around the whole grid.
• With 1 column there is nothing to separate horizontally; some components (Views) ignore the gap entirely in that case.

What happens on tablets and phones

The number of columns you choose is the number used on desktop screens. On smaller screens APB reduces it automatically so that items stay readable:

Screen width	Columns actually shown
Wider than 980 px (desktop)	As configured (1 to 10).
681 to 980 px (tablet)	3 or 4 columns become 2; 5 to 10 columns become 3; 1 and 2 stay as they are.
Up to 680 px (phone)	Always 1 column, items stacked.

The gap value stays the same on every screen size. The Carousel is the exception to the table above: it keeps sliding and uses its own steps (at most 3 cards up to 900 px, 2 up to 680 px, 1 up to 480 px).

Tips

• Try to give the grid a number of items that fills the last row (6 or 9 items for 3 columns, 8 for 4 columns). A lone item on the last row looks unfinished.
• Images inside items are cropped or scaled per component; a large number of columns means small images. Check the result on the page after saving.

By default a component is printed in the page body, in the order of the cards. Target Placement lets you send it somewhere else on the page instead — above the title, into a sidebar, or edge to edge across the main column — without touching the theme.

Where to find it

Target Placement is the first drop-down of the light-blue Config row on every component. It is required; the default is Body.

The areas of the page

Option	Where the component appears	Notes
Body (default)	Exactly where the card sits in the Page Builder list, after the page’s Body text.	Use this unless you have a reason not to. Order follows the cards.
Main Content Top	At the very top of the main content column, above the page title.	Good for a slideshow or banner that must come before the title. If several components use it, the one lowest in the card list ends up on top.
Main Content Bottom	At the very end of the main content column, after everything else on the page.	Good for a call-to-action, related links or a footer-like block. Several components keep their card order.
Main Content - No container	Above the main content, but outside the normal content padding, so the component can stretch from edge to edge of the main column.	Use for full-bleed backgrounds. The section title gets an inner wrapper so the text still lines up with the rest of the page.
Top region	Directly under the site header, across the full width of the page, before the sidebar and the main column.	Designed for hero slideshows. The page title is hidden when a component is placed here, because the hero is expected to carry its own heading.
Sidebar Top	In the sidebar, before the sidebar blocks (menus, etc.).	Only works on pages where the theme actually shows a sidebar. Keep the component narrow: a links list, a small profile.
Sidebar Bottom	In the sidebar, after the sidebar blocks.	Same conditions as Sidebar Top.
Internal Placement 1, 2, 3	Free slots with no fixed position. A designer decides where each one appears by adding it to a page or content-type template.	They do not exist on a standard site. Use them only when your designer tells you that a slot has been prepared.
Header (this site only)	Immediately before the page-title block.	Not part of the standard set; it was added on the demo site. Your site may have similar extra options.

Example: a slideshow in the Top region

Rules worth knowing

• The move happens in the browser. The component is still saved as part of the page; it is relocated when the page is displayed. Its Component Width percentage then applies to the area it was moved to.
• Missing area = hidden component. If the chosen area does not exist on the page (no sidebar on this page, an Internal Placement the theme never defined), the component stays hidden rather than falling back to the body. When a component “disappears”, check this setting first.
• Only the areas the theme provides. The list is the same for every content type, but whether an area exists depends on the theme and on the page (for example, whether it has a sidebar). When in doubt, try it and look at the page.
• Order in a shared area. Components sent to the same area keep their card order, except in Main Content Top and the Internal Placements, where each component is inserted at the start of the area — so the last card ends up first. Drag the cards to adjust.
• Container settings and section title travel with the component. Backgrounds, borders, padding and the section title are all moved together.

Tips

• Reserve Top region for one hero component per page; two full-width slideshows stacked under the header rarely look intentional.
• Keep sidebar components light. Ten columns of feature boxes in a 300-pixel sidebar will collapse to a single column and become very tall.
• If a component must appear in the same area on many pages, ask your administrator whether a block would serve better; Target Placement is meant for per-page decisions.

Every component sits inside an invisible box called its container. Container Settings let you shape that box: the space inside and around it, a border, and a background color, image or video — the same way on every component.

The box around a component

The four groups of Container Settings map onto this picture:

• Padding and Margins — how much empty space there is inside the border (padding) and outside it (margins).
• Border — a line on any of the four sides, its color, and rounded corners.
• Background — a background color and/or a background image or video, with opacity and blur, plus an optional text color for the section title and intro.
• Background Media Parallax — makes a background image drift slowly as the visitor scrolls.

The container wraps the whole component: section title, intro text and items all sit inside it. When the component is narrower than 100% (Component Width), the container is the narrowed, centered box.

Where to find it

Container Settings is the last section of a component card, collapsed by default. Click its heading to open it; inside, each group (Padding, Margins, Border, Background) is a further collapsible section, followed by the Background media field.

Default values

A new component starts with a neutral container: no border, no background, no padding, and a 32-pixel margin below it so that stacked components do not touch.

Group	Default	Effect
Padding	0px on all sides	Content touches the border.
Margins	Top 0px, Right 0px, Bottom 32px, Left 0px	A gap under each component.
Border	All sides none, color #000000, radius none	No visible border.
Background	No color, no text color, opacity 100%, blur 0, no media, parallax off	Transparent; the page background shows through.

You only need to open Container Settings when you want to change something. Leaving it untouched is the right choice for most components.

Which components have Container Settings

• Full set (padding, margins, border, background, media, parallax): Accordion, Carousel, Feature Box, Image Gallery, Infinite Logos, Links, Profiles, Read More, Special List, Tabs, Video, Views.
• Padding and Margins only: Slideshow — each slide already has its own background, so the container has no border or background groups.
• No Container Settings: Simple Content (it has per-region backgrounds instead) and Overlay Content.

Typical recipes

You want	Set
A colored band behind a component	Background color + Padding 32px on all sides (so the content does not touch the colored edge) + optional Text color.
A framed box	Border 1px or 2px on all sides + Border radius 8px + Padding 24px.
A photo behind a title and intro	Background media (image) + Text color white + Padding 64px top and bottom; if the text is hard to read, add a few pixels of Background blur or choose a darker, calmer photo.
Two components closer together	Reduce the Margin bottom of the first one from 32px to 8px or 0px.
A cinematic hero	Background media (image) + Enable parallax.

Entering sizes

Padding, margin, border widths and border radius are typed as a number followed by a unit: 16px, 1.5rem, 2em or 5%. Pixels (px) are the easiest to predict. The word none is accepted for border sides and radius. A value without a unit, or with a typo, is rejected when you save the page.

Color Style applies one of the site’s preset color palettes to a component — the accent color of a carousel’s arrows, the header bars of an accordion, the buttons of a links list. You pick a name; the exact colors are defined once by the site administrator so that every page stays consistent.

Where to find it

In the light-blue Config row of the card, on the components that have it. It is a drop-down of color names sorted alphabetically.

Two palettes

There are two kinds of Color Style. They share the same field label, so the component decides which list you see.

Single-color styles

Used by Carousel, Feature Box, Image Gallery, Links, Profiles, Slideshow, Special List and Video. Each style is one accent color: Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue.

What the accent color is applied to depends on the component:

• Carousel and Slideshow — the navigation controls (arrows, dots).
• Image Gallery — the frame behind each thumbnail.
• Special List — the list text and markers.
• Feature Box, Links, Profiles, Video — the accent parts of each card, button or player, which vary with the display type chosen.

The component pages show exactly which parts change color for each display type. Feature Box, Links, Profiles and Special List also have a Color Style on each item, so one card or link can use a different accent than the rest.

Multi-state styles

Used by Accordion and Tabs (and by the items of Read More). These components have elements that react to the visitor — a header that is closed, open or hovered; a tab that is selected or not — so each style is a small set of colors:

Color	Used for
Base	The header or tab in its normal state.
Active	The open accordion panel header or the selected tab.
Hover	The header or tab under the mouse pointer.
Title text	The text printed on top of those backgrounds (white on dark styles, near-black on light ones).

Available styles: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow Orange and Red, Fancy White.

Color Style versus Container Settings

Color Style and Container Settings › Background answer different questions:

• Color Style colors the parts of the component itself (arrows, headers, buttons) from a fixed palette.
• Background in Container Settings colors the box around the component, with any color you like, and can also set the text color of the section title and intro.

They combine well: a Feature Box with the White Color Style on a dark blue container background is a common pattern.

Changing the palette

Editors cannot add colors from the component card. Site administrators maintain the two lists under Structure › Taxonomy › APB Color Styles 01 and APB Color Styles 02, where each entry has a name and its color values. Changing a color there updates every component that uses that style.

Two settings you will rarely need day to day: Custom Class, a hook for designers, and Access Control, which shows a component only to visitors with certain roles.

Custom Class

Custom Class is the last field of the light-blue Config row. It is a plain text field that adds a CSS class name to the component’s outer wrapper on the page.

• Leave it empty unless a designer or developer asks you to type something specific. On its own, a class name changes nothing; it only works when the site theme contains a matching style rule.
• Type only what you were given, for example highlight-box or compact spaced. Class names contain letters, digits and hyphens; several names are separated by spaces.
• Typical uses: a one-off spacing tweak, a special background pattern, hiding the component in print, or hooking a component for site analytics.
• Do not use Custom Class to fix layout problems you can solve with Component Width, Columns or Container Settings.

Access Control

Access Control restricts who can see a component according to the visitor’s user role. It is a collapsed section of the component card, below the items.

Access Control is not enabled on every component or on every site. On the demo site it currently appears on the Image Gallery only; ask your administrator if you need it elsewhere.

How it works

1. Choose the mode:
   • Allow the selected below — only visitors who have at least one of the ticked roles see the component.
   • Restrict the selected below — visitors who have any of the ticked roles do not see the component; everyone else does.
2. Tick one or more roles. The roles are combined with OR: having any one of them is enough.
3. If you tick no role, the setting is neutral and the component is visible to everyone, whatever the mode.

The check applies to viewing only. Editing permissions are unchanged, and users who hold the site-wide permission to bypass this kind of restriction (typically administrators) still see the component.

Examples

Goal	Mode	Roles ticked
Members-only download links	Allow the selected below	Authenticated user (plus any member roles)
A “Log in to see more” teaser shown only to visitors who are not logged in	Allow the selected below	Anonymous user
Hide a draft component from the public while editors review it	Allow the selected below	Content editor, Administrator
Hide an internal notice from anonymous visitors	Restrict the selected below	Anonymous user

Tips

• Access Control hides the component entirely, including its section title. If you want a visible placeholder, add a second component with the opposite rule (for example an anonymous-only “Log in to see this content” text).
• Remember that Published (see Section Title and Intro Text) is the simpler tool when you just want to hide a component from everyone.
• When checking the result, log out or use a private browser window: as an editor or administrator you will usually see everything.