Як налаштувати власний стиль для цитат в темі wordpress

Цитати найчастіше є найбільше запам'яталась частиною вашої статті. Тому газети і великі медіа-сайти зазвичай створюють свій стиль для цитат, щоб виділити їх. У цій статті ми покажемо вам, як зробити свій стиль для блоків цитат в WordPress, а також покажемо 9 красивих прикладів стилів для блоків цитат.

WordPress дозволяє вам додавати цитати в ваші записи і сторінки, використовуючи панель інструментів у вашому розділі створення записів і сторінок.

Тепер вам потрібно використовувати один із запропонованих нижче стилів і перевизначити стилі ваших блоків цитат. Якщо такого стилю раніше не було, просто додайте його. Також можна і потрібно комбінувати кілька стилів, щоб створити стиль на ваш смак.

1. Класична CSS цитата

Зазвичай для додавання великих лапок використовують CSS background-image. Так ми зробили в цьому прикладі.

Як налаштувати власний стиль для цитат в темі wordpress

2. Класична цитата з зображенням

У цьому прикладі для лапок ми використовували фонове зображення.

Як налаштувати власний стиль для цитат в темі wordpress

3. Проста цитата

У цьому прикладі ми додали фоновий колір і пунктирну лінію зліва замість лапок. Можете грати з квітами, як вам заманеться.

Як налаштувати власний стиль для цитат в темі wordpress

4. Біло-синьо-помаранчева цитата

Ви можете зробити цитату настільки кольоровий. наскільки захочете.

Як налаштувати власний стиль для цитат в темі wordpress

5. Цитата з шрифтами Google Web Fonts

У цьому прикладі CSS для цитати ми використовували шрифт Droid Serif з бібліотеки шрифтів Google.

Як налаштувати власний стиль для цитат в темі wordpress

6. Цитата з округленими кутами

У цьому прикладі у нас цитата з округленими кутами. ми також використовували тінь для кордонів.

Як налаштувати власний стиль для цитат в темі wordpress

7. Метод найшвидшого фон для цитати

Як налаштувати власний стиль для цитат в темі wordpress

8. Цитата з текстурою на тлі

У цьому прикладі ми використовували текстуру на тлі цитати.

Як налаштувати власний стиль для цитат в темі wordpress

9. Кілька зображень в тлі цитати

Ви можете використовувати кілька зображень в тлі цитати. У цьому прикладі ми використовували елемент blockquote: before. щоб додати ще одне фонове зображення в цитату.

Як налаштувати власний стиль для цитат в темі wordpress

Джерело: WPBeginner.com

А чи можна зробити кілька різних видів блоквотов, щоб використовувати їх одночасно? Наприклад, blockquote і blockqoute1 в стайл.цсс або якось ще? Треба просто зробити новий блоквот (або кольоровий блок, без різниці) з певною структурою, не змінюючи "старі" блоквоти.

Цікаве питання! Чи не стикалися з таким раніше, але напевно багатьом буде цікаво дізнатися. Якщо знайдете рішення, напишіть!