Подчертаване на съдържанието в WordPress: Блокцитат срещу Pullquote

Подчертаване на съдържанието в WordPress: Блокцитат срещу Pullquote

When posting a new piece of content, it’s important to pay attention to its overall graphic layout – not just to make the page look good. Proper highlighting of certain sections increases clarity and attracts the visitor’s attention to the key parts of your content. As a result, the user will get the most essential information even if he doesn’t read the entire article and only skim through it instead.

Today we’ll focus on highlighting text in WordPress editor using quotes. We’ll show you how to do block quotes and pullquotes in specific situations and explain the difference between them.

The article answers the following questions:

When to use the blockquote

The term blockquote was created by shortening the phrase block quotations which implies that it is a citation of an individual piece (block) of content. Usually it is not the text extracted from the article itself. Blockquotes refer to external sources. You can use them as a quotation of:

  • Another source and professional publications
  • Quotes of famous people
  • Testimonials from happy customers

Blockquotes drive attention to a certain piece of content. They mark the information as important by graphically differentiating it from the rest of the content. Blockquotes are often visually indicated by quotation marks or inverted commas. However, their final appearance depends on the WordPress theme you’re using.

How to insert a blockquote in WordPress editor

There is a special block for inserting a blockquote into a Page or Post called Quote Block. It can be added to your page very easily:

1. The first option is to click the “+” symbol in the top bar or within the editor where you want to place the block. Then look up the word “quote” in the search bar.

Добавяне на блок за цитати
Adding Quote block by clicking on “+“

2. The second option is to search for a block by typing its name after a forward slash “/”.

Добавяне на блок за цитати с помощта на наклонена черта "/"
To find and add a Quote block you can use also slash “/”

All done. You have created a block with a placeholder and with the text “Write quote.”

Block styles and formatting

Newly added Quote Block has a default style and formatting. There is a vertical line to highlight the quote and to separate it from the rest of your content. However, you can change the style to “Large” by clicking the quotation marks (“) icon in the toolbar or choosing “Styles” whitin the Inspector on the right hand side.

Large Style removes the vertical line, increases the font size and changes it to Italic. Although the final appearance of the quote on the preview page depends on the design of the WordPress theme you’re using.

Промяна на стила на блока за цитати от По подразбиране на Голям
See how different Quote block might look when you change its block style from Default to Large

Blockquotes formatting is similar to formatting a paragraph. Quotations format could be set to Bold or Italic, you can even use a hyperlink (URL) within a quote. Text alignment can be left, center, or right. The Quote block itself is always fixed to the width of the content.

Transform Blockquote to another block type

You can transform blockquote to another block type with one click. The advantage is that you can switch directly from Quote block to Pullqoute and vice versa. Here’s a complete list of all available blocks to choose from:

  • Параграф
  • Pullqoute
  • Заглавие
  • Списък

Pull quotes: When to use them?

While blockqoutes refer to external sources, pull quotes highlight the most important information extracted directly from the content on your page. This means that they drive attention to specific paragraph within your Post or Page and emphasize its significance.

How do the Pull quotes work?

  • As a graphic element that enhances the content and its structure
  • They catch the user’s attention when scrolling the page
  • They can be used as subheadings or headers on a page

How to add a Pullquote block

Before the release of WordPress block editor (versions lower than 5.0) it was necessary to style the pull quotes in CSS. Now, thanks to the Pullquote block, you can add them with a few clicks. Inserting the Pullquote block into the page is exactly the same as inserting the Quote block. Just use the name of this block when searching, instead.

Customization of Pullquote block

Pullqoute block offers 2 basic styles – Default and Solid Color. You can switch between them in the toolbar or in the Inspector. How do they look like?

The default style is characterized by two horizontal lines, at the top and at the bottom of the quote. You can change the color of those two lines, although the background will remain white.

Pullquote Стил по подразбиране
Default style of Pullquote

