Landingspagina's

P296-00 / V296-00


Hoe te gebruiken?

Voeg een subtemplate toe aan de module waarin je de layout wilt gebruiken. Neem hierin onderstaande HTML en PHP code over. Voeg daarna de CSS aan het stylesheet van de website toe.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<?php

/** @var \Core\Config */
$config = Locator::get('Config');
?>
<div class="content-template-default content-subtemplate-landing">
	<div class="keuzelijst-header-foto">
		<nc-partial-list partials="image,image-album,youtube,image-carousel" partial-attributes="lightbox=content,carousel-indicators,ratio=1,width=1280" name="header-foto" layout-button="Header foto invoegen" limit="1"></nc-partial-list>
	</div>

	<nc-preset-list name="layout-module-output" limit="1" layout-button="Layout module invoegen">
		<template nc-preset-key="module-keuzelijst-1" nc-preset-title="Hoofdtekst links | Keuzelijst rechts">
			<section class="py-3 py-md-5 main-text-left-module-1">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6">
							<nc-module-output></nc-module-output>
						</div>

						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-right"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="module-keuzelijst-2" nc-preset-title="Keuzelijst links | Hoofdtekst rechts">
			<section class="py-3 py-md-5 main-text-right-module-1">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-left"></nc-partial-list>
						</div>
						<div class="col-12 col-md-6">
							<nc-module-output></nc-module-output>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="module-unclamp-1" nc-preset-title="Hoofdtekst links | Afbeelding rechts">
			<section class="main-text-left-module-2">
				<div>
					<div class="clamp-left-unclamp-right">
						<div class="py-3 py-md-5">
							<nc-module-output></nc-module-output>
						</div>

						<nc-image name="{%name%}-image-right" width="960"></nc-image>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="module-unclamp-2" nc-preset-title="Afbeelding links | Hoofdtekst rechts">
			<section class="main-text-right-module-2">
				<div>
					<div class="unclamp-left-clamp-right">
						<nc-image name="{%name%}-image-left" width="960"></nc-image>

						<div class="py-3 py-md-5">
							<nc-module-output></nc-module-output>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="module-formulier-1" nc-preset-title="Hoofdtekst links | Formulier rechts">
			<section class="pb-5 pb-md-5 form-right-module min-height">
				<div class="py-5 py-md-5 bg-primary">
					<div class="container">
						<div class="row">
							<div class="col-12 col-md-6 pb-5">
								<nc-module-output></nc-module-output>
							</div>

							<div class="col-12 col-md-6 col-lg-5 offset-lg-1 my-5 my-md-0 d-none d-md-block">
								<div class="form-card form-card-absolute">
									<nc-text name="{%name%}-contact-title" default="&lt;h2&gt;Neem contact met ons op&lt;/h2&gt;"></nc-text>
									<nc-form name="{%name%}-contact-form"></nc-form>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6 content-left-form ">
							<div class="image-left-form">
								<nc-image name="{%name%}-image-left-form" width="540"></nc-image>
							</div>

							<div class="d-block d-md-none my-5 my-md-0">
								<div class="form-card">
									<nc-text name="{%name%}-contact-title" default="&lt;h2&gt;Neem contact met ons op&lt;/h2&gt;"></nc-text>
									<nc-form name="{%name%}-contact-form"></nc-form>
								</div>
							</div>

							<div class="pt-md-5">
								<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-left-form"></nc-partial-list>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="module-custom-6" nc-preset-title="Hoofdtekst links | Afbeelding met rand rechts">
			<section class="py-3 py-md-5 image-background-index">
				<div class="container mb-5">
					<div class="row align-items-center">
						<div class="col-12 col-md-7 mt-0 mt-md-5">
							<div class="panel bg-primary p-5 position-relative">
								<nc-module-output></nc-module-output>
							</div>
						</div>

						<div class="col-12 col-md-5 mt-0 mt-5 ">
							<div class="border-primary-light image-left bg-primary p-5 bg-primary">
								<nc-image name="{%name%}-image-under-text" loading="eager" width="640" height="640"></nc-image>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>
	</nc-preset-list>

	<!-- Alle secties een eigen class. -->

	<nc-preset-list name="layout-content-1" layout-button="Layout content toevoegen">
		<template nc-preset-key="content-keuzelijst-1" nc-preset-title="Keuzelijst 50% | 50%">
			<section class="py-3 py-md-5 select-list-50-50-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-left-6"></nc-partial-list>
						</div>
						<div class="col-12 col-md-6 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-right-6"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-keuzelijst-2" nc-preset-title="Keuzelijst 33% | 66%">
			<section class="py-3 py-md-5 select-list-33-66-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-4 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-left-4"></nc-partial-list>
						</div>
						<div class="col-12 col-md-8 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download,image-carousel" partial-attributes="lightbox=content,width=880,carousel-indicators" name="{%name%}-content-right-8"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-keuzelijst-3" nc-preset-title="Keuzelijst 66% | 33%">
			<section class="py-3 py-md-5 select-list-66-33-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=880" name="{%name%}-content-right-8"></nc-partial-list>
						</div>
						<div class="col-12 col-md-4 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-left-4"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-keuzelijst-4" nc-preset-title="Keuzelijst 100%">
			<section class="py-3 py-md-5 select-list-100-content">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<nc-partial-list partials="image,image-carousel,image-album,text,youtube,download" partial-attributes="lightbox=content,width=1280,carousel-indicators" name="{%name%}-content-hele"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-keuzelijst-5" nc-preset-title="Keuzelijst hele breedte">
			<section class="py-3 py-md-5 select-list-hele-breedte-content">
				<div>
					<nc-partial-list partials="image,image-carousel,image-album,text,youtube,download" partial-attributes="lightbox=content,width=1280,carousel-indicators" name="{%name%}-content-12"></nc-partial-list>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-unclamp-1" nc-preset-title="Tekst links | Afbeelding rechts">
			<section class="py-3 py-md-5 tekst-links-content">
				<div class="py-3 py-md-5">
					<div class="clamp-left-unclamp-right">
						<nc-text name="{%name%}-text-left"></nc-text>
						<nc-image name="{%name%}-image-right" width="960"></nc-image>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-unclamp-2" nc-preset-title="Afbeelding links | Tekst rechts">
			<section class="py-3 py-md-5 tekst-rechts-content">
				<div class="py-3 py-md-5">
					<div class="unclamp-left-clamp-right">
						<nc-image name="{%name%}-image-left" width="960"></nc-image>
						<nc-text name="{%name%}-text-right"></nc-text>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-usp-block-1" nc-preset-title="Keuzelijst 50% | Tekst blok 40%">
			<section class="py-3 py-md-5 text-block-40-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6 col-lg-6">
							<div class="content-page">
								<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-left-usp"></nc-partial-list>
							</div>
						</div>
						<div class="col-12 col-md-6 col-lg-5 offset-lg-1">
							<div class="usp-content my-5 p-5 bg-white ">
								<nc-text name="{%name%}-usp-content"></nc-text>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-veel-gestelde-vragen-option-1" nc-preset-title="Veel gestelde vragen" nc-preset-access="faq">
			<section class="py-3 py-md-5 faq-content">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-above-faq-12"></nc-partial-list>
						</div>
					</div>
					<div class="tekst-accordeon-plus">
						<nc-faq name="{%name%}-vragenkiezer"></nc-faq>
					</div>
				</div>
				<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-faq-under-12"></nc-partial-list>
			</section>
		</template>

		<template nc-preset-key="content-review-feed-1" nc-preset-title="Recensieoverzicht" nc-preset-access="review">
			<section class="py-3 py-md-5 review-feed-content">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<nc-review-feed name="reviews" fallback="all" page="1"></nc-review-feed>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-review-formulier-1" nc-preset-title="Keuzelijst 40% | Recensie formulier 50%" nc-preset-access="review">
			<section id="formulier" class="py-3 py-md-5 review-formulier-content">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-12 col-md-5 py-5 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-left-form"></nc-partial-list>
						</div>
						<div class="col-12 col-md-6 offset-md-1">
							<div class="form-page">
								<nc-text name="{%name%}-content" default="&lt;h2&gt;Laat een recensie achter&lt;/h2&gt;"></nc-text>
								<nc-review-form name="reviews" page="1"></nc-review-form>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-review-rating-1" nc-preset-title="Keuzelijst 66% | 33% Recensie rating" nc-preset-access="review">
			<section class="py-3 py-md-5 review-rating-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=880" name="{%name%}-content-right-review-1"></nc-partial-list>
						</div>
						<div class="col-md-4">
							<nc-text name="{%name%}-content" default="&lt;h2&gt;Laat een recensie achter&lt;/h2&gt;"></nc-text>
							<nc-review-rating name="reviews" page="1"></nc-review-rating>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-review-rating-2" nc-preset-title="Recensie rating 33% | Keuzelijst 66% ">
			<section class="py-3 py-md-5 review-rating-2-content">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-4 py-3 py-md-0">
							<nc-text name="{%name%}-content" default="&lt;h2&gt;Laat een recensie achter&lt;/h2&gt;"></nc-text>
							<nc-review-rating name="reviews" page="1"></nc-review-rating>
						</div>
						<div class="col-12 col-md-8 py-3 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=880" name="{%name%}-content-right-review-1"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-icoonbalk-1" nc-preset-title="Drievoudige USP balk met iconen">
			<section class="py-0 py-md-0 triple-icon-bar-content">
				<div class="triple-icon-bar-section bg-tertiary">
					<div class="container ">
						<div class="row align-items-center">
							<div class="col-12 col-md-4 mt-2 mt-sm-3 d-flex align-items-center">
								<div class="triple-icon-bar-icon">
									<nc-text name="{%name%}-icon-1" default="/fa-icons"></nc-text>
								</div>
								<div class="pl-3">
									<nc-text name="{%name%}-icon-text-1"></nc-text>
								</div>
							</div>

							<div class="col-12 col-md-4 mt-2 mt-sm-3 d-flex align-items-center">
								<div class="triple-icon-bar-icon">
									<nc-text name="{%name%}-icon-2" default="/fa-icons"></nc-text>
								</div>
								<div class="pl-3">
									<nc-text name="{%name%}-icon-text-2"></nc-text>
								</div>
							</div>

							<div class="col-12 col-md-4 mt-2 mt-sm-3 d-flex align-items-center">
								<div class="triple-icon-bar-icon">
									<nc-text name="{%name%}-icon-3" default="/fa-icons"></nc-text>
								</div>
								<div class="pl-3">
									<nc-text name="{%name%}-icon-text-3"></nc-text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-icoonbalk-2" nc-preset-title="Drievoudige USP balk met iconen boven">
			<section class="py-3 py-md-5 drievoudige-icoonbalk-boven-content bg-tertiary">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-12 col-md-4 mt-2 mt-sm-3 flex-column" data-equal="icon-bar-3-top-equal">
							<div class="icon-bar-3-top-icon">
								<nc-text name="{%name%}-icon-1" default="/fa-icons"></nc-text>
							</div>
							<div class="icon-bar-3-top-text">
								<nc-text name="{%name%}-icon-text-1"></nc-text>
							</div>
						</div>

						<div class="col-12 col-md-4 mt-2 mt-sm-3 flex-column" data-equal="icon-bar-3-top-equal">
							<div class="icon-bar-3-top-icon">
								<nc-text name="{%name%}-icon-2" default="/fa-icons"></nc-text>
							</div>
							<div class="icon-bar-3-top-text">
								<nc-text name="{%name%}-icon-text-2"></nc-text>
							</div>
						</div>

						<div class="col-12 col-md-4 mt-2 mt-sm-3 d-flex align-items-left flex-column" data-equal="icon-bar-3-top-equal">
							<div class="icon-bar-3-top-icon">
								<nc-text name="{%name%}-icon-3" default="/fa-icons"></nc-text>
							</div>
							<div class="icon-bar-3-top-text">
								<nc-text name="{%name%}-icon-text-3"></nc-text>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-icoonbalk-3" nc-preset-title="Viervoudige USP balk met iconen">
			<section class="py-3 py-md-5 four-icon-bar-content bg-tertiary">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-3 col-md-3 mt-2 mt-sm-3 d-flex align-items-center">
							<div class="four-icon-bar-icon">
								<nc-text name="{%name%}-icon-1" default="/fa-icons"></nc-text>
							</div>
							<div class="pl-3">
								<nc-text name="{%name%}-icon-text-1"></nc-text>
							</div>
						</div>

						<div class="col-3 col-md-3 mt-2 mt-sm-3 d-flex align-items-center">
							<div class="four-icon-bar-icon">
								<nc-text name="{%name%}-icon-2" default="/fa-icons"></nc-text>
							</div>
							<div class="pl-3">
								<nc-text name="{%name%}-icon-text-2"></nc-text>
							</div>
						</div>

						<div class="col-3 col-md-3 mt-2 mt-sm-3 d-flex align-items-center">
							<div class="four-icon-bar-icon">
								<nc-text name="{%name%}-icon-3" default="/fa-icons"></nc-text>
							</div>
							<div class="pl-3">
								<nc-text name="{%name%}-icon-text-3"></nc-text>
							</div>
						</div>

						<div class="col-3 col-md-3 mt-2 mt-sm-3 d-flex align-items-center">
							<div class="four-icon-bar-icon">
								<nc-text name="{%name%}-icon-4" default="/fa-icons"></nc-text>
							</div>
							<div class="pl-3">
								<nc-text name="{%name%}-icon-text-4"></nc-text>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blokken-1" nc-preset-title="Drievoudige content blokken">
			<section class="py-3 py-md-5 triple-content-blocks-content bg-tertiary">
				<div class="container">
					<nc-text name="{%name%}-content-title" default="&lt;h2&gt;Content blokken&lt;/h2&gt;"></nc-text>

					<div class="py-lg-3"></div>

					<div class="row tarieven">
						<div class="col-12 col-lg-4 mb-5">
							<div class="contentblok bg-primary color-primary d-flex flex-column justify-content-between">
								<nc-text name="{%name%}-content-1"></nc-text>
							</div>
						</div>

						<div class="col-12 col-lg-4 mb-5">
							<div class="scale">
								<div class="contentblok bg-primary color-primary boxshadow d-flex flex-column justify-content-between">
									<nc-text name="{%name%}-content-2"></nc-text>
								</div>
							</div>
						</div>

						<div class="col-12 col-lg-4 mb-5">
							<div class="contentblok bg-primary color-primary d-flex flex-column justify-content-between">
								<nc-text name="{%name%}-content-3"></nc-text>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blokken-2" nc-preset-title="Drievoudige meest populair blokken">
			<section class="py-3 py-md-5 triple-most-popular-blocks-content bg-tertiary">
				<div class="container">
					<nc-text name="{%name%}-tarief-title" default="&lt;h2&gt;Onze tarieven&lt;/h2&gt;"></nc-text>

					<div class="py-lg-3"></div>

					<div class="row tarieven">
						<div class="col-12 col-lg-4 mb-5">
							<div class="pricing-block color-primary d-flex flex-column justify-content-between">
								<nc-text name="{%name%}-tarief-1"></nc-text>
							</div>
						</div>

						<div class="col-12 col-lg-4 mb-5">
							<div class="populair bg-primary">
								<nc-element name="sub-title" type="p" default="Meest populair!"></nc-element>
							</div>
							<div class="scales">
								<div class="pricing-block color-primary boxshadow d-flex flex-column justify-content-between">
									<nc-text name="{%name%}-tarief-2"></nc-text>
								</div>
							</div>
						</div>

						<div class="col-12 col-lg-4 mb-5">
							<div class="pricing-block color-primary d-flex flex-column justify-content-between">
								<nc-text name="{%name%}-tarief-3"></nc-text>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-foto-album-1" nc-preset-title="Foto album met rand">
			<section class="py-3 py-md-5 photo-album-with-border-content">
				<div class="container">
					<div class="brands-border">
						<nc-image-album name="{%name%}-brands-album" columns="5" lightbox="content"></nc-image-album>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-foto-album-2" nc-preset-title="Foto album masonry verticaal">
			<section class="py-3 py-md-5 foto-album-masonry-vertical-content">
				<div class="container">
					<nc-text name="{%name%}-text" default="&lt;h2&gt;Foto album&lt;/h2&gt;"></nc-text>

					<div class="py-3"></div>

					<nc-image-album name="{%name%}-image-album" view="masonry-vertical" lightbox="content"></nc-image-album>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-foto-album-3" nc-preset-title="Slider geanimeerd">
			<section class="py-3 py-md-5 slider-animated-content">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=1250" name="{%name%}-content-news-right"></nc-partial-list>
						</div>
					</div>
				</div>
				<nc-image-album name="{%name%}-slider-animated" view="slider-animated"></nc-image-album>
			</section>
		</template>

		<template nc-preset-key="content-foto-album-4" nc-preset-title="Foto album">
			<section class="py-3 py-md-5 photo-album-with-border-content">
				<div class="container">
					<div class="brands p-5">
						<nc-image-album name="{%name%}-foto-album" columns="5" lightbox="content"></nc-image-album>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blog-1" nc-preset-title="Blog selectie" nc-preset-access="blog">
			<section class="py-3 py-md-5 blog-selection-content">
				<div class="container">
					<div class="row ">
						<div class="col-12 col-md-6">
							<nc-text name="{%name%}-news-title" type="h2" default="Onze laatste projecten"></nc-text>
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-left"></nc-partial-list>
						</div>

						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-right"></nc-partial-list>
						</div>

						<div class="py-5">
							<nc-blog-select name="{%name%}-news"></nc-blog-select>
						</div>

						<div class="col-12">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-center"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blog-2" nc-preset-title="Blog overzicht" nc-preset-access="blog">
			<section class="py-3 py-md-5 blog-overview-content">
				<div class="container">
					<div class="row ">
						<div class="col-12 col-md-6">
							<nc-text name="{%name%}-news-title" type="h2" default="Onze laatste projecten"></nc-text>
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-left"></nc-partial-list>
						</div>

						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-right"></nc-partial-list>
						</div>

						<div class="py-5">
							<nc-blog-feed name="{%name%}-news"></nc-blog-feed>
						</div>

						<div class="col-12">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-center"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blog-3" nc-preset-title="Blog 2 selectie" nc-preset-access="blog">
			<section class="py-3 py-md-5 blog-selection-2-content">
				<div class="container">
					<nc-text name="{%name%}-news-title" default="&lt;h2&gt;Onze laatste projecten&lt;/h2&gt;"></nc-text>

					<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-left"></nc-partial-list>

					<div class="py-5">
						<nc-blog-select name="{%name%}-projects"></nc-blog-select>
					</div>

					<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-center"></nc-partial-list>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-blog-4" nc-preset-title="Blog 2 overzicht" nc-preset-access="blog">
			<section class="py-3 py-md-5 blog-overview-2-content">
				<div class="container">
					<nc-text name="{%name%}-news-title" default="&lt;h2&gt;Onze laatste projecten&lt;/h2&gt;"></nc-text>

					<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-left"></nc-partial-list>

					<div class="py-5">
						<nc-blog-feed name="{%name%}-projects"></nc-blog-feed>
					</div>

					<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-content-news-center"></nc-partial-list>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-formulier-1" nc-preset-title="Formulier">
			<section class="py-3 py-md-5 contact-form-content">
				<div class="container">
					<nc-text name="{%name%}-quotation-content" default="&lt;h2&gt;Contact opnemen? Vul dan onderstaand formulier in&lt;/h2&gt;"></nc-text>
					<nc-form name="{%name%}-contact"></nc-form>
				</div>
			</section>
		</template>

		<template nc-preset-key="content-formulier-3" nc-preset-title="Keuzelijst 40% | Contact formulier 50%">
			<section id="formulier" class="py-3 py-md-5 contact-form-50-content">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-12 col-md-5 py-5 py-md-0">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-left-form"></nc-partial-list>
						</div>

						<div class="col-12 col-md-6 offset-md-1">
							<div class="form-page">
								<nc-text name="{%name%}-form-content" default="&lt;h2&gt;Neem contact met ons op&lt;/h2&gt;"></nc-text>
								<nc-form name="{%name%}-form"></nc-form>
							</div>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="formulier-builder-1" nc-preset-title="Formulier links | Keuzelijst rechts" nc-preset-access="form">
			<section class="py-3 py-md-5 form-builder-1">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6">
							<nc-form name="{%name%}-form-builder-formulier"></nc-form>
						</div>

						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-right"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="formulier-builder-2" nc-preset-title="Keuzelijst links | Formulier rechts" nc-preset-access="form">
			<section class="py-3 py-md-5 form-builder-2">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-right"></nc-partial-list>
						</div>

						<div class="col-12 col-md-6">
							<nc-form name="{%name%}-form-builder-formulier"></nc-form>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="formulier-builder-3" nc-preset-title="Formulier links 66% | Keuzelijst rechts 33%" nc-preset-access="form">
			<section class="py-3 py-md-5 form-builder-3">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-8">
							<nc-form name="{%name%}-form-builder-formulier"></nc-form>
						</div>

						<div class="col-12 col-md-4">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-right"></nc-partial-list>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="formulier-builder-4" nc-preset-title="Keuzelijst links 33% | Formulier rechts 66%" nc-preset-access="form">
			<section class="py-3 py-md-5 form-builder-4">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-4">
							<nc-partial-list partials="image,image-album,text,youtube,download" partial-attributes="lightbox=content,width=540" name="{%name%}-module-right"></nc-partial-list>
						</div>

						<div class="col-12 col-md-8">
							<nc-form name="{%name%}-form-builder-formulier"></nc-form>
						</div>
					</div>
				</div>
			</section>
		</template>

		<template nc-preset-key="formulier-builder-5" nc-preset-title="Formulier" nc-preset-access="form">
			<section class="py-3 py-md-5 form-builder-5">
				<div class="container">
					<nc-text name="{%name%}-content"></nc-text>

					<nc-form name="{%name%}-form-builder-formulier"></nc-form>
				</div>
			</section>
		</template>
	</nc-preset-list>
