Содержание

Социальные виджеты. Как изменить язык? » Adobe Muse Уроки

от Дмитрий Шаповалов

Социальные виджеты. Как изменить язык?

При работе в русскоязычной версии Adobe Muse и создании проекта “по-умолчанию” Все социальные виджеты программы размещаются на страницы сайта тоже на русском языке. Но что делать если Вам например необходимо разместить виджет на английском языке? Менять язык программы и работать в англоязычной версии будет неудобно, если вы привыкли к русскоязычной версии, да и вообще если не очень хорошо понимаете на иностранном языке.

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

Социальные виджеты. Как изменить язык? Проблема.

Этот видеоурок у нас о том, как размещать англоязычные виджеты в русскоязычной программе Adobe Muse.

Допустим, вы делаете сайт на английском языке для своих клиентов, но у вас стоит русскоязычная программа Adobe Muse. Я уже разместил на данном сайте два виджета от facebook и два виджета от twitter. Эти виджеты вы сможете найти в библиотеке мини-приложений программы Adobe Muse. Это стандартные виджеты. Находятся они в закладке «Социальная сеть» – виджеты facebook и виджеты twitter.

Как вы видите, сейчас все виджеты у нас подписаны – кнопка «нравится», кнопка «подписаться» – на русском языке. И все сопроводительные надписи сейчас здесь также на русском языке. Все дело в том, что для англоязычного сайта все эти надписи должны быть на английском языке. Это очень частый вопрос, и я решил ответить на него в этом видеоуроке.

Социальные виджеты. Как изменить язык? Решение.

Проблема решается очень просто. Мы заходим в меню «Файл», выбираем подменю «Свойства сайта». И все, что нам нужно сделать – это поменять язык сайта с русского на английский. Я выбираю здесь английский язык, например, США. Нажимаю «ОК». И вы видите, что все виджеты, которые я разместил в программе, автоматически начинают исправляться. Исправляются все надписи, и изменяются все кнопки. И теперь все у нас выглядит на английском языке. Таким образом, работая в русскоязычной программе Adobe Muse, вы сможете размещать англоязычные виджеты от facebook, от twitter и остальные.

И все они будут выглядеть на английском языке.

На этом данный видеоурок закончен. Надеюсь, вам стало все понятно. Подписывайтесь на мой канал, заходите в группу в ВКонтакте. Ставьте лайки, пишите комментарии внизу. Смотрите также Базовый курс обучения по программе Adobe Muse. А я на этом прощаюсь с вами. До следующих видеоуроков!

Автор видеоурока:
Дмитрий Шаповалов

Простое подключение шрифтов в Adobe Muse

В этой статье мы подробнее рассмотрим возможности работы с текстом в программа Adobe Muse, типы и подключение шрифтов.

Типы шрифтов и добавление Typekit

В разделе «Текст» есть параметры и типы шрифтов: последние использованные шрифты,  веб-шрифты, шрифты, соответствующие веб-палитре(те, которые правильно отображаются в устройствах), системные шрифты(те шрифты, которые есть у вас на компьютере, экспортируются в виде изображения, и не индексируются с помощью поисковых систем, значит Яндекс и Google не увидят текст и его не найдут люди). Нужно использовать не системные шрифты, а шрифты, соответствующие веб-палитре, либо веб-шрифты, которые подгружаются с сервера и позволяют использовать не стандартные версии.

Чтобы добавить шрифт, кликаем «Добавить веб-шрифты», открывается палитра Typekit (библиотека Adobe Muse, которая подключает нестандартные шрифты, отображающиеся в виде текста). Находим нужный шрифт здесь, и он автоматически подгружается. Теперь выбираем его в библиотеке со шрифтами, он загружается к проекту. Теперь выбираем его в разделе «Веб-шрифты». Многие шрифты не поддерживают кириллические символы. Внизу я прикрепил таблицу со шрифтами, которые поддерживают кириллицу. Используйте ее и ни в коем случае не используйте шрифты, которые экспортируются в виде картинки. Они никак не индексируются поисковиками.

