Опция Divi Sticky

Опция Divi Sticky

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

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

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

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

Примеры использования липких опций

С новыми опциями Divi можно сделать много. На демонстрационных видео видны возможности новой функции Divi Sticky.

Положение Divi Sticky

Использовать липкие параметры очень просто. При настройке любого элемента (строки, секции или модуля) надо зайти в настройки Расширенные ⟹ Scroll EffectsSticky Position и выбрать один из доступных вариантов закрепления

Закрепление элемента вверху экрана

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

 

Удерживание элемента внизу экрана

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

Это отлично подходит для плавающих форм подписки или призывов к действию, как показано ниже.

Прилипание сверху и снизу

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

Регулировка опций Divi Sticky

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

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

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

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

При прокрутке вверх меню «отлипает» и цвет его становится обычным, то есть в нашем случае прозрачным.

Чтобы включить настройку дизайна липкого стиля, необходимо сначала активировать опцию Divi Sticky (Расширенные ⟹ Scroll EffectsSticky Position).

После этого в настройках Фон появится «липкий» значок. Теперь можно независимо настроить стандартный и липкий стиль. Как только элемент станет липким, он примет свой липкий стиль.

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

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

Применение липкой границы

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

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

Опция Divi Sticky доступна без ограничений

Новые параметры Divi Sticky открывают много новых возможностей для веб-сайтов на Divi. Она позволяет не только легко создавать широкий спектр липких заголовков и меню, но и творчески комбинировать липкие элементы для создания действительно интересных новых дизайнов.

Опция Divi Sticky доступна начиная с версии 4.6

Опция Divi Sticky | foto avtora 1

Автор блога — DiviLancer Леонид

Занимаюсь созданием блогов, интернет-магазинов, лендингов и корпоративных сайтов на премиальной теме WordPress Divi. Работаю на фрилансе, как самозанятый, по техническому заданию и договору. Обучу администрированию сайта. Окажу техническую поддержку. Гарантия на все работы два года.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Как убрать копирайт темы в футере

Как убрать копирайт темы в футере

Практически во всех темах WordPress, как бесплатных, так и премиальных, в футере (footer) ставят значок разработчика темы или копирайта и указание о том, что сайт работает на WordPres с активными ссылками на сайт разработчика и сам Вордпресс.

Тема Extra от Elegant Themes не исключение. После установки темы и ее первичной настройки имеем вот такой футер.

Как убрать копирайт из футера
Если нам нужны хорошие позиции в поисковой выдаче, то «лишние», пусть и законные, исходящие ссылки на сайте не нужны. Закрыть эти записи проблематично, поэтому лучше убирать ссылки автора темы и WordPress.

Тема Extra не имеет в настройках темы опции изменения нижнего текста в футере. Однако можно выполнить несколько легких шагов и убрать название темы и ссылки на WordPress в футере.

 

Как убрать в футере надпись?

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

Надо найти в родительской теме файл footer.php и скопировать его в дочернюю тему. В теме Extra файл footer.php находится по адресу /wp-content/themes/extra.

Видимость картинки в браузере при заполненном атрибуте alt
Данная секция и отвечает за вывод информации в футер. Свою запись необходимо ввести следующим образом

<p id=»footer-info»>Желаемый текст</p>

NB! Если внести данное изменение в файл footer.php родительской темы, то после очередного ее обновления  все изменения потеряются. 

В файле footer.php это должно выглядеть следующим образом

Видимость картинки в браузере при заполненном атрибуте alt
Кроме текста в футере можно разместить ссылки, фотографии, рисунки, видео, то есть любой контент. В нашем случае футер будет выглядеть следующим образом:
Видимость картинки в браузере при заполненном атрибуте alt
Как убрать копирайт темы в футере | foto avtora 1

Автор блога — DiviLancer Леонид

Занимаюсь созданием блогов, интернет-магазинов, лендингов и корпоративных сайтов на премиальной теме WordPress Divi. Работаю на фрилансе, как самозанятый, по техническому заданию и договору. Обучу администрированию сайта. Окажу техническую поддержку. Гарантия на все работы два года.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.

