Как создавать и настраивать цитаты в WordPress?

Многие авторы контента являются экспертами в написании длинных и исследуемых материалов. Однако в статье отсутствует интерактивная часть для привлечения пользователей. В редакторе WordPress Gutenberg есть множество блоков, которые можно использовать для создания привлекательного контента. Вам не нужно устанавливать какое-либо дополнительное программное обеспечение и форматировать прямо в онлайн-редакторе сообщений со встроенными блоками. Цитаты – один из таких интерактивных блоков, которые вы можете использовать для вставки важного текста для выделения. В этой статье давайте рассмотрим, как создавать цитаты в WordPress и настраивать их для привлечения внимания.

Связанный: Элементы цитаты для сайта Bootstrap.

Создавайте цитаты в WordPress

Войдите в панель администратора WordPress и перейдите в редактор сообщений. вы можете создать новое сообщение, перейдя в «Сообщения> Добавить новый», или отредактировать любое существующее сообщение, чтобы вставить элемент цитаты. Редактор WordPress Gutenberg предлагает три похожих блока для вставки цитат – Quote, Pullquote и Verse.

Все эти блоки встроены в редактор Gutenberg, и вы можете вставлять их в любое место вашего сообщения. Вы можете использовать все эти блоки, чтобы вставить важное высказывание от вас или кого-то, пословицу или раздел в свою статью.

Выделите свой собственный текст как цитату.

Вставка цитат в контент

Щелкните значок + и выберите кнопку «Просмотреть все». вставить блок цитаты.

Блок цитат в Гутенберге

Блок цитат состоит из двух частей – цитаты и цитирования.

Стиль цитаты по умолчанию
Стиль цитаты по умолчанию

После ввода цитаты / цитирования выберите цитату / ссылку. Нажмите кнопку с тремя точками на блоке и выберите «Цвет текста». Теперь вы можете применять разные цвета к тексту цитаты / цитаты. Кроме того, вы можете связать текст цитаты с внутренней или внешней ссылкой.

Изменить цвет текста в цитате
Изменить цвет текста в цитате

Точно так же вы можете изменить стиль на больший в настройках блока боковой панели.

Изменить большую цитату в стиле
Изменить большую цитату в стиле

Нажмите кнопку «Предварительный просмотр», чтобы просмотреть цитаты о том, как это выглядит. Вы можете установить «Стиль по умолчанию» на боковой панели на «Большой» или «По умолчанию», чтобы цитата по умолчанию была в выбранном стиле, и вам не нужно было менять ее каждый раз.

Помните, что стиль цитат зависит от стиля вашей темы. Поэтому один и тот же блок цитат может выглядеть по-разному на разных сайтах или с разной тематикой.

Связанный: Как создать элемент цитаты на сайте Weebly?

Создание Pullquote в Контенте

Откровенно говоря, pullquote – это то, что нам нравится больше, чем блок цитат. После вставки цитаты вы можете сделать ее сплошным цветом, чтобы добавить цвет фона. Это очень полезно для демонстрации отрывка из вашей статьи, чтобы пользователи могли запомнить выделенный контент.

Создать блок Pullquote
Создать блок Pullquote

Если у вас длинный контент, добавьте цитату и текст вместе с блоком Columns, как показано ниже.

Использование Pullquote в столбцах
Использование Pullquote в столбцах

Вставка блока стихов

Точно так же вы можете вставить блок стихов, чтобы продемонстрировать привлекательный фрагмент вашего контента. Как видите, стихотворный блок не имеет особых настроек.

Вставить блок стихов
Вставить блок стихов

В большинстве тем мы заметили, что стихотворный блок фактически использует предварительно отформатированный стиль. В этом случае вы увидите такой же эффект отформатированного текста и для стиха.

Использование пользовательских цитат

WordPress позволяет настраивать блоки по-разному.

1. Использование пользовательского CSS с блоком кавычек

