6 способов использования функции загрузки файлов Divi перетаскиванием для повышения производительности

Опубликовано: 2018-08-22

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

Давайте начнем!

Краткий обзор функции загрузки файлов перетаскиванием в Divi

Функция загрузки файлов перетаскиванием - это простой способ добавить контент на вашу страницу при использовании Divi Builder. Как следует из названия, вы можете перетаскивать файлы на свою страницу, чтобы добавить контент без обычного процесса предварительной настройки раздела, строки и модуля. И Divi будет размещать контент по-разному в зависимости от типа файла. Например, файлы txt будут добавлены в текстовые модули, файлы HTML будут добавлены в модули кода, а файлы css будут добавлены в качестве настраиваемого CSS на вашу страницу.

Поддерживаемые типы файлов и их поведение при перетаскивании

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

Файлы изображений

  • гифка
  • jpeg
  • jpg
  • PNG

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

При одновременном добавлении нескольких файлов изображений Divi создаст ту же структуру (новый раздел и строку), но добавит ваши изображения в модуль галереи.

Текстовые файлы

  • текст

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

Файлы шрифтов

  • otf
  • ttf

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

Видео файлы

  • m4v
  • mov
  • webm
  • WMV
  • mp4

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

Аудио файлы

  • mp3
  • wav

Добавление одного или нескольких аудиофайлов добавит каждый аудиофайл в новый аудиомодуль внутри нового раздела и строки.

Веб-файлы

  • json
  • html
  • css

Файл json предназначен для всех экспортированных макетов страниц. Перетаскивание файла json автоматически загрузит макет страницы на страницу.

Перетаскивание HTML-файла добавит HTML-код в новый модуль кода внутри нового раздела и строки.

Перетаскивание файла CSS автоматически добавит код CSS в настраиваемый CSS для вашей страницы, который можно найти на вкладке «Дополнительно» в настройках страницы.

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

# 1 Перетащите пользовательские фрагменты CSS на свою страницу по мере необходимости

Большинство из вас, пользователи Divi, любят Divi именно потому, что вам не нужно использовать собственный CSS. Это то, что делает Divi таким замечательным. Однако, когда дело доходит до настройки темы WordPress, настраиваемый CSS (даже в Divi) по-прежнему является ценным активом.

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

Например, предположим, что у вас есть фрагмент CSS для скрытия нижней панели нижнего колонтитула на странице Divi. Если вы сохраните этот фрагмент в виде файла css с заголовком «Скрыть нижний колонтитул», вы можете затем захватить этот файл и перетащить его на свою страницу для получения мгновенных результатов.

Divi автоматически упорядочивает ваши сниппеты с каждой каплей

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

Вы также заметите, что Divi грамотно организует ваш css-фрагмент, обернув его комментариями. Если вы не знаете, комментарии используются в коде, чтобы легко идентифицировать и / или описывать определенные блоки кода. Перед фрагментом CSS Divi вставляет комментарий с текстом «Begin», за которым следует заголовок вашего файла CSS «Hide Bottom Footer». После фрагмента Divi вставляет еще один комментарий с текстом «Конец» после заголовка файла.

Вот пример того, как фрагмент будет выглядеть в настройках страницы после перетаскивания в файл CSS «Скрыть нижний колонтитул». 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

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

Два примера фрагментов CSS, которые можно использовать для анимации наведения

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

Сохраните следующий фрагмент CSS как файл «.css» (назовите его как-нибудь вроде «Масштабировать значки при наведении курсора»). 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Затем сохраните этот следующий фрагмент как другой файл «.css» с именем «Blurb Shadow on Hover».

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

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

Довольно крутая штука.

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

# 2 Перетащите пользовательские шрифты на свою страницу и быстро замените текущие шрифты

Если вы создаете веб-сайты, вы знакомы с необходимостью иметь широкий выбор доступных шрифтов. Divi имеет сотни шрифтов, встроенных в Divi Builder, что значительно упрощает работу. И вы всегда можете использовать возможность загрузки новых шрифтов из Divi Builder. Но с новой функцией Divi Drag and Drop добавлять новые шрифты на ваш сайт до смешного просто.

Допустим, вы используете один из готовых макетов, но хотите опробовать новый шрифт, которого у Divi еще нет. Вот как легко изменить шрифт:

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

