Any content block on a Pixieset Website consists of layers of different elements such as photos, text and shapes. While standard blocks have preset designs, Flex blocks are unique because they give you full control over each element and layer. If you haven’t already, be sure to check out our Creating a Flex block guide to go over the basics.
This guide will show you how to create your own custom Flex blocks by customizing their elements and layers.
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. Once placed, simply hover your mouse over a Flex Block and click Open Editor.
Understanding 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 + Add Elements button to add any additional elements and design blocks just the way you want them. Simply drag and drop elements to build your block!
Types of elements
With the Add Elements menu open, you can choose from a range of elements. You can add any combination of elements you wish to achieve your desired design. Simply click on an element to add it and then drag and drop it into place. Double click an element or use the Edit button to access the settings for that element.
You can add any of the following elements to a Flex Block:
Text: You can add text boxes anywhere within a Flex Block. Simply double click on text to type and reveal the text formatting toolbar:
Image: Image elements can be used for adding individual photos to a Flex Block. Easily customize aspects such as the crop, opacity, border and more.
Video: Video elements work similarly to standard video blocks. Using the URL of a YouTube or Vimeo video, you can directly embed them within a block.
Shape: Shape elements are a great way to get creative and add some extra depth to your block. The primary shape options are rectangles or circles which have plenty of options available such as changing color, opacity and borders. Shapes can also be hyperlinked to serve a functional purpose or they can be used aesthetically.
Button: Button elements are simple yet incredibly useful. Buttons can be used to hyperlink other pages or serve as a functional shortcut to specific actions.
Line: Line elements are another great way to be creative with your design. Set the color, opacity and width of your lines to add extra framing or attention within a block.
Image Carousel & Image Slideshow: 2 types of sliding gallery elements. These are great options for creating a viewing experience of multiple photos in one place.
Image Grid: Full grids of photos can be added as individual elements.
Contact Form: Insert a contact form into a unique design and entice potential clients to get in touch with you.
Map: Easily add a customizable map. Great for highlighting your studio or shooting locations.
Social Links: Just like your footer, social link icons will reflect any social accounts you’ve added to your profile.
Instagram Feed: Display a feed of photos that automatically reflects your Instagram profile.
Accordion: Ideal for FAQs, accordions can be used for displaying text that can be shown or hidden by visitors.
Custom Code: If you have a Pro Website or Pro Suite plan, you can use this element to insert code snippets. This is great if you have multiple embedding codes that you wish to display together.
Arranging Layers
Each element exists on its own 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. Click Layers to view all of the block’s layers in the order they are stacked. Layers listed at the top will appear above all layers listed underneath.
Clicking and dragging a layer up the Layers tab 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.
Grouping elements
Multiple elements can be arranged into a group so that they can be moved as a single layer. This is useful if you have several elements arranged in a particular way and you’d like to treat them as a single layer. Simply drag your mouse or hold shift + click to select multiple elements. Once the elements are selected, use right click > group to create a group.
In the below example, we can see multiple elements being used to display a package. By grouping the elements together, we can easily duplicate the group which can then be edited separately to display various packages.
Right-Click functions
You can perform a right-click over any element to reveal another toolbar. This can help you quickly arrange, duplicate or delete the element.
