ГлавнаяЛайфстайлИнтернетКак добавить крутой эффект ввода на ваш сайт WordPress

Как добавить крутой эффект ввода на ваш сайт WordPress

Говорят, содержание – король, а внешний вид – королева. И это как нельзя более верно в нынешнем состоянии веб-ресурсов. Привлекательный дизайн поможет владельцам веб-сайтов привлечь внимание своих посетителей. Помимо хорошо продуманного макета, гармоничного сочетания цветов и красивых шрифтов, один из способов, который владельцы веб-сайтов могут использовать для мгновенного привлечения внимания посетителя, — это использование движущихся текстов, напоминающих пишущую машинку. Если вы являетесь пользователем WordPress, вы можете легко добиться этого эффекта с помощью плагина под названием Typed Js.

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

Установка и настройка плагина

Установить плагин в WordPress очень просто, особенно для тех, кто какое-то время работал с этой платформой. Все, что вам нужно сделать, это войти в свою административную панель и использовать меню «Плагины ->Добавить новый» на левой боковой панели. Найдите «Typed Js» в репозитории плагинов, затем установите и активируйте его.

типизированный-mte-install-плагин

Теперь вы готовы добавить новый эффект Typed Js. Процесс более или менее похож на добавление нового сообщения. Сначала перейдите в меню «Типизированный ->Добавить новый» на левой боковой панели, затем дайте имя новому типизированному эффекту.

Важно! Обратите внимание на «Сгенерированный короткий код». Это строка между «[квадратными скобками]». Скопируйте все, включая скобки, и вставьте шорткод в любое место, где хотите. Другой набор строк будет иметь другой короткий код.

типизированные-MTE-настройки

В разделе «Введенные параметры» вы можете добавить строки слов/фраз/предложений, которые вы хотите отображать, в том порядке, который вы предпочитаете. Используйте кнопку «Плюс (+)», чтобы добавить новую строку, и кнопку «Минус (-)», чтобы удалить запись.

типизированный-mte-типизированные-опции-1

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

типизированный-mte-типизированные-опции-2

Еще одна вещь, которую вы можете настроить, — это отображение, например шрифт и цвет.

типизированные-mte-display-options

Завершив все настройки, нажмите «Опубликовать» или «Обновить».

напечатанное-mte-публиковать или обновить

Использование эффекта в вашем WordPress

Как упоминалось ранее, чтобы использовать эффект «Типизированный», вам необходимо скопировать шорткод и вставить его в то место, где вы хотите, чтобы он отображался. Для своего веб-сайта я собираюсь использовать его на целевой странице, созданной с помощью Конструктор страниц SiteOrigin .

Сначала я создаю новую страницу через «Страницы ->Добавить новую». Затем я перехожу на вкладку «Конструктор страниц», добавляю новую «Строку», устанавливаю для нее один столбец и добавляю виджет «SiteOrigin Hero» внутри строки.

типизированный-mte-сайт-строитель

Затем я открываю фрейм и редактирую контент так же, как и обычные записи WordPress. Я вставляю шорткод, созданный в предыдущем посте.

типизированные-mte-edit-widgets

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

напечатанная кнопка редактирования MTE

И вот окончательный результат.

типизированный-mte-конечный результат

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

Что вы думаете об эффекте Typed Js? Можете ли вы использовать его на своих сайтах WordPress? Поделитесь своими мыслями и мнением в комментариях ниже.

ПОХОЖИЕ СТАТЬИ

Популярные записи