Labākie oriģinālie WordPress bloki [Īss pārskats]

We bring you a guide on how to use Gutenberg WordPress editor and blocks. Please read news about blocks changes which are coming in the very next 5.4 version. We have selected all the most often use blocks which are must be used on any website. Once released we will post more details on all features.

When WordPress had announced new Gutenberg editor back in 2018 we were excited about it. Now a couple of years later we see a huge improvement. Gutenberg WordPress editor is a great tool to create a website.

Ar AitThemes CitadelaWP plugins, you can create specific content for a company, business, blog or non-profit website presentation. Or even start a new online business. The website speed and ease of editing website are the most important factors.

What is a block?

Gutenberg WordPress blocks are building units of the website. Each of them has its own special place and purpose. It’s very important to use the right WordPress block for a certain type of content.

But how do you find the most suitable block that fits your intent?

To help you better understand WordPress blocks, we’ve prepared this overview of the most popular ones.

Text content blocks

There are several blocks, which you can use to insert text content on your website. You can use several blocks. From WordPress 5.4 there is a new setting, you can change text color.

• Punkts
• Virsraksts
• Quote
• Saraksts
• Pullquote
• Table
• Verse
• Preformatted

Except this, you use Classic block which can be handier for a long paragraph.

Pogu bloks

Creating a compelling CTA button in WordPress has become super easy with Button block. You don’t need to enter custom CSS or understand HTML. You can – but don’t have to – enter hexadecimal code of your favourite color to make the button look nice and eye-catching.

Where to use Button block?

Once the web visitor gets to your website, you want to encourage them to take action. That’s what CTA buttons are for.

In general, there are 3 places where you should use the WordPress Button block:

• Homepage – to complete action that will lead to fulfilling your goal, such as sign up for newsletter, discover special offer deal or register for free trial.
• Product page – depending on how your product page is lead, there could be 1 CTA button (BUY) or more buttons, e.g. product details, buy, add to wish list, etc.
• Blog – CTA buttons could refer to another useful article or purchase of your product/ service.

Button block settings

In Inspector, on the right hand side, you can easily manage settings of your button:

• Style
• Fona krāsa
• Font color
• Border

Text written in your CTA button should be short and straight forward, encouraging the action you want your web visitors to take.

News coming in next WordPress 5.4 version (release 31st March 2020)

Button block is going to be replaced with new Buttons block.
You can assume from the new name, that you will be able to create more buttons beside one by one in one block container. Often there is a need to create two CTA at a time, for example: Buy Now and Read More. Also, some new style and colour settings are coming. Choose Fill or Outline style and then the colour of the background. You can choose Solid or Gradient background. Some presets as a starting point will be available for more effortless fine-tuning. The good news is that all existing buttons blocks will be working and no need to migrate them.

Kolonnu bloks

Columns block is an amazing WordPress block that opens doors to new layouts. It gives you more options of page elements arrangements resulting in more design alternatives.

Working with Columns block is easy:

• No extra plugin installation.
• No coding required.
• All you need is a bit of sense for neat design.

In comparison to previous hassel you had to go through before the release of WordPress block editor, it’s super simple to use the Columns WordPress block.

How to use Columns block?

As indicated above, there are 2 ways the Columns block can be used:

• To organize the flow of your texts (in a blog post or on the regular page).
• To arrange other blocks into columns.

When organizing text into columns, e.g. within a blog post, you’re increasing readability and making your website more transparent & user friendly.

However, when you use Columns block to nest other blocks, such as images, texts and buttons, you’re altering the entire layout of your chosen page and creating new designs.

Column block settings

After inserting a Column block onto the page, choose how many columns you want. It can be any amount from 2 to 6 columns. Then you can start typing your text or adding blocks into each column.

Alignment of the content of your column block can be set separately for the entire block as well as individual columns. You can even choose the proportion of the column’s width. This way, one column can be wider than another.

Cover block

Let’s talk about the header of your website. It’s a section that defines the first impression when someone comes to your homepage. Kind of important, isn’t it? And did you know that Cover block can be used as a header on any of your pages?

Cover is the core WordPress blocks that helps you impress your web visitors. Especially when it is used right, or better to say, when it’s neatly integrated within your web design.

Where to use Cover block?

As mentioned above, Cover block can be used on any of your pages. Moreover, it can be added anywhere onto the page, unlike the header of your website that is fixed on the top of your website.

Cover block can be used as:

• Header of any page, including Homepage.
• Image or video overwritten by text used on product page.
• Content separator in blog post.

Cover block settings

Setting up your Cover block is very straight forward. First, choose an image or a video as a background. You can also use a single color instead. When you have your background set, add a title and subtitle. 

You can choose the alignment of the block, and of course, the alignment of the text within.

Cover block alignment offers the following options:

• Align Left
• Align Center
• Align Right
• Wide Width
• Full Width

My personal favourite is the color overlay which is available in the inspector – the Cover block background image can be toned to any color you want. Together with customized font size and color, you can create beautiful contrasts and final look of your cover block will be astonishing.

From WordPress 5.4 you can choose the gradient background instead of a solid one.

Gallery block

Showcase images on your website using Gallery block. This standard WordPress block has been designed to hold your images and display them nicely on any page of your website. Similarly to other WordPress blocks, Gallery block can be positioned anywhere on the website or within the blog post.

Upload of your images can be done by choosing files from media library, from your computer or using drag&drop function.

