Blocks

This page showcases the blocks included with BaseLayer.
Use it as a reference while building your website, or start customizing the examples to match your design.



Slider

The Slider block lets you present images or videos in a carousel. Slides are added as separate blocks and can be reordered.

Discover New
Possibilities

Create engaging content with flexible layouts,
smooth transitions, and fully customizable slides.

Designed to
Stand Out

Combine images, text, and buttons to build
eye-catching sections that look great on every device.

Multiple slides in one view


Button

The Button block supports filled and outlined styles by default. Size is controlled in the block settings, and icons can be added with a single click.

Primary

Secondary

Custom width

Icon button

Link button


Group

Groups combine blocks into a single section. Use can adjust the inner padding and background color in block settings. Backgrounds keep rounded corners on non-full-width groups.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu.

Wide content

In addition to WordPress’ wide alignment, the theme provides an extra content width that can be used by supported blocks.


Cover

Bring Your Ideas to Life

Create eye-catching hero sections with background images, colors, or videos. Add any blocks on top to build engaging introductions, calls to action, or featured content.


Columns

The Columns block splits content into side-by-side layouts, such as image or video left and text right. Turn on the Media Text Layout option to align the text column vertically with the media. Column spacing can be adjusted in the block settings, and the order can be reversed on mobile.

Evening glow across the hills

Centered column

Content in this column can be centered vertically next to an image or video, so text and visual align cleanly even when heights differ.

More room for content

This column contains a longer block of text to show how the layout behaves when content heights differ. The image in the adjacent column stays aligned to the top, while the text can grow without affecting the image position.

On mobile, the column order is reversed so you can control which content appears first when the layout stacks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida faucibus dolor, et placerat justo sagittis vitae. Nullam mollis lectus ex, non volutpat ex volutpat non. Nam non turpis erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum tincidunt tellus velit, pharetra faucibus nunc ultrices id. In hac habitasse platea dictumst. Cras accumsan tincidunt lorem vulputate posuere. Etiam aliquet laoreet nisi sed lobortis. Sed sed nibh nulla.

Fusce sem mauris, lacinia vel odio quis, condimentum elementum dolor. Nulla accumsan vitae ipsum in semper. Nunc faucibus aliquam velit id condimentum. Praesent at varius turpis. Proin sed interdum ligula. Nullam vitae gravida sapien, ac dapibus tellus. Ut aliquet mi nunc, sit amet ultrices turpis vehicula at. Phasellus luctus lorem venenatis, dictum sem vitae, vulputate augue.

Mountain scenery framed by green trees

Highlighted columns

A background color turns a column into a distinct content area, useful for features, pricing, or callouts within a row.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column

Lorem ipsum dolor sit amet.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Headline 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link inside Text. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.

Headline 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.

Headline 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.

Headline 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.

Headline 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.

Headline 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in. Nulla sed dapibus arcu. Praesent efficitur est dolor, sit amet viverra lacus rhoncus eget. Cras maximus tellus nulla, id gravida turpis eleifend non. Suspendisse fermentum augue a velit condimentum, et pretium nunc lacinia.


Media

Image

Image blocks support optional captions and can be opened in a lightbox on click. Captions can be hidden for a cleaner look.

A calm lake bathed in autumn sunlight

Video

Video blocks use the standard HTML5 player. Poster image, autoplay, and loop can be configured in the block settings.

A short sample video for testing and placeholder content

Gallery

The gallery block displays several images in a responsive grid. Captions are shown by default, adjust the column count and lightbox in the gallery settings.


Icon

The icon block displays a single icon from the theme library. Pick an icon in the block settings and align it left, center, or right. Use it for visual accents, wayfinding, or to highlight a short message without extra layout.

Icon with text

Combine an icon with a flexible text area. Choose whether the icon sits beside the content or stands alone above or below it, then fill the text area with headings, paragraphs, or other blocks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus turpis a eros blandit malesuada. Maecenas hendrerit auctor odio, eget volutpat sapien feugiat in.


Accordion

The accordion block creates a collapsible content section that can be expanded or collapsed to show or hide its content. It supports inner blocks, so you can add any combination of blocks inside.

Already open

This accordion is open by default to showcase one of the available options.

All accordion settings are optional. You can:

  • Open an accordion by default
  • Scroll it into view when opened
  • Close other accordions automatically
  • Link directly to an accordion using its anchor ID

This accordion has the anchor ID my-accordion.

Open this page with the URL ending in #my-accordion to automatically scroll to and expand this section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed bibendum mauris. Fusce elementum lorem et odio suscipit pretium. Aliquam vestibulum elementum fermentum. Praesent ut cursus odio. Ut elementum ipsum at vestibulum fringilla. Proin laoreet sem et vestibulum tempor. Quisque in pretium mauris. Nunc consequat eu purus sit amet posuere. Quisque mauris urna, tincidunt nec metus ultrices, mattis volutpat mi. Morbi tincidunt eu tortor ut sollicitudin. Sed vulputate lacus in varius sodales.


Number ticker

0 +
Projects completed
0
Years of experience
0 %
Customer satisfaction
$ 0 M
Annual revenue

Article list

Display posts from the blog, projects, or events in a list or grid. Filter by category, choose the number of items to display, sort the results, and decide whether to use pagination or show a fixed number of posts.


Quote

Every project starts with an idea, but the best results come from thoughtful planning, clear communication, and continuous refinement. Small improvements made consistently often have the greatest impact over time.

Pullquote

A successful project isn’t measured by the number of features it includes, but by how well those features solve real problems. Simplicity often requires the most careful decisions.

Jordan Miller, UX Designer

Anchor

Place an anchor block above the section you want to jump to, then link to it with #section-id.


Map

The map block embeds a Google Maps location by address or coordinates. Until the visitor accepts, a placeholder image is shown; after consent, the interactive map loads. The DSGVO block lets visitors allow or revoke that consent site-wide – for example on a privacy page, independent of the map itself.

Map

Karte laden
Mit Klick auf “Karte anzeigen” wird eine Verbindung zu Google Maps aufgebaut. Dabei werden Daten an Google übertragen.
Datenschutz

Map: DSGVO


Limit width

Headings, paragraphs, and other blocks can be constrained to a narrower width for better readability. Choose a size and alignment in the block settings to center short text or create focused content areas within a wider layout.

This paragraph uses a limited width aligned to the left.

This group sits between the left and right examples and can use a background to stand out from the surrounding content.

This paragraph uses a limited width aligned to the right.


Responsive spacer

Add vertical space between blocks with the spacer. Pick a responsive height preset in the block settings; the gap shrinks at smaller breakpoints so desktop layouts stay airy without crowding mobile screens.


TODO

TODO: YouTube Video with DSGVO

TODO: Call to action (Hero)

TODO: Details (like on install page) (default hidden)