</div>
CSS
.content-subtemplate-landing .form-right-module .form-card {
	padding: 3rem;
	background-color: white;
	color: black !important;
	border-radius: 1rem;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.content-subtemplate-landing .form-right-module .form-card p {
	color: black !important;
}

.content-subtemplate-landing .form-right-module .image-left-form picture .img-fluid {
	margin-top: -3rem;
}

@media only screen and (min-width: 768px) {
	.content-subtemplate-landing .form-right-module .form-card-absolute {
		position: absolute;
		width: 100%;
		top: 5rem;
	}

	.content-subtemplate-landing .form-right-module.min-height {
		min-height: 900px;
	}
}

/* CSS for Main Text Left. | Image with border on the right */

.content-subtemplate-landing .image-background-index .panel {
	z-index: 5;
}

@media only screen and (min-width: 768px) {
	.content-subtemplate-landing .image-background-index .image-left {
		margin-left: -5rem;
		z-index: 1;
	}
}

/* CSS for Keuzelijst 50% | Tekst blok 40% */

.content-subtemplate-landing .text-block-40-content .usp-content {
	border-radius: 1rem;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.content-subtemplate-landing .text-block-40-content .usp-content p {
	margin: 0;
}

.content-subtemplate-landing .text-block-40-content .usp-content ul li {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 1rem 0;
	list-style: none;
}

.content-subtemplate-landing .text-block-40-content .usp-content ul li::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/* (--fa-font is de lettertype-stijl die is geselecteerd in de configuratie) */
	font: var(--fa-font);
	/* Zet de icooncode als inhoud. Zie de Font Awesome Gallery voor alle icooncodes. */
	content: "\f058";
	margin-right: 1rem;
	color: var(--secondary-dark);
}

/* CSS for Veel gestelde vragen */

.content-subtemplate-landing .faq-content .tekst-accordeon-plus .collapsible-text-title::before {
	display: none;
}

.content-subtemplate-landing .faq-content .tekst-accordeon-plus button.collapsible-text-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0.5rem 0;
	padding-left: 0;
}

