diff --git a/app/assets/stylesheets/pageflow/ui/forms.scss b/app/assets/stylesheets/pageflow/ui/forms.scss
index b06764b7c5..86429f0293 100644
--- a/app/assets/stylesheets/pageflow/ui/forms.scss
+++ b/app/assets/stylesheets/pageflow/ui/forms.scss
@@ -85,6 +85,7 @@ textarea.short {
 }
 
 .radio_input,
+.radio_button,
 .check_box_input {
   padding: space(1) 0;
   position: relative;
@@ -108,6 +109,10 @@ textarea.short {
   }
 }
 
+.radio_button {
+  padding: space(2);
+}
+
 .radio_input {
   padding-top: 10px;
 }
@@ -140,9 +145,20 @@ textarea.short {
 .slider_input {
   padding: space(1) 0 0;
 
+  label {
+    margin-bottom: space(2.5);
+  }
+
+  .slider_wrapper {
+    display: flex;
+    align-items: center;
+    gap: space(2);
+  }
+
   .slider {
-    margin: 10px 10px 0 40px;
+    flex: 1;
     border: 1px solid var(--ui-on-surface-color-lighter);
+    margin-right: 10px;
   }
 
   .ui-slider-handle {
@@ -152,8 +168,7 @@ textarea.short {
 
   .value {
     font-size: 11px;
-    margin: 7px 0;
-    float: left;
+    min-width: space(8);
   }
 
   &.disabled .slider,
@@ -227,6 +242,18 @@ textarea.short {
   display: none;
 }
 
+.visually_hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .input-disabled {
   button,
   select,
diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml
index c85d15de39..660406c96f 100644
--- a/entry_types/scrolled/config/locales/de.yml
+++ b/entry_types/scrolled/config/locales/de.yml
@@ -1280,6 +1280,12 @@ de:
         hide: Außerhalb des Editors ausblenden
         show: Außerhalb des Editors einblenden
         hidden: Nur im Editor sichtbar
+      section_padding_visualization:
+        intersecting_auto: "Darstellung des dynamischen Abstands, der sich an die Größe des Motivbereichs anpasst, um Überlappungen von Text und Motiv zu vermeiden"
+        intersecting_manual: "Darstellung des manuell definierten Abstands, der bei Änderung der Fenstergröße konstant bleibt"
+        side_by_side: "Darstellung des oberen Abstands, wenn der Inhalt neben dem Motivbereich Platz findet"
+        top_padding: "Darstellung des oberen Abstands"
+        bottom_padding: "Darstellung des unteren Abstands"
       select_link_destination:
         cancel: Abbrechen
         create: Erstellen
@@ -1296,6 +1302,9 @@ de:
       selectable_section_item:
         title: Abschnitt auswählen
       edit_motif_area_menu_item: Motivbereich markieren...
+      edit_motif_area_input:
+        select: Motivbereich auswählen
+        edit: Motivbereich bearbeiten
       backdrop_content_element_input:
         add: Neues Element
         unset: Nicht mehr als Hintergrund verwenden
@@ -1348,19 +1357,32 @@ de:
         tabs:
           sectionPaddings: Innenabstände
           portrait: Hochkant
+
+        side_by_side_info: 'Wenn Motiv und Inhalt nebeneinander passen:'
         attributes:
+          topPaddingVisualization:
+            label: Abstand oben
+          exposeMotifArea:
+            label: Abstand oben
+            values:
+              'true': Automatisch anpassen, um das Motiv im Hintergrund freizustellen
+              'false': Manuell festlegen
+          sideBySideVisualization:
+            label: Nebeneinander
           paddingTop:
-            blank: (Standard)
-            label: Oben
+            label: Abstand oben
+          bottomPaddingVisualization:
+            label: Abstand unten
           paddingBottom:
-            blank: (Standard)
-            label: Unten
+            label: Abstand unten
+          samePortraitPaddings:
+            label: Gleiche Innenabstände wie bei Querformat verwenden
+          portraitExposeMotifArea:
+            label: Abstand oben
           portraitPaddingTop:
-            blank: (Standard)
-            label: Oben (Hochkant)
+            label: Abstand oben (Hochkant)
           portraitPaddingBottom:
-            blank: (Standard)
-            label: Unten (Hochkant)
+            label: Abstand unten (Hochkant)
       typography_sizes:
         xl: Sehr groß
         lg: Groß
diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml
index 0068fd2261..ec8c35a5ca 100644
--- a/entry_types/scrolled/config/locales/en.yml
+++ b/entry_types/scrolled/config/locales/en.yml
@@ -1206,6 +1206,8 @@ en:
           cardSurfaceColor:
             label: Cards background color
             auto: "(Auto)"
+          sectionPaddings:
+            label: "Top/bottom padding"
         tabs:
           section: Section
       edit_section_transition:
@@ -1262,6 +1264,12 @@ en:
         hide: Hide outside of the editor
         show: Show outside of the editor
         hidden: Only visible in editor
+      section_padding_visualization:
+        intersecting_auto: "Visualization of dynamic padding that adjusts to the motif area size to prevent text from overlapping the motif"
+        intersecting_manual: "Visualization of manually defined padding that stays constant as viewport size changes"
+        side_by_side: "Visualization of top padding when content fits next to the motif area"
+        top_padding: "Visualization of top padding"
+        bottom_padding: "Visualization of bottom padding"
       select_link_destination:
         cancel: Cancel
         create: Create
@@ -1278,6 +1286,9 @@ en:
       selectable_section_item:
         title: Select section
       edit_motif_area_menu_item: Select motif area...
+      edit_motif_area_input:
+        select: Select motif area
+        edit: Edit motif area
       backdrop_content_element_input:
         add: New element
         unset: No longer use as backdrop
@@ -1324,6 +1335,37 @@ en:
         remove: "Remove style"
       crop_types:
         circle: Circle
+      section_paddings_input:
+        auto: (Auto)
+      edit_section_paddings:
+        tabs:
+          sectionPaddings: Paddings
+          portrait: Portrait
+        side_by_side_info: 'When motif and content fit side by side:'
+        attributes:
+          topPaddingVisualization:
+            label: Top padding
+          exposeMotifArea:
+            label: Top Padding
+            values:
+              'true': Adjust automatically to expose a motif in the background
+              'false': Set manually
+          sideBySideVisualization:
+            label: Side by side
+          paddingTop:
+            label: Top padding
+          bottomPaddingVisualization:
+            label: Bottom padding
+          paddingBottom:
+            label: Bottom padding
+          samePortraitPaddings:
+            label: Use same paddings as in landscape orientation
+          portraitExposeMotifArea:
+            label: Top Padding
+          portraitPaddingTop:
+            label: Top padding (Portrait)
+          portraitPaddingBottom:
+            label: Bottom padding (Portrait)
       typography_sizes:
         xl: Very large
         lg: Large
diff --git a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
index 40f7206de0..c25efebaaf 100644
--- a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
+++ b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
@@ -220,6 +220,27 @@ describe('PreviewMessageController', () => {
     })).resolves.toMatchObject({type: 'SELECT', payload: {id: 1, type: 'sectionTransition'}});
   });
 
+  it('sends SELECT message to iframe on selectSectionPaddings event on model', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 1}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT') {
+          resolve(event.data);
+        }
+      });
+      entry.trigger('selectSectionPaddings', entry.sections.first());
+    })).resolves.toMatchObject({type: 'SELECT', payload: {id: 1, type: 'sectionPaddings'}});
+  });
+
   it('sends SELECT message to iframe on selectWidget event on model', async () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       widgetTypes: factories.widgetTypes([{
@@ -348,6 +369,38 @@ describe('PreviewMessageController', () => {
     })).resolves.toBe('/widgets/header');
   });
 
+  it('navigates to paddings route on SELECTED message for sectionPaddings', () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 1}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    return expect(new Promise(resolve => {
+      editor.on('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 1, type: 'sectionPaddings'}}, '*');
+    })).resolves.toBe('/scrolled/sections/1/paddings');
+  });
+
+  it('navigates to paddings route with position query param on SELECTED message for sectionPaddings', () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 1}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    return expect(new Promise(resolve => {
+      editor.on('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 1, type: 'sectionPaddings', position: 'bottom'}}, '*');
+    })).resolves.toBe('/scrolled/sections/1/paddings?position=bottom');
+  });
+
   it('displays insert dialog on INSERT_CONTENT_ELEMENT message', () => {
     const editor = factories.editorApi();
     const entry = factories.entry(ScrolledEntry, {}, {
@@ -653,6 +706,105 @@ describe('PreviewMessageController', () => {
       window.postMessage({type: 'SAVED_SCROLL_POINT'}, '*');
     })).resolves.toEqual('received');
   });
+
+  it('sends instant SCROLL_TO_SECTION in preserveScrollPoint if paddings were selected', async () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 5}]
+      })
+    });
+
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    // First select paddings
+    await new Promise(resolve => {
+      editor.once('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 5, type: 'sectionPaddings'}}, '*');
+    });
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SCROLL_TO_SECTION') {
+          resolve(event.data);
+        }
+      });
+      controller.preserveScrollPoint(() => {});
+    })).resolves.toMatchObject({
+      type: 'SCROLL_TO_SECTION',
+      payload: {id: 5, behavior: 'instant'}
+    });
+  });
+
+  it('sends SCROLL_TO_SECTION with nearEnd align when bottom paddings were selected', async () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 5}]
+      })
+    });
+
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    // Select bottom paddings
+    await new Promise(resolve => {
+      editor.once('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 5, type: 'sectionPaddings', position: 'bottom'}}, '*');
+    });
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SCROLL_TO_SECTION') {
+          resolve(event.data);
+        }
+      });
+      controller.preserveScrollPoint(() => {});
+    })).resolves.toMatchObject({
+      type: 'SCROLL_TO_SECTION',
+      payload: {id: 5, align: 'nearEnd', behavior: 'instant'}
+    });
+  });
+
+  it('clears selected paddings when another selection type is received', async () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        sections: [{id: 5}]
+      })
+    });
+
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    // First select paddings
+    await new Promise(resolve => {
+      editor.once('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 5, type: 'sectionPaddings'}}, '*');
+    });
+
+    // Then select section settings
+    await new Promise(resolve => {
+      editor.once('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 5, type: 'sectionSettings'}}, '*');
+    });
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SAVE_SCROLL_POINT') {
+          resolve('save_scroll_point');
+        }
+      });
+      controller.preserveScrollPoint(() => {});
+    })).resolves.toEqual('save_scroll_point');
+  });
 });
 
 function postReadyMessageAndWaitForAcknowledgement(iframeWindow) {
diff --git a/entry_types/scrolled/package/spec/editor/views/EditSectionPaddingsView-spec.js b/entry_types/scrolled/package/spec/editor/views/EditSectionPaddingsView-spec.js
new file mode 100644
index 0000000000..764b721488
--- /dev/null
+++ b/entry_types/scrolled/package/spec/editor/views/EditSectionPaddingsView-spec.js
@@ -0,0 +1,763 @@
+import {EditSectionPaddingsView} from 'editor/views/EditSectionPaddingsView';
+import {EditMotifAreaDialogView} from 'editor/views/EditMotifAreaDialogView';
+
+import {useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals, useFakeXhr} from 'support';
+import '@testing-library/jest-dom/extend-expect';
+import 'support/toBeVisibleViaBinding';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('editor/views/EditMotifAreaDialogView');
+
+describe('EditSectionPaddingsView', () => {
+  useFakeXhr();
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.editor.section_padding_visualization.intersecting_auto': 'Auto',
+    'pageflow_scrolled.editor.section_padding_visualization.intersecting_manual': 'Manual',
+    'pageflow_scrolled.editor.section_padding_visualization.side_by_side': 'SideBySide',
+    'pageflow_scrolled.editor.section_padding_visualization.top_padding': 'TopPadding',
+    'pageflow_scrolled.editor.section_padding_visualization.bottom_padding': 'Bottom',
+    'pageflow_scrolled.editor.edit_section_paddings.tabs.sectionPaddings': 'Landscape',
+    'pageflow_scrolled.editor.edit_section_paddings.tabs.portrait': 'Portrait',
+    'pageflow_scrolled.editor.edit_section_paddings.attributes.samePortraitPaddings.label': 'Same as landscape',
+    'pageflow_scrolled.editor.edit_motif_area_input.select': 'Select motif area',
+    'pageflow_scrolled.editor.edit_motif_area_input.edit': 'Edit motif area',
+    'pageflow_scrolled.editor.edit_section_paddings.attributes.exposeMotifArea.values.true': 'Auto mode',
+    'pageflow_scrolled.editor.edit_section_paddings.attributes.exposeMotifArea.values.false': 'Manual mode'
+  });
+
+  it('shows auto visualization when exposeMotifArea is true', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'Auto'})).toBeVisibleViaBinding();
+  });
+
+  it('hides auto visualization when exposeMotifArea is false', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: false}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'Auto'})).not.toBeVisibleViaBinding();
+  });
+
+  it('shows manual visualization when exposeMotifArea is false', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: false}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'Manual'})).toBeVisibleViaBinding();
+  });
+
+  it('hides manual visualization when exposeMotifArea is true', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'Manual'})).not.toBeVisibleViaBinding();
+  });
+
+  it('shows sideBySide visualization when exposeMotifArea is true', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'SideBySide'})).toBeVisibleViaBinding();
+  });
+
+  it('hides sideBySide visualization when exposeMotifArea is false', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: false}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'SideBySide'})).not.toBeVisibleViaBinding();
+  });
+
+  it.each(['center', 'centerRagged'])
+  ('hides sideBySide visualization when layout is %s', (layout) => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: true, layout}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'SideBySide'})).not.toBeVisibleViaBinding();
+  });
+
+  it.each(['center', 'centerRagged'])
+  ('hides portrait sideBySide visualization when layout is %s', async (layout) => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {portraitExposeMotifArea: true, layout, backdropImageMobile: 10}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole, getByText} = renderBackboneView(view);
+
+    await user.click(getByText('Portrait'));
+
+    expect(getByRole('img', {name: 'SideBySide'})).not.toBeVisibleViaBinding();
+  });
+
+  it('shows motif area button when exposeMotifArea is true', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Select motif area'})).toBeVisibleViaBinding();
+  });
+
+  it('hides motif area button when exposeMotifArea is false', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {exposeMotifArea: false}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Select motif area'})).not.toBeVisibleViaBinding();
+  });
+
+  it('opens dialog with backdropImage propertyName for image backdrop', async () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {exposeMotifArea: true, backdropType: 'image', backdropImage: 10}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button', {name: 'Select motif area'}));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({propertyName: 'backdropImage'})
+    );
+  });
+
+  it('opens dialog with backdropVideo propertyName for video backdrop', async () => {
+    const entry = createEntry({
+      videoFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {exposeMotifArea: true, backdropType: 'video', backdropVideo: 10}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button', {name: 'Select motif area'}));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({propertyName: 'backdropVideo'})
+    );
+  });
+
+  it('opens dialog with backdropImageMobile propertyName on portrait tab', async () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {portraitExposeMotifArea: true, backdropType: 'image', backdropImageMobile: 10}}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole, getByText} = renderBackboneView(view);
+
+    await user.click(getByText('Portrait'));
+    await user.click(getByRole('button', {name: 'Select motif area'}));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({propertyName: 'backdropImageMobile'})
+    );
+  });
+
+  it('does not disable edit motif area button on portrait tab when same portrait paddings is enabled', async () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {
+        portraitExposeMotifArea: true,
+        backdropImageMobile: 10,
+        customPortraitPaddings: false
+      }}]
+    });
+
+    const view = new EditSectionPaddingsView({
+      model: entry.sections.get(1),
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole, getByText} = renderBackboneView(view);
+
+    await user.click(getByText('Portrait'));
+
+    expect(getByRole('button', {name: 'Select motif area'})).not.toBeDisabled();
+  });
+
+  describe('with auto mode but no motif area defined', () => {
+    it('disables sideBySide visualization', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'SideBySide'}).closest('.input').classList).toContain('input-disabled');
+    });
+
+    it('disables paddingTop slider', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {exposeMotifArea: true}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el.querySelector('.slider_input').classList).toContain('disabled');
+    });
+  });
+
+  describe('with manual mode and no motif area defined', () => {
+    it('does not disable paddingTop slider', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {exposeMotifArea: false}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el.querySelector('.slider_input').classList).not.toContain('disabled');
+    });
+  });
+
+  describe('with auto mode and motif area defined', () => {
+    it('does not disable sideBySide visualization', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {
+          exposeMotifArea: true,
+          backdropImageMotifArea: {left: 0, top: 0, width: 50, height: 50}
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'SideBySide'}).closest('.input').classList).not.toContain('input-disabled');
+    });
+
+    it('does not disable paddingTop slider', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {
+          exposeMotifArea: true,
+          backdropImageMotifArea: {left: 0, top: 0, width: 50, height: 50}
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el.querySelector('.slider_input').classList).not.toContain('disabled');
+    });
+
+    it('does not disable paddingTop slider for video backdrop with motif area', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {
+          exposeMotifArea: true,
+          backdropType: 'video',
+          backdropVideoMotifArea: {left: 0, top: 0, width: 50, height: 50}
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el.querySelector('.slider_input').classList).not.toContain('disabled');
+    });
+  });
+
+  describe('portrait tab with same paddings checkbox checked', () => {
+    it('shows non-portrait exposeMotifArea value in radio button', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {
+          exposeMotifArea: true,
+          portraitExposeMotifArea: false,
+          customPortraitPaddings: false,
+          backdropImageMobile: 10
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole, getByText} = renderBackboneView(view);
+
+      await user.click(getByText('Portrait'));
+
+      expect(getByRole('radio', {name: 'Auto mode'})).toBeChecked();
+    });
+
+    it('disables portrait paddingTop slider', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {
+          customPortraitPaddings: false,
+          backdropImageMobile: 10
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByText} = renderBackboneView(view);
+
+      await user.click(getByText('Portrait'));
+
+      const sliders = view.el.querySelectorAll('.slider_input');
+      expect(sliders[0].classList).toContain('disabled');
+    });
+
+    it('switches to portrait auto mode and reveals elements when unchecking checkbox', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {
+          exposeMotifArea: false,
+          portraitExposeMotifArea: true,
+          customPortraitPaddings: false,
+          backdropImageMobile: 10
+        }}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole, getByText} = renderBackboneView(view);
+
+      await user.click(getByText('Portrait'));
+
+      // Initially shows manual mode (from non-portrait exposeMotifArea)
+      expect(getByRole('radio', {name: 'Manual mode'})).toBeChecked();
+      expect(getByRole('img', {name: 'SideBySide'})).not.toBeVisibleViaBinding();
+      expect(getByRole('button', {name: 'Select motif area'})).not.toBeVisibleViaBinding();
+
+      await user.click(getByRole('checkbox', {name: 'Same as landscape'}));
+
+      // Now shows auto mode (from portrait exposeMotifArea)
+      expect(getByRole('radio', {name: 'Auto mode'})).toBeChecked();
+      expect(getByRole('img', {name: 'SideBySide'})).toBeVisibleViaBinding();
+      expect(getByRole('button', {name: 'Select motif area'})).toBeVisibleViaBinding();
+    });
+  });
+
+  describe('with backdrop type color', () => {
+    it('does not disable paddingTop slider even with exposeMotifArea true', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color', exposeMotifArea: true}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el.querySelector('.slider_input').classList).not.toContain('disabled');
+    });
+
+    it('hides intersecting auto visualization', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'Auto'})).not.toBeVisibleViaBinding();
+    });
+
+    it('hides intersecting manual visualization', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'Manual'})).not.toBeVisibleViaBinding();
+    });
+
+    it('shows topPadding visualization instead', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('img', {name: 'TopPadding'})).toBeVisibleViaBinding();
+    });
+
+    it('hides motif area button', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color', exposeMotifArea: true}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('button', {name: 'Select motif area'})).not.toBeVisibleViaBinding();
+    });
+  });
+
+  describe('portrait tab visibility', () => {
+    it('hides portrait tab when backdropType is color', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {queryByRole} = renderBackboneView(view);
+
+      expect(queryByRole('tab', {name: 'Portrait'})).not.toBeInTheDocument();
+    });
+
+    it('hides portrait tab when no portrait image is present', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'image'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {queryByRole} = renderBackboneView(view);
+
+      expect(queryByRole('tab', {name: 'Portrait'})).not.toBeInTheDocument();
+    });
+
+    it('hides portrait tab when no portrait video is present', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'video'}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {queryByRole} = renderBackboneView(view);
+
+      expect(queryByRole('tab', {name: 'Portrait'})).not.toBeInTheDocument();
+    });
+
+    it('shows portrait tab when portrait image is present', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('tab', {name: 'Portrait'})).toBeInTheDocument();
+    });
+
+    it('shows portrait tab when portrait video is present', () => {
+      const entry = createEntry({
+        videoFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropType: 'video', backdropVideoMobile: 10}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('tab', {name: 'Portrait'})).toBeInTheDocument();
+    });
+  });
+
+  describe('emulation mode toggling', () => {
+    it('defaults to portrait tab when emulation_mode is phone', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+      entry.set('emulation_mode', 'phone');
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const {getByRole} = renderBackboneView(view);
+
+      expect(getByRole('tab', {name: 'Portrait'})).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('sets emulation_mode to phone when switching to portrait tab', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole} = renderBackboneView(view);
+
+      await user.click(getByRole('tab', {name: 'Portrait'}));
+
+      expect(entry.get('emulation_mode')).toEqual('phone');
+    });
+
+    it('unsets emulation_mode when switching back to sectionPaddings tab', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+      entry.set('emulation_mode', 'phone');
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole} = renderBackboneView(view);
+
+      await user.click(getByRole('tab', {name: 'Portrait'}));
+      await user.click(getByRole('tab', {name: 'Landscape'}));
+
+      expect(entry.has('emulation_mode')).toEqual(false);
+    });
+  });
+
+  describe('scrollToSection events', () => {
+    it('triggers scrollToSection when starting to drag paddingTop slider', () => {
+      const entry = createEntry({
+        sections: [{id: 1}]
+      });
+      const listener = jest.fn();
+      entry.on('scrollToSection', listener);
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      view.$el.find('.slider_input').eq(0).trigger('slidestart');
+
+      expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {ifNeeded: true});
+    });
+
+    it('triggers scrollToSection to end when starting to drag paddingBottom slider', () => {
+      const entry = createEntry({
+        sections: [{id: 1}]
+      });
+      const listener = jest.fn();
+      entry.on('scrollToSection', listener);
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      view.$el.find('.slider_input').eq(1).trigger('slidestart');
+
+      expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {align: 'nearEnd', ifNeeded: true});
+    });
+
+    it('triggers scrollToSection when starting to drag portraitPaddingTop slider', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10, customPortraitPaddings: true}}]
+      });
+      const listener = jest.fn();
+      entry.on('scrollToSection', listener);
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole} = renderBackboneView(view);
+
+      await user.click(getByRole('tab', {name: 'Portrait'}));
+
+      view.$el.find('.slider_input').eq(0).trigger('slidestart');
+
+      expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {ifNeeded: true});
+    });
+
+    it('triggers scrollToSection to end when starting to drag portraitPaddingBottom slider', async () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10, customPortraitPaddings: true}}]
+      });
+      const listener = jest.fn();
+      entry.on('scrollToSection', listener);
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      const user = userEvent.setup();
+      const {getByRole} = renderBackboneView(view);
+
+      await user.click(getByRole('tab', {name: 'Portrait'}));
+
+      view.$el.find('.slider_input').eq(1).trigger('slidestart');
+
+      expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {align: 'nearEnd', ifNeeded: true});
+    });
+  });
+});
diff --git a/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js b/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js
new file mode 100644
index 0000000000..f0a3dda67f
--- /dev/null
+++ b/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js
@@ -0,0 +1,217 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import {EditMotifAreaInputView} from 'editor/views/inputs/EditMotifAreaInputView';
+import {EditMotifAreaDialogView} from 'editor/views/EditMotifAreaDialogView';
+
+import styles from 'editor/views/inputs/EditMotifAreaInputView.module.css';
+
+import {useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals} from 'support';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('editor/views/EditMotifAreaDialogView');
+
+describe('EditMotifAreaInputView', () => {
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.editor.edit_motif_area_input.select': 'Select motif area',
+    'pageflow_scrolled.editor.edit_motif_area_input.edit': 'Edit motif area'
+  });
+
+  it('renders select button when no motif area defined', () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Select motif area'})).toBeInTheDocument();
+  });
+
+  it('renders edit button when motif area is present', () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropImage: 10, backdropImageMotifArea: {left: 0, top: 0, width: 50, height: 50}}}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Edit motif area'})).toBeInTheDocument();
+  });
+
+  it('renders select button when motif area is present but file is missing', () => {
+    const entry = createEntry({
+      sections: [{id: 1, configuration: {backdropImageMotifArea: {left: 0, top: 0, width: 50, height: 50}}}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Select motif area'})).toBeInTheDocument();
+  });
+
+  it('opens dialog with file looked up via getReference', async () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropImage: 10}}]
+    });
+    const file = entry.getFileCollection('image_files').get(100);
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({
+        propertyName: 'backdropImage',
+        file
+      })
+    );
+  });
+
+  it('looks up video file when backdropType is video', async () => {
+    const entry = createEntry({
+      videoFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropType: 'video', backdropVideo: 10}}]
+    });
+    const file = entry.getFileCollection('video_files').get(100);
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({
+        propertyName: 'backdropVideo',
+        file
+      })
+    );
+  });
+
+  it('looks up mobile image file on portrait tab', async () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+    });
+    const file = entry.getFileCollection('image_files').get(100);
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration,
+      portrait: true
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(EditMotifAreaDialogView.show).toHaveBeenCalledWith(
+      expect.objectContaining({
+        propertyName: 'backdropImageMobile',
+        file
+      })
+    );
+  });
+
+  it('updates button text when motif area property changes', () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropImage: 10}}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button', {name: 'Select motif area'})).toBeInTheDocument();
+
+    entry.sections.get(1).configuration.set(
+      'backdropImageMotifArea',
+      {left: 0, top: 0, width: 50, height: 50}
+    );
+
+    expect(getByRole('button', {name: 'Edit motif area'})).toBeInTheDocument();
+  });
+
+  it('shows check icon when motif area is present', () => {
+    const entry = createEntry({
+      imageFiles: [{id: 100, perma_id: 10}],
+      sections: [{id: 1, configuration: {backdropImage: 10, backdropImageMotifArea: {left: 0, top: 0, width: 50, height: 50}}}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    renderBackboneView(view);
+
+    expect(view.el.querySelector(`.${styles.checkIcon}`)).toBeVisible();
+  });
+
+  it('hides check icon when no motif area defined', () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    renderBackboneView(view);
+
+    expect(view.el.querySelector(`.${styles.checkIcon}`)).not.toBeVisible();
+  });
+
+  it('disables button when disabled option is true', () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration,
+      disabled: true
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  it('disables button when file is not present', () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+
+    const view = new EditMotifAreaInputView({
+      model: entry.sections.get(1).configuration
+    });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('button')).toBeDisabled();
+  });
+});
diff --git a/entry_types/scrolled/package/spec/editor/views/inputs/SectionPaddingsInputView-spec.js b/entry_types/scrolled/package/spec/editor/views/inputs/SectionPaddingsInputView-spec.js
new file mode 100644
index 0000000000..fd645587b6
--- /dev/null
+++ b/entry_types/scrolled/package/spec/editor/views/inputs/SectionPaddingsInputView-spec.js
@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import {SectionPaddingsInputView} from 'editor/views/inputs/SectionPaddingsInputView';
+import {editor} from 'pageflow/editor';
+
+import {useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals} from 'support';
+import userEvent from '@testing-library/user-event';
+
+describe('SectionPaddingsInputView', () => {
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.editor.section_paddings_input.auto': 'Auto'
+  });
+
+  beforeEach(() => {
+    jest.spyOn(editor, 'navigate').mockImplementation(() => {});
+  });
+
+  it('triggers scrollToSection when clicking button', async () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+    const listener = jest.fn();
+    entry.on('scrollToSection', listener);
+
+    const view = new SectionPaddingsInputView({
+      model: entry.sections.get(1).configuration,
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {ifNeeded: true});
+  });
+
+  it('navigates to paddings editor when clicking button', async () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+
+    const view = new SectionPaddingsInputView({
+      model: entry.sections.get(1).configuration,
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(editor.navigate).toHaveBeenCalledWith('/scrolled/sections/1/paddings', {trigger: true});
+  });
+
+  it('triggers selectSectionPaddings when clicking button', async () => {
+    const entry = createEntry({
+      sections: [{id: 1}]
+    });
+    const listener = jest.fn();
+    entry.on('selectSectionPaddings', listener);
+
+    const view = new SectionPaddingsInputView({
+      model: entry.sections.get(1).configuration,
+      entry
+    });
+
+    const user = userEvent.setup();
+    const {getByRole} = renderBackboneView(view);
+
+    await user.click(getByRole('button'));
+
+    expect(listener).toHaveBeenCalledWith(entry.sections.get(1));
+  });
+});
diff --git a/entry_types/scrolled/package/spec/frontend/features/scrollToSectionMessage-spec.js b/entry_types/scrolled/package/spec/frontend/features/scrollToSectionMessage-spec.js
index 0c98f46789..032cc194c0 100644
--- a/entry_types/scrolled/package/spec/frontend/features/scrollToSectionMessage-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/features/scrollToSectionMessage-spec.js
@@ -66,6 +66,207 @@ describe('SCROLL_TO_SECTION message', () => {
     });
   });
 
