<div class="wysiwyg-content has-lines">
<div class="wysiwyg-content__spacer">
<div class="fifty-fifty fifty-fifty--is-sticky fifty-fifty--is-reversed">
<div class="fifty-fifty__half fifty-fifty__half--one">
<div class="fifty-fifty__half__inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc dolor, aliquet ac leo sodales, scelerisque porttitor massa. Maecenas sed laoreet dui. Mauris cursus pharetra enim in blandit. Cras felis tortor, mattis viverra ipsum
cursus, interdum semper diam. Cras vitae ante non lorem pretium tincidunt. Quisque ullamcorper sapien est, a laoreet ante consectetur vehicula. Aliquam accumsan ex eu magna mollis pulvinar. Praesent tempor, elit eu ornare porttitor,
nulla lectus tristique nibh, commodo euismod sapien dolor ut dui. Morbi mattis neque eu dolor iaculis, vel facilisis est iaculis. Aenean est erat, vulputate ut porttitor id, blandit eu purus. Quisque vitae dui vulputate, accumsan
est sit amet, volutpat lorem.</p>
<p>Sed a dolor vitae elit pharetra rhoncus. Quisque sed ligula sit amet enim elementum blandit. Ut tempor vitae orci sed molestie. Morbi sit amet arcu sagittis elit tempus finibus. Ut vitae condimentum lectus. Mauris nibh velit, malesuada
sed ultrices ac, malesuada ut metus. Ut varius condimentum diam sit amet semper. Duis vitae congue mauris. Aliquam erat volutpat.</p>
<p>Praesent viverra aliquam lectus sed consequat. Nunc vitae erat ipsum. In luctus ipsum et interdum eleifend. Vivamus tincidunt arcu non tortor mollis aliquet. Praesent egestas dui eget quam malesuada suscipit. Quisque euismod dolor
ut erat aliquet, at vehicula lorem egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ac quam nisl. Maecenas et lacinia libero. Ut quis imperdiet nisl, vel vestibulum massa. Nullam
rhoncus dui mattis dolor iaculis placerat.</p>
<p>Fusce vitae lacus eget tellus consequat tempor lobortis in justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt feugiat eros in venenatis. In vel sodales justo, vitae
bibendum felis. Sed tempor feugiat ex in tincidunt. Nullam euismod massa sit amet enim tempus tincidunt. Fusce pulvinar rutrum tortor in convallis. Nunc justo quam, accumsan nec nisl eu, gravida faucibus ipsum. In hac habitasse
platea dictumst. Maecenas feugiat lacus efficitur malesuada porta. Nunc in tristique orci.</p>
<p>Aliquam id suscipit lacus. Sed eu iaculis est. Morbi placerat velit faucibus, vestibulum sapien a, volutpat nulla. Vivamus sagittis sem a nisi aliquet dignissim. Duis tincidunt consectetur tempus. Morbi sed felis consectetur, tristique
eros eget, auctor sem. Sed sit amet velit nec mi porttitor lobortis eu vel mi. Vivamus efficitur pulvinar elit, ac bibendum mauris cursus vitae. Etiam mi lectus, pulvinar nec vehicula ac, sodales ac dolor. Maecenas nulla sapien,
posuere eu arcu id, iaculis dapibus sem. Nam tincidunt, mi tempor mollis tristique, odio odio cursus sem, sit amet commodo neque erat at massa. Duis a justo elit. Quisque condimentum ligula et ante rutrum, eget scelerisque arcu
pretium.</p>
</div>
</div>
<div class="fifty-fifty__half fifty-fifty__half--two">
<div class="fifty-fifty__half__inner">
<img src="https://via.placeholder.com/600x400">
</div>
</div>
</div>
</div>
</div>
/* @fifty-fifty */
.fifty-fifty {
display: flex;
flex-wrap: wrap;
background-color: white;
&--is-reversed {
flex-wrap: wrap-reverse;
}
&:first-child {
.fifty-fifty__half__inner {
@media (min-width: $medium-screen) {
padding-left: $base-spacing/2;
}
}
}
&:last-child {
.fifty-fifty__half__inner {
@media (min-width: $medium-screen) {
padding-left: $base-spacing/2;
}
}
}
&__half {
flex: 1;
align-content: flex-start;
min-width: 100%;
@include poly-padding;
@media (min-width: $medium-screen) {
min-width: initial;
margin: 0 auto;
}
}
&--is-sticky {
.fifty-fifty__half__inner {
position: sticky;
top: calc(160px + 1rem);
}
}
}
<?php
$fiftyFifty = array (
'key' => 'fifty_fifty',
'label' => '50/50 Content',
'name' => 'fifty-fifty',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'fifty_fifty_stuff',
'label' => '',
'name' => 'content',
'type' => 'group',
'sub_fields' => array (
array(
'key' => 'fifty_fifty_title',
'label' => 'Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array (
'key' => 'fifty_fifty_section_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array(
'key' => 'hide_block',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'fifty_fifty_content_center_title',
'label' => __('Center Title?', 'ipsen-master'),
'name' => 'center_title',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'fifty_fifty_content_one',
'label' => __('Content', 'ipsen-master'),
'name' => 'one',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 1,
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'fifty_fifty_content_two',
'label' => __('Content', 'ipsen-master'),
'name' => 'two',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 1,
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
),
),
array (
'key' => 'fifty_fifty_settings',
'label' => 'Settings',
'name' => 'settings',
'type' => 'group',
'sub_fields' => array (
array (
'key' => 'fifty_fifty_content_sticky',
'label' => __('Sticky?', 'ipsen-master'),
'name' => 'sticky',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'fifty_fifty_content_reversed',
'label' => __('Reversed?', 'ipsen-master'),
'name' => 'reversed',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
),
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $fiftyFifty);