Hero

Hero’s in alle vormen en maten. Ze mogen er zijn.

Denk bijvoorbeeld aan een full width image of een video in het klein.

Less = more

Of met meerder CTA Knoppen,
Ja de opties zijn niet te stoppen.

Het bureau voor digitale oplossingen.

Vlekkeloze techniek gecombineerd met een juiste strategie: dat is de basis voor succesvolle digitale oplossingen. Een oplossing die perfect aansluit bij de doelen van je organisatie. En die van een jaloersmakende kwaliteit is. Dat is wat we doen.

Bekijk onze diensten

En natuurlijk, de prachtige video header.
Wie wil dat nou niet?

Welkom
bij het leukste internetbureau

Bekijk onze diensten

Klein = fijn

Nog kleiner = nog fijner

The end.

Stappenplan toevoegen blok aan project

Downloads

Download als eerst de laatste versie van het blok hieronder.

Toevoegen aan project

Pak het zojuist gedownloade zip bestand uit en verplaats de bestanden naar je project in de volgende map: custom/themes/theme-name/nrdq-blocks/src

Voeg het blok toe aan je project

Navigeer in je project naar custom/themes/theme-name/nrdq-theme/views/frontend/blocks
Maak een nieuwe php file aan met de naam van het blok dat je zojuist hebt toegevoegd, genaamd: hero.php
Voeg de volgende code toe aan het bestand:

                                     <?php
use Nordique\Theme\Helpers\Gutenberg;
use Nordique\Theme\Helpers\Utils;

$imageId = getBlockField($attrs, 'imageId');
$focalPoint = getBlockField($attrs, 'focalPoint');
$alignment = getBlockField($attrs, 'alignment');
$className = getBlockField($attrs, 'className');
$blockAlign = getBlockField($attrs, 'align');
$alignment = getBlockField($attrs, 'alignment');
?>

<section class="section-hero bg-lazy lazy position-relative align<?= $blockAlign; ?>" style="
    --bg-xs: url('<?= Utils::getImageUrl($imageId, 'medium'); ?>');
    --bg-md: url('<?= Utils::getImageUrl($imageId, 'large'); ?>');
    --bg-lg: url('<?= Utils::getImageUrl($imageId, 'full'); ?>');
    background-position: <?= Gutenberg::getFocalPointPercentage($focalPoint); ?>;"
>
    <div class="hero-content <?= $alignment; ?>">
        <InnerBlocks
            allowedBlocks="<?= esc_attr(wp_json_encode(['core/heading', 'core/paragraph', 'core/buttons', 'core/group'])); ?>"
            template="<?= esc_attr(wp_json_encode([
                ["core/heading",
                    [
                        "level" => 1,
                        "placeholder" => "Titel"
                    ]
                ]
            ])); ?>"
        />
    </div>

</section>

Je hebt nu een basis van het blok. De styling kan je nog aanpassen naar wens en ook het blok kan je, wanneer nodig aanpassen.

Blokken