Spline Hero Block

Content Editing
Spline block

Overview

The Spline Hero block is a custom WordPress block that combines interactive 3D content with traditional hero section elements. It features:

  • Interactive 3D Background: Integrates with Spline.design to display animated 3D scenes
  • Flexible Content Structure: Includes heading, subheading, paragraphs, and customizable list items
  • Dual-Column Layout: Text content on the left with optional images on the right
  • Call to Action: Customizable button with link functionality
  • Responsive Design: Adapts to different screen sizes with mobile-specific image options
  • Extensive Customization: Control typography, colors, spacing, and alignment
  • Performance Optimized: Lazy-loads 3D content only when visible to visitors

This block provides an engaging, modern hero section that stands out with its 3D capabilities while maintaining the familiar WordPress editing experience.

Adding the Spline Hero Block

  1. In the WordPress editor, click the “+” button to add a new block
  2. Search for “Spline Hero” and select it
  3. The block will be inserted with placeholder content

Basic Configuration

Spline 3D Scene

  1. In the block settings sidebar, locate the “Spline URL” field
  2. Paste your Spline scene URL (from Spline.design)
  3. The 3D scene will load in the editor preview

Content Editing

Click on any text element to edit it directly:

  • Heading
  • Subheading
  • Paragraph text
  • Button text

List Items

  • Edit existing list items by clicking on them
  • Add new items with the “+” button next to each item
  • Remove items with the “−” button

Images

  1. In the sidebar, find the “Image Settings” panel
  2. Use the “Select Image” button to upload or choose images
  3. Images can be added to:
    • Right Column
    • Mobile View

Button Configuration

  1. Edit button text directly in the editor
  2. Set the button URL in the sidebar under “Button Settings”
  3. Customize button appearance in the “Typography” and “Color Settings” panels

Advanced Styling

Typography

Adjust font sizes, families, and spacing for:

  • Heading
  • Subheading
  • Paragraph
  • Button

Colors

Customize colors for:

  • Heading
  • Subheading
  • Button text
  • Button background

Layout

  • Set minimum block height
  • Adjust text alignment using the toolbar
  • Configure spacing and padding for various elements

HTML Tags

  • Change heading and subheading HTML tags (h1-h6, p) in the sidebar

Block Alignment

  • Use the block toolbar to set alignment (default, wide, or full-width)
  • Full-width alignment is recommended for the best visual impact

Mobile Preview

  • Use Wordpress’s responsive preview modes to check how your hero looks on different devices
  • A separate mobile image can be configured in the sidebar

Saving and Publishing

  • Click “Update” or “Publish” to save your changes
  • The Spline 3D scene will load automatically on the front end when visitors view the page