Lifecycle Block

This block presents a visual representation of a lifecycle process. It's designed to highlight the key stages of a process, making it easy for the user to understand the flow.


Content Editor Fields

1. Header Section:

  • Heading: This is the main title of your lifecycle. Use a concise and descriptive heading that clearly communicates the purpose of the lifecycle.
  • Excerpt: Provide a brief overview of the lifecycle. This is a good place to set the context for the individual stages.

2. Lifecycle Items:

  • Title: Each stage of the lifecycle should have a clear and concise title.
  • Excerpt: Use this space to provide a more detailed explanation of each stage.
  • Color: You can assign a unique color to each stage, visually separating them and enhancing readability.

3. Images:

  • Small Image: This image will be displayed in a smaller size, typically beside the header section.
  • Large Image: This image will be displayed prominently, usually below the lifecycle items.

Example Usage

Steps:

  1. Add the block: Insert the Lifecycle Block into your page or post.

  2. Set the content:

    1. Header Section:

    • Heading:: "Product Lifecycle"
    • Excerpt: "Our recyclable products follow a cradle-to-cradle solution, a journey that lets the range be used, recycled and re-used again."

    2. Lifecycle Items:

    • Title:: "Cradle to Cradle"
    • Excerpt:: "Creating a fully cyclical, everlasting resource from our packaging."
    • Color: "Forest Green"

    2. Create more Items as requested:

    3. Images:

    • Small Image:: Upload an image for showing on mobile
    • Large Image: Upload an image for showing on desktop
  3. Save the Block: Your Lifecyce block is now ready for display!


Result:

Preview with image:

Cards and Image with image

Editor preview:

Cards and Image acf