.content-subtemplate-landing .faq-content .collapsible-text .collapsible-text-title[aria-expanded="false"]::after {
	/* Zorg dat icons overal hetzelfde zullen renderen. */
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/* (--fa-font is de font style die geselecteerd is in de config.) */
	font: var(--fa-font);
	/* Verbergt de pijl voor ingeklapte teksttitels */
	content: "\2b";
	/* Voegt een overgangseffect toe voor de draaiende animatie */
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

}

.content-subtemplate-landing .faq-content .collapsible-text .collapsible-text-title[aria-expanded="true"]::after {
	/* Zorg dat icons overal hetzelfde zullen renderen. */
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/* (--fa-font is de font style die geselecteerd is in de config.) */
	font: var(--fa-font);
	/* Toont de min teken voor uitgeklapte teksttitels */
	content: "\f068";
	/* Voegt een overgangseffect toe voor de draaiende animatie */
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	/* Draait de pijl met 360 graden voor een draai-effect */
	transform: rotate(360deg);
}

.content-subtemplate-landing .faq-content .collapsible-text .collapsible-text-title::after {
	background-color: var(--primary);
	border: 5px solid var(--primary);
	border-radius: 100%;
	width: 50px;
	height: 50px;
	min-width: 50px;
	margin-left: 15px;
	font-size: 1.5rem !important;
	font-weight: 500;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-subtemplate-landing .faq-content .collapsible-text .collapsible-text-title[aria-expanded="true"]::after {
	border: 3px solid var(--primary);
	background-color: transparent;
	color: black;
}

.content-subtemplate-landing .faq-content .collapsible-text-title {
	border: 0;
	font-size: 1.3rem;
}

.content-subtemplate-landing .faq-content .collapsible-text-title:focus,
.content-subtemplate-landing .faq-content .collapsible-text-title:hover,
.content-subtemplate-landing .faq-content .collapsible-text-title:active,
.content-subtemplate-landing .faq-content .collapsible-text-content {
	border: 0;
	box-shadow: none;
}

/* CSS for Recensieoverzicht */
.content-subtemplate-landing .review-item-preview-rating i {
	font-size: 1.375em;
	color: gold;
}

/* CSS for Keuzelijst 40% | Recensie formulier 50% */
.content-subtemplate-landing [data-partial="review-form"] .input-rating i {
	font-size: 1.375em;
	color: gold;
}

/* CSS for Keuzelijst 66% | 33% Recensie rating */
.content-subtemplate-landing [data-partial="review-rating"] i {
	font-size: 1.375em;
	color: gold;
}

/* CSS for Recensie rating 33% | Keuzelijst 66% */
.content-subtemplate-landing [data-partial="review-rating"] i {
	font-size: 1.375em;
	color: gold;
}

/* CSS for Drievoudige USP balk met iconen */
.content-subtemplate-landing .triple-icon-bar-content .triple-icon-bar-section {
	padding: 3rem 0;
}

.content-subtemplate-landing .triple-icon-bar-content .triple-icon-bar-section .triple-icon-bar-icon p {
	align-items: center;
	display: flex;
	font-size: 2rem;
}

.content-subtemplate-landing .triple-icon-bar-content .triple-icon-bar-section .triple-icon-bar-icon p span.fa-fw:first-child {
	font-size: 2rem !important;
}

/* CSS for Viervoudige USP balk met iconen */

.content-subtemplate-landing .four-icon-bar-content {
	padding: 3rem 0;
}

.content-subtemplate-landing .four-icon-bar-content .four-icon-bar-icon p {
	align-items: center;
	display: flex;
	font-size: 1.3rem;
}

.content-subtemplate-landing .four-icon-bar-content .four-icon-bar-icon p span.fa-fw:first-child {
	font-size: 1.3rem !important;
}

/* CSS for triple content blocks */

.content-subtemplate-landing .triple-content-blocks-content .contentblok {
	padding: 2rem;
	border-radius: 25px;
}

.content-subtemplate-landing .triple-content-blocks-content .usp-content .btn-secondary {
	display: block;
}

.content-subtemplate-landing .triple-content-blocks-content .scale {
	transform: scale(1.1);
}

/* CSS for Drievoudige meest populair blokken */
.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block {
	padding: 2rem;
	border-radius: 25px;
	color: #fff !important;
	background: var(--black);
}

.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block h3,
.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block .h3,
.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block h4,
.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block .h4 {
	color: #fff;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block p em {
	font-style: normal;
	font-size: 1.4rem;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .usp-content .btn-secondary {
	display: block;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .pricing-block {
	color: #fff;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .scale {
	transform: scale(1.1);
}

.content-subtemplate-landing .triple-most-popular-blocks-content .populair {
	position: absolute;
	color: #fff;
	z-index: 2;
	border-radius: 25px;
	padding: 1rem;
	left: 27%;
	top: -14%;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .populair p {
	color: #fff !important;
	margin: 0;
}

.content-subtemplate-landing .triple-most-popular-blocks-content .populair+[data-partial="element"]+p:empty {
	display: none;
}

/* CSS for Foto album met rand */
.content-subtemplate-landing .photo-album-with-border-content .brands-border {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 2rem;
}

.content-subtemplate-landing .photo-album-with-border-content .brands-border .image-album-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* CSS for Slider animated */

.content-subtemplate-landing .slider-animated-content .image-album-slider-animated .flex-slider {
	animation-duration: 30000ms;
	align-items: center;
	display: flex;
}

.content-subtemplate-landing .slider-animated-content .image-album-slider-animated>* img {
	padding-left: 1rem;
	padding-right: 1rem;
}

.content-subtemplate-landing .slider-animated-content .image-album-slider-animated>*::before {
	background: linear-gradient(270deg, transparent 0%, white 100%);
}

.content-subtemplate-landing .slider-animated-content .image-album-slider-animated>*::after {
	background: linear-gradient(90deg, transparent 0%, white 100%);
}

/* CSS for Foto album */
.content-subtemplate-landing .photo-album-with-border-content .brands .image-album-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* CSS om beheerbaarheid te verbeteren */

[data-editor-mode=layout] [data-partial] .image-empty {
	min-height: 2rem;
}

[data-editor-mode=layout] .modal-body {
	overscroll-behavior: contain;
	max-height: calc(100vh - 400px);
	overflow-y: auto;
	-webkit-overflow-scrolling: auto;
}

[data-editor-mode=layout] .layout-data-div {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 2rem 2rem 0rem 2rem;
}

body[data-editor-mode="content"] [data-partial="text"] {
	min-width: 30px;
	min-height: 50px;
}

/* Customizable css */
.content-subtemplate-landing .bg-primary p,
.content-subtemplate-landing .bg-primary h1,
.content-subtemplate-landing .bg-primary h2 {
	color: white;
}

.content-subtemplate-landing .bg-secondary p,
.content-subtemplate-landing .bg-tertiary p {
	color: black;
}

.content-subtemplate-landing .bg-primary p .fa-icons,
.content-subtemplate-landing .bg-secondary p .fa-icons,
.content-subtemplate-landing .bg-tertiary p .fa-icons {
	color: var(--white) !important;
}

/* vergeet niet om !important er achter te zetten */
.content-subtemplate-landing .bg-primary,
.content-subtemplate-landing .bg-secondary,
.content-subtemplate-landing .bg-tertiary {}