ИСПОЛЬЗОВАНИЕ ПРОТОТИПОВ

Клонирование элементов для использования на своем сайте
1. Как cкопировать элементы с эффектами на бесплатном аккаунте Webflow?2. Где cкопировать шаблон сайта с возможностью добавлять количество страниц?3. Набор адаптивных каркасных прототипов от Дарио Стефанутто для превращения их в конечный продукт (состоит, практически, из всех необходимых элементов сайта; он потратил на эту работу 120 часов) + оригинальный сайт продажи женских сумок4. Готовые компоненты сайта (маленькая часть Fast Flow Kit, которую можно клонировать)5. Flowbase - база разных шаблонов сайтов и элементов (можно клонировать)6. Шаблоны Webflow - бесплатный комплект пользовательского интерфейса для магазина, в том числе два уникальных готовых к запуску шаблона7. Все шаблоны Webflow8. Идея движущейся карточки - первый вариант9. Идея движущейся карточки - второй вариант10. КВЕСТ опросник с отправкой ответов в форме11. Хранилище с 10-значным кодом доступа (5 4 6 5 3 1 6 2 6 2)12. Переключатель13. Аккордеон14. Классная кнопка "Читать далее", "Посмотреть сайт" и т.д.15. Кнопка с градиентом при наведении курсора16. Разные кнопки со взаимодействием17. 9 кнопок переходов страниц, готовых к использованию18. F A Q19. Плавающий сайдбар (липкая боковая панель)20. Карты - липучки21. Элемент Dropdown22. Элемент Pricing-Table23. Базовая таблица +взаимодействие при наведении24. Таймер обратного отсчета (настройку скрипта смотри в описании на сайте)25. Почти все интеракции Webflow - первый пакет26. Почти все интеракции Webflow - второй пакет
Дизайн (где взять и как обработать)
1. Коллекция бесплатных инструментов дизайна и ресурсов для производителей, разработчиков и дизайнеров2. Коллекция бесплатных анимаций, легко вставляются на различные ресурсы3. Классный онлайн конструктор фотографий4. Красивые бесплатные стоковые фото5. Более 400000 бесплатных стоковых фотографий для коммерческого использования6. Изображения, которые можно свободно использовать. Создано авторами со всего мира7. Бесплатные изображения PNG8. PNG и векторные изображения, а также прозрачные фоновые изображения и PSD файлы9. Бесплатные векторы и иллюстрации для загрузки10. Бесплатные иконки для лендингов11. Бесшовные фоны для сайта и фотошопа12. Шрифты от Google Fonts13. Шрифты бесплатные14. Большая коллекция кириллических шрифтов15. Инструменты для онлайн-редактирования изображений (бесплатно)16. Бесплатный онлайн-инструмент для сжатия GIF файлов.17. Бесплатный онлайн-компрессор для  .png или .jpg файлов
Видео (где взять и как обработать)
1. Красивые бесплатные стоковые видеоролики2. Тысячи бесплатных стоковых видео, анимированной графики, музыкальных треков и звуковых эффектов в одном месте

3. Создаем видео самостоятельно. Программы и техника создания

1. Lumen5 - создает впечатляющие, увлекательные видео из вашего существующего контента - https://lumen5.com/
Как обращаться с программой (8 видео от В.Фирсова):
https://www.youtube.com/watch?v=cQHZtkc5PUs

https://www.youtube.com/watch?v=tvBByx-gE5U
https://www.youtube.com/watch?v=HOLLNYspD9Y
https://www.youtube.com/watch?v=pMFSglUZgZE
https://www.youtube.com/watch?v=jDkqAgn78N8
https://www.youtube.com/watch?v=gwVoaHAF0wg
https://www.youtube.com/watch?v=k1hNUXu1bCA
https://www.youtube.com/watch?v=F4xLNh5nk9s 

2. Icecream VideoEditor – дополнение к п.1, так как в первом случае некоторые операции на бесплатной версии сделать нельзя, перенеся видео сюда, можно его успешно доделать. Это простой, бесплатный редактор видео для Windows. Позволяет редактировать и создавать новые ролики из фото и видео - https://icecreamapps.com/ru/Video-editor/.
Как обращаться с программой (4 видео от В.Фирсова):
https://www.youtube.com/watch?v=RXW5xFfkzVA
https://www.youtube.com/watch?v=1U6NPrGHWug
https://www.youtube.com/watch?v=NSMzBNNIvy4
https://www.youtube.com/watch?v=kC6e6cRh-gM
Этой программе есть альтернатива: https://rus.slideshow-creator.com/

4. Уменьшить размер видео онлайн (сжать)5. Онлайн видео конвертер (почти все форматы)

6. Supa - онлайн конструктор видео
Как обращаться с сервисом - 7 видео от В.Фирсова:
https://www.youtube.com/watch?v=aq11AvjMv0U
https://www.youtube.com/watch?v=tdx-Tqn1P2k
https://www.youtube.com/watch?v=cAgtoUmq5qs
https://www.youtube.com/watch?v=oua4Ye9FRhk
https://www.youtube.com/watch?v=2YS6k_caNSY
https://www.youtube.com/watch?v=h5K6PKWvuf4
https://www.youtube.com/watch?v=ENHg1JTEMcE – В этом видео также рассказывается как удалить водяной знак и как конвертировать видео в .gif формат.

7. 123APPS - Сервис для удаления водяного знака

8. Convertio - Сервис для конвертации в .gif формат

Как сделать на продукте всплывающую кнопку
«Посмотреть» или «В корзину»?

В див-блок, в котором загружено изображение, добавляем Link Block Растягиваем Link Block на весь размер див-блока через позиционирование див-блока Relative, а Link Block - Absolute в Link Block добавляем текстовый блок (который сразу же превращается в ссылку) ⟹ Через Flex центруем текстовый блок посередине Убираем с текста подчеркивание и меняем цвет текста (стоять нужно на Link Block – иначе подчеркивание не убрать и цвет не поменять) ⟹ Меняем параметры текстового блока (размер шрифта, цвет, беграунд блока) и пишем нужное содержание Внутренними отступами текстового блока определяем его размеры Делаем обводку кнопки Кнопка готова.

Анимация кнопки: Встаем на текстовый блок Выбираем Hover Переходим в беграунд ⟹ Выбираем нужный цвет (на этот цвет будет происходить изменение первоначального цвета кнопки) Добавляем изменению цвета плавности в Transitions (через параметр Background Color) По условию первоначально кнопка не видна – для этого встаем на Link Block Идем в Effects и через Opacity убираем прозрачность на «0» переходим на Hover и выставляем прозрачность на 100% Добавляем изменению прозрачности плавности в Transitions (через параметр Opacity – он уже предустановлен) – как и на первом изменении плавности выбираем 500 миллисекунд или любое другое значение по желанию.
Задача выполнена.

Как перенести сайт Wordpress на другой домен или хостинг с помощью бесплатного плагина All-in-One WP Migration?

Устанавливаем плагин All-in-One WP Migration на сайт, который собираемся перенести ⟹ В консоли админки появляется соответствующая вкладка ⟹ Нажимаем «Экспорт» ⟹ Появляется страничка «Экспортировать сайт» ⟹ Выбираем в «Файл» ⟹ Выпавшее окно показывает размер нашего сайта (это важно, так как бесплатная версия плагина разрешает делать копию сайта до 512 МБ – во многих случаях этого бывает достаточно) ⟹ Скачиваем файл на свой комп.

На новый домен или хоcтинг устанавливаем базовую версию WordPress ⟹ В консоли управления устанавливаем, опять-таки, плагин All-in-One WP Migration ⟹ Выбираем вкладку «Импорт» ⟹ Видим страничку «Импортировать сайт» (на страничке есть предупреждение о максимальном загружаемом файле – 128 МБ – его можно расширить до 512 МБ бесплатно) ⟹ Получить безлимитное расширение ⟹ Заходим на сайт плагина по ссылке: https://import.wp-migration.com/

Скачиваем на свой компьютер еще один плагин - «Basic» ⟹ Устанавливаем данный плагин на новый домен, на который установлена базовая версия WordPress, и активируем его ⟹ Заходим в раздел «Импорт» плагина All-in-One WP Migration и видим, что объем загружаемых файлов увеличился до 512 МБ ⟹ Нажимаем «Импортировать из» ⟹ Выбираем «Файл» ранее скачанный на свой компьютер ⟹ Процесс может занять несколько минут и завершаем процесс импорта, нажав на кнопку «Продолжить».

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

Дополнение:
https://www.youtube.com/watch?v=D_qO3As8uJI - ссылка на видео из ЮТуба о переносе сайта Wordpress на другой домен или хостинг / Бесплатный плагин All-in-One WP Migration.

При работе с плагином All-in-OneWP Migration может оказаться, что будет не хватать объема памяти. Как увеличить объем памяти до необходимого размера, можно узнать из статьи: https://wp-widget.ru/2020/03/23/snyat-ogranichenie-na-maksimalnyj-razmer-zagruzhaemogo-fajla-dlya-plagina-all-in-one-wp-migration/  
Все достаточно просто. До 10 ГБ.