Два простых способа вставить презентацию PowerPoint на страницу сайта

В статье рассмотрим 2 простых и бесплатных способа вставить презентацию PowerPoint на сайт. Оба способа поддерживает возможность просматривать ее как в режиме обычного перелистывания, так и в интерактивном.

Использовать будем сервисы:

  • Google документы и хранилище Google Drive;
  • PowerPoint Online и облачное хранилище OneDrive от Microsoft;

Впрочем, презентации можно создавать непосредственно в этих сервисах, и затем сразу же внедрять на сайт.

Минусы других сервисов загрузки презентаций

Есть еще и другие сервисы, позволяющие загружать работы PowerPoint на их сервера, а затем получать код вставки для сайта. Например, SlideShare или Prezi.com.

Но многие из них:

  • с большими ограничениями бесплатных возможностей;
  • сложные;
  • не имеют русскоязычной версии.

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

Однако, у них есть большое «Но». В любой момент их могут заблокировать по причине: «запрещенный контент». Как это не однажды было со slideshare. Один опубликовал нарушающий закон материал — пострадали все.

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

Общий алгоритм действий

В выбранных нами способах вставки презентаций на сайт используются облачные хранилища: Google Drive или OneDrive Microsoft.

Алгоритм такой:

  1. Загружаем презентацию в любое из имеющихся в нашем распоряжении облаков.
  2. Получаем код для вставки.
  3. И вставляем его в статью на сайте.

Таким образом, презентация постоянно хранится у нас в облаке. Удалив ее оттуда — мы потеряем ее на сайте.

Далее пошагово.

Как вставить презентацию PowerPoint на сайт с помощью Google Docs

Для этого нам понадобится непосредственно:

  • сама презентация, созданная в Micosoft Office PowerPoint;
  • аккаунт Google и инструменты Google Docs (вкладка «Презентации»);
  • доступ в админку сайта WordPress.

Итак, презентация готова, вход в Google аккаунт и в админку сайта выполнен.

В Google переходим в раздел «Презентации».

Google Презентации

Создавать мы здесь пока ничего не будем. Наша задача загрузить свою готовую .ppt из PowerPoint. Поэтому отказываемся от предложения «Создать» и кликаем на иконку папки в меню «Загрузка».

Клик по картинкам увеличивает их для комфортного просмотра

 

Google Презентации Кнопка Загрузка
Картинки можно увеличить
В Google Презентациях Окно выбора файлов

Перетаскиваем файл с помощью мыши или пользуемся поиском.

В Google Презентациях окно с предложением Перетащить или Выбрать файл на компьютере

 

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

Выделяем их левой кнопкой мыши с зажатой на клавиатуре Shift. Идем → меню «Файл», далее на вкладку опубликовать в интернете. Выставляем параметры: желаемый размер и скорость прокрутки слайдов. Если тексты на слайдах большие и вам не нужна автопрокрутка — ставьте «1 минуту», чтобы посетитель сайта мог не торопиться и перелистывать слайды самостоятельно. Нажимаем кнопку «Опубликовать».

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

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

Для этого копируем предложенный html с помощью правой клавиши мыши (далее: ПКМ). Идем в раздел «Записи» в админке сайта. Создаем новую или открываем ту, куда будем добавлять презентацию.

Далее: в классическом редакторе переходим на вкладку «Текст» и просто вставляем туда ПКМ «Вставить».

Если предпочитаете Gutenberg, то выбираете в разделе «Текст» →  блок «Код», кликаете на него.

Разверните. Здесь скриншот. Показано меcто расположения кнопки для перехода к вставке html-кода в Gutenberg
Админка сайта Гутенберг Блок Код

В открывшуюся строку вставляете с помощью ПКМ скопированный html.

Строка для вставки html кода в редакторе Gutenberg

Нажимаете «Сохранить» →» Опубликовать». И кнопку «Посмотреть изменения».

Если нужно изменить размер вставленной презентации

