Как настроить элемент цитаты Weebly Block?

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

Связанный: Как добавить блочные кавычки в WordPress?

Настроить цитаты Weebly Block

Есть несколько способов изменить стиль элемента цитаты по умолчанию на вашем сайте:

  • Скопируйте стиль из другой темы Weebly
  • Настроить существующий элемент цитаты блока
  • Использование собственного CSS
  • Вставить одинарную цитату с помощью встроенного элемента кода

Обсудим подробно каждый вариант.

1. Скопируйте CSS из другой темы

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

  • Войдите в свою учетную запись Weebly и отредактируйте текущий сайт.
  • Добавьте элемент цитаты из блока с фиктивным текстом.
  • Идти к “Тема> Изменить тему” и “Предварительный просмотр » тема.
  • Проверьте стиль элемента цитаты блока, нравится ли он вам.
  • «выберите»Тема с элементом цитаты по вашему выбору.
  • В новой теме перейдите к «main.less“Файл доступен в разделе”Тема> Изменить HTML / CSS«.
  • Найдите слово «цитата» и скопируйте стиль в буфер обмена. Возможно, вам придется заглянуть в другие файлы .less, если стиль блочных кавычек недоступен в main.less.
  • Теперь снова вернитесь к «Тема> Выбрать тему” и “выберите»Ваша оригинальная тема.
  • Идти к “main.less“Файл и замените”цитата»Стиль со скопированным.
Настройка элемента цитаты Weebly Block

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

Заметка: В некоторых темах элемент стиля просто «цитата » а некоторые могут иметь «#wrapper blockquote«.

2. Изменение существующего CSS блочной цитаты

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

Перед изменением рекомендуем проверить исходный код с помощью браузера Google Chrome. Это поможет вам определить, какой файл содержит код, и легко изменить код в этом файле.

3. Замените CSS по умолчанию на собственный.

Если вам не нравится какой-либо стиль элемента цитаты из существующей темы, вы можете написать свой собственный CSS и заменить существующий стиль, как описано выше. Вот простой пример кода CSS, вы можете настроить параметры в соответствии с вашими потребностями:

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #ffffff;
border-left:5px solid #ff7f00;
background:#4b8baf;
}

Просто замените значение по умолчанию «цитатаСтиль под «main.less”С этим кодом, и вы увидите, что элемент цитаты блока изменен, как показано ниже:

Стиль элемента Weebly Block Quote
Стиль элемента Weebly Block Quote

4. Вставить блочную цитату с элементом встроенного кода

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

Цитата Bootstrap с настраиваемым стилем
Цитата с индивидуальным стилем

Вы можете настроить цвет и границы для создания различных стилей блочных кавычек по мере необходимости. Ниже приведен код CSS и HTML для цитаты произвольного блока. Вы должны скопировать и вставить этот код в “Код для вставки”Элемент.

.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 20px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
<blockquote class="webnots_quote">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</blockquote>

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

Ознакомьтесь с нашей статьей о том, как добавить элементы цитат в стиле Bootstrap на свой сайт.

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

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

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