On the other hand, Solid Color is a style in a simpler design and without any lines. Compared to the Default style, the font size is slightly larger and you can choose the background color of the entire block when using a Solid Color style.

Твърд цвят
Твърд цвят на блока Pullquote

Няма значение кой стил сте избрали, можете да променяте цвета на шрифта и в двата стила. Налично е и стандартно форматиране на абзаци, като удебеляване, курсив или вмъкване на URL.

Advanced Pullqoute block alignment options

За разлика от блока Quote, блокът Pullqoute предлага повече възможности за подравняване: широка ширина или пълна ширина, в допълнение към стандартното подравняване (ляво, дясно, център).

Благодарение на широкоекранния изглед pullqoute може да се използва като заглавие или подзаглавие. Той не само може да раздели добре съдържанието на страницата, но и служи като скала, за да подтикне потребителя да продължи да разглежда страницата. Моля, не забравяйте, че крайният вид на Pullquote зависи от дизайна на вашата тема. Не всички теми поддържат и разширени опции за подравняване.

Подравняване по цялата ширина на блока Pullqoute
Pullqoute, който може да работи като хедър (разтегнат на цяла ширина)

Темата Citadela ви позволява да избирате широка ширина или пълна ширина без никакви проблеми.
Изтеглете го и се уверете сами!

Transforming to another Block type

Блокът Pullquote има ограничени възможности за трансформация в друг тип блок. Всъщност блокът Pullquote може да се трансформира само в блок Quote.

Conclusion: Quote block or Pullquote block?

Кога да използваме блок Цитат вместо блок Изтегли цитат и обратното?

Препоръчваме блок "Цитат", когато представяте мнения и цитати на известни личности или за цитиране на външни източници. Цитатът трябва да бъде текст, който потребителите няма да намерят директно в Страница или Публикация. Той е идеален за препоръки, тъй като графично отделя мненията от другото съдържание (както по отношение на дизайна, така и на форматирането - например чрез използване на курсив). От пръв поглед е ясно, че става въпрос за цитат и следователно за нещо, което трябва да бъде подчертано.

Блокът Pullqoute трябва да се използва за директно подчертаване на ключовата информация, извлечена от текста на страницата. Тъй като Pullquotes са откъси от съдържанието, те позволяват на посетителите на вашата уебстраница да научат най-важното послание, без да четат статията обстойно. Въпреки това, ако информацията в блока Pullquote е наистина атрактивна, тя ще насърчи посетителя да прекара повече време на вашия сайт. Освен това можете да използвате Pullquoute и като заглавие или като заместител на субтитрите.

5 мисъл за „Highlighting content in WordPress: Blockquote vs. Pullquote

  1. Здравейте Ivi,
    благодаря за това ръководство за използване на wordpress blockquote по правилния начин, опитах се да го добавя чрез редактора на моята тема и почти разбих всичко. Благодаря отново.

    Моля, какъв плъгин за таблици със съдържание на WordPress използвате? Тя е красива и бих искал да я приложа на моя сайт.

    1. Здравейте, Bolarisa,

      Благодаря за комплимента. Моля, разгледайте подробната информация, публикувана на адрес: https://www.ait-themes.club/create-table-in-wordpress-without-plugin-blog/

      С уважение!
      Златко
      Екип на AIT

  2. Здравейте,
    Това е наистина добро четиво. Благодаря за споделянето!

  3. В моята извадка за оформлението на темите на Citadela Pro Plugins не можах да намеря как да променя снимката в цитата за изтегляне

    https://prnt.sc/v26fce

    1. Здравейте,

      Благодаря за написаното. Бихме искали любезно да ви помолим да проверите нашата база знания и/или документация с видео уроци:
      https://www.ait-themes.club/ait-themes-documentation/
      Или не се колебайте да публикувате технически въпрос директно в нашата специална система за поддръжка. Моля, влезте в профила си на адрес https://system.ait-themes.club/support/add-question.

      С уважение!
      Златко
      Екип на AIT

Коментарите са затворени.