The Flex Editor is a drag and drop block builder that gives you more customization and options when building your Pixieset Website. Whether you want to access new designs or create custom blocks from scratch, Flex Editor is for you! This article will guide you through the process.
Why use a Flex Block?
Where regular content blocks have preset designs and layouts, Flex Editor allows you to completely design your own blocks. Using our intuitive drag and drop builder, you have total control over the size and positioning of each element.
Adding a Flex Block
To add a Flex Block, click any (+) icon on your site to review the block options, then go the Flex Block tab in the left hand side. From there, you can explore the various subcategories of Flex Block templates. There are tonnes of block designs to choose from that you can fine tune further. You can even add a blank block and create your own design from scratch!
Once your Flex Block is placed, click Open Editor to begin customizing.
Building and designing your Flex Block
Drag and Drop Elements
Flex Blocks consist of multiple elements such as images, text or shapes which can be customized, arranged or removed however you like. You can also use the + Element button to add any additional elements and design blocks just the way you want them. Simply drag and drop elements to build your block!
Arrange layers
Each element exists as a layer within a Flex Block. These can be easily arranged within the Layers tab on the left to move them in front or behind other elements. Moving a layer up will bring it forward, making it more visible as it sits on top of other layers. Likewise, you can move a layer down to arrange it behind other layers.
Clicking on any element will also reveal a toolbar containing more options for moving and aligning. Read more about customizing Layers here.
Fine tune settings
To customize your block further with a color scheme, background image, padding and grid type, click Block Settings in the top right to reveal even more options.
Edit content for mobile devices
As you experiment with customizing your own blocks, you may want to adjust how they appear on mobile devices. By clicking on the device icons above the block, you can review and edit how the block looks in a particular format. This is great if you want to adjust the spacing and visibility of elements on mobile devices without changing the desktop view or vice-versa.
You can learn more about editing Flex blocks for mobile devices here.
Undo/Redo
When editing a Flex block, there are undo and redo buttons to help you stay on top of edits as you go.
Keyboard Shortcuts
Undo/Redo: Use Cmd/Ctrl + Z to undo changes or Cmd/Ctrl + Shift + Z to redo changes.
Copy/Paste: Use Cmd/Ctrl + C to copy an element and Cmd/Ctrl + V to paste it.
Select Multiple: You can select multiple elements at once by holding Shift and clicking on different elements. This can be performed directly on elements or within the Layers tab.
Select All: Cmd/Ctrl + A to select all elements within the block.
Group: With multiple elements selected, use Cmd/Ctrl + G to group them together.
Duplicate: Use Cmd/Ctrl + D while an element is selected to duplicate it
Move Forward/Backward: With an element selected, press [ to move it backwards or ] to move it forwards.