Today we’ll cover some helpful tips and
tricks on how to utilize columns and
hopefully speed up your design process.
We’ll go over some handy column hacks,
explain when they’re useful, and
share additional best practices.
Each main section of a page in Foleon is called
a block, the space inside of each block can be
divided into subdivisions called columns. Here
we see a block with 4 columns, including icons.
But if we add a fifth column by duplicating
one, we end up with a sizing inconsistency.
This has to do with the responsive nature
of the editor, and how the column spacing
can’t divide evenly with 5 columns. Our
workaround for this, is to create 7 columns,
and shrink the two on the ends down far enough to
allow the 5 central columns to be the same size.
With icon columns like this, it’s important to
keep the spacing consistent in each column to
achieve a clean look. If your text line amount
varies from column to column, you may want to
vertically align your columns to top, so that
they stay flush for a cleaner viewing experience.
Here’s another example of how
to use columns. We can create
a sleek index page, by duplicating
and rearranging these simple columns.
Now let’s quickly refine the
spacing for tablet and mobile,
before returning to desktop. To duplicate this
block to flesh out the rest of this index page.
When working with overview columns like this black
and white template block, there’s a few things
to consider. Since image elements need to fill
the sides of the column, column spacing cannot
be used to pad your text elements, internal
text element spacing must be used instead.
If your images aren’t aligning in the columns,
remember that they need to be cropped
to the same shape, or aspect ratio.
This can be done by using the presets we
have in the media library’s crop tool.
As a best practice, you can also
create spacing between columns
for the smaller view-modes, by adjusting
the bottom border of the column settings.
Another quick tip we have is that
columns can be rearranged. Their
colors can be adjusted or inverted, to
create some variety in your page designs.
These column tips and applications are sure
to come in handy for designing catalog pages,
feature blocks, overview pages or to break up
long text reads with data or icon sections,
like for a report or whitepaper.
I hope these tips come in handy
while you’re creating your Foleon docs.
We can’t wait to see what you create!
