Another year, another website-so they say. But Christmas has come early for everyone involved in the Pixel Together community. Thanks to Santa (Simon*) a plethora of updates were deployed to Pixel Together throughout the year that you may or may not be aware of. Some of these updates have been listed on the 'What’s New' page, others were super secret agency requests that snuck on through.
Coming to the end of the year, I thought it was a good time to reflect on all the updates that have been released to Pixel Together over the past year, and share some tips and tricks on how to make the most out of these features. The updates I will be covering in this post include:
- Multi layer Pixel Together update
- Distribute layers Pixel Together update
- Version History Pixel Together update
- Inline Styles Pixel Together update
- Miscellaneous Pixel Together updates
Without further ado, let’s unwrap the first gift!
Multi Layer Pixel Together Update
February was a huge month for Pixel Together, starting with two major updates to boost productivity. This first of two was multi layer editing. This update enabled a user to select multiple elements, and adjust their properties such as font, font size, colours, custom classes and even hyperlinks simultaneously.
This update both saves a lot of design time when styling multiple elements at once, helps improve design consistency, makes it much faster to build and work with your own website templates and roll out design edits across a website.
To utilise multi-select:
- Click and drag the multi select tool over several elements
- Edit the properties
- Save the website
Areas for improvement:
- Ability to clear or modify image alt text
Distribute and Align Layers Pixel Together Update
The second of the first two massive February updates were distributing layers. This feature introduced a new toolbar with options to align elements and space them evenly between each other. Working somewhat similar to CSS flex, this feature allows you to quickly space elements like navigation links, columns of content, and more. It removed a lot of the guesswork and mathematical calculations that were previously required to align elements.
To use the align and distribution tool:
- Click and drag the select tool over multiple elements
- Click one of the horizontal or vertical alignment options
- Save the website
Version History Pixel Together Update
This is one feature that I was honestly quite surprised Pixel Together didn’t have sooner. It's vital to be able to restore websites to older versions, in the event the website was accidentally published between edits, or some kind of error occurs and needs restoring.
The fact that Pixel Togethers version history lists every single saved version, allows you to preview each version and restore the live version of the website back to any one of them is pretty insane. This doesn’t restore the editor, so anything in progress isn’t reverted and you can continue working as you were. However, this can also be a downside in that there is no way to restore the backend. So if you make changes you want to undo, you’re out of luck.
To access version history on Pixel Together:
- Enter the website dashboard
- Click the list icon next to the “view draft” or “view website” buttons in the top right corner
- Browse the various versions. Click the link to preview the version, or;
- Click the “set live” button to restore the live version of the site to any other save!
Areas for improvement:
- The ability to restore the back end of the site and completely roll a project back to a version
Inline Styles Pixel Together Update
Inline styles refers to the ability to edit and modify text styles within a single text element. Previously, each text element was bound to a single font, size, colour etc. Now, individual text lines can be styled independently.
My favourite use case for this is setting single text boxes for blog posts in particular, or other large content areas. Using auto expand will take care of the page size, and the titles within can be styled independently.
To use inline styles:
- Highlight the text in a text box you want to style differently
- Apply a new font size, colour or other style to the text
Areas for improvement:
- Sometimes the text boxes will behave a little odd, and it can be tricky to reset the right title. This isn’t a feature I use extensively though, so this could just be me
- Global font style management would make it much easier to apply text styles, and keep their design consistent throughout a website project
Miscellaneous Pixel Together Updates
- Add borders, drop shadows and hover effects within the editor - no CSS required
- Categorise layouts by site
- Pull in layout segments from draft layout pages - they no longer need to be published
- Forms tell you what page they came from, so you don’t need to rename every form in your website to
- see where your leads come from. Plus, you can see them directly in the email you receive.
- Speed and bug improvements for deleting shared sections
- Even more support for variable characters - you can no add complete URLs
What Features Would I Like to See in 2023?
Grouping elements
Designs with lots of elements start to become quite tedious to move around and align in Pixel Together. Particularly when you have a lot of text and icon elements in a single section. Having the ability to group them together, copy and paste groups and move them around would help with this problem. In addition, being able to group elements would make building custom buttons, tiles and cards much easier. As elements have no relationship in Pixel, linked elements are hyperlinked individually, and if you want a singular block you need a lot of hacky solutions to go around this.
Global colour swatches and global text styles
I don’t mind getting in and writing my own CSS for global styles. However there are certain properties that you expect a website builder to store globally, to help with design consistency. Font sizes and swatch colours should be seen within the editor, and easily changed across a project.
Ability to “exclude” dynamic content from itself
This one is a pet peeve of mine, and many website builders seem to get this wrong. If you have an index section on a dynamically generated page that includes and links to other pages dynamically, you will often find them listing themselves. You don’t want these index sections linking to the page you're already on - that's just terrible user experience.
