25 «скрытых» функций Divi для повышения производительности и дизайна

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

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

Наслаждаться!

25 «скрытых» функций Divi для повышения производительности и дизайна

Подпишитесь на наш канал Youtube

Панель поиска №1 в параметрах поиска

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

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

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

# 2 Поместите градиент над фоновым изображением

Это отличная функция, которая улучшает процесс проектирования. Добавление градиентных наложений к изображениям является необходимостью в веб-дизайне, и эта функция позволяет легко добавлять эти наложения прямо внутри Divi Builder. Просто добавьте фоновое изображение в свой модуль, а затем добавьте комбинацию цветов фона градиента. Под опциями градиентного фона выберите «разместить градиент над фоновым изображением». Просто убедитесь, что у вас есть определенная степень непрозрачности для цветов градиента, чтобы вы могли видеть изображение за градиентом. А с помощью Visual Builder вы можете легко настроить градиент до идеальной непрозрачности и цвета фонового изображения.

# 3 Чередуйте два градиентных цвета фона: для этого есть кнопка.

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

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

# 4 Сочетания клавиш

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

Вы можете найти список сочетаний клавиш в модальном окне Divi Builder Helper. Просто введите вопросительный знак (shift +?) На клавиатуре в Visual Builder и щелкните вкладку сочетаний клавиш.

Ах да, видео справочной документации доступны таким же образом. Не будем забывать об этом.

Вот список всех доступных сочетаний клавиш. Я выделил те, с которых предлагаю начать (лично я использую их все время):

# 5 Каркасный вид

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

И не забудьте про горячую клавишу, чтобы открывать и закрывать каркасное представление: shift + w

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

# 6 Встроенное редактирование

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

Когда вы используете каркасное представление в Visual Builder, вы также можете редактировать метки прямо на месте. Хотите изменить название метки раздела? Вам не нужно делать это в модальном окне настроек строки или в параметрах щелчка правой кнопкой мыши. Просто нажмите на ярлык и отредактируйте его прямо здесь.

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

# 7 Сплит-тестирование Visual Builder с использованием параметров правой кнопки мыши

Меня всегда удивляет, насколько легко использовать функцию сплит-тестирования в Visual Builder. Я не буду здесь вдаваться в подробности, потому что вы можете прочитать полную версию функции. Но вот суть того, как это работает. Щелкните правой кнопкой мыши раздел, строку или модуль, который вы хотите протестировать, а затем выберите сплит-тест из контекстного меню. Затем выберите цель теста (запись в контактной форме, нажатие кнопки и т. Д.). Divi автоматически создаст другую версию (разделит) элемент, который вы тестируете, чтобы вы могли создать новую версию. При первом тестировании этой функции я не понимал, как увидеть обе версии моего сплит-теста из визуального конструктора, поэтому я открыл каркасное представление, чтобы увидеть обе. Но в этом нет необходимости. Как только вы активируете цель сплит-теста, вы заметите, что в меню настроек появятся стрелки, которые позволяют вам перемещаться по различным версиям вашего сплит-теста.

# 8 Настраиваемые параметры конструктора

Если вы еще не изучили настройки Builder, еще не поздно. Здесь есть несколько полезных настроек, которые могут улучшить ваше повседневное взаимодействие с Visual Builder.

Вот три, которые я хочу выделить.

Настройки Модальное положение по умолчанию

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

Сгруппируйте настройки в закрытые переключатели

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

Режим взаимодействия Builder по умолчанию

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

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

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

# 9 Варианты дизайна ссылок, списков и цитат с помощью текстового модуля

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

Вот два моих любимых варианта, которые вы, возможно, не заметили.

Параметры стиля списка

На вкладках «Неупорядоченные» и «Упорядоченные списки» вы можете легко изменить тип стиля списка или избавиться от него сразу.

Вы также можете изменить поле отступа для элементов списка и положение стиля.

Параметры стиля цитаты

На вкладке «Цитата» вы можете изменить толщину границы и цвет элемента дизайна, который отличает цитату.

# 10 Варианты дизайна для всех 6 уровней заголовка

В том же примечании, что и в пункте 9 выше, новый интерфейс с вкладками существует и для уровней текстовых заголовков. Это означает, что если у вас есть модуль с несколькими заголовками (h1, h2, h3 и т. Д.), Вы можете придать каждому из этих заголовков уникальный стиль в настройках дизайна модуля. На вкладке «Дизайн» откройте раздел «Заголовок заголовка» или «Текст заголовка» и выберите вкладку, которая управляет типом заголовка, который вы хотите настроить.

Совет: вы узнаете, какие уровни заголовков были настроены по синей метке на вкладке. Если метка остается серой, настройки по умолчанию активны для этого уровня заголовка.

# 11 Загрузка пользовательских шрифтов с модулями Divi

Кто знает? Возможно, для некоторых из вас эта кнопка «Загрузить» осталась скрытой на обычном сайте. Если да, то вам обязательно стоит воспользоваться этой удобной функцией. Вы можете не только легко загружать пользовательские шрифты в файлы различных типов (eot, woff2, woff, ttf, otf), Divi сохранит эти пользовательские шрифты для вас, чтобы они стали доступными для всех модулей на вашем сайте.

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

Появится всплывающее окно «Загрузить шрифт», позволяющее указать и добавить файл шрифта.

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

# 12 Удалить пространство под изображением

Эта функция существует уже некоторое время, но есть вероятность, что вы ее пропустили или не поняли ее значения.

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

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