+  it('scrolls to bottom of section with 25% offset when align is nearEnd', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: -100, height: 800},
+      11: {top: 700}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, align: 'nearEnd'}}, '*');
+    });
+
+    // Scroll so bottom of section is at 25% from viewport bottom (75% from top)
+    // offset = height - innerHeight * 0.75 = 800 - 750 = 50
+    // top = -100 + 1000 + 50 = 950
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      top: 950,
+      behavior: 'smooth'
+    });
+  });
+
+  it('does not scroll when ifNeeded is true and section top is visible with default align', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: 100, height: 800},
+      11: {top: 900}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('scrolls when ifNeeded is true and section top is above viewport with default align', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: -100, height: 800},
+      11: {top: 700}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).toHaveBeenCalled();
+  });
+
+  it('does not scroll when ifNeeded is true and section top is visible', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: 100, height: 800},
+      11: {top: 900}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, align: 'start', ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('scrolls when ifNeeded is true and section top is above viewport', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: -100, height: 800},
+      11: {top: 700}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, align: 'start', ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).toHaveBeenCalled();
+  });
+
+  it('does not scroll when ifNeeded is true and section bottom is visible for nearEnd', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: 100, height: 800},
+      11: {top: 900}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, align: 'nearEnd', ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).not.toHaveBeenCalled();
+  });
+
+  it('scrolls when ifNeeded is true and section bottom is below viewport for nearEnd', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: 300, height: 800},
+      11: {top: 1100}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, align: 'nearEnd', ifNeeded: true}}, '*');
+    });
+
+    expect(window.scrollTo).toHaveBeenCalled();
+  });
+
+  it('scrolls instantly when behavior is instant', async () => {
+    const {fakeSectionBoundingClientRectsByPermaId} = renderEntry({
+      seed: {
+        sections: [
+          {id: 100, permaId: 10},
+          {id: 101, permaId: 11}
+        ]
+      }
+    });
+
+    window.scrollY = 1000;
+    window.innerHeight = 1000
+    fakeSectionBoundingClientRectsByPermaId({
+      10: {top: -100},
+      11: {top: 30}
+    });
+
+    await asyncHandlingOf(() => {
+      window.postMessage({type: 'SCROLL_TO_SECTION', payload: {id: 100, behavior: 'instant'}}, '*');
+    });
+
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      top: -100 + 1000 - 250,
+      behavior: 'instant'
+    });
+  });
+
   it('activates excursion of section', async () => {
     renderEntry({
       seed: {
diff --git a/entry_types/scrolled/package/spec/support/toBeVisibleViaBinding.js b/entry_types/scrolled/package/spec/support/toBeVisibleViaBinding.js
new file mode 100644
index 0000000000..8faf7f736a
--- /dev/null
+++ b/entry_types/scrolled/package/spec/support/toBeVisibleViaBinding.js
@@ -0,0 +1,12 @@
+expect.extend({
+  toBeVisibleViaBinding(element) {
+    const pass = !element.closest('.hidden_via_binding');
+
+    return {
+      pass,
+      message: () => pass
+        ? `expected element to have 'hidden_via_binding' class on itself or ancestors`
+        : `expected element not to have 'hidden_via_binding' class on itself or ancestors`
+    };
+  }
+});
diff --git a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
index 75ae443f87..e63388df16 100644
--- a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
+++ b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
@@ -80,6 +80,16 @@ export const PreviewMessageController = Object.extend({
           })
         );
 
+        this.listenTo(this.entry, 'selectSectionPaddings', section =>
+          postMessage({
+            type: 'SELECT',
+            payload: {
+              id: section.id,
+              type: 'sectionPaddings'
+            }
+          })
+        );
+
         this.listenTo(this.entry, 'selectContentElement', (contentElement, options) => {
           postMessage({
             type: 'SELECT',
@@ -124,7 +134,9 @@ export const PreviewMessageController = Object.extend({
         });
       }
       else if (message.data.type === 'SELECTED') {
-        const {type, id} = message.data.payload;
+        const {type, id, position} = message.data.payload;
+
+        this.preservedScrollTarget = null;
 
         if (type === 'contentElement') {
           const contentElement = this.entry.contentElements.get(id);
@@ -134,7 +146,12 @@ export const PreviewMessageController = Object.extend({
           this.editor.navigate(`/scrolled/sections/${id}`, {trigger: true})
         }
         else if (type === 'sectionPaddings') {
-          this.editor.navigate(`/scrolled/sections/${id}/paddings`, {trigger: true})
+          this.preservedScrollTarget = {
+            sectionId: id,
+            align: position === 'bottom' ? 'nearEnd' : undefined
+          };
+          const query = position ? `?position=${position}` : '';
+          this.editor.navigate(`/scrolled/sections/${id}/paddings${query}`, {trigger: true})
         }
         else if (type === 'sectionTransition') {
           this.editor.navigate(`/scrolled/sections/${id}/transition`, {trigger: true})
@@ -201,7 +218,17 @@ export const PreviewMessageController = Object.extend({
   },
 
   preserveScrollPoint(callback) {
-    this.currentScrollPointCallback = callback;
-    this.iframeWindow.postMessage({type: 'SAVE_SCROLL_POINT'}, window.location.origin);
+    if (this.preservedScrollTarget) {
+      const {sectionId, align} = this.preservedScrollTarget;
+      callback();
+      this.iframeWindow.postMessage({
+        type: 'SCROLL_TO_SECTION',
+        payload: {id: sectionId, align, behavior: 'instant'}
+      }, window.location.origin);
+    }
+    else {
+      this.currentScrollPointCallback = callback;
+      this.iframeWindow.postMessage({type: 'SAVE_SCROLL_POINT'}, window.location.origin);
+    }
   }
 });
diff --git a/entry_types/scrolled/package/src/editor/controllers/SideBarController.js b/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
index f54be189d9..acf491cce4 100644
--- a/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
+++ b/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
@@ -38,11 +38,12 @@ export const SideBarController = Marionette.Controller.extend({
     }));
   },
 
-  sectionPaddings: function(id, tab) {
+  sectionPaddings: function(id, position) {
     this.region.show(new EditSectionPaddingsView({
       entry: this.entry,
       model: this.entry.sections.get(id),
-      editor
+      editor,
+      position
     }));
   },
 
diff --git a/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js b/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
index c07ed6fe70..d89565d313 100644
--- a/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
+++ b/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
@@ -4,6 +4,7 @@ export const SideBarRouter = Marionette.AppRouter.extend({
   appRoutes: {
     'scrolled/chapters/:id': 'chapter',
     'scrolled/sections/:id/transition': 'sectionTransition',
+    'scrolled/sections/:id/paddings?position=:position': 'sectionPaddings',
     'scrolled/sections/:id/paddings': 'sectionPaddings',
     'scrolled/sections/:id': 'section',
     'scrolled/content_elements/:id': 'contentElement'
diff --git a/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js b/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js
index 062ae6b4f9..87373c6847 100644
--- a/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js
+++ b/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js
@@ -1,8 +1,16 @@
-import {EditConfigurationView} from 'pageflow/editor';
-import {SelectInputView} from 'pageflow/ui';
+import I18n from 'i18n-js';
 
+import {EditConfigurationView, SeparatorView} from 'pageflow/editor';
+import {SliderInputView, RadioButtonGroupInputView, CheckBoxInputView} from 'pageflow/ui';
+
+import {SectionPaddingVisualizationView} from './inputs/SectionPaddingVisualizationView';
+import {EditMotifAreaInputView} from './inputs/EditMotifAreaInputView';
+import paddingTopIcon from './images/paddingTop.svg';
+import paddingBottomIcon from './images/paddingBottom.svg';
 import styles from './EditSectionPaddingsView.module.css';
 
+const i18nPrefix = 'pageflow_scrolled.editor.edit_section_paddings';
+
 export const EditSectionPaddingsView = EditConfigurationView.extend({
   translationKeyPrefix: 'pageflow_scrolled.editor.edit_section_paddings',
   hideDestroyButton: true,
@@ -13,37 +21,200 @@ export const EditSectionPaddingsView = EditConfigurationView.extend({
     return `/scrolled/sections/` + this.model.get('id')
   },
 
+  defaultTab() {
+    if (this.options.entry.get('emulation_mode') === 'phone') {
+      return 'portrait';
+    }
+  },
+
   configure: function(configurationEditor) {
     const entry = this.options.entry;
+    const section = this.model;
+    const configuration = section.configuration;
 
     const [paddingTopValues, paddingTopTexts] = entry.getScale('sectionPaddingTop');
     const [paddingBottomValues, paddingBottomTexts] = entry.getScale('sectionPaddingBottom');
 
+    const hasPortrait = hasPortraitBackdrop(configuration);
+
     configurationEditor.tab('sectionPaddings', function() {
-      this.input('paddingTop', SelectInputView, {
-        includeBlank: true,
-        values: paddingTopValues,
-        texts: paddingTopTexts
-      });
+      if (hasPortrait && entry.has('emulation_mode')) {
+        entry.unset('emulation_mode');
+      }
 
-      this.input('paddingBottom', SelectInputView, {
-        includeBlank: true,
-        values: paddingBottomValues,
-        texts: paddingBottomTexts
-      });
+      paddingInputs(this, {entry, section, paddingTopValues, paddingTopTexts, paddingBottomValues, paddingBottomTexts});
     });
+
+    if (!hasPortrait) {
+      return;
+    }
+
     configurationEditor.tab('portrait', function() {
-      this.input('portraitPaddingTop', SelectInputView, {
-        includeBlank: true,
-        values: paddingTopValues,
-        texts: paddingTopTexts
+      if (!entry.has('emulation_mode')) {
+        entry.set('emulation_mode', 'phone');
+      }
+
+      this.listenTo(this.model, 'change:customPortraitPaddings', () => {
+        configurationEditor.refresh();
+      });
+
+      this.input('samePortraitPaddings', CheckBoxInputView, {
+        storeInverted: 'customPortraitPaddings'
       });
 
-      this.input('portraitPaddingBottom', SelectInputView, {
-        includeBlank: true,
-        values: paddingBottomValues,
-        texts: paddingBottomTexts
+      const usePortraitProperties = this.model.get('customPortraitPaddings');
+
+      paddingInputs(this, {
+        entry,
+        section,
+        prefix: usePortraitProperties ? 'portrait' : '',
+        portrait: true,
+        paddingTopValues, paddingTopTexts, paddingBottomValues, paddingBottomTexts,
+        disabledOptions: usePortraitProperties ? {} : {disabled: true}
       });
     });
   }
 });
+
+function paddingInputs(tab, options) {
+  const {
+    entry,
+    section,
+    prefix = '',
+    portrait = false,
+    paddingTopValues, paddingTopTexts, paddingBottomValues, paddingBottomTexts,
+    disabledOptions
+  } = options;
+
+  const paddingTopProperty = prefix ? `${prefix}PaddingTop` : 'paddingTop';
+  const paddingBottomProperty = prefix ? `${prefix}PaddingBottom` : 'paddingBottom';
+  const exposeMotifArea = prefix ? `${prefix}ExposeMotifArea` : 'exposeMotifArea';
+
+  const scrollToSectionStart = () => {
+    entry.trigger('scrollToSection', section, {ifNeeded: true});
+  };
+  const scrollToSectionEnd = () => {
+    entry.trigger('scrollToSection', section, {align: 'nearEnd', ifNeeded: true});
+  };
+
+  tab.input('topPaddingVisualization', SectionPaddingVisualizationView, {
+    variant: 'intersectingAuto',
+    portrait,
+    visibleBinding: [exposeMotifArea, ...motifAreaBinding],
+    visible: ([exposeMotifAreaValue, ...motifAreaValues]) =>
+      exposeMotifAreaValue && !motifAreaUnavailable(motifAreaValues),
+    ...disabledOptions
+  });
+  tab.input('topPaddingVisualization', SectionPaddingVisualizationView, {
+    variant: 'intersectingManual',
+    portrait,
+    visibleBinding: [exposeMotifArea, ...motifAreaBinding],
+    visible: ([exposeMotifAreaValue, ...motifAreaValues]) =>
+      !exposeMotifAreaValue && !motifAreaUnavailable(motifAreaValues),
+    ...disabledOptions
+  });
+  tab.input('topPaddingVisualization', SectionPaddingVisualizationView, {
+    variant: 'topPadding',
+    portrait,
+    visibleBinding: motifAreaBinding,
+    visible: motifAreaUnavailable,
+    ...disabledOptions
+  });
+  tab.input(exposeMotifArea, RadioButtonGroupInputView, {
+    hideLabel: true,
+    values: [true, false],
+    texts: [
+      I18n.t(`${i18nPrefix}.attributes.exposeMotifArea.values.true`),
+      I18n.t(`${i18nPrefix}.attributes.exposeMotifArea.values.false`)
+    ],
+    visibleBinding: motifAreaBinding,
+    visible: values => !motifAreaUnavailable(values),
+    ...disabledOptions
+  });
+  tab.input('editMotifArea', EditMotifAreaInputView, {
+    hideLabel: true,
+    portrait,
+    visibleBinding: [exposeMotifArea, ...motifAreaBinding],
+    visible: ([exposeMotifAreaValue, ...motifAreaValues]) =>
+      exposeMotifAreaValue && !motifAreaUnavailable(motifAreaValues)
+  });
+
+  const imageMotifAreaPropertyName = portrait ? 'backdropImageMobileMotifArea' : 'backdropImageMotifArea';
+  const videoMotifAreaPropertyName = portrait ? 'backdropVideoMobileMotifArea' : 'backdropVideoMotifArea';
+
+  const motifAreaNotDefinedBinding = [
+    exposeMotifArea, 'backdropType', imageMotifAreaPropertyName, videoMotifAreaPropertyName
+  ];
+
+  tab.input('sideBySideVisualization', SectionPaddingVisualizationView, {
+    hideLabel: true,
+    variant: 'sideBySide',
+    portrait,
+    infoText: I18n.t(`${i18nPrefix}.side_by_side_info`),
+    visibleBinding: [exposeMotifArea, 'layout', ...motifAreaBinding],
+    visible: ([exposeMotifAreaValue, layout, ...motifAreaValues]) =>
+      exposeMotifAreaValue &&
+      layout !== 'center' &&
+      layout !== 'centerRagged' &&
+      !motifAreaUnavailable(motifAreaValues),
+    disabledBinding: motifAreaNotDefinedBinding,
+    disabled: motifAreaNotDefined
+  });
+
+  tab.input(paddingTopProperty, SliderInputView, {
+    hideLabel: true,
+    icon: paddingTopIcon,
+    texts: paddingTopTexts,
+    values: paddingTopValues,
+    saveOnSlide: true,
+    onInteractionStart: scrollToSectionStart,
+    disabledBinding: motifAreaNotDefinedBinding,
+    disabled: motifAreaNotDefined,
+    ...disabledOptions
+  });
+
+  tab.view(SeparatorView);
+
+  tab.input('bottomPaddingVisualization', SectionPaddingVisualizationView, {
+    variant: 'bottomPadding',
+    portrait,
+    ...disabledOptions
+  });
+  tab.input(paddingBottomProperty, SliderInputView, {
+    hideLabel: true,
+    icon: paddingBottomIcon,
+    texts: paddingBottomTexts,
+    values: paddingBottomValues,
+    saveOnSlide: true,
+    onInteractionStart: scrollToSectionEnd,
+    ...disabledOptions
+  });
+}
+
+const motifAreaBinding = ['backdropType'];
+
+function motifAreaUnavailable([backdropType]) {
+  return backdropType === 'color';
+}
+
+function motifAreaNotDefined([exposeMotifAreaValue, backdropType, imageMotifArea, videoMotifArea]) {
+  if (backdropType === 'color') {
+    return false;
+  }
+
+  const motifArea = backdropType === 'video' ? videoMotifArea : imageMotifArea;
+  return exposeMotifAreaValue && !motifArea;
+}
+
+function hasPortraitBackdrop(configuration) {
+  const backdropType = configuration.get('backdropType');
+
+  if (backdropType === 'color') {
+    return false;
+  }
+
+  const propertyName = backdropType === 'video' ? 'backdropVideoMobile' : 'backdropImageMobile';
+  const collection = backdropType === 'video' ? 'video_files' : 'image_files';
+
+  return !!configuration.getReference(propertyName, collection);
+}
diff --git a/entry_types/scrolled/package/src/editor/views/images/paddingBottom.svg b/entry_types/scrolled/package/src/editor/views/images/paddingBottom.svg
new file mode 100644
index 0000000000..8df4cf334f
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/images/paddingBottom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -3 24 21" fill="none" stroke="hsl(197, 37%, 24%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V2"></path><path d="M4 12H2"></path><path d="M10 12H8"></path><path d="M16 12h-2"></path><path d="M22 12h-2"></path><path d="m15 5-3-3-3 3"></path></svg>
diff --git a/entry_types/scrolled/package/src/editor/views/images/paddingTop.svg b/entry_types/scrolled/package/src/editor/views/images/paddingTop.svg
new file mode 100644
index 0000000000..b62baa13b8
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/images/paddingTop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 3 24 27" fill="none" stroke="hsl(197, 37%, 24%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-6"></path><path d="M4 12H2"></path><path d="M10 12H8"></path><path d="M16 12h-2"></path><path d="M22 12h-2"></path><path d="m15 19-3 3-3-3"></path></svg>
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js b/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js
new file mode 100644
index 0000000000..5ce9d308de
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js
@@ -0,0 +1,80 @@
+import Marionette from 'backbone.marionette';
+import I18n from 'i18n-js';
+
+import {cssModulesUtils, inputView} from 'pageflow/ui';
+import {buttonStyles} from 'pageflow-scrolled/editor';
+
+import {EditMotifAreaDialogView} from '../EditMotifAreaDialogView';
+
+import styles from './EditMotifAreaInputView.module.css';
+
+export const EditMotifAreaInputView = Marionette.ItemView.extend({
+  template: () => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+    <button class="${buttonStyles.secondaryIconButton} ${styles.button}">
+      <svg class="${styles.icon}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1 h4 M1 1 v4" />
+        <path d="M19 1 h-4 M19 1 v4" />
+        <path d="M1 19 h4 M1 19 v-4" />
+        <path d="M19 19 h-4 M19 19 v-4" />
+        <path class="${styles.checkIcon}" d="M5 10 L8.5 13.5 L15 7" />
+      </svg>
+      <span class="${styles.buttonText}"></span>
+    </button>
+  `,
+
+  mixins: [inputView],
+
+  ui: cssModulesUtils.ui(styles, 'button', 'buttonText', 'checkIcon'),
+
+  events: {
+    'click button': function() {
+      EditMotifAreaDialogView.show({
+        model: this.model,
+        propertyName: this.getPropertyName(),
+        file: this.getFile()
+      });
+    }
+  },
+
+  onRender() {
+    this.update();
+    this.listenTo(
+      this.model,
+      'change:' + this.getPropertyName() + 'MotifArea',
+      this.update
+    );
+  },
+
+  update() {
+    const file = this.getFile();
+    const hasMotifArea = !!(file && this.model.get(this.getPropertyName() + 'MotifArea'));
+    const key = hasMotifArea ? 'edit' : 'select';
+
+    this.ui.buttonText.text(I18n.t(`pageflow_scrolled.editor.edit_motif_area_input.${key}`));
+    this.ui.checkIcon.toggle(hasMotifArea);
+  },
+
+  updateDisabled(disabled) {
+    this.ui.button.prop('disabled', disabled || !this.getFile());
+  },
+
+  getPropertyName() {
+    const backdropType = this.model.get('backdropType');
+
+    if (this.options.portrait) {
+      return backdropType === 'video' ? 'backdropVideoMobile' : 'backdropImageMobile';
+    }
+    else {
+      return backdropType === 'video' ? 'backdropVideo' : 'backdropImage';
+    }
+  },
+
+  getFile() {
+    const collection = this.model.get('backdropType') === 'video' ? 'video_files' : 'image_files';
+    return this.model.getReference(this.getPropertyName(), collection);
+  }
+});
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.module.css b/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.module.css
new file mode 100644
index 0000000000..3cea99d900
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.module.css
@@ -0,0 +1,24 @@
+.button {
+  width: 100%;
+  display: flex !important;
+  align-items: center;
+  gap: space(2);
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  flex-shrink: 0;
+}
+
+.buttonText {
+}
+
+.checkIcon {
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+}
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.js b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.js
new file mode 100644
index 0000000000..5fe446db21
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.js
@@ -0,0 +1,810 @@
+import Marionette from 'backbone.marionette';
+import {inputView} from 'pageflow/ui';
+import I18n from 'i18n-js';
+
+import styles from './SectionPaddingVisualizationView.module.css';
+
+const prefix = 'pageflow_scrolled.editor.section_padding_visualization';
+
+export const SectionPaddingVisualizationView = Marionette.ItemView.extend({
+  mixins: [inputView],
+
+  template: (data) => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+    ${data.infoText ? `<div class="${styles.infoText}">${data.infoText}</div>` : ''}
+    <div class="${styles.preview}"></div>
+  `,
+
+  serializeData() {
+    return {
+      infoText: this.options.infoText
+    };
+  },
+
+  ui: {
+    preview: `.${styles.preview}`
+  },
+
+  onRender() {
+    this.listenTo(this.model, 'change:layout', this.update);
+    this.update();
+  },
+
+  update() {
+    const svg = this.getSvg();
+    this.ui.preview.html(svg);
+  },
+
+  getSvg() {
+    const portrait = this.options.portrait;
+    const layout = this.model.get('layout') || 'left';
+
+    switch (this.options.variant) {
+      case 'intersectingAuto': return intersectingAutoSvg(portrait, layout);
+      case 'intersectingManual': return intersectingManualSvg(portrait, layout);
+      case 'sideBySide': return sideBySideSvg(portrait, layout);
+      case 'topPadding': return topPaddingSvg(portrait, layout);
+      case 'bottomPadding': return bottomPaddingSvg(portrait, layout);
+      default: return '';
+    }
+  }
+});
+
+function intersectingAutoSvg(portrait, layout) {
+  if (portrait) {
+    return intersectingAutoSvgPortrait(layout);
+  }
+
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+  const arrowX = right ? '150;125;125;150' : '30;55;55;30';
+  const textXY = right
+    ? '100 62;63 41;63 41;100 62'
+    : center
+      ? '55 62;55 41;55 41;55 62'
+      : '10 62;47 41;47 41;10 62';
+
+  return `
+    <svg viewBox="0 0 180 80" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.intersecting_auto`)}</title>
+      <defs>
+        <!-- Animated viewport clipping rect (full width to 4:3) -->
+        <clipPath id="intersectingAutoViewport">
+          <rect y="0" height="80">
+            <animate attributeName="x" values="0;37;37;0" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+            <animate attributeName="width" values="180;106;106;180" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+          </rect>
+        </clipPath>
+${diagonalStripesPattern('autoDiagonalStripes')}
+      </defs>
+
+      <!-- Clipped viewport area -->
+      <g clip-path="url(#intersectingAutoViewport)">
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="180" height="80" />
+
+        <!-- Auto padding zone (striped, height animates with arrow + 3px bottom gap) -->
+        <rect x="0" y="0" width="180" fill="url(#autoDiagonalStripes)">
+          <animate attributeName="height" values="58;37;37;58" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+        </rect>
+
+        <!-- Scaled silhouette (simulates cover behavior) -->
+        <g style="transform-origin: 90px 3px">
+          <animateTransform attributeName="transform" type="scale"
+            values="1 1;0.589 0.589;0.589 0.589;1 1" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <g transform="translate(60, 3)">
+            <!-- Head (ellipse) -->
+            <ellipse class="${styles.silhouette}" cx="30" cy="18" rx="13" ry="14" />
+            <!-- Shoulders (curved path) -->
+            <path class="${styles.silhouette}" d="M8 52 Q8 34 30 34 Q52 34 52 52" />
+          </g>
+        </g>
+
+        <!-- Corner markers (position-only animation, fixed size) -->
+        <g class="${styles.cornerMarker}">
+          <!-- Top-left -->
+          <path d="M0 0 h5 M0 0 v5">
+            <animateTransform attributeName="transform" type="translate"
+              values="60 3;72 3;72 3;60 3" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Top-right -->
+          <path d="M0 0 h-5 M0 0 v5">
+            <animateTransform attributeName="transform" type="translate"
+              values="120 3;108 3;108 3;120 3" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Bottom-left -->
+          <path d="M0 0 h5 M0 0 v-5">
+            <animateTransform attributeName="transform" type="translate"
+              values="60 55;72 34;72 34;60 55" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Bottom-right -->
+          <path d="M0 0 h-5 M0 0 v-5">
+            <animateTransform attributeName="transform" type="translate"
+              values="120 55;108 34;108 34;120 55" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+        </g>
+
+        <!-- Arrow (centered between viewport edge and motif) -->
+        <g class="${styles.arrow}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${arrowX.split(';').map(x => `${x} 3`).join(';')}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <line x1="0" y1="0" x2="0" y2="52">
+            <animate attributeName="y2" values="52;31;31;52" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </line>
+          <polyline points="-4,4 0,0 4,4" />
+          <polyline points="-4,48 0,52 4,48">
+            <animateTransform attributeName="transform" type="translate"
+              values="0 0;0 -21;0 -21;0 0" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </polyline>
+        </g>
+
+        <!-- Text lines (inside viewport, animated to follow motif and viewport edge) -->
+        <g class="${styles.textBlock}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${textXY}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <rect x="${centerRagged ? 0 : 0}" y="0" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 10 : 0}" y="6" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 5 : 0}" y="12" width="60" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 15 : 0}" y="18" width="40" height="1.4" rx="0.7" />
+          <!-- Second paragraph (visible when text moves up) -->
+          <rect x="${centerRagged ? 2.5 : 0}" y="30" width="65" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 7.5 : 0}" y="36" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 0 : 0}" y="42" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 17.5 : 0}" y="48" width="35" height="1.4" rx="0.7" />
+        </g>
+      </g>
+    </svg>
+  `;
+}
+
+function intersectingAutoSvgPortrait(layout) {
+  // Canvas: 142x142, animates viewport width from 80 (9:16) to 142 (square)
+  // Height stays fixed at 142. Only x and width animate.
+  // 9:16: x=31, width=80 | Square: x=0, width=142
+  // Scale factor: 80/142 ≈ 0.563 (motif scales with viewport width)
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+  const arrowX = right ? '104;129;129;104' : '38;13;13;38';
+  const textX = right
+    ? '48 62;79 108;79 108;48 62'
+    : center
+      ? '44 62;44 108;44 108;44 62'
+      : '39 62;8 108;8 108;39 62';
+
+  return `
+    <svg viewBox="0 0 142 142" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.intersecting_auto`)}</title>
+      <defs>
+        <!-- Animated viewport clipping rect (9:16 to square, width only) -->
+        <clipPath id="intersectingAutoViewportPortrait">
+          <rect y="0" height="142">
+            <animate attributeName="x" values="31;0;0;31" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+            <animate attributeName="width" values="80;142;142;80" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+          </rect>
+        </clipPath>
+${diagonalStripesPattern('autoDiagonalStripesPortrait')}
+      </defs>
+
+      <!-- Clipped viewport area -->
+      <g clip-path="url(#intersectingAutoViewportPortrait)">
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="142" height="142" />
+
+        <!-- Auto padding zone (striped, height animates with arrow) -->
+        <rect x="0" y="0" width="142" fill="url(#autoDiagonalStripesPortrait)">
+          <animate attributeName="height" values="58;103;103;58" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+        </rect>
+
+        <!-- Scaled silhouette (simulates cover behavior) -->
+        <g style="transform-origin: 71px 3px">
+          <animateTransform attributeName="transform" type="scale"
+            values="0.563 0.563;1 1;1 1;0.563 0.563" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <g transform="translate(26, 3)">
+            <!-- Head (ellipse) -->
+            <ellipse class="${styles.silhouette}" cx="45" cy="32" rx="26" ry="28" />
+            <!-- Shoulders (curved path) -->
+            <path class="${styles.silhouette}" d="M8 100 Q8 64 45 64 Q82 64 82 100" />
+          </g>
+        </g>
+
+        <!-- Corner markers (position-only animation, fixed size) -->
+        <g class="${styles.cornerMarker}">
+          <!-- Top-left -->
+          <path d="M0 0 h5 M0 0 v5">
+            <animateTransform attributeName="transform" type="translate"
+              values="45 3;26 3;26 3;45 3" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Top-right -->
+          <path d="M0 0 h-5 M0 0 v5">
+            <animateTransform attributeName="transform" type="translate"
+              values="97 3;116 3;116 3;97 3" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Bottom-left -->
+          <path d="M0 0 h5 M0 0 v-5">
+            <animateTransform attributeName="transform" type="translate"
+              values="45 55;26 100;26 100;45 55" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+          <!-- Bottom-right -->
+          <path d="M0 0 h-5 M0 0 v-5">
+            <animateTransform attributeName="transform" type="translate"
+              values="97 55;116 100;116 100;97 55" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </path>
+        </g>
+
+        <!-- Arrow (centered between viewport edge and motif) -->
+        <g class="${styles.arrow}" style="stroke-width: 2">
+          <animateTransform attributeName="transform" type="translate"
+            values="${arrowX.split(';').map(x => `${x} 3`).join(';')}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <line x1="0" y1="0" x2="0" y2="52">
+            <animate attributeName="y2" values="52;97;97;52" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </line>
+          <polyline points="-5,5 0,0 5,5" />
+          <polyline points="-5,47 0,52 5,47">
+            <animateTransform attributeName="transform" type="translate"
+              values="0 0;0 45;0 45;0 0" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+          </polyline>
+        </g>
+
+        <!-- Text lines (inside viewport, animated to follow motif) -->
+        <g class="${styles.textBlock}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${textX}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <rect x="${centerRagged ? 0 : 0}" y="0" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 7.5 : 0}" y="6" width="40" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 2.5 : 0}" y="12" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 12.5 : 0}" y="18" width="30" height="1.4" rx="0.7" />
+          <!-- Second paragraph -->
+          <rect x="${centerRagged ? 2.5 : 0}" y="30" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 5 : 0}" y="36" width="45" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 0 : 0}" y="42" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 10 : 0}" y="48" width="35" height="1.4" rx="0.7" />
+        </g>
+      </g>
+    </svg>
+  `;
+}
+
+function intersectingManualSvg(portrait, layout) {
+  if (portrait) {
+    return intersectingManualSvgPortrait(layout);
+  }
+
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+  const arrowX = right ? '125;150;150;125' : '55;30;30;55';
+  const textX = right
+    ? '63;100;100;63'
+    : center
+      ? '55;55;55;55'
+      : '47;10;10;47';
+
+  return `
+    <svg viewBox="0 0 180 80" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.intersecting_manual`)}</title>
+      <defs>
+        <!-- Animated viewport clipping rect (4:3 to full width) -->
+        <clipPath id="intersectingManualViewport">
+          <rect y="0" height="80">
+            <animate attributeName="x" values="37;0;0;37" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+            <animate attributeName="width" values="106;180;180;106" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+          </rect>
+        </clipPath>
+${diagonalStripesPattern('manualDiagonalStripes')}
+      </defs>
+
+      <!-- Clipped viewport area -->
+      <g clip-path="url(#intersectingManualViewport)">
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="180" height="80" />
+
+        <!-- Manual padding zone (striped, 3px gap below arrow) -->
+        <rect x="0" y="0" width="180" height="26" fill="url(#manualDiagonalStripes)" />
+
+        <!-- Dimmed motif and corners in manual mode -->
+        <g style="opacity: 0.5">
+          <!-- Scaled silhouette (simulates cover behavior, extends behind text) -->
+          <g style="transform-origin: 90px 3px">
+            <animateTransform attributeName="transform" type="scale"
+              values="0.589 0.589;1 1;1 1;0.589 0.589" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+            <g transform="translate(60, 3)">
+              <!-- Head (ellipse) -->
+              <ellipse class="${styles.silhouette}" cx="30" cy="18" rx="13" ry="14" />
+              <!-- Shoulders (curved path) -->
+              <path class="${styles.silhouette}" d="M8 52 Q8 34 30 34 Q52 34 52 52" />
+            </g>
+          </g>
+
+          <!-- Corner markers (position-only animation, fixed size) -->
+          <g class="${styles.cornerMarker}">
+            <!-- Top-left -->
+            <path d="M0 0 h5 M0 0 v5">
+              <animateTransform attributeName="transform" type="translate"
+                values="72 3;60 3;60 3;72 3" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Top-right -->
+            <path d="M0 0 h-5 M0 0 v5">
+              <animateTransform attributeName="transform" type="translate"
+                values="108 3;120 3;120 3;108 3" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Bottom-left -->
+            <path d="M0 0 h5 M0 0 v-5">
+              <animateTransform attributeName="transform" type="translate"
+                values="72 34;60 55;60 55;72 34" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Bottom-right -->
+            <path d="M0 0 h-5 M0 0 v-5">
+              <animateTransform attributeName="transform" type="translate"
+                values="108 34;120 55;120 55;108 34" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+          </g>
+        </g>
+
+        <!-- Arrow (horizontal animation only, fixed height, 7px gap to text) -->
+        <g class="${styles.arrow}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${arrowX.split(';').map(x => `${x} 3`).join(';')}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <line x1="0" y1="0" x2="0" y2="20" />
+          <polyline points="-4,4 0,0 4,4" />
+          <polyline points="-4,16 0,20 4,16" />
+        </g>
+
+        <!-- Text lines (horizontal animation, fixed y, intersects motif) -->
+        <g class="${styles.textBlock}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${textX.split(';').map(x => `${x} 30`).join(';')}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <!-- Main paragraph -->
+          <rect x="${centerRagged ? 0 : 0}" y="0" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 10 : 0}" y="6" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 5 : 0}" y="12" width="60" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 15 : 0}" y="18" width="40" height="1.4" rx="0.7" />
+          <!-- Clipped paragraph below -->
+          <rect x="${centerRagged ? 2.5 : 0}" y="30" width="65" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 10 : 0}" y="36" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 0 : 0}" y="42" width="70" height="1.4" rx="0.7" />
+        </g>
+      </g>
+    </svg>
+  `;
+}
+
+function intersectingManualSvgPortrait(layout) {
+  // Canvas: 142x142, animates viewport width from 142 (square) to 80 (9:16)
+  // Height stays fixed at 142. Only x and width animate.
+  // Square: x=0, width=142 | 9:16: x=31, width=80
+  // Scale factor: 142/80 ≈ 1.775 → 0.563 (motif scales with viewport width)
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+  const arrowX = right ? '129;104;104;129' : '13;38;38;13';
+  const textX = right
+    ? '79 50;48 50;48 50;79 50'
+    : center
+      ? '44 50;44 50;44 50;44 50'
+      : '8 50;39 50;39 50;8 50';
+
+  return `
+    <svg viewBox="0 0 142 142" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.intersecting_manual`)}</title>
+      <defs>
+        <!-- Animated viewport clipping rect (square to 9:16, width only) -->
+        <clipPath id="intersectingManualViewportPortrait">
+          <rect y="0" height="142">
+            <animate attributeName="x" values="0;31;31;0" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+            <animate attributeName="width" values="142;80;80;142" dur="4s" repeatCount="indefinite" calcMode="spline" keySplines="${easing}" />
+          </rect>
+        </clipPath>
+${diagonalStripesPattern('manualDiagonalStripesPortrait')}
+      </defs>
+
+      <!-- Clipped viewport area -->
+      <g clip-path="url(#intersectingManualViewportPortrait)">
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="142" height="142" />
+
+        <!-- Manual padding zone (striped, fixed height) -->
+        <rect x="0" y="0" width="142" height="46" fill="url(#manualDiagonalStripesPortrait)" />
+
+        <!-- Dimmed motif and corners in manual mode -->
+        <g style="opacity: 0.5">
+          <!-- Scaled silhouette (simulates cover behavior) -->
+          <g style="transform-origin: 71px 3px">
+            <animateTransform attributeName="transform" type="scale"
+              values="1 1;0.563 0.563;0.563 0.563;1 1" dur="4s" repeatCount="indefinite"
+              calcMode="spline" keySplines="${easing}" />
+            <g transform="translate(26, 3)">
+              <!-- Head (ellipse) -->
+              <ellipse class="${styles.silhouette}" cx="45" cy="32" rx="26" ry="28" />
+              <!-- Shoulders (curved path) -->
+              <path class="${styles.silhouette}" d="M8 100 Q8 64 45 64 Q82 64 82 100" />
+            </g>
+          </g>
+
+          <!-- Corner markers (position-only animation, fixed size) -->
+          <g class="${styles.cornerMarker}">
+            <!-- Top-left -->
+            <path d="M0 0 h5 M0 0 v5">
+              <animateTransform attributeName="transform" type="translate"
+                values="26 3;45 3;45 3;26 3" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Top-right -->
+            <path d="M0 0 h-5 M0 0 v5">
+              <animateTransform attributeName="transform" type="translate"
+                values="116 3;97 3;97 3;116 3" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Bottom-left -->
+            <path d="M0 0 h5 M0 0 v-5">
+              <animateTransform attributeName="transform" type="translate"
+                values="26 100;45 55;45 55;26 100" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+            <!-- Bottom-right -->
+            <path d="M0 0 h-5 M0 0 v-5">
+              <animateTransform attributeName="transform" type="translate"
+                values="116 100;97 55;97 55;116 100" dur="4s" repeatCount="indefinite"
+                calcMode="spline" keySplines="${easing}" />
+            </path>
+          </g>
+        </g>
+
+        <!-- Arrow (horizontal animation only, fixed height) -->
+        <g class="${styles.arrow}" style="stroke-width: 2">
+          <animateTransform attributeName="transform" type="translate"
+            values="${arrowX.split(';').map(x => `${x} 3`).join(';')}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <line x1="0" y1="0" x2="0" y2="40" />
+          <polyline points="-5,5 0,0 5,5" />
+          <polyline points="-5,35 0,40 5,35" />
+        </g>
+
+        <!-- Text lines (horizontal animation, fixed y, intersects motif) -->
+        <g class="${styles.textBlock}">
+          <animateTransform attributeName="transform" type="translate"
+            values="${textX}" dur="4s" repeatCount="indefinite"
+            calcMode="spline" keySplines="${easing}" />
+          <!-- Main paragraph -->
+          <rect x="${centerRagged ? 0 : 0}" y="0" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 7.5 : 0}" y="6" width="40" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 2.5 : 0}" y="12" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 12.5 : 0}" y="18" width="30" height="1.4" rx="0.7" />
+          <!-- Second paragraph -->
+          <rect x="${centerRagged ? 2.5 : 0}" y="30" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 5 : 0}" y="36" width="45" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 0 : 0}" y="42" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 10 : 0}" y="48" width="35" height="1.4" rx="0.7" />
+          <!-- Third paragraph -->
+          <rect x="${centerRagged ? 0 : 0}" y="60" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 7.5 : 0}" y="66" width="40" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? 2.5 : 0}" y="72" width="50" height="1.4" rx="0.7" />
+        </g>
+      </g>
+    </svg>
+  `;
+}
+
+function sideBySideSvg(portrait, layout) {
+  // Center layout not supported for side-by-side, fall back to left
+  const right = layout === 'right';
+
+  if (portrait) {
+    const motifX = right ? 4 : 58;
+    const textX = right ? 47 : 8;
+    const arrowX = right ? 75 : 25;
+
+    return `
+      <svg viewBox="0 0 100 110" class="${styles.svg}"
+           xmlns="http://www.w3.org/2000/svg" role="img">
+        <title>${I18n.t(`${prefix}.side_by_side`)}</title>
+        <defs>
+          ${diagonalStripesPattern('diagonalStripesPortrait')}
+        </defs>
+
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="100" height="110" />
+
+        <!-- Manual padding zone (striped, extends to top corners) -->
+        <rect fill="url(#diagonalStripesPortrait)" x="0" y="0" width="100" height="30" />
+
+        ${staticArrow(arrowX, 5)}
+
+        <!-- Motif area with corner markers and silhouette -->
+        <g transform="translate(${motifX}, 35)">
+          <!-- Corner markers (L-brackets, thinner style) -->
+          <path class="${styles.cornerMarker}" d="M0 0 h5 M0 0 v5" />
+          <path class="${styles.cornerMarker}" d="M38 0 h-5 M38 0 v5" />
+          <path class="${styles.cornerMarker}" d="M0 38 h5 M0 38 v-5" />
+          <path class="${styles.cornerMarker}" d="M38 38 h-5 M38 38 v-5" />
+
+          <!-- Head (ellipse) -->
+          <ellipse class="${styles.silhouette}" cx="19" cy="12" rx="10" ry="11" />
+
+          <!-- Shoulders (curved path) -->
+          <path class="${styles.silhouette}" d="M5 38 Q5 24 19 24 Q33 24 33 38" />
+        </g>
+
+        <!-- Text lines (side by side with motif) -->
+        <g class="${styles.textBlock}" transform="translate(${textX}, 38)">
+          <!-- Main paragraph -->
+          <rect x="0" y="0" width="45" height="1.4" rx="0.7" />
+          <rect x="0" y="6" width="35" height="1.4" rx="0.7" />
+          <rect x="0" y="12" width="42" height="1.4" rx="0.7" />
+          <rect x="0" y="18" width="30" height="1.4" rx="0.7" />
+          <!-- Second paragraph -->
+          <rect x="0" y="30" width="40" height="1.4" rx="0.7" />
+          <rect x="0" y="36" width="45" height="1.4" rx="0.7" />
+          <rect x="0" y="42" width="35" height="1.4" rx="0.7" />
+          <rect x="0" y="48" width="42" height="1.4" rx="0.7" />
+        </g>
+      </svg>
+    `;
+  }
+
+  const motifX = right ? 10 : 115;
+  const textX = right ? 90 : 10;
+  const arrowX = right ? 135 : 45;
+
+  return `
+    <svg viewBox="0 0 180 80" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.side_by_side`)}</title>
+      <defs>
+        ${diagonalStripesPattern('diagonalStripes')}
+      </defs>
+
+      <!-- Viewport background -->
+      <rect fill="var(--ui-primary-color)" x="0" y="0" width="180" height="80" />
+
+      <!-- Manual padding zone (striped, extends to top corners) -->
+      <rect class="${styles.spacingZone}" x="0" y="0" width="180" height="30" />
+
+      ${staticArrow(arrowX, 5)}
+
+      <!-- Motif area with corner markers and silhouette (centered vertically) -->
+      <g class="${styles.motifArea}" transform="translate(${motifX}, 20)">
+        <!-- Corner markers (L-brackets) -->
+        <path class="${styles.cornerMarker}" d="M0 0 h5 M0 0 v5" />
+        <path class="${styles.cornerMarker}" d="M55 0 h-5 M55 0 v5" />
+        <path class="${styles.cornerMarker}" d="M0 40 h5 M0 40 v-5" />
+        <path class="${styles.cornerMarker}" d="M55 40 h-5 M55 40 v-5" />
+
+        <!-- Head (ellipse) -->
+        <ellipse class="${styles.silhouette}" cx="27" cy="13" rx="9" ry="10" />
+
+        <!-- Shoulders (curved path) -->
+        <path class="${styles.silhouette}" d="M14 40 Q14 25 27 25 Q40 25 40 40" />
+      </g>
+
+      <!-- Text lines -->
+      <g class="${styles.textBlock}" transform="translate(${textX}, 35)">
+        <!-- Main paragraph -->
+        <rect x="0" y="0" width="80" height="1.4" rx="0.7" />
+        <rect x="0" y="6" width="55" height="1.4" rx="0.7" />
+        <rect x="0" y="12" width="70" height="1.4" rx="0.7" />
+        <rect x="0" y="18" width="45" height="1.4" rx="0.7" />
+        <!-- Clipped paragraph below -->
+        <rect x="0" y="30" width="65" height="1.4" rx="0.7" />
+        <rect x="0" y="36" width="50" height="1.4" rx="0.7" />
+        <rect x="0" y="42" width="70" height="1.4" rx="0.7" />
+      </g>
+    </svg>
+  `;
+}
+
+function topPaddingSvg(portrait, layout) {
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+
+  if (portrait) {
+    const textX = center ? 10 : right ? 10 : 10;
+    const arrowX = center ? 50 : 50;
+
+    return `
+      <svg viewBox="0 0 100 110" class="${styles.svg}"
+           xmlns="http://www.w3.org/2000/svg" role="img">
+        <title>${I18n.t(`${prefix}.top_padding`)}</title>
+        <defs>
+          ${diagonalStripesPattern('topPaddingStripesPortrait')}
+        </defs>
+
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="100" height="110" />
+
+        <!-- Top padding zone (striped) -->
+        <rect fill="url(#topPaddingStripesPortrait)" x="0" y="0" width="100" height="30" />
+
+        ${staticArrow(arrowX, 5)}
+
+        <!-- Text lines -->
+        <g class="${styles.textBlock}">
+          <!-- Main paragraph -->
+          <rect x="${centerRagged ? textX : textX}" y="35" width="80" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 12.5 : textX}" y="41" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 5 : textX}" y="47" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 17.5 : textX}" y="53" width="45" height="1.4" rx="0.7" />
+          <!-- Second paragraph -->
+          <rect x="${centerRagged ? textX + 2.5 : textX}" y="65" width="75" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 10 : textX}" y="71" width="60" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX : textX}" y="77" width="80" height="1.4" rx="0.7" />
+          <!-- Clipped paragraph below -->
+          <rect x="${centerRagged ? textX + 5 : textX}" y="89" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 15 : textX}" y="95" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 7.5 : textX}" y="101" width="65" height="1.4" rx="0.7" />
+        </g>
+      </svg>
+    `;
+  }
+
+  const textX = right ? 90 : center ? 50 : 10;
+  const arrowX = right ? 135 : center ? 90 : 45;
+
+  return `
+    <svg viewBox="0 0 180 80" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.top_padding`)}</title>
+      <defs>
+        ${diagonalStripesPattern('topPaddingStripes')}
+      </defs>
+
+      <!-- Viewport background -->
+      <rect fill="var(--ui-primary-color)" x="0" y="0" width="180" height="80" />
+
+      <!-- Top padding zone (striped) -->
+      <rect fill="url(#topPaddingStripes)" x="0" y="0" width="180" height="30" />
+
+      ${staticArrow(arrowX, 5)}
+
+      <!-- Text lines -->
+      <g class="${styles.textBlock}">
+        <!-- Main paragraph -->
+        <rect x="${centerRagged ? textX : textX}" y="35" width="80" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 12.5 : textX}" y="41" width="55" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 5 : textX}" y="47" width="70" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 17.5 : textX}" y="53" width="45" height="1.4" rx="0.7" />
+        <!-- Clipped paragraph below -->
+        <rect x="${centerRagged ? textX + 5 : textX}" y="65" width="70" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 15 : textX}" y="71" width="50" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 7.5 : textX}" y="77" width="65" height="1.4" rx="0.7" />
+      </g>
+    </svg>
+  `;
+}
+
+function bottomPaddingSvg(portrait, layout) {
+  const right = layout === 'right';
+  const center = layout === 'center' || layout === 'centerRagged';
+  const centerRagged = layout === 'centerRagged';
+
+  if (portrait) {
+    const textX = center ? 10 : right ? 10 : 10;
+    const arrowX = center ? 50 : 50;
+
+    return `
+      <svg viewBox="0 0 100 110" class="${styles.svg}"
+           xmlns="http://www.w3.org/2000/svg" role="img">
+        <title>${I18n.t(`${prefix}.bottom_padding`)}</title>
+        <defs>
+          ${diagonalStripesPattern('bottomPaddingStripesPortrait')}
+        </defs>
+
+        <!-- Viewport background -->
+        <rect fill="var(--ui-primary-color)" x="0" y="0" width="100" height="110" />
+
+        <!-- Text lines (with clipped paragraph above to show continuation) -->
+        <g class="${styles.textBlock}">
+          <!-- Clipped paragraph above -->
+          <rect x="${centerRagged ? textX + 5 : textX}" y="1" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 15 : textX}" y="7" width="50" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 7.5 : textX}" y="13" width="65" height="1.4" rx="0.7" />
+          <!-- Main paragraph -->
+          <rect x="${centerRagged ? textX : textX}" y="25" width="80" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 12.5 : textX}" y="31" width="55" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 5 : textX}" y="37" width="70" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 17.5 : textX}" y="43" width="45" height="1.4" rx="0.7" />
+          <!-- Second paragraph -->
+          <rect x="${centerRagged ? textX + 2.5 : textX}" y="55" width="75" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX + 10 : textX}" y="61" width="60" height="1.4" rx="0.7" />
+          <rect x="${centerRagged ? textX : textX}" y="67" width="80" height="1.4" rx="0.7" />
+        </g>
+
+        <!-- Bottom padding zone (striped, extends to bottom corners) -->
+        <rect fill="url(#bottomPaddingStripesPortrait)" x="0" y="80" width="100" height="30" />
+
+        ${staticArrow(arrowX, 85)}
+      </svg>
+    `;
+  }
+
+  const textX = right ? 90 : center ? 50 : 10;
+  const arrowX = right ? 135 : center ? 90 : 45;
+
+  return `
+    <svg viewBox="0 0 180 80" class="${styles.svg}"
+         xmlns="http://www.w3.org/2000/svg" role="img">
+      <title>${I18n.t(`${prefix}.bottom_padding`)}</title>
+      <defs>
+        ${diagonalStripesPattern('bottomPaddingStripes')}
+      </defs>
+
+      <!-- Viewport background -->
+      <rect fill="var(--ui-primary-color)" x="0" y="0" width="180" height="80" />
+
+      <!-- Text lines (with clipped paragraph above to show continuation) -->
+      <g class="${styles.textBlock}">
+        <!-- Clipped paragraph above -->
+        <rect x="${centerRagged ? textX + 5 : textX}" y="1" width="70" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 15 : textX}" y="7" width="50" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 7.5 : textX}" y="13" width="65" height="1.4" rx="0.7" />
+        <!-- Main paragraph -->
+        <rect x="${centerRagged ? textX : textX}" y="25" width="80" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 12.5 : textX}" y="31" width="55" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 5 : textX}" y="37" width="70" height="1.4" rx="0.7" />
+        <rect x="${centerRagged ? textX + 17.5 : textX}" y="43" width="45" height="1.4" rx="0.7" />
+      </g>
+
+      <!-- Bottom padding zone (striped, extends to bottom corners) -->
+      <rect fill="url(#bottomPaddingStripes)" x="0" y="50" width="180" height="30" />
+
+      ${staticArrow(arrowX, 55)}
+    </svg>
+  `;
+}
+
+const easing = '0.4 0 0.2 1;0 0 1 1;0.4 0 0.2 1';
+
+function diagonalStripesPattern(id) {
+  return `
+    <pattern id="${id}" patternUnits="userSpaceOnUse"
+             width="6" height="6" patternTransform="rotate(45)">
+      <rect x="0" y="0" width="3" height="6" fill="currentColor" opacity="0.1" />
+    </pattern>
+  `;
+}
+
+function staticArrow(x, y) {
+  return `
+    <g class="${styles.arrow}" transform="translate(${x}, ${y})">
+      <line x1="0" y1="0" x2="0" y2="20" />
+      <polyline points="-4,4 0,0 4,4" />
+      <polyline points="-4,16 0,20 4,16" />
+    </g>
+  `;
+}
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.module.css b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.module.css
new file mode 100644
index 0000000000..4583d77738
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingVisualizationView.module.css
@@ -0,0 +1,53 @@
+.infoText {
+  margin: space(4) 0 space(2);
+}
+
+.preview {
+  border: solid 1px var(--ui-on-surface-color-lightest);
+  border-radius: rounded(sm);
+  margin-bottom: space(1);
+  background-color: var(--ui-primary-color-lighter);
+  color: var(--ui-on-primary-color);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+:global(.input-disabled) .preview,
+:global(.input-disabled) .infoText {
+  opacity: 0.5;
+}
+
+.svg {
+  display: block;
+  aspect-ratio: 9 / 4;
+  max-height: 150px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.silhouette {
+  fill: currentColor;
+  opacity: 0.5;
+}
+
+.cornerMarker {
+  stroke: currentColor;
+  stroke-width: 1.5;
+  fill: none;
+  opacity: 0.7;
+}
+
+.spacingZone {
+  fill: url(#diagonalStripes);
+}
+
+.arrow {
+  stroke: var(--ui-selection-color);
+  stroke-width: 1.5;
+  fill: none;
+}
+
+.textBlock rect {
+  fill: currentColor;
+  opacity: 0.6;
+}
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.js b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.js
index 47fccd22f7..54b638b512 100644
--- a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.js
+++ b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.js
@@ -5,6 +5,8 @@ import {editor} from 'pageflow/editor';
 import {buttonStyles} from 'pageflow-scrolled/editor';
 import {cssModulesUtils, inputView} from 'pageflow/ui';
 
+import paddingTopIcon from '../images/paddingTop.svg';
+import paddingBottomIcon from '../images/paddingBottom.svg';
 import styles from './SectionPaddingsInputView.module.css';
 
 export const SectionPaddingsInputView = Marionette.Layout.extend({
@@ -17,12 +19,10 @@ export const SectionPaddingsInputView = Marionette.Layout.extend({
     </label>
     <button class="${buttonStyles.secondaryIconButton} ${styles.button}">
       <div class="${styles.grid}">
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-unfold-vertical-icon lucide-unfold-vertical"><path d="M12 22v-6"></path><path d="M4 12H2"></path><path d="M10 12H8"></path><path d="M16 12h-2"></path><path d="M22 12h-2"></path><path d="m15 19-3 3-3-3"></path></svg>
-
-
+        <img src="${paddingTopIcon}" width="18" height="18" />
         <div class="${styles.paddingTop}"></div>
         <div class="${styles.portraitPaddingTop}"></div>
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-unfold-vertical-icon lucide-unfold-vertical"><path d="M12 8V2"></path><path d="M4 12H2"></path><path d="M10 12H8"></path><path d="M16 12h-2"></path><path d="M22 12h-2"></path><path d="m15 5-3-3-3 3"></path></svg>
+        <img src="${paddingBottomIcon}" width="18" height="18" />
         <div class="${styles.paddingBottom}"></div>
         <div class="${styles.portraitPaddingBottom}"></div>
       </div>
@@ -35,6 +35,8 @@ export const SectionPaddingsInputView = Marionette.Layout.extend({
 
   events: cssModulesUtils.events(styles, {
     'click button': function () {
+      this.options.entry.trigger('selectSectionPaddings', this.model.parent);
+      this.options.entry.trigger('scrollToSection', this.model.parent, {ifNeeded: true});
       editor.navigate('/scrolled/sections/' + this.model.parent.get('id') + '/paddings', {trigger: true});
     }
   }),
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.module.css b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.module.css
index 1a30f8c384..d5eaacd974 100644
--- a/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.module.css
+++ b/entry_types/scrolled/package/src/editor/views/inputs/SectionPaddingsInputView.module.css
@@ -27,7 +27,7 @@
   font-weight: normal;
 }
 
-.grid svg {
+.grid img {
   grid-column: 1;
 }
 
diff --git a/entry_types/scrolled/package/src/frontend/Content.js b/entry_types/scrolled/package/src/frontend/Content.js
index 0dd2ac430b..62f2b24406 100644
--- a/entry_types/scrolled/package/src/frontend/Content.js
+++ b/entry_types/scrolled/package/src/frontend/Content.js
@@ -57,7 +57,12 @@ export const Content = withInlineEditingDecorator('ContentDecorator', function C
   const receiveMessage = useCallback(data => {
     if (data.type === 'SCROLL_TO_SECTION') {
       activateExcursionOfSection({id: data.payload.id});
-      scrollToTarget({id: data.payload.id, align: data.payload.align});
+      scrollToTarget({
+        id: data.payload.id,
+        align: data.payload.align,
+        ifNeeded: data.payload.ifNeeded,
+        behavior: data.payload.behavior
+      });
     }
   }, [scrollToTarget, activateExcursionOfSection]);
 
diff --git a/entry_types/scrolled/package/src/frontend/useScrollTarget.js b/entry_types/scrolled/package/src/frontend/useScrollTarget.js
index 97f045cce8..1380e4ac16 100644
--- a/entry_types/scrolled/package/src/frontend/useScrollTarget.js
+++ b/entry_types/scrolled/package/src/frontend/useScrollTarget.js
@@ -17,7 +17,7 @@ export function useScrollToTarget() {
   const emitter = useContext(ScrollTargetEmitterContext);
 
   return useCallback(
-    ({id, align}) => emitter.trigger(id, align),
+    ({id, align, ifNeeded, behavior}) => emitter.trigger(id, {align, ifNeeded, behavior}),
     [emitter]
   )
 }
@@ -28,13 +28,17 @@ export function useScrollTarget(id) {
   const emitter = useContext(ScrollTargetEmitterContext);
 
   useEffect(() => {
-    emitter.on(id, align => {
+    emitter.on(id, ({align, ifNeeded, behavior}) => {
       if (ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+
+        if (ifNeeded && isInViewport(align, rect)) {
+          return;
+        }
+
         window.scrollTo({
-          top: ref.current.getBoundingClientRect().top
-             + window.scrollY
-             - (align === 'start' ? 0 : window.innerHeight * 0.25),
-          behavior: 'smooth'
+          top: rect.top + window.scrollY + getAlignOffset(align, rect),
+          behavior: behavior || 'smooth'
         });
       }
     });
@@ -44,3 +48,25 @@ export function useScrollTarget(id) {
 
   return ref;
 }
+
+function getAlignOffset(align, rect) {
+  if (align === 'start') {
+    return 0;
+  }
+  else if (align === 'nearEnd') {
+    return rect.height - window.innerHeight * 0.75;
+  }
+  else {
+    return -window.innerHeight * 0.25;
+  }
+}
+
+function isInViewport(align, rect) {
+  if (align === 'nearEnd') {
+    const bottom = rect.top + rect.height;
+    return bottom > 0 && bottom <= window.innerHeight;
+  }
+  else {
+    return rect.top >= 0 && rect.top < window.innerHeight;
+  }
+}
diff --git a/package/documentation.yml b/package/documentation.yml
index fe65896963..921e695e2a 100644
--- a/package/documentation.yml
+++ b/package/documentation.yml
@@ -86,6 +86,7 @@ toc:
       - inputWithPlaceholderText
       - CheckBoxGroupInputView
       - CheckBoxInputView
+      - RadioButtonGroupInputView
       - ColorInputView
       - LabelOnlyView
       - NumberInputView
diff --git a/package/spec/editor/views/EditConfigurationView-spec.js b/package/spec/editor/views/EditConfigurationView-spec.js
index bf9259e97d..bd8b6cfb96 100644
--- a/package/spec/editor/views/EditConfigurationView-spec.js
+++ b/package/spec/editor/views/EditConfigurationView-spec.js
@@ -273,6 +273,39 @@ describe('EditConfigurationView', () => {
     });
   });
 
+  describe('defaultTab', () => {
+    support.useFakeTranslations({
+      test_default_tab: {
+        tabs: {
+          main: 'Main',
+          other: 'Other'
+        }
+      }
+    });
+
+    it('supports defaultTab method to set initial tab', () => {
+      const Model = Backbone.Model.extend({
+        mixins: [configurationContainer(), failureTracking]
+      });
+      const View = EditConfigurationView.extend({
+        translationKeyPrefix: 'test_default_tab',
+
+        defaultTab() {
+          return 'other';
+        },
+
+        configure(configurationEditor) {
+          configurationEditor.tab('main', function() {});
+          configurationEditor.tab('other', function() {});
+        }
+      });
+
+      const view = new View({model: new Model()}).render();
+
+      expect(view.$el.find('[aria-selected="true"]').text()).toBe('Other');
+    });
+  });
+
   describe('hideDestroyButton', () => {
     it('shows destroy button by default', () => {
       const Model = Backbone.Model.extend({
diff --git a/package/spec/ui/views/inputs/RadioButtonGroupInputView-spec.js b/package/spec/ui/views/inputs/RadioButtonGroupInputView-spec.js
new file mode 100644
index 0000000000..6f9c3e6865
--- /dev/null
+++ b/package/spec/ui/views/inputs/RadioButtonGroupInputView-spec.js
@@ -0,0 +1,183 @@
+import Backbone from 'backbone';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+
+import {RadioButtonGroupInputView} from 'pageflow/ui';
+
+import {useFakeTranslations, renderBackboneView as render} from 'pageflow/testHelpers';
+
+describe('pageflow.RadioButtonGroupInputView', () => {
+  var Model = Backbone.Model.extend({
+    i18nKey: 'item'
+  });
+
+  it('loads value and checks corresponding radio button', () => {
+    var model = new Model({position: 'left'});
+    var view = new RadioButtonGroupInputView({
+      model: model,
+      propertyName: 'position',
+      values: ['left', 'center', 'right'],
+      texts: ['Left', 'Center', 'Right']
+    });
+
+    const {getByRole} = render(view);
+
+    expect(getByRole('radio', {name: 'Left'})).toBeChecked();
+    expect(getByRole('radio', {name: 'Center'})).not.toBeChecked();
+    expect(getByRole('radio', {name: 'Right'})).not.toBeChecked();
+  });
+
+  it('saves value on change', async () => {
+    var model = new Model();
+    var view = new RadioButtonGroupInputView({
+      model: model,
+      propertyName: 'position',
+      values: ['left', 'center', 'right'],
+      texts: ['Left', 'Center', 'Right']
+    });
+
+    const {getByRole} = render(view);
+    await userEvent.click(getByRole('radio', {name: 'Center'}));
+
+    expect(model.get('position')).toEqual('center');
+  });
+
+  it('updates checked state when model changes', () => {
+    var model = new Model({position: 'left'});
+    var view = new RadioButtonGroupInputView({
+      model: model,
+      propertyName: 'position',
+      values: ['left', 'center', 'right'],
+      texts: ['Left', 'Center', 'Right']
+    });
+
+    const {getByRole} = render(view);
+    model.set('position', 'right');
+
+    expect(getByRole('radio', {name: 'Left'})).not.toBeChecked();
+    expect(getByRole('radio', {name: 'Right'})).toBeChecked();
+  });
+
+  it('renders labels from texts option', () => {
+    var model = new Model();
+    var view = new RadioButtonGroupInputView({
+      model: model,
+      propertyName: 'position',
+      values: ['left', 'right'],
+      texts: ['Align Left', 'Align Right']
+    });
+
+    const {getByRole} = render(view);
+
+    expect(getByRole('radio', {name: 'Align Left'})).toBeInTheDocument();
+    expect(getByRole('radio', {name: 'Align Right'})).toBeInTheDocument();
+  });
+
+  describe('with boolean values', () => {
+    it('loads true value', () => {
+      var model = new Model({enabled: true});
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'enabled',
+        values: [true, false],
+        texts: ['Yes', 'No']
+      });
+
+      const {getByRole} = render(view);
+
+      expect(getByRole('radio', {name: 'Yes'})).toBeChecked();
+      expect(getByRole('radio', {name: 'No'})).not.toBeChecked();
+    });
+
+    it('loads false value', () => {
+      var model = new Model({enabled: false});
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'enabled',
+        values: [true, false],
+        texts: ['Yes', 'No']
+      });
+
+      const {getByRole} = render(view);
+
+      expect(getByRole('radio', {name: 'Yes'})).not.toBeChecked();
+      expect(getByRole('radio', {name: 'No'})).toBeChecked();
+    });
+
+    it('saves boolean value on change', async () => {
+      var model = new Model({enabled: true});
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'enabled',
+        values: [true, false],
+        texts: ['Yes', 'No']
+      });
+
+      const {getByRole} = render(view);
+      await userEvent.click(getByRole('radio', {name: 'No'}));
+
+      expect(model.get('enabled')).toEqual(false);
+    });
+  });
+
+  describe('with disabled option', () => {
+    it('disables all radio buttons when disabled is true', () => {
+      var model = new Model({position: 'left'});
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'position',
+        values: ['left', 'center', 'right'],
+        texts: ['Left', 'Center', 'Right'],
+        disabled: true
+      });
+
+      const {getByRole} = render(view);
+
+      expect(getByRole('radio', {name: 'Left'})).toBeDisabled();
+      expect(getByRole('radio', {name: 'Center'})).toBeDisabled();
+      expect(getByRole('radio', {name: 'Right'})).toBeDisabled();
+    });
+
+    it('disables radio buttons when disabledBinding attribute becomes true', () => {
+      var model = new Model({position: 'left', locked: false});
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'position',
+        values: ['left', 'center', 'right'],
+        texts: ['Left', 'Center', 'Right'],
+        disabledBinding: 'locked'
+      });
+
+      const {getByRole} = render(view);
+
+      expect(getByRole('radio', {name: 'Left'})).not.toBeDisabled();
+
+      model.set('locked', true);
+
+      expect(getByRole('radio', {name: 'Left'})).toBeDisabled();
+      expect(getByRole('radio', {name: 'Center'})).toBeDisabled();
+      expect(getByRole('radio', {name: 'Right'})).toBeDisabled();
+    });
+  });
+
+  describe('without texts option', () => {
+    useFakeTranslations({
+      'activerecord.values.item.position.left': 'Left',
+      'activerecord.values.item.position.right': 'Right'
+    });
+
+    it('uses translations based on model i18nKey', () => {
+      var model = new Model();
+      var view = new RadioButtonGroupInputView({
+        model: model,
+        propertyName: 'position',
+        values: ['left', 'right']
+      });
+
+      const {getByRole} = render(view);
+
+      expect(getByRole('radio', {name: 'Left'})).toBeInTheDocument();
+      expect(getByRole('radio', {name: 'Right'})).toBeInTheDocument();
+    });
+  });
+});
diff --git a/package/spec/ui/views/inputs/SliderInputView-spec.js b/package/spec/ui/views/inputs/SliderInputView-spec.js
index 0d98790511..f1d3fb3f31 100644
--- a/package/spec/ui/views/inputs/SliderInputView-spec.js
+++ b/package/spec/ui/views/inputs/SliderInputView-spec.js
@@ -81,6 +81,19 @@ describe('pageflow.SliderInputView', () => {
     expect(view.ui.value.text()).toEqual('€ 75');
   });
 
+  it('does not save default value on render', () => {
+    var model = new Model();
+    var view = new SliderInputView({
+      model: model,
+      propertyName: 'value',
+      defaultValue: 50
+    });
+
+    view.render();
+
+    expect(model.has('value')).toEqual(false);
+  });
+
   it('saves value on slidechange', () => {
     var model = new Model();
     var view = new SliderInputView({
@@ -121,6 +134,21 @@ describe('pageflow.SliderInputView', () => {
     expect(model.get('value')).toEqual(75);
   });
 
+  it('calls onInteractionStart on slidestart', () => {
+    var model = new Model();
+    var callback = jest.fn();
+    var view = new SliderInputView({
+      model: model,
+      propertyName: 'value',
+      onInteractionStart: callback
+    });
+
+    view.render();
+    view.$el.trigger('slidestart');
+
+    expect(callback).toHaveBeenCalled();
+  });
+
   it('updates displayed value on slide', () => {
     var model = new Model();
     var view = new SliderInputView({
@@ -263,4 +291,161 @@ describe('pageflow.SliderInputView', () => {
 
     expect(view.ui.widget.slider('option', 'value')).toEqual(20);
   });
+
+  describe('with icon option', () => {
+    it('renders icon img before label', () => {
+      var model = new Model({value: 50});
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        icon: 'path/to/icon.svg'
+      });
+
+      view.render();
+
+      var img = view.el.querySelector('img.icon');
+      expect(img).not.toBeNull();
+      expect(img.getAttribute('src')).toEqual('path/to/icon.svg');
+    });
+
+    it('does not render icon element when no icon option', () => {
+      var model = new Model({value: 50});
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value'
+      });
+
+      view.render();
+
+      expect(view.el.querySelector('.icon')).toBeNull();
+    });
+  });
+
+  describe('with values option', () => {
+    it('sets slider min to 0 and max to last index', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100]
+      });
+
+      view.render();
+
+      expect(view.ui.widget.slider('option', 'min')).toEqual(0);
+      expect(view.ui.widget.slider('option', 'max')).toEqual(4);
+    });
+
+    it('loads value by finding index in values array', () => {
+      var model = new Model({value: 50});
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100]
+      });
+
+      view.render();
+
+      expect(view.ui.widget.slider('value')).toEqual(2);
+    });
+
+    it('displays value from values array', () => {
+      var model = new Model({value: 50});
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100]
+      });
+
+      view.render();
+
+      expect(view.ui.value.text()).toEqual('50%');
+    });
+
+    it('saves value from values array on slidechange', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100]
+      });
+
+      view.render();
+      view.$el.trigger('slidechange', {value: 3});
+
+      expect(model.get('value')).toEqual(75);
+    });
+
+    it('updates displayed value on slide', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100]
+      });
+
+      view.render();
+      view.$el.trigger('slide', {value: 2});
+
+      expect(view.ui.value.text()).toEqual('50%');
+    });
+
+    it('displays text from texts option', () => {
+      var model = new Model({value: 50});
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100],
+        texts: ['None', 'Low', 'Medium', 'High', 'Full']
+      });
+
+      view.render();
+
+      expect(view.ui.value.text()).toEqual('Medium');
+    });
+
+    it('updates displayed text on slide', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: [0, 25, 50, 75, 100],
+        texts: ['None', 'Low', 'Medium', 'High', 'Full']
+      });
+
+      view.render();
+      view.$el.trigger('slide', {value: 3});
+
+      expect(view.ui.value.text()).toEqual('High');
+    });
+
+    it('loads defaultValue by finding index in values array', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: ['none', 'sm', 'md', 'lg'],
+        defaultValue: 'md'
+      });
+
+      view.render();
+
+      expect(view.ui.widget.slider('value')).toEqual(2);
+    });
+
+    it('displays text for defaultValue from texts option', () => {
+      var model = new Model();
+      var view = new SliderInputView({
+        model: model,
+        propertyName: 'value',
+        values: ['none', 'sm', 'md', 'lg'],
+        texts: ['None', 'Small', 'Medium', 'Large'],
+        defaultValue: 'md'
+      });
+
+      view.render();
+
+      expect(view.ui.value.text()).toEqual('Medium');
+    });
+  });
 });
