Вы ищете способ настроить стиль блочных кавычек на вашем сайте WordPress?
Цитаты часто являются наиболее запоминающейся частью вашей статьи. Они также являются наиболее часто используемой частью любого поста или страницы блога. Вот почему газеты и основные сайты СМИ настраивают свой стиль блока цитат, чтобы он выделялся.
В этой статье мы покажем вам, как настроить стиль блочных цитат в темах WordPress.
Зачем использовать блок-цитаты и настраивать их в WordPress?
Использование блочных кавычек в вашем контенте может улучшить пользовательский опыт на вашем сайте WordPress. С его помощью вы можете сделать так, чтобы выделенный участок текста выделялся на фоне остального контента и привлекал внимание читателей.
Например, вы можете использовать блочные кавычки для цитат авторов и влиятельных лиц, цитат из публикаций, отзывов ваших клиентов или выделения ценной информации для ваших пользователей.
Еще одним преимуществом использования блочных кавычек является то, что они могут увеличить социальную активность. Разрешение пользователям делиться цитатой в Twitter или Facebook (признана экстремистской организацией на территории РФ) может помочь вам получить больше последователей и улучшить видимость вашего бренда в социальных сетях.
Master Sidebars With WordPress Gutenberg Block Themes
По умолчанию WordPress предлагает блок Цитата в редакторе контента. Чтобы добавить его, просто перейдите в редактор WordPress и добавьте блок цитаты в нужное место контента.
Однако блок цитат по умолчанию не предлагает много возможностей для настройки. Вы можете изменить только размер текста и выбрать один из стилей по умолчанию в WordPress.
Итак, давайте рассмотрим, как можно настроить стиль блочных кавычек в темах WordPress. Мы покажем вам, как изменить стиль блочных цитат с помощью плагина WordPress, а также с помощью пользовательского CSS.
Метод 1: Настройте стиль блочной цитаты с помощью плагина
Простой способ настроить блок цитат на вашем сайте WordPress — использовать плагин Gutenberg Blocks — Ultimate Addons for Gutenberg. Это бесплатный плагин WordPress, который добавляет дополнительные блоки в редактор контента WordPress, включая настраиваемые блочные кавычки.
Сначала вам нужно будет установить и активировать плагин Gutenberg Blocks — Ultimate Addons for Gutenberg. Для получения более подробной информации см. наше руководство о том, как установить плагин WordPress.
Как только плагин будет активен, он автоматически переведет вас на страницу Настройки » UAG с вашей приборной панели WordPress.
По умолчанию, плагин активирует все дополнительные блоки, включая блок цитат, но вы можете выбрать деактивацию различных блоков для вашего сайта.
После этого вы можете редактировать любой пост и страницу блога. Как только вы окажетесь в редакторе контента WordPress, просто добавьте блок Blockquote в любое место вашего контента.
Далее вы можете ввести текст в область блочной цитаты.
В правом боковом меню вы найдете различные опции для настройки стиля блочной цитаты.
Например, вы можете выбрать один из двух макетов, включая современный и цитату. Затем вы можете использовать различные опции для настройки стиля оформления, толщины границы цитаты, ее цвета и многого другого.
Плагин также позволяет изменить цвет текста в цитате и отредактировать его шрифт.
Вы можете использовать шрифт по умолчанию для цитат или выбрать другой шрифт, чтобы текст выделялся. Кроме того, есть возможность изменить размер шрифта и высоту строки.
В плагине есть больше возможностей для настройки стиля блочной цитаты.
Для цитирования твитов вы можете ввести свой Twitter-аккаунт в поле «Имя пользователя» и изменить настройки значка Twitter. Есть возможность выбрать, показывать ли значок Твиттера и текст, оба или только значок. Плагин также позволяет изменять стиль, метку и многое другое.
Есть даже возможность полностью отключить отображение иконки Твиттера в блочных кавычках.
После того, как вы настроите свой блок цитат, просто опубликуйте пост или страницу блога.
Затем зайдите на свой сайт, чтобы увидеть блочную цитату в действии.
Метод 2: Добавьте пользовательский CSS для настройки стиля блокквот
Если вы не хотите использовать плагин WordPress, то добавление пользовательского CSS — это еще один способ настроить ваши блочные цитаты.
Вы можете использовать блок цитат по умолчанию в редакторе WordPress для добавления ваших блок-цитат. После этого просто введите пользовательский код CSS, чтобы изменить его стиль и внешний вид.
Чтобы добавить пользовательский CSS-код, вам сначала нужно перейти по ссылке Внешний вид » Настроить из вашей приборной панели WordPress. Откроется окно настройки темы WordPress.
В настройщике темы вам нужно нажать на опцию ‘Additional CSS’ в меню слева.
После этого вы можете ввести пользовательский CSS-код, чтобы изменить внешний вид и стиль блокквот.
Вот некоторые стили блочных цитат, которые вы можете использовать на своем сайте.
1. Классическая кавычка CSS
Обычно люди используют CSS background-image для добавления больших кавычек в blockquote. В этом примере мы использовали CSS для добавления больших кавычек.
blockquote < font-family: Georgia, serif; font-size: 18px; font-style: italic; width: 450px; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; background:#ececec; >blockquote:before < display: block; content: "201C"; font-size: 80px; position: absolute; left: -10px; top: -10px; color: #7a7a7a; >цитирование цитат < color: #999999; font-size: 14px; display: block; margin-top: 5px; >blockquote cite:before
2. Классическая цитата с изображением
В этом примере мы использовали фоновое изображение для кавычек.
blockquote < font: 16px italic Georgia, serif; width:450px; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 3px solid #ccc; margin: 5px; background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; >blockquote cite < color: #a1a1a1; font-size: 14px; display: block; margin-top: 5px; >blockquote cite:before
3. Простая блок-цитата
В этом примере мы добавили цвет фона и пунктирную левую границу вместо блочных кавычек. Не стесняйтесь играть с цветами.
blockquote < font-family: Georgia, serif; font-size: 16px; font-style: italic; width: 500px; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838; border-left:3px dashed #c1c1c1; background:#eee; >blockquote cite < color: #999999; font-size: 14px; display: block; margin-top: 5px; >blockquote cite:before
4. Бело-сине-оранжевая блок-цитата
Блокквоты можно сделать выделяющимися, и они могут быть настолько красочными, насколько вы захотите.
blockquote < font-family: Georgia, serif; font-size: 16px; font-style: italic; width: 450px; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #FFF; border-left:5px solid #FF7F00; background:#4b8baf; >blockquote cite < color: #efefef; font-size: 14px; display: block; margin-top: 5px; >blockquote cite:before
5. Использование веб-шрифтов Google для блочных кавычек в CSS
В этом примере CSS для блок-цитат мы использовали шрифт Droid Serif из библиотеки веб-шрифтов Google. Вы можете использовать любой пользовательский шрифт, который вы хотите. Просто замените шрифт в коде на семейство шрифтов, которое вы хотите использовать.
blockquote < @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic); font-family: 'Droid Serif', serif; font-size:16px; font-style:italic; width:450px; background-color:#fbf6f0; border-left:3px dashed #d5bc8c; border-right:3px dashed #d5bc8c; text-align:center; >blockquote cite < color: #a1a1a1; font-size: 14px; display: block; margin-top: 5px; >blockquote cite:before
6. Закругленная угловая блок-цитата
В этом примере у нас есть блок цитаты с закругленными углами, и мы использовали drop shadow для границ.
blockquote < width: 450px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic; >blockquote cite:before
7. Использование градиента в качестве фона для блок-цитат
В этом примере CSS блок-цитаты мы использовали CSS-градиент, чтобы улучшить фон блок-цитаты.
Градиенты CSS сложны из-за кросс-браузерной совместимости. Мы рекомендуем использовать генератор градиентов CSS, например CSS Gradient.
blockquote < width: 450px; color:#FFF; background: #7d7e7d; /* Old browsers */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 1px #ccc; font-style: italic; >blockquote cite:before
8. Блокцитата с фоновым рисунком
В данном примере мы использовали фоновое изображение в качестве шаблона для блок-цитаты.
blockquote < width: 450px; background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic; >blockquote cite:before
Примечание: Вам нужно будет заменить URL фонового изображения в коде CSS на URL изображения, загруженного на ваш сайт WordPress.
9. Использование нескольких изображений в фоне блокнота
Вы можете использовать несколько изображений в фоновом блоке цитаты с помощью CSS. Например, мы использовали псевдоэлемент blockquote:before, чтобы добавить еще одно фоновое изображение к blockquote.
blockquote < width: 450px; background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png'); border: 1px solid #ccc; box-shadow: 1px 1px 1px #ccc; font-style: italic; >blockquote:before < position:absolute; margin-top:-20px; margin-left:-20px; content:url('http://example.com/wp-content/themes/your-theme/images/pin.png'); >blockquote cite:before
Примечание: Вам нужно заменить URL-адреса фоновых изображений в коде CSS на изображения, загруженные на ваш сайт.
Мы надеемся, что статья помогла вам узнать, как настроить стиль blockquotes в темах WordPress. Вы также можете ознакомиться с нашим руководством о том, как выбрать лучшее программное обеспечение для дизайна и лучшие бесплатные услуги хостинга веб-сайтов.
Источник: www.wpbeginner.com