The most significant WordPress update in the past few years – version 5 (and beyond), has been characterized with the introduction of WordPress blocks. WordPress founder Matt Mullenweg has presented his vision of the new WordPress as a way of unifying the website building process.
Suddenly, the new opportunity for WordPress developers around the world has arisen: to create unique WordPress blocks that will help people build their websites easier, faster and with higher efficiency.
Designing websites in WordPress block editor directly is becoming more and more popular. Gutenberg editor is universal and easy to learn. That’s its biggest advantage compared to some old school WordPress builders.
What are WordPress blocks?
WordPress blocks are building units of a WordPress website. They let you add text, images, multimedia content, tables and much more to your site. Each block is editable. You can find the basic block setting in the top left corner of the block itself and advanced settings in Inspector. Block Inspector is on the right hand side menu in wp-admin. Just choose the block you want to edit to see the available options.
WordPress Blocks Administration
Core WordPress blocks
WordPress comes with an original set of blocks you can build a decent website with. They’re divided into following sections:
- Text Blocks
(Paragraph, Heading, List, Quote, Code, Classic, Preformatted, Pullquote, Table, Verse)
- Media blocks
(Image, Gallery, Audio, Cover, File, Media & Text, Video)
- Design blocks
(Buttons, Columns, Group, More, Page Break, Separator, Spacer)
- Widgets blocks
(Shortcode, Archives, Calendar, Categories, Custom HTML, Latest Comments, Latest Posts, RSS, Search, Social Icons, Tag Cloud)
- Embed blocks
(Embed, Twitter, Youtube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickrs, Vimeo, etc.)
How to add a block to the page in WordPress?
Adding and reordering blocks on the page or within a blog post is simple: click on the plus button located in the left top corner of your page. Then find a block you need in the displayed list of blocks. You can also search for a block using a search row.
How to reorder WordPress blocks? Click on the block you want to move and use the arrows displayed in the block menu to move the block up or down.
WordPress plugins that add blocks
Even though the list of the original WordPress blocks is pretty long, there are some essential functionalities missing among them. When you find yourself in a situation that you cannot do or style something the way you need, it’s time to look for a WordPress plugin that will extend your Block Editor by adding more blocks.
of Citadela Blocks plugin
Citadela Blocks is a state of the art plugin that we continually work on in order to reflect the needs of websites for specific businesses. It’s based on 10 years of web creation experience in our team of developers and web designers. Therefore the main advantages include:
- Extends WP editor with more gutenberg WordPress blocks
- High compatibility with all WordPress themes built on WordPress 5.2 and above
- New blocks added regularly
- Based on latest trends and specific business needs
- Well coded, using standard WordPress code and best practices
- Responsive WordPress blocks
- Universal plugin suitable for all modern gutenberg themes
- No 3rd party page builder needed
WordPress Gutenberg and Citadela WP is the right combination for building fast and elegant website.
Cluster WordPress block
Important design and functional element on any website: Cluster or Block of Blocks. You can add multiple blocks into the Cluster block and set the alignment and background. This special container is perfect for blocks grouping.
Alignment options for the Cluster block:
- Content size
- Wide size
- Fullwidth size
More settings of Cluster block
After you group blocks on your WordPress website, you can set their background color or even background image. Moreover, you can define border, shadow, specific height and width, you can fill in Additional CSS Class section (suitable for advanced users) and more.
Responsive options are available when an image is set up as a background. It helps you to design a website in a better way for mobile devices. You have available several parameters. Also, you can choose a smaller image size for mobile devices and speed uploading time. Change the image for mobile resolution through the block toolbar.
Opening Hours block
This very usespecific WordPress block will make building your website faster and easier. Add Opening Hours WordPress block on any page you like and fill in the specific time slots. In the block’s settings on your right hand side – in inspector, there’s an option to hide empty days, and various color settings. Handy, isn’t it?
Opening hours block doesn’t come with the title so don’t forget to add one by using regular Heading or Paragraph block. This way you can use Opening hours block for call center availability or support hours too.
Custom Page Title block
Page title and subtitle block that you can use anywhere on the web page. The idea behind Custom Page Title block is to increase the variety of your page’s layout. A simple option, such as the possibility to move the title and subtitle further down the page will allow you to light up your website with an image or a map at the top.
Custom page title Includes basic alignment settings (Align Left, Center, Right), bold and italic font style and space for typing in the Subtitle. Title itself will be automatically copied from the actual page title, so if you want to change it, go there. Then hide the page title in the page settings and you’re all set.
There’s also an option to add hyperlink, in case you might want to bring visitors to any other page or website.
Price Table WordPress block
Display prices, special offers and featured items using Price table block. This truly amazing Citadela WordPress block has been designed for you to present deals in a way they cannot be overlooked. Group Price table block with an image using Cluster block for even better results.
Price table block features:
- Multiple text entries:
title, subtitle, price, product description rows
- Featured item mark
- Discount price field for showing old and new price next to each other
- CTA button (buy now)
Customization settings of Price table block
- Unlimited color picker:
Header background, Header text, Button background, Button text
- Button settings:
Smooth switcher between round and angled button edges, Open link in new tab option
Special block that lets you create an overview of your offered services. Service block includes icon, title, subtitle and description which you can link to a subpage of your choice.
Several service blocks grouped using cluster block can be used not only to list your services. They’re perfect for any of your product presentation pages, too!
Using grouped service blocks, you can create an overview of subscription packages or simply arrange any type of content on your website (e.g. list the advantages of your product).
Responsive Spacer block
Airy web design increases readability of your content and encourages your web visitors to stay on your website for a longer time. However, adding fixed spaces between page elements will ruin the mobile version of your website. Therefore we’ve created a responsive spacer as one of the first blocks added to our Citadela Blocks plugin.
Settings are simple, choose unit and height. Height units for Responsive Spacer block are:
px, vw, vh, rem, em, %
An additional option is available for responsive design
Choose this setting to modify block parameters for mobile resolution. Define breakpoint size, height unit and spacer height.
Responsive Text block
Typography on your website should be simple. Using 1 or 2 fonts is recommended. But what if you need to spice up the page with an extra font and style? Responsive text block will allow you to do just that. Add text with different font to your WordPress website.
Settings let you choose:
- Any of the Google fonts
- HTML tag for your text
- Font size
- Line height
- Letter spacing
- Text color
- Background color
Customize fancy text area on devices differently
Use responsive options to set up important parameters for desktop and mobile separately. You have under control mobile width breakpoint size. You can regulate text alignment, font size unit, font size and line height. Responsive typography block helps you to play with typography easily. Create eye-catching presentations.
This block is available on standard Page, Post or even Special Pages along with Citadela Directory Plugin.
Risk free: 30 days money back guarantee