# 13 Добавить разные единицы для разных входов

По умолчанию, когда вы вводите число для определенных входов в настройках Divi Builder, Divi будет рассматривать его как единицу пикселей. Но вы не ограничены вводом единиц измерения пикселей для этих параметров ввода. Вы также можете ввести другие единицы, включая%, em, vh и vw.

Например, для мобильных устройств очень хорошо работают проценты. Если вы установите верхнее поле на уровне 5% (вместо примерно 100 пикселей) на рабочем столе, поле будет масштабироваться пропорционально 5% от размера раздела на мобильном устройстве (вместо того, чтобы наследовать большой промежуток в 100 пикселей, который был бы слишком большим пространством). на мобильном). Это хороший способ сохранить раздел в верхней части страницы в браузерах разных размеров.

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

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

# 14 Исторические государства

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

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

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

Имейте в виду, что эти состояния истории сохраняются как объект Backbone collection / Javascript и не сохраняются в вашей базе данных и не будут раздувать вашу базу данных. Из-за этого, если вы выйдете из конструктора при редактировании страницы, вы не сможете изменить ранее сделанные вами состояния истории. Поэтому убедитесь, что вы держите здание открытым, пока не доработаете свой дизайн. Состояния истории начинаются, когда вы загружаете страницу / конструктор.

# 15 Вариант нестандартной ширины желоба (отлично подходит для макетов сетки)

Ширина желоба соответствует количеству горизонтального пространства (поля) между столбцами в каждой строке.

Необязательные значения ширины желоба варьируются от 1 до 4.

1 представляет собой нулевое поле между столбцами.
2 представляет собой 3% правое поле между столбцами.
3 представляет собой правое поле 5,5% между столбцами.
4 представляет собой 8% правое поле между столбцами.

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

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

# 16 Параметры правого клика

Расположение функции : просто щелкните правой кнопкой мыши любой раздел в Divi Builder.

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

Замок

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

Свернуть и переименовать

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

# 17 Отключить ссылки раскрывающегося меню верхнего уровня

Расположение функции : Divi → Параметры темы → Навигация → Общие настройки

Чтобы было ясно, ссылки раскрывающегося меню верхнего уровня являются основными родительскими ссылками, которые остаются видимыми в меню навигации. Ссылки подуровня - это те, которые появляются после наведения курсора на родительскую ссылку верхнего уровня.

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

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

# 18 Альтернативный метод прокрутки до привязки

Расположение функции : Divi → Параметры темы → Навигация → Общие настройки

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

Вот как выглядит мой экран после ссылки на мой CSS ID с внешней страницы. Вы этого не видите, но название раздела обрезано.

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

# 19 Скрыть логотип на мобильном телефоне

Расположение функции : Divi → Настройка тем → Мобильные стили → Мобильное меню

Если вам когда-нибудь понадобится скрыть свой логотип на мобильном телефоне, Divi сделает это очень просто. Но это один из тех вариантов, который легко упустить из виду. Сэкономьте время и не беспокойтесь о том, чтобы возиться с дополнительным CSS.

# 20 Анимация раскрывающегося меню основного и дополнительного меню

Расположение функции основного меню: Divi → Настройка темы → Заголовок и навигация → Главное меню BAr Анимация раскрывающегося меню

Расположение функции дополнительного меню : Divi → Настройка тем → Заголовок и навигация → Строка дополнительного меню -> Анимация выпадающего меню

Вам не нужно соглашаться на анимацию затухания по умолчанию для раскрывающихся меню. Раздел «Анимация раскрывающегося меню» включает четыре варианта:

1. Fade (по умолчанию)

2. Разверните

3. Слайд

4. Перевернуть

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

# 21 Изменить (или отключить) кредиты в нижнем колонтитуле

Расположение функции : Divi → Настройка тем → Нижний колонтитул → Нижняя панель → Отключить кредиты в нижнем колонтитуле / Редактировать кредиты в нижнем колонтитуле

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

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

# 22 Изменение цветовой палитры Divi по умолчанию

Расположение функции : Divi → Параметры темы → Вкладка Общие → Палитра выбора цвета по умолчанию.

Дайте себе перерыв в копировании и вставке шестнадцатеричных цветовых кодов.

Палитра Color Pickers по умолчанию - это цветовая палитра, которая будет использоваться во всем Divi Builder.

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

# 23 Настройки страницы Divi

Расположение : значок шестеренки в меню настроек в нижней части Visual Builder.

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

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

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

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

# 24 Выберите, какую метаинформацию отображать в сообщениях блога

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

Изменить метаинформацию для макета отдельного сообщения

Расположение : Divi → Параметры темы → Макет (вкладка) → Макет отдельного сообщения.

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

Изменить метаинформацию для выдержек из сообщений на странице блога

Расположение: Divi → Параметры темы → Макет (вкладка) → Общие настройки.

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

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

# 25 Модуль кода

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

• Импортируйте внешние файлы css, такие как Animate.css, только для той страницы, на которой вам нужна анимация.
• Добавьте блоки кода javascript или библиотеки, которые применимы только к вашей странице.
• Интегрируйте сторонние плагины, такие как слайдер Revolution.
• Вы можете использовать модуль кода полной ширины, чтобы встроить Typeform для более интерактивных анкет, контактных форм и т. Д.
• Добавить плавающее меню действий
• Создайте слайд-объявление на верхней панели.
• Добавьте кнопку с плавающим действием.

В заключение

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

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

Буду с нетерпением ждать ваших комментариев.