Как подключить Google Fonts

На сайте Google fonts,  отфильтруйте шрифты по скрипту, выберите только кириллическое начертание. Если вы хотите использовать нестандартный шрифт, добавьте его в коллекцию «add to collection» нажмите « use», выберите нужные начертания. Из пункта «3. Add this code to your website»  скопируйте код и вставьте в Adobe Muse в свойства страницы в html для head. Перейдите на новую строчку, нажмите Enter и напишите следующее: <style> Н1 {в скобках копируем всё из раздела «4»}< /style>.  Нажимаем ОК и выделяем текст, который редактируем и пишем что это h2 (заголовок). Таким образом мы указали соответствие между двумя заголовками.

Как подключить свой шрифт

Что бы установить в Adobe Muse шрифт со своего компьютера сначала скачайте его. Я рекомендую паблик Вконтакте. Здесь в меню выбираете кириллицу, выбираете подходящий шрифт и скачиваете.У большинства шрифтов есть правообладатель, но существуют и бесплатные, которые можно использовать в том числе и в коммерческих целях. Советую внимательно подходить к авторскому праву.

После загрузки, установите шрифт. На Mac и PC нажимите на кнопку «Установить шрифт». Нам нужно, что бы он установился в нескольких форматах. Для этого используй Online font converter Перенесите сюда шрифт в  ttf формате. Нужно сделать формат eot, svg ,woff. Кликните на эти форматы, они конвертируются,  после чего кликните на соответствующие кнопки. Сохраните. У вас получится 3 архива, каждый распаковываете и забираете нужные файлы. Открываете Adobe muse и, выбрав инструмент «текст», набираете текст и идете в раздел «добавить веб-шрифты». В данном случае нам нужны локальные веб-шрифты. Нажимаете «добавить шрифты». Появляется окошко, где можно либо выбрать папку, либо перетащить файл. Я предпочитаю перетаскивать файлы. Выделяем нужные и перетаскиваем сюда. Нажимаю «Данные шрифты лицензированы» и «Продолжить». Появилась галочка, значит шрифт установился.

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

Задание

  1. Скачайте исходный файл проекта.
  2. Попробуйте протестировать работу с Google Fonts
  3. Подключите свой шрифт к сайту и научитесь на его основе делать конвертацию шрифтов в Adobe Muse.

Выкладывайте в комментарии, что у вас получилось.

20 лучших виджетов Muse для Adobe Muse Website Builder

Pin

Главная » Веб-разработка » 20 лучших виджетов Muse для Adobe Muse Website Builder

Adobe Muse — признанный конструктор веб-сайтов, предоставляющий все необходимые инструменты для создания профессиональных веб-сайтов с привлекательным дизайном. С его помощью вы можете быстро создать веб-сайт без написания кода!

Здесь вы можете найти 20 лучших Muse виджетов, которые расширят функциональность вашего сайта. Вы можете выбирать между множеством удивительных элементов, таких как адаптивные видео-виджеты, пакеты 3D-панорам, анимация прокрутки, адаптивные галереи лайтбоксов, виджеты Instagram, полноразмерные видеоконтейнеры YouTube, виджеты для загрузки файлов и многое другое.

Эти виджеты Muse можно быстро настроить за несколько шагов, чтобы они соответствовали всем вашим требованиям. И самое приятное то, что вы можете просто загружать, редактировать и использовать их без каких-либо знаний в области кодирования.

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

Pin

Tube — это профессиональный видео-виджет с полностью адаптивным макетом, который автоматически адаптирует свое содержимое под любой размер экрана. .

 

PIN-код

Этот виджет Adobe Muse можно использовать для отображения всплывающего окна, которое можно использовать для размещения важной информации, рекламных акций и т.

д. Это окно блокирует остальную часть содержимого веб-сайта, пока пользователь не закроет его.

Pin