добавить собственный класс CSS в раздел «Дополнительно» в настройках блока. Например, вы можете добавить имя класса как blockquotecss в разделе «Дополнительно».

Добавить собственный класс CSS в блок
Добавить собственный класс CSS в блок

И вставьте следующий настраиваемый CSS в раздел «Внешний вид> Настройка> Дополнительные CSS».

.blockquotecss {
            font-family: monospace;
            padding: 25px !important;
}
Дополнительный CSS в настройщике
Дополнительный CSS в настройщике

В приведенном выше примере мы использовали моноширинный шрифт в качестве семейства шрифтов и усилили отступ 25 пикселей с помощью атрибута! Important. Поскольку стиль блока зависит от темы, в большинстве случаев его сложно перезаписать с помощью дополнительного CSS. Вы можете найти подходящие стили и настроить блоки цитат, цитат и стихов на своем сайте.

2. Использование блочной цитаты из шаблонов

WordPress представил «Шаблоны» с версии 5.5. Вы можете вставлять сгруппированные блоки с произвольным стилем, и цитата с блоками изображений является одним из доступных вам шаблонов по умолчанию. Нажмите клавишу ввода или создайте блок абзаца и введите / quote для фильтрации всех блоков цитат. Либо нажмите значок + в верхнем левом углу редактора и выберите блок цитаты в разделе «Шаблоны».

Шаблон цитаты в WordPress
Шаблон цитаты в WordPress

Это будет выглядеть примерно так, как показано ниже, и мы добавили цвет фона к предопределенному блоку шаблона цитаты.

Карандашный рисунок Дон Кихота

Успех или неудача – это не то, чего вы достигаете, а то, как вы живете.

– webnots.com


Это сэкономит вам много времени, и вы сможете создать многоразовый блок для использования в любом месте вашего сайта с тем же дизайном.

3. Использование настраиваемого блока HTML

Использование собственного CSS в настройщике – хороший вариант. Однако WordPress загрузит пользовательский CSS на каждую страницу вашего сайта, независимо от того, есть ли на странице цитата или нет. Следовательно, вы можете использовать пользовательский элемент HTML для добавления пользовательских цитат, которые будут загружаться только на этой странице.

Используйте Custom HTML, чтобы настроить цитату для одного сообщения.

Вставьте пользовательский элемент HTML в область содержимого и вставьте следующий код в раздел HTML.

<style>
.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0 0 0 20px;
    color: #ffffff;
    font-size: 20px;
    padding: 20px;
    font-family: monospace;
}
</style>
<blockquote class="webnots_quote">
"Success or failure is not what you achieve, it’s how you live."
</blockquote>

В редакторе это должно выглядеть так:

HTML для произвольной цитаты
HTML для пользовательских цитат

Теперь нажмите «Предварительный просмотр» на блоке, чтобы мгновенно просмотреть цитату внутри блока Custom HTML. Это должно выглядеть так:

Цитата на левом поле
Цитата на левом поле

Как уже упоминалось, код загрузится только на той странице, где вы вставляете эту индивидуальную цитату. Кроме того, вы можете легко настроить код, чтобы отображать разные стили кавычек. Например, измените ширину границы на правую сторону, используя «border-width: 0 20px 0 0;».

Пользовательская цитата с правым полем
Пользовательская цитата с правым полем

Вы можете смешивать и сопоставлять стили для создания различных стилей блочных цитат, как показано на демонстрационной странице здесь.

Заключительные слова

Многие веб-мастера не используют блоки Гутенберга в своем контенте. Мы показали примеры того, как использовать цитаты, такие как блоки цитат, цитат и стихов. Кроме того, вы также можете использовать собственный блок HTML для вставки собственных стилей цитат. Мы рекомендуем вам использовать цитаты, чтобы продемонстрировать важный контент, который вы хотите, чтобы читатель запомнил после прочтения длинной статьи.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *