EN
Поиск ...

Как пользоваться текстовым редактором Pixpa?

При редактировании контента важно научиться пользоваться текстовым/WYSIWYG-редактором (что видишь, то и получаешь). Этот текстовый редактор позволяет редактировать, изменять и добавлять контент на ваши веб-страницы (форма обратной связи, календарь, гостевая книга), сообщения в блогах и обложки без знания HTML.

При работе с текстовым редактором Pixpa нажмите ENTER (окна) или RETURN (mac), чтобы создать новый абзац, чтобы вставить новую строку, не создавая новый абзац, нажмите и удерживайте SHIFT , а затем нажмите клавишу ввода или возврата.

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

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

Объясняемые варианты: 

  1. Формат — изменение стиля шрифта.
  2. Выравнивание – выравнивание текста.
  3. Жирный / Курсив / Зачеркнутый / Подчеркнутый
  4. Список — упорядоченный / неупорядоченный
  5. Изображение — добавить изображение
  6. Видео – добавить видео
  7. Таблица – добавить таблицу
  8. Ссылка — добавьте ссылку на свой текст
  9. Цвет текста — изменение цвета текста.
  10. Клипы — добавьте кнопки CTA
  11. Виджет – добавьте пользовательский код
  12. Линия — добавить строку.
  13. Полноэкранный режим
  14. Просмотр HTML-кода

1. Формат — изменить стиль шрифта

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


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

  • Заголовок 1
  • Заголовок 2
  • Заголовок 3
  • Заголовок 4
  • Текст абзаца (обычный, маленький и большой)

Вот скриншот стиля Заголовок 1. Вы также можете редактировать шрифты других абзацев заголовков.


Примечание: «Код» и «Цитата» имеют стиль по умолчанию.

  • Code: используется для определения фрагмента компьютерного кода. Содержимое внутри отображается моноширинным шрифтом браузера по умолчанию.
  • котировка: это то же самое, что и H3, но с тегом цитаты.

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

Внимание: стиль, насыщенность и цвет шрифта будут видны только на веб-сайте, а НЕ в студии.

2. Align – Выравнивание текста

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

3. Жирный/курсив/зачеркнутый/подчеркнутый

  • Жирный – Выделенный текст станет полужирным при щелчке по нему. В HTML для этого используется тег.
  • Курсив – Выделенный текст станет курсивом при нажатии. В HTML для этого используется
  • Зачеркивание – Выделенный текст будет помечен как удаленный при нажатии на него. В HTML для этого используется ярлык.
  • подчеркивание – Выделенный текст станет подчеркнутым при нажатии. В HTML для этого используется тег.

4. Список – упорядоченный/неупорядоченный

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

  • Ненумерованный список – Выделенный текст будет отформатирован как маркированный список. В HTML для этого используется набор и теги.
  • упорядоченный список – Выделенный текст будет отформатирован как нумерованный список. В HTML для этого используется набор и теги.
  • Выступающий – Выделенная текстовая область не будет иметь отступ.
  • отступ – Выделенная текстовая область будет иметь отступ.

5. Изображение — добавьте изображение

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

Вы также можете изменить размер изображения путем перетаскивания из правого нижнего синего значка на это конкретное изображение.

Редактор также позволяет добавлять название изображения, подпись и ссылка на загруженное изображение. Нажмите на любое изображение, и вы увидите вариант Редактировать (1) Удалить (2) и Изменение размера (3).

После нажатия на Редактировать, вы увидите всплывающее окно, в котором вы можете указать:

  1. Название - Это было бы альтернативный тег этого конкретного изображения.
  2. Подпись - Показывать подпись вместе с изображением на живом сайте.
  3. Позиция – Выберите выравнивание изображения (слева, по центру, справа или без).
  4. Ссылка - Добавьте ссылку на изображение.
  5. Открыть в новой вкладке – Установите этот флажок, если хотите открыть ссылку на изображение в новой вкладке.
  6. Сохранить - Сохраните ваши изменения
  7. Удалить - Удалить изображение
  8. Замените изображение, перетащив новое изображение на миниатюру.