Inster — это адаптивный виджет Instagram, который можно быстро вставить в Adobe Muse. Вы можете использовать его, чтобы делиться фотографиями и видео из Instagram на своем веб-сайте.

Pin

Это удивительная анимация прокрутки, которую вы можете добавить на свой веб-сайт, чтобы сделать его более удобным для пользователя. У вас есть несколько анимаций на выбор.

Пин-код

Этот виджет Adobe Muse можно использовать для добавления анимации к содержимому. Добавьте его на свой веб-сайт и настройте собственные функции и взаимодействие.

PIN-код

Rosea Themes проводит распродажу и дарит свой лучший набор виджетов. Усильте свои проекты Muse с помощью шестнадцати различных виджетов.

PIN-код

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

PIN-код

Загрузите и используйте его на своем веб-сайте Muse, чтобы добавить виджет Instagram с потрясающими функциями. Он имеет полностью адаптивное поведение, и вы можете использовать его для отображения не более 20 изображений.

Pin

Это еще один всплывающий виджет, который можно быстро добавить на сайт Adobe Muse. Вы можете быстро настроить его функции и сделать его именно таким, как вы хотите.

Pin

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

Pin

AniScrollis — это красивая анимация прокрутки, которая добавит потрясающий эффект вашему веб-сайту. Он включает в себя автоматический или ручной запуск, а также анимацию входа и выхода.

PIN-код

Вы можете использовать этот удивительный виджет видеоплеера на своем веб-сайте Muse. Это позволяет размещать различные видео прямо на вашем веб-сайте.

PIN-код

Это простой в настройке, удобный для мобильных устройств и полностью адаптивный виджет, который можно использовать для улучшения сайта Adobe Muse. Этот виджет включает ползунок, который посетители могут использовать для сравнения обоих изображений.

Булавка

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

Pin

Это еще один замечательный виджет Adobe Muse, который вы можете вставить на свой веб-сайт, чтобы сделать его более привлекательным для посетителей.

Pin

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

Пин-код

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

Pin

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

Pin

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

Штифт

Социальные сети в плагине Foller для WordPress

Социальные сети в WordPress

Foller может получать счетчик подписчиков/фолловеров и отображать его на вашем сайте. Плагин работает со всеми популярными социальными сетями, такими как Facebook, Instagram, Twitter, YouTube, Pinterest и многими другими. Всего Foller поддерживает 12 самых популярных социальных сетей, а также три типа данных, связанных с WordPress.

  • Facebook
  • Twitter
  • Instagram
  • Pinterest
  • YouTube
  • Vimeo
  • SoundCloud
  • VK
  • Flickr
  • GitHub
  • Twitch
  • Envato
  • Dribbble
  • Reddit
  • WordPress Posts
  • WordPress Комментарии
  • Пользователи WordPress

Facebook

Токен доступа Facebook

Прочитайте руководство Как получить токен доступа

Токен будет похож на EAAOhQBjJvuGXM44Ycs9D2IWX5EDMPp…6NAbzqLsXmrnN6jQAfJbp9cEfgv9lg2f9HpLbRcwZDZD

URL-адрес Facebook

Действительная ссылка на страницу Facebook или общедоступный профиль. Ссылка должна иметь вид https://www.facebook.com/merkuloveteam

Стиль значка

Эта настройка включит отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Круглый значок
  • Квадратный значок
Подпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Twitter

URL-адрес Twitter

Действительная ссылка на общедоступный профиль Twitter. Ссылка должна иметь вид https://www.facebook.com/merkuloveteam

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Значок с квадратом
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Instagram

Токен доступа к Instagram

Чтобы отображалось количество подписчиков в Instagram, вы должны получить токен. Токен может быть получен только для учетной записи, которой вы владеете, или учетной записи, к которой у вас есть доступ. Для получения токена перейдите по этой ссылке и пройдите авторизацию.

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Подпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Pinterest

URL-адрес Pinterest