Where to use Gallery block?

Depending on the type of your website, you might want to create a complex photo gallery or simple image presentation. You can use Gallery block on:

• Your homepage
• Individual subpages created as albums of your photo gallery
• Product pages
• Blogpost

Gallery block settings

Apart from the various alignment options of the Gallery block itself, there are a couple of interesting options within this block, such as:

• Number of columns the images are lined into.
• Image cropping to match the same size (of the smallest image).
• Hyperlink to give you the option to link to another page or media file.

Image block

Image block is nothing else but the block to display an image on your website.

That’s right. If you just want to add an image to any of your pages, you should use Image WordPress block. It may be similar to other presented blocks, but there are significant differences that make it perfect for single images.

When to use Image block?

Image block should be used especially when the object displayed on the image is particularly important for your web visitor you want to:

• Catch web visitor’s attention with a specific image.
• Rādīt attēlu ar uzrakstu.
• Parādiet infografikas, kas palīdz apmeklētājiem labāk izprast apspriežamo jautājumu.

Image block settings

Viena no lielākajām WordPress Image bloka priekšrocībām ir attēlu izmēru opcijas. Jūs varat viegli mainīt attēla izmēru, velkot to aiz stūra, izvēlēties fiksētu izmēru pikseļos vai noteikt izmēru procentos.

Vēl viena nozīmīga iespēja ir ievades lauki alternatīvajam tekstam, uzrakstam un saitei. Es noteikti iesaku izmantot šos laukus, jo tiem ir liela nozīme lapas SEO optimizācijā.

Media & text block

Pārejam pie sarežģītākiem lapu izkārtojumiem, kurus varat izveidot, izmantojot multivides un teksta bloku. Šis WordPress pamatbloks ļauj jums apvienot multivides un teksta elementus blakus viens otram estētiskā un kontekstuālā veidā.

Where to use Media & text block?

Lai gan multivides un teksta bloks ir vispiemērotākais izmantošanai emuāra ierakstos, ar nelielu iztēli to var izmantot arī citur. Piemēram, varat izveidot skaistu produktu vai pakalpojumu pārskatu, izmantojot attēlu un tekstu blakus.

Neaizmirstiet pievienot pogas bloku Mediju un teksta bloka teksta sadaļai, ja tas tiek izmantots kā produkta/pakalpojuma pārskats. Šādā veidā jūs varat izveidot skaistu CTA sadaļu jebkurā lapā.

Advantages of Media & text block

• Kontekstuāli saderīgu attēlu un teksta apvienošana.
• Izvairīšanās no nepareizas attēla izvietošanas blogpostā.
• Palīdzība vietnes atsaucībai (izmantojiet funkciju "Sakraut mobilajās ierīcēs").

Media & text block settings

Aplūkojot mediju un teksta bloka iestatījumus, pamanīsiet diezgan daudz izlīdzināšanas iespēju, no kurām dažas ir unikālas, salīdzinot ar lielāko daļu citu bloku.

Interesants un noderīgs šī bloka iestatījums ir fona krāsa. Izkrāsojot apgabalu ap attēlu un tekstu, kas sader kopā, var vizuāli izcelt to savienojumu.

Saites ievietošana no WordPress versijas 5.4 (31.3.2020). Varat izvēlēties saiti, multivides failu vai pielikumu lapu.

Galda bloks

Tabulas bloks ir viens no piemēriem, kā WordPress uzlabojās pēc WordPress bloku redaktora ieviešanas versijā 5.0 un turpmākajās versijās. Ja agrāk, lai ievietojiet tabulu savā WordPress vietnē, bija nepieciešams spraudnis, tad tagad varat vienkārši izmantot tabulas bloku.

Where to use table block?

Tabulām ir liela nozīme noderīga satura sniegšanā labi sakārtotā un pārskatāmā veidā. Protams, lielākajā daļā tīmekļa vietņu ir izmantotas tabulas. Šeit ir tikai daži piemēri par tabulu izmantošanu dažādās tīmekļa vietnēs:

• Datu salīdzinājums
• Cenu tabulas
• Produkta tehniskā informācija
• Receptes
• Pārskats par dalības pakotnēm

Tas, ka galda bloks ir daļa no bezmaksas WordPress kodola, ir patiešām pārsteidzoši.

Table block settings

Ievietojot lapā tabulas bloku, ir jādefinē tabulas kolonnu un rindu skaits. Neuztraucieties, šis skaits nav fiksēts. Jebkurā laikā varat pievienot vairāk rindu un kolonnu (vai tās dzēst).

Pēc tam izvēlieties galda stilu: noklusējuma vai svītru. Pārejiet uz izlīdzināšanu un fontu stilu un, visbeidzot, aizpildiet tabulu, pirms pievienojat tai galīgo elementu.

Citas iespējas:

• Fona krāsa
• Fiksēta platuma šūnas
• Virsraksts
• Footer
• Saite (teksta ieraksts tabulā var veidot saiti uz citām lapām).

Which block would you like to see next?

Ceru, ka jums patika lasīt par mūsu atlasītajiem ļoti noderīgajiem WordPress pamatblokiem, kas ikvienam ir pieejami bez maksas. Lūdzu, dariet mums zināmu, par kuriem blokiem vēlaties lasīt tālāk vai kuras funkcionalitātes, jūsuprāt, vēl trūkst WordPress kodolā. Paldies, ka izlasījāt!