• Facebook
  • LinkedIn
  • EN EN EN en
  • LV LV LV lv
  • RU RU RU ru
[email protected] | +371 29394520
Coma Web Development
  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
    • Обслуживание сайтов на WordPress
    • LiteSpeed WordPress хостинг
    • Shared WordPress хостинг
  • Работы
    • Сайты-визитки
    • Корпоративные сайты
    • Интернет-магазины
  • О нас
    • Преимущества
    • Вакансии
  • Цены
  • FAQ
  • Отзывы
  • Контакты
  • Menu Menu
features

Как добавить Feature Boxes с иконками в WordPress

Nov 29, 2016/0 Comments/in WordPress, Плагины /by Vadim Pavlovich

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

Добавляем Feature Boxes с иконками на сайт

Первым делом вам надо установить и активировать плагин Advanced WP Columns. После активации зайдите в Settings > Advanced WP Columns, чтобы настроить плагин. Пролистайте вниз до Column class и введите в поле mycolumns.

WordPress

Затем вам понадобится плагин, чтобы вставить красивые иконки в ваш Feature boxes. Установите и активируйте плагин WP SVG Icons. Теперь вы готовы к созданию Feature Boxes. Начните с редактирования страницы, на которой вы хотели бы их видеть. Вы заметите две новые кнопки в окне редактора постов. Первая – Add Icon – находится прямо над редактором. Следующая находится последним элементом в меню визуального редактора. Если ваш визуальный редактор показывает всего один ряд кнопок, то вам надо щелкнуть по кнопке, которая разворачивает панель кнопок.

WordPress

Сперва вам надо щелкнуть по кнопке Advanced WP Columns. В появившемся окне щелкните по Empty и затем выберите число колонок, которое вы хотите добавить.

WordPress

После этого надо щелкнуть по каждой колонке, чтобы добавить какой-нибудь текст. Если вы не добавите текст сейчас, то потом будет сложно видеть колонки в редакторе постов. Когда закончите, нажмите по кнопке Add Columns внизу. Теперь вы увидите колонки в своем редакторе постов. Следующим шагом будет добавление иконок над текстом. Наведите мышиный курсор на текстовое поле в первой колонке и щелкните по клавише ввода. Это уберет текст вниз и создаст место для иконок. Вам надо теперь щелкнуть по кнопке Add icon и вы увидите подобное окошко.

WordPress

Оттуда вы можете выбрать иконку, которую хотите использовать, просто щелкнув по ней. Затем надо щелкнуть по кнопке span, чтобы обернуть ее в элемент . Наконец, щелкните по кнопке insert. Теперь вы увидите шорткод для иконки SVG в своем редакторе постов. В зависимости от названия выбранной иконки шорткод будет выглядеть подобным образом:

[wp-svg-icons icon=”rocket” wrap=”span”]

Повторите процесс, чтобы добавить иконки в другие Feature Boxes. Как только закончите, нажмите по кнопке Update, чтобы сохранить свою страницу. Вы почти закончили, но если сделаете предпросмотр страницы, то заметите, что иконки слишком маленькие, а ваши feature boxes едва заметны.

WordPress

Вам надо будет добавить следующий CSS-код в таблицу стилей своего шаблона:

span.wp-svg-rocket.rocket { 
font-size:100px; 
} 

span.wp-svg-cloud.cloud { 
font-size:100px; 
} 
span.wp-svg-headphones.headphones { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

Не забудьте отредактировать CSS, чтобы он соответствовал названиям иконок, которые вы используете.

WordPress


Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520


Поделиться публикацией
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
  • Share on Vk
  • Share by Mail

Search

Новые работы в портфолио

  • Lofoten Dyreklinikk 1Lofoten DyreklinikkMar 18, 2021 - 12:36
  • My Fruits 2My FruitsJan 28, 2021 - 19:59
  • The Raven 3The RavenJan 15, 2021 - 19:05
  • Skyn 4SkynDec 22, 2020 - 17:11
  • Tetra Hemp Company 5Tetra Hemp CompanyDec 22, 2020 - 17:07

О нас

Мы разрабатываем сайты на WordPress. Для нас очень важны красота, скорость, удобство использования и качественный код созданных нами проектов.

Каждый проект планируется, оценивается, разрабатывается и поддерживается индивидуально.

Контакты

Мы полностью удалённая команда. Своей базой мы считаем Ригу и можем при необходимости встретиться с вами.

+371 29394520
[email protected]

SIA YUVA
Reģ. Nr.: 42403034996
PVN reģ. Nr.: LV42403034996
Банк: A/S Swedbank
Счёт: LV16HABA0551038070386

Навигация

  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
  • О нас
  • FAQ
  • Отзывы
  • Блог
  • Контакты
Developed in coma.lv (естественно). Работаем с 2010 года.
  • Facebook
  • LinkedIn
Scroll to top