Перетаскивание с помощью функции поиска и замены - мощная комбинация

Чтобы сделать еще один шаг вперед, вы можете использовать функцию Divi Find & Replace, чтобы заменить шрифт, используемый в предварительно созданных заголовках макета, новым шрифтом, который вы только что добавили.

Используя макет Landing Page креативного агентства, откройте текстовый модуль, содержащий текст заголовка, в верхнем разделе. Затем щелкните правой кнопкой мыши параметр шрифта заголовка. В контекстном меню выберите «Найти и заменить».

Во всплывающем окне «Найти и заменить» выберите новый шрифт в разделе «Заменить на» и нажмите синюю кнопку «Заменить».

Теперь все ваши заголовки имеют новый шрифт!

# 3 Перетаскивайте несколько изображений, чтобы мгновенно создавать фотогалереи с названиями

Функциональность Divi Drag and Drop позволяет с легкостью перетаскивать изображения на ваш сайт. Это действительно удобно при создании веб-сайтов с большим количеством изображений. А поскольку большинство людей хранят сохраненные изображения в папке на своем компьютере, очень удобно иметь возможность выбрать эти изображения и перетащить их на свою страницу.

Вот как это работает при перетаскивании одного изображения.

Когда вы перетаскиваете одно изображение в визуальный конструктор, он автоматически выполняет следующие действия:
1. Создайте новый обычный раздел со строкой в ​​одну колонку.
2. Добавьте модуль изображения в строку
3. Вставьте изображение в этот модуль изображения.
4. Откройте настройки изображения для удобства, чтобы начать процесс редактирования.

Вот как это работает при перетаскивании нескольких изображений.

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

1. Создайте новый обычный раздел со строкой в ​​одну колонку.
2. Добавьте модуль галереи в строку.
3. Вставьте новые изображения в модуль "Галерея".
4. Откройте настройки модуля галереи, чтобы ускорить процесс редактирования.

Подготовьте свои изображения, прежде чем перетаскивать их на свою страницу

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

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

Заголовки изображений
По умолчанию Divi будет отображать заголовок вашего изображения под каждым эскизом в вашей галерее. Таким образом, с тех пор (если вы хотите, чтобы этот заголовок отображался), он дает вашим изображениям правильный заголовок, прежде чем перетаскивать их.

# 4 Перетащите файлы MP3 на свою страницу с файлом CSS, чтобы быстро начать дизайн

Для вас, подкастеров, это определенно может повысить продуктивность. Поскольку функция Drag & Drop Divi поддерживает форматы файлов mp3 и wav, вы можете легко перетащить их в конструктор, чтобы начать процесс сборки.

Когда вы перетаскиваете на страницу один файл в формате mp3 или wav, Divi автоматически выполняет следующие действия:

1. Создайте новый обычный раздел со строкой в ​​одну колонку.
2. Добавьте новый аудиомодуль с прикрепленным аудиофайлом.
3. Откройте модальное окно настроек autio, чтобы начать процесс редактирования.

Когда вы перетаскиваете на страницу несколько файлов mp3 или wav, Divi будет делать то же самое, что и при перетаскивании одного аудиофайла, за исключением того, что он будет делать это несколько раз. Итак, если вы перетащите 4 аудиофайла, Divi создаст 4 разных раздела с одной строкой столбца, содержащей аудиомодуль с прикрепленным аудиофайлом. Также появится модальное окно настройки звука, чтобы начать редактирование последнего аудиомодуля, добавленного на страницу.

Перетащите файл CSS, чтобы мгновенно стилизовать все аудиомодули сразу

Если вы привыкли использовать собственный CSS для добавления дополнительных стилей на свои страницы Divi, я предлагаю вам сохранить эти фрагменты в файле css для использования в будущих сборках (хотя я уверен, что вы уже знали об этом). Поэтому, если у вас есть фрагмент css для определенного стиля аудиомодулей, сохраните этот css в отдельном файле css. Затем вы можете просто перетащить этот файл css на страницу, чтобы мгновенно стилизовать все ваши аудиомодули.

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

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

Затем вставьте его в текстовый редактор и сохраните в формате файла css (он должен иметь расширение «.css»). Как только вы сохраните его на свой компьютер. Перетащите его в визуальный редактор, содержащий ваши аудиорекламы.

