Pixieset Website’s templates are powered by Flex Editor, a powerful and intuitive builder that unlocks full creative control over your site content. Drag and drop images, text, videos, shapes, buttons, sliders, and other elements wherever you like to build unique layouts.

Note: Flex Editor is available on all of Pixieset Website’s site templates, with the exception of classic templates built on our original layout engine.

On this page:

• Accessing the editor
• Customizing your content
  • Adjusting an element’s position and size
  • Adding elements
  • Arranging layers
  • Customizing block settings
• Keyboard shortcuts

Accessing the editor

To access a content block’s Flex Editor:

1. Hover over the block and click Open Editor.
2. In the editor, freely drag and drop existing elements. Alternatively, add new elements by clicking +Add Elements in the top left.
3. At the top of the editor, shuffle between desktop, tablet, and mobile views to customize exactly how your content appears on specific devices.

Customizing your content

Flex Editor gives you intuitive, powerful tools to create the perfect site layout. Here are some common actions to make the most of the editor.

Adjusting an element’s position and size

Within the editor, freely resize and reposition existing elements (e.g. text, photos, buttons, etc.) anywhere in the content block.

1. In the editor, click to highlight a specific element.
2. Drag it into your preferred position, or drag its outline to resize it.

Tip: You can select and move multiple elements. Simply click and drag your cursor over the elements. Alternatively, hold down the Shift key and click on each individual element.

Adding elements

Want to add something new to your block? Drop images, text, videos, shapes, buttons, sliders, and more right into your layout.

1. In the top left of the editor, click +Add Elements.
2. Add a new element and drag it into your preferred position.
3. Click directly on the element to customize it further.

Tip: Create additional space for extra elements by dragging the ↕ at the bottom of the block downwards.

Arranging layers

Each element exists as its own layer within your content block. Layers at the top will appear above layers listed underneath. You can rearrange the order of your elements to determine how they appear when stacked on top of another.

1. In the editor, select the element you’d like to reorder.
2. Click the Move Forward or Move Backward icon to change its order in the layout.

Tip: To see the current layer order of all your elements, click Layers in the top right of the editor. You can also drag and rearrange layers this way.

Customizing block settings

Within the Flex Editor, you can customize your block further with a specific color scheme, background image, additional padding, and more. This is an easy way to make the specific block stand out on the page.

In the top right, click the Block Settings icon to access the following options:

• Change the grid type: Increase or decrease the spacing between the grid cells that your elements lay on.
• Switch color schemes: Choose a color scheme based on your site’s palette that best complements the specific block.
• Adjust padding: Add padding to the top or bottom of your block to create a more airy or bold feel.
• Add a background image: Add a unique photo to the backdrop and tweak its opacity to transform the entire look of the block.

Keyboard shortcuts

Streamline basic actions in the editor with the following shortcuts:

• Undo: ⌘+Z (Mac) or Ctrl+Z (Windows)
• Redo: ⌘+Shift+Z (Mac) or Ctrl+Shift+Z (Windows)
• Select Multiples: Hold down Shift and click on different elements.
• Select All: ⌘+A (Mac) or Ctrl+A (Windows)
• Group together: ⌘ + G (Mac) or Ctrl + G (Windows)
• Duplicate: Select an element and click ⌘+D (Mac) or Ctrl+D (Windows)
• Move Forward: Select an element and click [
• Move Backward: Select an element and click ]