Met deze ‘mini block editor’ kunnen meerdere blokken worden toegevoegd met eigen WYSIWYG content voor elke kolom. Ook kan voor elke rij een achtergrond kleur worden ingesteld en de padding van boven en onder.
Heel blok (100%)
Half blok (50%/50%)
Derde blokken (33%/33%/33%)
2 blokken (66%/33%)
2 blokken omgekeerd (33%/66%)
veld groep toevoegen (opslaan als .json en importeren)
[
{
"key": "group_5cf7708f562d7",
"title": "Content",
"fields": [
{
"key": "field_5cf77094d45a5",
"label": "Extra content",
"name": "extra_content",
"type": "flexible_content",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "100",
"class": "",
"id": ""
},
"layouts": {
"5cf7709e5977a": {
"key": "5cf7709e5977a",
"name": "heel_blok",
"label": "1 blok",
"display": "block",
"sub_fields": [
{
"key": "field_5cf774357ee59",
"label": "Achtergrond",
"name": "achtegrrond",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "16.6",
"class": "",
"id": ""
},
"default_value": "#FFFFFF"
},
{
"key": "field_5cf774497ee5a",
"label": "Ruimte boven",
"name": "ruimte_boven",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "16.6",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf7746e7ee5b",
"label": "Ruimte onder",
"name": "ruimte_onder",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "16.6",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf770bad45a6",
"label": "Tekst",
"name": "tekst",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "100",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
],
"min": "",
"max": ""
},
"layout_5cf7776be7edc": {
"key": "layout_5cf7776be7edc",
"name": "half_blok",
"label": "2 blokken (50%\/50%)",
"display": "block",
"sub_fields": [
{
"key": "field_5cf7776be7edd",
"label": "Achtergrond",
"name": "achtegrrond",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "#FFFFFF"
},
{
"key": "field_5cf7776be7ede",
"label": "Ruimte boven",
"name": "ruimte_boven",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf7776be7edf",
"label": "Ruimte onder",
"name": "ruimte_onder",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf7776be7ee0",
"label": "Tekst",
"name": "tekst",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5cf77773e7ee1",
"label": "Tekst",
"name": "tekst_2",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
],
"min": "",
"max": ""
},
"layout_5cf777da3300d": {
"key": "layout_5cf777da3300d",
"name": "derde_blok",
"label": "3 blokken (33%\/33%\/33%)",
"display": "block",
"sub_fields": [
{
"key": "field_5cf777da3300e",
"label": "Achtergrond",
"name": "achtegrrond",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "#FFFFFF"
},
{
"key": "field_5cf777da3300f",
"label": "Ruimte boven",
"name": "ruimte_boven",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf777da33010",
"label": "Ruimte onder",
"name": "ruimte_onder",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf777da33011",
"label": "Tekst",
"name": "tekst",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5cf777da33012",
"label": "Tekst",
"name": "tekst_2",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5cf777e333013",
"label": "Tekst",
"name": "tekst_3",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
],
"min": "",
"max": ""
},
"layout_5cf7780033014": {
"key": "layout_5cf7780033014",
"name": "tweederde_eenderde_blok",
"label": "2 blokken (66%\/33%)",
"display": "block",
"sub_fields": [
{
"key": "field_5cf7780033015",
"label": "Achtergrond",
"name": "achtegrrond",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "#FFFFFF"
},
{
"key": "field_5cf7780033016",
"label": "Ruimte boven",
"name": "ruimte_boven",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf7780033017",
"label": "Ruimte onder",
"name": "ruimte_onder",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf7780033018",
"label": "Tekst",
"name": "tekst",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "66",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5cf7780033019",
"label": "Tekst",
"name": "tekst_2",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
],
"min": "",
"max": ""
},
"layout_5cf778183301b": {
"key": "layout_5cf778183301b",
"name": "eenderde_tweederde_blok",
"label": "2 blokken (33%\/66%)",
"display": "block",
"sub_fields": [
{
"key": "field_5cf778183301c",
"label": "Achtergrond",
"name": "achtegrrond",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "#FFFFFF"
},
{
"key": "field_5cf778183301d",
"label": "Ruimte boven",
"name": "ruimte_boven",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf778183301e",
"label": "Ruimte onder",
"name": "ruimte_onder",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": 30,
"placeholder": "",
"prepend": "",
"append": "px",
"min": "",
"max": "",
"step": ""
},
{
"key": "field_5cf778183301f",
"label": "Tekst",
"name": "tekst",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "33",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_5cf7781833020",
"label": "Tekst",
"name": "tekst_2",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "66",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
}
],
"min": "",
"max": ""
}
},
"button_label": "Nieuw blok",
"min": "",
"max": ""
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "post"
}
],
[
{
"param": "post_type",
"operator": "==",
"value": "page"
}
],
[
{
"param": "post_type",
"operator": "==",
"value": "diensten"
}
],
[
{
"param": "post_type",
"operator": "==",
"value": "team"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": ""
}
]
In template
<?php if( have_rows('extra_content') ): ?>
<?php
while ( have_rows('extra_content') ) : the_row();
if( get_row_layout() == 'heel_blok' ): ?>
<div class="container-fluid" style="padding-top: <?php the_sub_field('ruimte_boven'); ?>px; padding-bottom: <?php the_sub_field('ruimte_onder'); ?>px; background: <?php the_sub_field('achtegrrond'); ?>;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<?php the_sub_field('tekst'); ?>
</div>
</div>
</div>
</div>
<?php
elseif( get_row_layout() == 'half_blok' ): ?>
<div class="container-fluid" style="padding-top: <?php the_sub_field('ruimte_boven'); ?>px; padding-bottom: <?php the_sub_field('ruimte_onder'); ?>px; background: <?php the_sub_field('achtegrrond'); ?>;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<?php the_sub_field('tekst'); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<?php the_sub_field('tekst_2'); ?>
</div>
</div>
</div>
</div>
<?php
elseif( get_row_layout() == 'derde_blok' ): ?>
<div class="container-fluid" style="padding-top: <?php the_sub_field('ruimte_boven'); ?>px; padding-bottom: <?php the_sub_field('ruimte_onder'); ?>px; background: <?php the_sub_field('achtegrrond'); ?>;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<?php the_sub_field('tekst'); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<?php the_sub_field('tekst_2'); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<?php the_sub_field('tekst_3'); ?>
</div>
</div>
</div>
</div>
<?php
elseif( get_row_layout() == 'tweederde_eenderde_blok' ): ?>
<div class="container-fluid" style="padding-top: <?php the_sub_field('ruimte_boven'); ?>px; padding-bottom: <?php the_sub_field('ruimte_onder'); ?>px; background: <?php the_sub_field('achtegrrond'); ?>;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<?php the_sub_field('tekst'); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<?php the_sub_field('tekst_2'); ?>
</div>
</div>
</div>
</div>
<?php
elseif( get_row_layout() == 'eenderde_tweederde_blok' ): ?>
<div class="container-fluid" style="padding-top: <?php the_sub_field('ruimte_boven'); ?>px; padding-bottom: <?php the_sub_field('ruimte_onder'); ?>px; background: <?php the_sub_field('achtegrrond'); ?>;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<?php the_sub_field('tekst'); ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-8">
<?php the_sub_field('tekst_2'); ?>
</div>
</div>
</div>
</div>
<?php endif;
endwhile; ?>
</div>
</div>
</div><?php endif; ?>
#acf #blokken #content #extra #flexibel #flexible