Пресеты в теме Divi — новый способ создания сайтов

Пресеты в теме Divi — новый способ создания сайтов

9 июля 2020 года разработчик Divi Elegant Themes в версию темы 4.5 ввел Divi Presets (пресеты Divi). Это абсолютно новая система проектирования сайтов на основе классов.

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

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

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

Что такое пресет Divi?

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

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

Тем не менее если таких кнопок на сайте будет 10 или 20, то придется энное количество раз вносить изменения… до сих пор это так и есть.

Пресет Divi — сохраненный набор настроек дизайна модуля, строки или раздела темы. Другими словами, пресет — это пользовательская предустановка.

Система пресетов позволяет сделать пользовательский внешний вид кнопки и сохранить его. Затем просто применить этот пресет ко всем кнопкам. Вот и все!

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

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

Разработка новых пресетов

Управлять предустановками можно в раскрывающемся меню в верхней части панели настройки всех элементов. 

Создаем пресет, нажав кнопку «Добавить новый», даем ему имя. Затем настраиваем стиль, используя доступные параметры дизайна модуля. После сохранения он доступен в меню настроек элемента.

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

И дизайн модуля будет создан в соответствии с сохраненным дизайном.

Создание пресетов из существующих элементов

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

Назначение по умолчанию

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

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

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

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

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

Редактирование существующих пресетов

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

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

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

Это серьезный сдвиг в методологии дизайна Divi и огромное преимущество для пользователей!

Интерфейс пресета

Всеми пресетами можно управлять в новом выпадающем меню. Здесь можно создавать новые пресеты и управлять существующими.
Посмотрим на интерфейс пресета.

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

Интерфейс пресета
  1. Выпадающее меню пресетов. Здесь видны активные пресеты текущего модуля. Нажав на выпадающий список, можно управлять библиотекой пресетов.
  2. Default Preset. Пресет по умолчанию. Выбрав его, активируется внешний вид модуля по умолчанию.
  3. Назначенный пресет по умолчанию. Звездочка обозначает, какая предустановка в настоящее время назначена дефолтовой. Все основные модули сайта будут использовать эту предустановку. Нажав значок звездочки в любом пресете, делаем его по умолчанию.
  4. Выбранный пресет. Зеленая галочка указывает, какая предустановка назначена редактируемому модулю. Базовые стили модуля управляются выбранным пресетом.
  5. Редактировать пресет. Щелкнув значок карандаша изменяем дизайн предустановки. Когда редактируется дизайн пресета, все модули, использующие его, приобретают новый вид.
  6. Управление настройками. Можно изменить имя пресета, чтобы лучше организовать его в библиотеке.
  7. Обновить с текущими стилями. Обновление пресета в соответствии с текущим дизайном редактируемого модуля.
  8. Дублировать пресет. Это отличный способ создавать различные варианты без необходимости начинать с нуля, а используя то, что уже сделано.
  9. Удалить пресет. Все модули, использующие удаленный пресет, переключатся на предустановку по умолчанию.
  10. Создать новый пресет из текущих стилей. Создание нового пресета, соответствующего дизайну редактируемого модуля. Если есть предварительно разработанный элемент, которые можно повторно использовать на сайте, то его превращаем в пресет.
  11. Добавить новый пресет. Добавит новый пустой пресет в библиотеку. Затем можно настроить пресет, используя доступные элементы дизайна модуля.

Почему пресеты Divi так важны

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

Звучит ужасно, правда? Верьте или нет, но это текущее состояние большинства создателей страниц. И это было даже в Divi до сих пор.

Классы для CSS, а пресеты для Divi! 

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

Это серьезный сдвиг в методологии проектирования сайтов на Divi и огромное преимущество для пользователей нашей темы.

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

Пресеты в теме Divi — новый способ создания сайтов | foto avtora 1

Автор блога — DiviLancer Леонид

Занимаюсь созданием блогов, интернет-магазинов, лендингов и корпоративных сайтов на премиальной теме WordPress Divi. Работаю на фрилансе, как самозанятый, по техническому заданию и договору. Обучу администрированию сайта. Окажу техническую поддержку. Гарантия на все работы два года.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.