diff --git a/package/spec/ui/views/mixins/inputView-spec.js b/package/spec/ui/views/mixins/inputView-spec.js
index b4bec5cc3b..158f981d33 100644
--- a/package/spec/ui/views/mixins/inputView-spec.js
+++ b/package/spec/ui/views/mixins/inputView-spec.js
@@ -712,6 +712,29 @@ describe('pageflow.inputView', () => {
     });
   });
 
+  describe('hideLabel', () => {
+    it('adds visually_hidden class to label when true', () => {
+      var view = createInputView({
+        model: new Backbone.Model(),
+        hideLabel: true
+      });
+
+      view.render();
+
+      expect(view.ui.label).toHaveClass('visually_hidden');
+    });
+
+    it('does not add visually_hidden class to label by default', () => {
+      var view = createInputView({
+        model: new Backbone.Model()
+      });
+
+      view.render();
+
+      expect(view.ui.label).not.toHaveClass('visually_hidden');
+    });
+  });
+
   describe('for view with input and label', () => {
     it('generates for and id attributes', () => {
       const Model = Backbone.Model.extend({
diff --git a/package/src/editor/views/EditConfigurationView.js b/package/src/editor/views/EditConfigurationView.js
index 0d83f4f0ac..ac3a9b041b 100644
--- a/package/src/editor/views/EditConfigurationView.js
+++ b/package/src/editor/views/EditConfigurationView.js
@@ -42,6 +42,9 @@ import {editor} from '../base';
  * Override the `goBackPath` property or method to customize the path
  * that the back button navigates to. Defaults to `/`.
  *
+ * Override the `defaultTab` property or method to set the initially
+ * selected tab.
+ *
  * Set the `hideDestroyButton` property to `true` to hide the destroy
  * button.
  *
@@ -93,7 +96,8 @@ export const EditConfigurationView = Marionette.Layout.extend({
     this.configurationEditor = new ConfigurationEditorView({
       tabTranslationKeyPrefix: `${translationKeyPrefix}.tabs`,
       attributeTranslationKeyPrefixes: [`${translationKeyPrefix}.attributes`],
-      model: this.model.configuration
+      model: this.model.configuration,
+      tab: _.result(this, 'defaultTab')
     });
 
     this.configure(this.configurationEditor);
diff --git a/package/src/ui/index.js b/package/src/ui/index.js
index 0fb841a560..cb902cce8d 100644
--- a/package/src/ui/index.js
+++ b/package/src/ui/index.js
@@ -39,6 +39,7 @@ export * from './views/inputs/ProxyUrlInputView';
 export * from './views/inputs/SliderInputView';
 export * from './views/inputs/JsonInputView';
 export * from './views/inputs/CheckBoxInputView';
+export * from './views/inputs/RadioButtonGroupInputView';
 export * from './views/inputs/UrlInputView';
 export * from './views/inputs/SeparatorView';
 export * from './views/inputs/LabelOnlyView';
diff --git a/package/src/ui/templates/inputs/sliderInput.jst b/package/src/ui/templates/inputs/sliderInput.jst
index 74a0e9c8be..a9bb193756 100644
--- a/package/src/ui/templates/inputs/sliderInput.jst
+++ b/package/src/ui/templates/inputs/sliderInput.jst
@@ -2,5 +2,8 @@
   <span class="name"></span>
   <span class="inline_help"></span>
 </label>
-<div class="value"></div>
-<div class="slider"></div>
+<div class="slider_wrapper">
+  <% if (data.icon) { %><img class="icon" src="<%= data.icon %>" width="18" height="18" /><% } %>
+  <div class="value"></div>
+  <div class="slider"></div>
+</div>
diff --git a/package/src/ui/views/inputs/RadioButtonGroupInputView.js b/package/src/ui/views/inputs/RadioButtonGroupInputView.js
new file mode 100644
index 0000000000..f0590fb580
--- /dev/null
+++ b/package/src/ui/views/inputs/RadioButtonGroupInputView.js
@@ -0,0 +1,100 @@
+import I18n from 'i18n-js';
+import Marionette from 'backbone.marionette';
+import _ from 'underscore';
+
+import {findKeyWithTranslation} from '../../utils/i18nUtils';
+import {inputView} from '../mixins/inputView';
+
+/**
+ * Input view for selecting one value from a small set of options
+ * using radio buttons.
+ * See {@link inputView} for further options.
+ *
+ * @param {Object} [options]
+ *
+ * @param {Array} options.values
+ *   Array of possible values the property can be set to.
+ *
+ * @param {Array} [options.texts]
+ *   Array of display texts for the values. If not provided,
+ *   translations are looked up based on the model's i18nKey.
+ *
+ * @class
+ */
+export const RadioButtonGroupInputView = Marionette.ItemView.extend({
+  mixins: [inputView],
+
+  template: () => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+  `,
+  className: 'radio_button_input',
+
+  events: {
+    'change': 'save'
+  },
+
+  initialize: function() {
+    if (!this.options.texts) {
+      var translationKeyPrefix = findKeyWithTranslation(
+        this.attributeTranslationKeys('values', {fallbackPrefix: 'activerecord.values'})
+      );
+
+      this.options.texts = _.map(this.options.values, function(value) {
+        return I18n.t(translationKeyPrefix + '.' + value);
+      });
+    }
+  },
+
+  onRender: function() {
+    this.appendOptions();
+    this.load();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+  },
+
+  updateDisabled: function() {
+    this.$el.find('input').prop('disabled', this.isDisabled());
+  },
+
+  save: function() {
+    var index = this.$el.find('input').index(this.$el.find('input:checked'));
+    this.model.set(this.options.propertyName, this.options.values[index]);
+  },
+
+  appendOptions: function() {
+    _.each(this.options.values, function(value, index) {
+      var id = this.cid + '_' + value;
+
+      var wrapper = document.createElement('div');
+      wrapper.className = 'radio_button';
+
+      var input = document.createElement('input');
+      input.type = 'radio';
+      input.name = this.options.propertyName;
+      input.value = value;
+      input.id = id;
+
+      var label = document.createElement('label');
+      label.htmlFor = id;
+
+      var nameSpan = document.createElement('span');
+      nameSpan.className = 'name';
+      nameSpan.textContent = this.options.texts[index];
+      label.appendChild(nameSpan);
+
+      wrapper.appendChild(input);
+      wrapper.appendChild(document.createTextNode(' '));
+      wrapper.appendChild(label);
+      this.$el.append(wrapper);
+    }, this);
+  },
+
+  load: function() {
+    if (!this.isClosed) {
+      var value = this.model.get(this.options.propertyName);
+      this.$el.find('input[value="' + value + '"]').prop('checked', true);
+    }
+  }
+});
diff --git a/package/src/ui/views/inputs/SliderInputView.js b/package/src/ui/views/inputs/SliderInputView.js
index 8ae9bd3f41..cbf447d847 100644
--- a/package/src/ui/views/inputs/SliderInputView.js
+++ b/package/src/ui/views/inputs/SliderInputView.js
@@ -30,6 +30,9 @@ import template from '../../templates/inputs/sliderInput.jst';
  *   Already update the model while dragging the handle - not only after
  *   handle has been released.
  *
+ * @param {string} [options.icon]
+ *   Path to an icon image to display before the label.
+ *
  * @class
  */
 export const SliderInputView = Marionette.ItemView.extend({
@@ -38,12 +41,19 @@ export const SliderInputView = Marionette.ItemView.extend({
   className: 'slider_input',
   template,
 
+  serializeData() {
+    return {
+      icon: this.options.icon
+    };
+  },
+
   ui: {
     widget: '.slider',
     value: '.value'
   },
 
   events: {
+    'slidestart': 'handleSlideStart',
     'slidechange': 'save',
     'slide': 'handleSlide'
   },
@@ -53,8 +63,14 @@ export const SliderInputView = Marionette.ItemView.extend({
       animate: 'fast'
     });
 
-    this.setupAttributeBinding('minValue', value => this.updateSliderOption('min', value || 0));
-    this.setupAttributeBinding('maxValue', value => this.updateSliderOption('max', value !== undefined ? value : 100));
+    if (this.options.values) {
+      this.ui.widget.slider('option', 'min', 0);
+      this.ui.widget.slider('option', 'max', this.options.values.length - 1);
+    }
+    else {
+      this.setupAttributeBinding('minValue', value => this.updateSliderOption('min', value || 0));
+      this.setupAttributeBinding('maxValue', value => this.updateSliderOption('max', value !== undefined ? value : 100));
+    }
 
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
@@ -76,8 +92,15 @@ export const SliderInputView = Marionette.ItemView.extend({
     }
   },
 
+  handleSlideStart() {
+    if (this.options.onInteractionStart) {
+      this.options.onInteractionStart();
+    }
+  },
+
   handleSlide(event, ui) {
-    this.updateText(ui.value);
+    var value = this.options.values ? this.options.values[ui.value] : ui.value;
+    this.updateText(value);
 
     if (this.options.saveOnSlide) {
       this.save(event, ui);
@@ -85,7 +108,12 @@ export const SliderInputView = Marionette.ItemView.extend({
   },
 
   save: function(event, ui) {
-    this.model.set(this.options.propertyName, ui.value);
+    if (this.loading) {
+      return;
+    }
+
+    var value = this.options.values ? this.options.values[ui.value] : ui.value;
+    this.model.set(this.options.propertyName, value);
   },
 
   load: function() {
@@ -98,7 +126,13 @@ export const SliderInputView = Marionette.ItemView.extend({
       value = 'defaultValue' in this.options ? this.options.defaultValue : 0
     }
 
-    this.ui.widget.slider('option', 'value', this.clampValue(value));
+    var sliderValue = this.options.values ?
+      this.options.values.indexOf(value) :
+      value;
+
+    this.loading = true;
+    this.ui.widget.slider('option', 'value', this.clampValue(sliderValue));
+    this.loading = false;
     this.updateText(value);
   },
 
@@ -110,10 +144,19 @@ export const SliderInputView = Marionette.ItemView.extend({
   },
 
   updateText: function(value) {
-    var unit = 'unit' in this.options ? this.options.unit : '%';
-    var text = 'displayText' in this.options ?
-               this.options.displayText(value) :
-               value + unit;
+    var text;
+
+    if (this.options.texts) {
+      var index = this.options.values.indexOf(value);
+      text = this.options.texts[index];
+    }
+    else if ('displayText' in this.options) {
+      text = this.options.displayText(value);
+    }
+    else {
+      var unit = 'unit' in this.options ? this.options.unit : '%';
+      text = value + unit;
+    }
 
     this.ui.value.text(text);
   }
diff --git a/package/src/ui/views/mixins/inputView.js b/package/src/ui/views/mixins/inputView.js
index 65f8120907..e66e6b5da3 100644
--- a/package/src/ui/views/mixins/inputView.js
+++ b/package/src/ui/views/mixins/inputView.js
@@ -189,6 +189,10 @@ export const inputView = {
 
     this.ui.labelText.text(this.labelText());
 
+    if (this.options.hideLabel) {
+      this.ui.label.addClass('visually_hidden');
+    }
+
     this.updateInlineHelp();
     this.setLabelFor();