Идеальный размер изображения для текстового редактора сообщений в блоге — 1500 пикселей в ширину и любую высоту. Это предпочтительный размер для всех макетов блога. Поддерживаемые форматы файлов изображений веб-сайтов: JPG, JPEG, PNG и GIF. Если вы загружаете изображения большего размера, мы уменьшить массу их до 1500 пикселей в ширину. 

6. Видео — добавить видео

Вы можете добавить сюда свои видео с YouTube/Vimeo. При нажатии на эту кнопку откроется небольшое модальное окно, в котором вы можете ввести URL-адрес видео на Youtube/Vimeo или код для встраивания.

Наконечник: Вы также можете напрямую разместить URL-адрес YouTube в текстовом редакторе. Система автоматически сделает скриншот видео.  

7. Таблица — добавить таблицу

Щелкните значок таблицы (7), чтобы добавить таблицу из N строк. Вы можете структурировать свой контент в строках и столбцах.

 

8. Ссылка — добавьте ссылку на свой текст.

Редактор позволяет вставить ссылку на любой текст. Вы можете подключить существующие страницы веб-сайта или любой другой веб-сайт/блог/PDF-файлы и т. д.

Выделение текста и нажатие этой кнопки откроет небольшое модальное окно, в котором вы можете ввести целевой URL-адрес, выбрать, открывать ли его в новом окне или выбрать ссылку на другую страницу на собственном сайте. В HTML используется тег Link Text.

Пожалуйста, обратите внимание:

  • Чтобы создать ссылку на внешний веб-сайт, находящийся за пределами вашего сайта Pixpa, введите http://за которым следует веб-адрес, например http://www.example.com.
  • Чтобы создать ссылку на галерею, категорию или страницу магазина на вашем сайте, введите URL-адрес, например /gallery
  • Чтобы создать ссылку, открывающую настольный клиент электронной почты, введите mailto: затем адрес электронной почты, например mailto:example@example.com.
  • Чтобы создать ссылку для телефонного звонка, введите tel:, за которым следует номер телефона с кодом страны, например tel:+0-123-456-7890
  • Чтобы создать ссылку, открывающую WhatsApp, введите https://wa.me/<number> где <number> полный номер телефона в международном формате. Не вводите нули, скобки и тире при добавлении номера телефона в международном формате. Например: использовать https://wa.me/15551234567 вместо https://wa.me/+001-(555)1234567. Узнать больше.
  • Чтобы сделать ссылку на ваш PDF или другой файл, загруженный в раздел файлов, введите здесь скопированную ссылку. Узнать больше.

9. Цвет текста — изменение цвета текста.

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

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

10. Клипы — добавьте кнопки CTA

Редактор также позволяет добавлять кнопки CTA — квадратные или круглые, чтобы связать любую страницу/галерею/веб-сайт/pdf и т. д. Вы можете настроить их размер и цвет в режиме просмотра HTML-кода. Прокрутите вниз до пункта 12, чтобы узнать больше.

При нажатии на этот значок откроется небольшое модальное окно, в котором вы можете выбрать кнопку CTA.

11. Виджет — добавьте пользовательский код

Редактор также позволяет вам добавлять любой пользовательский код, например, код для встраивания Google Map, код для встраивания Soundcloud, код для встраивания сообщений Tweet и т. д. По сути, любой код для встраивания можно добавить в редакторе с помощью значка виджета.

При нажатии на этот значок откроется небольшое модальное окно, в которое вы можете вставить код для встраивания.

12. Линия — добавить линию

Редактор позволяет добавить горизонтальную линию.

Щелчок по этому значку добавит строку в том месте, где находится курсор.

13. Полноэкранный режим

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

14. Просмотр HTML-кода

Окно редактора может функционировать как визуальный редактор (WYSIWYG) или как редактор HTML.

Однако вы можете переключиться на редактор HTML, нажав на него. Вы можете изменить что-либо в представлении кода, если знаете, как это сделать, или вы также можете связаться со службой поддержки Pixpa, если вам нужна помощь.

Наконечник: С помощью просмотра HTML-кода вы можете добавить любой тип кода для встраивания в свой пост в блоге.  

Метки:

Не можете найти то, что ищете?

Свяжитесь с экспертом Pixpa.

Свяжитесь с нами