This page shows off some of the block designs you can use when creating content in Eksell. All of the layouts shown on this page can be created using the blocks that come built-in with the Block Editor, and you have a lot more possibilities when you start adding custom blocks with plugins.
Many of the layouts on this page are included as block patterns in the theme. Let’s start by taking a look at images and galleries, shall we?
Images and Galleries
Like many other blocks, images can be given alignments to change how they are positioned on the page. The image below is set to the wide alignment, extending its width to match the site header and footer – at least on desktop. On smaller screens, like mobiles and tablets in portrait orientation, blocks with the wide alignment have the same width as blocks with the default alignment.
If you really want to go big, you can use the full alignment, which makes blocks extend all the way to the edges of the content area.
That’s a lot of image.
Gallery blocks have two settings: the number of columns, and whether or not images should be cropped. The default number of columns is three, and the maximum number of columns is eight, although they generally look best when set to four columns of fewer.
When you stack multiple gallery blocks and image blocks on top of each other, the margin between them is adjusted to match the horizontal margin between each gallery item. That means that you can create collages of stacked image and gallery blocks, like this:
Just like the image block, gallery blocks can be set to the wide and full alignment for extra oomph. They stack when set to those alignments as well.
Quotes
Next, let’s take a look at quotes. The quote block has two styles. Regular, with the same font size as regular paragraphs:
“Gutenberg is more than an editor.”
The Gutenberg Team
And large, which bumps the font size:
“A spring of truth shall flow from it: like a new star it shall scatter the darkness of ignorance, and cause a light heretofore unknown to shine amongst men.”
The Gutenberg Team
In addition to the quote block, we also have the pull quote, with a regular and a solid color style. Due to its large font size, the pull quote works best for shorter quotes.
Good design is not just aesthetic – it’s also good economy.
Olle Eksell
That’s the regular color style. This is the solid one:
Good design is not just cool – it’s bloody serious!
Olle Eksell
Pull quotes can also, as the name implies, be pulled to the left or right of the content. Note that on mobile, these quotes will fill the entire width of the content column and look the same as the pull quotes without alignment.
Let’s add some lorem ipsum text and give them a try.
Good design is not just aesthetic.
Olle Eksell
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Good design is not just cool.
Olle Eksell
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.
Next – headings!
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Here, have a file.
The group block allows us to group different blocks together, modify their layouts and change their text and background color.
Normal Group
This group block has a solid background color and normal alignment.
Wide Group
This group block is set to the wide alignment. It’s a big boy with room for lots of content – at least on desktop. On mobile, it matches the width of the group block with normal alignment.
This group also contains a Columns block, giving us two columns to work with on desktop screen sizes. On desktop, the heading is to the left and the text is to the right. On mobile, the heading and the text are stacked.
Full Group
When set to the full alignment, the group block stretches to fill the entire content area, on both desktop and mobile. There’s plenty of screen estate to put to use here.
Stacked Groups
If you put two groups with a background color and the full alignment after each other, there won’t be any margin between them. That gives us some fun layout possibilities, since groups can contain all types of content. Images, for example.
If you’re using Eksell on your portfolio website, stacked group blocks can be a nice way to show off your work and list testimonials from clients.
Next, let’s take a look at separators. This is the wide one:
And this is the thin one:
And this is the dotted one:
They can all be set to different colors, like this:
Media & Text
This is the media and text block. It’s another good block for when you want to show off your work.
You can invert the order of the image and the text, change the text and background color, and set the vertical text alignment.
Those are some of the block layouts you can use in Eksell. Many of them can be added as block patterns within the Block Editor. Let’s wrap up with a call to action with the buttons block.