Heute möchte ich euch zeigen wie ihr in Kirby CMS in einer Seite eine sogenannte Hero Sektion einbauen könnt.

Eine Hero Sektion ist meistens das Element ganz am Anfang einer Seite die die Aufmerksamkeit der Besucher einfangen soll.

In diesem Beispiel ist es ein Bild das über die ganze Browserseite und Browserhöhe geht und in der Mitte zentriert befindet sich ein Button.

Ich zeige euch wie ihr es schafft, dass ihr im Panel dieses Bild jederzeit austauschenn könnt.

Video

Blueprint

title: Hero

fields:
  cover:
    label: Aktives Hero Bild
    type: files
    multiple: false
    layout: cards
    query: page.images
    uploads: true

Snippet

<?php
$image = $page->cover()->toFile();
?>

<?php if ($image): ?>
    <style>
        .hero {
            background-image: url("<?= $image->url() ?>");
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .heroBtn {
            width: 400px;
            padding: 20px;
            background-color: #00ab6c;
            border: 1px solid #000;
            font-size: 30px;
            text-align: center;
        }

        .heroBtn a {
            color: #fff;
        }

        .heroBtn:hover {
            background-color: #008c58;
        }
    </style>
<?php endif; ?>

<div class="hero">
    <div class="heroBtn">
        <a href="#">Kontakt</a>
    </div>
</div>

Integration in Template

<?php snippet('hero') ?>