В случае, когда в готовом варианте вас не устраивают размеры окна — измените их. Для этого найдите во вставленном куске кода «width» (ширина) и «height» (высота).Обозначения ширины и высоты в html

И просто уменьшайте или увеличивайте на равное количество пикселов оба числа. Таким образом добивайтесь идеального вида.

Пример:

Свойства Было Действие Стало
width 1920 –100 1820
height 600 –100 500

Вставка презентации на сайт с диска OneDrive от Microsoft

Для загрузки презентации в облачное хранилище OneDrive, находим ее на компьютере, кликаем пкм, выбираем «Переместить в OneDrive». Далее переходим на onedrive.live.com.

Самый короткий путь: кликаем по файлу с презентацией ПКМ, в контекстном меню выбираем «Внедрение».

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

2-й путь (когда требуется открыть презентацию и предварительно просмотреть, может быть внести правки):

  • Кликаем по самой презентации в облаке левой кнопкой мыши, она преобразуется в презентацию Microsoft PowerPoint Online.
  • Или кликаем ПКМ по ней же → Открыть → PowerPoint Online.

Затем выделяем все слайды, зажав Shift и перейдя от первого к последнему.

Переходим в меню «Файл» → «Общий доступ» → «Внедрение» → «Создать».

 

Путь до получения кода html для внедрения презентации на сайт Кнопка Создать (код)

 

Справа выбираем размер окна, снизу копируем html.

Окно с кодом html для внедрения презентации на сайт

Вставляем полученный блок html так же, как описано выше — для вставки из Google. Перейти к чтению.

Что дальше?

Когда презентация вставлена на страницу сайта и подобраны размеры, с помощью панели управления можно:

1) просматривать ее в автоматическом режиме с выбранной вами ранее в настройках скоростью;
2) или перелистывать самостоятельно;
3) раскрывать в полноэкранном варианте.

Если необходимо внести изменения

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

Окно презентации с Google Drive Окно презентации с OneDrive Перейти к редактированию
Окно презентации, размещенной в Google Drive. Справа внизу кнопка для перехода в облако Окно презентации, хранящейся на OneDrive. Кнопка для перехода к редактированию

В чем преимущество презентаций на сайте

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

Ну, а если вам понравится использовать на сайте такой способ, то вместительность хранилищ можно расширить.

Например, OneDrive – облачное хранилище от компании Microsoft. Можно расширить с бесплатных 5Гб до 1Тб. Кроме того, вы получите премиум функции онлайн-инструментов: Word, PowerPoint, Excel и других. Финансово это не обременительно, особенно если возьмете вскладчину, на любые 5 компьютеров, даже в разных краях вашего региона.Облачное хранилище OneDrive

Видео

Не все понятно? Тогда дополнительно посмотрите видео: как внедрить презентацию PowerPoint на сайт из OneDrive. Время просмотра 4 минуты.

В завершение

Кроме встраивания презентации на страницу, очень хорошим решением будет размещение видео с YouTube или других хостингов. Как вставить видео с YouTube на WordPress, чтобы:

  • начиналось и заканчивалось в заданное вами время;
  • выводился таймкод;
  • несколько видео разместить компактно —

читайте в статье: «Как вставить видео на сайт с YouTube? Секретные фишки».

На этом всё. Спасибо за прочтение. Если остались вопросы и вы до конца не поняли, как вставить презентацию PowerPoint на сайт — спрашивайте в комментариях. Обязательно разберемся с вашей проблемой и решим ее.

Оцените статью
( 6 оценок, среднее 4.83 из 5 )
Записки айтишника для каждого
Добавить комментарий

Нажимая кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Сергей

    Давно искал эту информацию. Спасибо!

    Ответить
  2. Павел Лейкин

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

    Ответить
  3. Ирина

    Спасибо за информацию! Всё доходчиво и понятно.

    Ответить
  4. Ирина

    Возьму на вооружение! Есть вопрос : в связи с последними событиями не станут некоторые действия не актуальными? Например You Tube?

    Ответить