Действительная ссылка на общедоступный профиль Pinterest. Ссылка должна иметь вид https://www.pinterest.com/merkulovdesign/

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Круглый значок
  • Квадратный значок
Заголовок перед

В это текстовое поле и после значка можно ввести текст до количества подписчиков(фолловеров).

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

YouTube

Ключ API YouTube

Введите собственный ключ API YouTube. Как получить ключ читайте в документации https://developers.google.com/youtube/v3/getting-started, он будет аналогичен AIxiSyB_Mc7kZzQYc4JJdXKEUQPLtrfGtUc_OKI

URL YouTube

Действующая ссылка на пользователя YouTube или страницу канала. Ссылка должна иметь вид https://www. youtube.com/channel/UCUWSJ4wvhc2jV6zJsU90DOQ или https://www.youtube.com/user/envato

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Vimeo

Пользователь Vimeo

Действительная ссылка на существующее имя пользователя Vimeo. Имя пользователя Vimeo выглядит как user52199069 или Envato .

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Значок с квадратом
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Soundcloud

URL-адрес страницы Soundcloud

Действительная ссылка на общедоступный профиль Soundcloud. Ссылка должна иметь вид https://soundcloud.com/envato

Стиль значка

Этот параметр включит отображение значка социальной сети. Набор значков включает:

  • Нет
  • Заполненный значок
  • Значок с контуром
Подпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

ВКонтакте

URL-адрес Facebook

Действительная ссылка на страницу Facebook или общедоступный профиль. Ссылка должна иметь вид https://vk. com/envato

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Flickr

URL-адрес страницы Flickr

Действительная ссылка на общедоступный профиль Flickr. Ссылка должна иметь вид https://www.flickr.com/photos/we-are-envato/

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Круглый значок
  • Квадратный значок
Заголовок перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

GitHub

URL-адрес страницы репозитория

Действительная ссылка на общедоступный репозиторий GitHub. Ссылка должна иметь вид https://github.com/torvalds

Стиль значка

Этот параметр включит отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Круглый значок
  • Квадратный значок
Заголовок перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Twitch

Имя пользователя Twitch

Допустимое имя пользователя Twitch. Это должно выглядеть как солнечная или хачубби .

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Envato

URL-адрес профиля

Действительный URL-адрес профиля Envato Market. Ссылка должна иметь вид https://codecanyon.net/user/merkulove

Стиль значка

Эта настройка включит отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Dribbble

URL-адрес профиля

Действительный URL-адрес профиля Dribble. Ссылка должна иметь вид https://dribbble.com/merkulov_d

Стиль значка

Эта настройка включит отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Заголовок перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Reddit

URL-адрес профиля

Профиль Reddit. Ссылка должна иметь вид u/placek3000

Стиль значка

Эта настройка включит отображение значка социальной сети. В набор иконок входит:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Подпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Сообщения WordPress

В этом режиме отображается общее количество сообщений на веб-сайте WordPress.

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
  • Значок с квадратом
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

В этом режиме отображается общее количество комментариев на сайте WordPress.

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Подпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Пользователи WordPress

В этом режиме отображается общее количество пользователей на сайте WordPress.

Стиль значка

Этот параметр включает отображение значка социальной сети. Набор значков включает:

  • Нет
  • Значок с заливкой
  • Значок с контуром
Надпись перед

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

Надпись после

В это текстовое поле можно ввести текст, в котором будет отображаться количество подписчиков(фолловеров).

Цвета

Настройки цвета в папке позволяют очень гибко управлять цветами социальных сетей в WordPress в состоянии по умолчанию и при наведении.

Примечание

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

Цвет значка

Цвет значка социальной сети в состоянии по умолчанию.

Цвет иконки при наведении

Цвет иконки социальной сети в состоянии Hover.

Цвет фона

Цвет фона и цвет рамки кнопки в состоянии по умолчанию.

Цвет фона при наведении

Цвет фона и цвет рамки кнопки в состоянии наведения.

Время жизни кэша

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

Автор записи

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

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