{"id":46,"date":"2024-05-20T15:25:34","date_gmt":"2024-05-20T13:25:34","guid":{"rendered":"https:\/\/qala.shop\/documentation\/?page_id=46"},"modified":"2024-06-12T13:09:29","modified_gmt":"2024-06-12T11:09:29","slug":"qala-block-pattern","status":"publish","type":"page","link":"https:\/\/qala.shop\/documentation\/qala-block-pattern\/","title":{"rendered":"Qala block pattern"},"content":{"rendered":"\n
<\/div>\n\n\n\n
\n
\n

Qala comes with different block patterns, think of it as a pre-made group of blocks in a designed layout. They can contain pretty much any design element you want. Elements like columns, images, videos, text, buttons \u2013 they can all be placed in a custom block pattern.<\/p>\n\n\n\n

A block pattern can be used over and over again throughout your website. Each instance can be customized with appropriate content. Additionally, you can add, subtract, or otherwise edit the included blocks. Block patterns are usually not related or linked, so if you insert a block pattern on one page and edit it, the changes will not affect other pages where you have used the block pattern.<\/p>\n\n\n\n

They offer a good starting point for building out a page and allow you to create a more consistent look.<\/p>\n<\/div>\n\n\n\n

\n
\"patterns-screenshot\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

“Cover with content”<\/h3>\n\n\n\n
\"cover-content-pattern\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

“Spotlights”<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

“Square grid”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

“Text and context”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

“Text and Image”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

These are the pre-installed block patterns for Qala. You can customise it to your own brand and if you feel like you want a new type of pattern, let us know and we’ll help you out!<\/p>\n\n\n\n

Bonus tips for using Gutenberg as one pro<\/h3>\n\n\n\n

The block editor is incredibly fast and even very basic use for a few minutes will allow you to instantly add blocks without even thinking.<\/p>\n\n\n\n

Pretty soon you’ll realize how much faster your workflow will be with this approach.<\/p>\n\n\n\n

For advanced users, here are some bonus tips to help you work even faster with the WordPress block editor.<\/p>\n\n\n\n

Move the block toolbar to the top.<\/h4>\n\n\n\n

You may have noticed in the screenshots above that there is a toolbar that appears on top of each block. You can move this toolbar to the top of the editor.<\/p>\n\n\n\n

Just click on the three dots button at the top right corner of the screen and then select the Top Toolbar option.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\n

Use keyboard shortcuts<\/h4>\n\n\n\n

Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is \/.<\/p>\n\n\n\n

Just type \/ and then start typing, and it will show you matching blocks that you can immediately add.<\/p>\n\n\n\n

For more shortcuts, click the three-dot menu in the upper-right corner of the screen, then select “Shortcuts.”<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

This will bring up a popup with a list of all the keyboard shortcuts you can use. The list will have different shortcuts for Windows and Mac users.<\/p>\n\n\n\n

Drag and drop media to automatically create media blocks<\/h4>\n\n\n\n

Gutenberg lets you just drag and drop files anywhere on the screen and it automatically creates a block for you.<\/p>\n\n\n\n

You can drop a single image or video file and it will create the block for you. You can also drop multiple image files to create a gallery block.<\/p>\n\n\n\n

Adding YouTube, Twitter, Vimeo and other embeds<\/h4>\n\n\n\n

The block editor makes it easier to embed third-party content into your WordPress content. There are blocks for all popular third-party services.<\/p>\n\n\n\n

However, you can just copy and paste the embedded URL at any time and it will automatically create a block for you.<\/p>\n\n\n\n

For example, if you added a URL for a YouTube video, it will automatically create a YouTube embed block and display the video.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And that’s the basics of Gutenberg, everything you need to know to create beautiful and valuable content for your audience. If you still want to know more about Gutenberg, you can find even more at WordPress Gutenberg.<\/p>\n\n\n\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

Qala comes with different block patterns think of it as a pre-made group of blocks in a designed layout<\/p>\n","protected":false},"author":184,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"acf":[],"parents":[{"permalink":"https:\/\/qala.shop\/documentation","title":"Home"},{"permalink":false,"title":"Qala block pattern"}],"_links":{"self":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/users\/184"}],"replies":[{"embeddable":true,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":3,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/pages\/46\/revisions\/191"}],"wp:attachment":[{"href":"https:\/\/qala.shop\/documentation\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}