# 5 Создавайте повторно используемые блоки кода, которые можно перетаскивать на вашу страницу для мгновенной реализации

Функция перетаскивания Divi поддерживает файлы CSS и HTML (извините, файлы javascript не разрешены). Хотя для тех, кто знает, что они делают, вы можете добавить сценарии в файл HTML, которые добавят вам эту функциональность javascript. Но это оставляет возможность объединять эти файлы для создания полезных блоков кода, которые вы можете перетаскивать на страницу для получения мгновенных результатов.

Пример 1. Перетащите экспортированные файлы кодового пера на свою страницу.

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

Вот как этот процесс может сработать для вас.

Перейдите на страницу с кодом Codepen, который вы хотите экспортировать, и нажмите кнопку экспорта в правом нижнем углу страницы.

Извлеките файлы на свой компьютер и найдите файл html и файл css. Используйте текстовый редактор, чтобы просмотреть свой html-файл и удалить все теги, которые вам не нужны (doctype, html, header, body), чтобы все, что осталось, это html, который вы видите в поле html кода. . Затем сохраните файл.

Фактически, для файла HTML вам может быть лучше просто скопировать HTML прямо из пера и создать свой собственный файл html.

Теперь найдите файл CSS (он должен находиться внутри папки CSS). Убедитесь, что вы используете файл CSS, а не файл SCSS (этот тип файла не поддерживается функцией перетаскивания).

Теперь перетащите оба файла на страницу с активным визуальным построителем.

Вот что происходит автоматически:

1. Divi создает новый раздел со строкой из одного столбца.
2. Divi добавляет модуль кода в строку с вашим HTML в качестве содержимого.
3. Divi добавляет настраиваемый CSS-код в настраиваемый блок CSS-настроек вашей страницы.

Если вы получаете сообщение об ошибке, это означает, что либо у вас нет нужного типа файла, либо в содержимом файла есть неподдерживаемый код. Например, если в html-файле есть теги doctype и html, файл работать не будет. Кроме того, если ваш файл css имеет код SCSS, он также может вызвать ошибку.

Конечно, поначалу это не самый гладкий процесс. Вам придется немного упорядочить свой код и файлы. Так что, если вы не знакомы с html и CSS, это может быть проблемой. Но конечный результат может оказаться очень ценным, поскольку вы сможете запастись некоторыми повторно используемыми блоками кода, которые можно просто перетащить.

Я также должен отметить, что вам следует ознакомиться с лицензированием Codepen, прежде чем копировать чужой код.

Пример 2: перетащите изолированные экземпляры Font Awesome на свою страницу

Если вы привыкли использовать Font Awesome на своем сайте Divi, вам может быть полезно иметь под рукой несколько «готовых к перетаскиванию» файлов, которые позволят вам вставлять экземпляры Font Awesome на вашу страницу. На самом деле это можно сделать с помощью одного-единственного HTML-файла.

Вот как этот процесс может сработать для вас.

Скачайте скрипт Font Awesome с их веб-сайта. Убедитесь, что это версия SVG + JS. Затем скопируйте сценарий в буфер обмена.

Затем создайте новый текстовый файл и вставьте код. Под сценарием добавьте код html и шрифта, который вы хотите развернуть на своей странице.

Вот пример готового к перетаскиванию html-кода со списком с использованием значков с потрясающим шрифтом: 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

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

Divi автоматически добавит html в модуль кода для вас, и теперь у вас есть отличный список шрифтов, готовый к редактированию для вашей страницы.

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

# 6 Создайте библиотеку макетов страниц Divi (файлы json) на жестком диске, чтобы перетащить их на свои страницы для более быстрой разработки

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

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

Вот как этот процесс может сработать для вас.

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

Чтобы экспортировать макет страницы с помощью визуального конструктора, откройте меню настроек и щелкните значок переносимости. Затем во всплывающем окне переносимости введите имя («Макет заголовка агентства дизайна») и нажмите кнопку «Экспорт макета Divi Builder».

Это сохранит макет на ваш компьютер в виде файла json.

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

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

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

Последние мысли

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

Я хотел бы услышать ваши собственные идеи в комментариях ниже.

Ваше здоровье!