Overview of All Block Types in Webey

The block editor is the heart of Webey. You build pages by adding blocks, filling them with content, and arranging them in the desired order. With over 24 block types, you have all the building blocks for a professional website. Below you will find a complete overview of each block type and what you use it for.

Basic Blocks

• Hero: A large, eye-catching section at the top of your page with title, subtitle, background image, and call-to-action button. Perfect as an opening block.
• Text: A versatile text block with rich text formatting. Use it for paragraphs, headings, lists, and links.
• Image: An image block with alt text and optional caption. Upload images via the media library.
• Button: A prominent action button that links to another page, an external URL, or an anchor on the same page.
• Spacer: Adds vertical whitespace between blocks. Configure the height in pixels to create breathing room.
• Divider: A horizontal separator line to visually separate sections.

Layout Blocks

• Columns: Divide your content into two or more columns side by side. Each column can contain its own blocks. Ideal for side-by-side comparisons or content with an image next to it.

Media Blocks

• Gallery: A photo gallery with multiple images in an attractive grid layout. Configure the number of columns and spacing.
• Video: Embed a YouTube or Vimeo video on your page. Paste the URL and the block automatically shows an embedded video player.

Marketing Blocks

• Card Grid: A grid of cards, each with an image, title, and description. Use it for services, products, or portfolio items.
• Features: Present the features or benefits of your product or service in a clear layout with icons and descriptions.
• Testimonials: Show customer quotes with name, title, and optionally a profile photo. Social proof that builds trust with visitors.
• Pricing: Compare your packages or prices in a clear table with features, prices, and CTA buttons per plan.
• FAQ: Frequently asked questions with expandable answers (accordion). Helps visitors quickly find answers and is good for SEO.
• CTA (Call to Action): A prominent section that drives visitors to action with a powerful headline, subtext, and prominent button.
• Stats: Display impressive numbers and statistics, such as "500+ customers" or "99% uptime." Ideal for emphasizing results.
• Team: Present your team members with photo, name, title, and optionally social media links. Makes your company more personal.
• Timeline: A chronological timeline for company history, project phases, or a step-by-step process.
• Logo Cloud: Show logos of customers, partners, or certifications in a horizontal overview. Builds authority and trust.

Advanced Blocks

• Map: An interactive map (Google Maps) to show your location. Configure the address, zoom level, and map type.
• HTML: Add custom HTML code for advanced functionality not available as a standard block.
• Form: Embed one of your Webey forms on the page. Select the form and it is automatically rendered.
• Table: A structured table for displaying data such as specifications, comparisons, or schedules.
• Code: A code block with syntax highlighting for displaying code examples on technical or documentation pages.

Tips for Block Usage

Start every page with a hero or text block that immediately makes clear what the page is about. Use spacers and dividers to visually group sections. Alternate text and media blocks to keep your page dynamic and attractive. End with a CTA block that drives visitors to the next step. Heavy blocks like maps and galleries are automatically lazy-loaded for optimal performance.