Как позиционировать кнопки абсолютно для создания уникальных макетов кнопок в Divi
Опубликовано: 2020-02-26Встроенные параметры положения Divi - это удобный инструмент дизайна для точного позиционирования любого элемента Divi, включая кнопки. В большинстве случаев мы полагаемся на статическое положение кнопки по умолчанию, которое соответствует потоку документа (или страницы). Однако, если мы знаем, как позиционировать кнопки абсолютно, мы можем создать несколько уникальных и практичных макетов кнопок для нашего контента Divi.
В этом уроке мы покажем вам, как создать 4 разных макета кнопок, которые уникально подчеркнут модуль Blurb Divi. Это пригодится при использовании объявлений на вашем сайте.
Давайте начнем.
Sneak Peek
Ознакомьтесь с этим кратким обзором четырех кнопок, которые мы создадим в этом руководстве.
Загрузите макеты кнопок Divi БЕСПЛАТНО
Чтобы ознакомиться с макетами кнопок из этого руководства, вам сначала нужно загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.
Давайте перейдем к руководству, не так ли?
Что вам нужно для начала
Для начала вам необходимо сделать следующее:
- Если вы еще этого не сделали, установите и активируйте тему Divi.
- Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
- Выберите вариант «Строить с нуля».
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Создание макета кнопок # 1: двойные нижние кнопки
Для первого из наших четырех макетов кнопок мы собираемся создать двойные нижние кнопки под модулем рекламного сообщения. Это отличный вариант для показа контента (например, услуг), для которого требуется два CTA. Кроме того, это отличный способ удерживать кнопки в нижней части столбцов с одинаковой высотой.
Для начала добавьте в раздел строку из двух столбцов (одна половина одна половина).
Настройки строки
- Использовать нестандартную ширину желоба: ДА
- Ширина желоба: 2
- Выровнять высоту столбца: ДА
- Ширина: 100%
- Поля: 50 пикселей снизу
- Padding: 0px сверху, 0px снизу
Столбец 1 Настройки
- Цвет фона: # 2e3858
- Отступ: 50 пикселей снизу
Этот нижний отступ создаст необходимое пространство для добавления абсолютно позиционированных кнопок.
Дизайн модуля рекламного сообщения
Затем добавьте модуль рекламного сообщения в столбец 1.
Затем загрузите изображение в модуль аннотации следующим образом:
Зайдите в настройки дизайна и обновите следующее:
- Выравнивание изображения / значка: влево
- Шрифт заголовка: PT Sans
- Толщина шрифта заголовка: полужирный
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 38 пикселей
- Интервал между заглавными буквами: 2 пикселя
- Цвет основного текста: #ffffff
- Ширина изображения: 40%
- Ширина содержимого: 100%
- Ширина: 100%
- Отступ: 50 пикселей сверху, 50 пикселей снизу, 30 пикселей слева, 30 пикселей справа.
Добавление кнопок с двойным дном
Дизайн кнопки №1
Добавьте новый модуль кнопок под модулем рекламных сообщений.
Затем обновите настройки кнопки следующим образом:
- Размер текста кнопки: 16 пикселей
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: # 2dc3a3
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 0 пикселей
- Расстояние между буквами кнопки: 2 пикселя
- Шрифт кнопки: PT Sans
- Толщина шрифта кнопок: полужирный
- Стиль шрифта кнопки: TT
- Поля: низ 0 пикселей
- Заполнение: 1em сверху, 1em снизу, 1.5em слева, 2.5em справа
Кнопка №1 Абсолютное позиционирование
Чтобы разместить кнопку абсолютно в нижнем левом углу столбца, обновите следующее:
- Позиция: Абсолютная
- Расположение: внизу слева
Divi упрощает эту задачу благодаря встроенной интерактивной сетке местоположений. Поскольку мы хотим, чтобы кнопка располагалась заподлицо в нижней части столбца, значения смещения не требуются.
Кнопка № 2 Дизайн и расположение
Чтобы создать кнопку №2, продублируйте предыдущий модуль кнопок.
Дубликат будет размещен прямо поверх предыдущей кнопки, поэтому, если вы используете визуальный конструктор, может показаться, что ничего не произошло. Щелкните, чтобы открыть настройки модуля кнопок и обновить следующее:
- Цвет фона: # df4570
- Расположение позиции: внизу справа
Теперь сотрите пустой столбец 2 и продублируйте столбец 1, чтобы получить точный дубликат дизайна в правом столбце.
Расположение кнопок №1, результат
Посмотрите результат. Обратите внимание, что содержимое в правом столбце подталкивает столбец вниз по странице, но поскольку наши кнопки расположены абсолютно, они продолжают прилегать к низу, создавая красивый симметричный дизайн.
Создание макета кнопок # 2: три боковые кнопки
Для следующего макета кнопок мы собираемся расположить три кнопки справа от модуля рекламного объявления в одном столбце.
Чтобы начать разработку этого макета следующей кнопки, продублируйте предыдущую строку.
Настройки Blurb
Обновите настройки рекламного сообщения следующим образом:
- Цвет фона: # df4570
- Ширина изображения: 60%
- Ширина: 56% (компьютер и планшет), 100% (телефон)
Это создаст комнату, которая нам нужна справа от рекламного объявления, чтобы добавить наш макет с тремя кнопками.
Кнопка позиционирования # 1
Чтобы разместить кнопку №1, откройте настройки зеленой кнопки в нижнем левом углу и обновите следующее:
- Позиция: Абсолютная (ПК и планшет), Относительная (телефон)
- Расположение: вверху справа
- Вертикальное смещение: 20% (настольный компьютер и планшет), 0% (телефон)
- Горизонтальное смещение: 5% (настольный компьютер и планшет), 0% (телефон)
Кнопка позиционирования # 2
Чтобы разместить кнопку №2, продублируйте кнопку, которую вы только что разместили. Вы можете удалить красную кнопку в правом нижнем углу, потому что она нам не понадобится.
Затем откройте настройки дублирующей кнопки и обновите следующее:
- Цвет фона: # df4570
Затем переместите кнопку немного вниз, увеличив вертикальное смещение.
- Вертикальное смещение: 35%
Кнопка позиционирования # 3
Наконец, повторите процесс еще раз, продублировав предыдущую кнопку и обновив следующее:
- Цвет фона: # 3599e5
- Вертикальное смещение: 50%
Расположение кнопок №2, результат
Ознакомьтесь с окончательным результатом трехкнопочной раскладки.
Создание макета кнопок # 3: кнопки с разбросом и масштабированием
Для этого следующего макета мы собираемся расположить кнопки немного более спорадически, а затем отрегулировать размер нескольких кнопок, используя масштаб трансформации.
Для начала продублируйте предыдущий ряд, содержащий трехкнопочную раскладку.
Настройки Blurb
Затем откройте настройки модуля рекламного сообщения в столбце 1 и обновите следующее:
- Ширина: 60%
- Цвет фона: прозрачный
- Ширина: 60%
- Выравнивание модуля: по центру
- Выравнивание текста: по центру
- Выравнивание модуля: по центру
- Ширина границы: 2 пикселя
- Цвет границы: rgba (255,255,255,0,15)
- Размер текста текста: 20 пикселей
- Поля: сверху 50 пикселей
Позиционирование кнопки # 1
- Вертикальное смещение: 8%
- Горизонтальное смещение: -7%
Позиционирование кнопки # 2
- Расположение Расположение: вверху справа
- Вертикальное смещение: 34%
- Горизонтальное смещение: -10%
- Масштаб трансформации: 80%
Позиционирование кнопки №3
- Позиция Расположение: внизу справа
- Вертикальное смещение: -3%
- Горизонтальное смещение: 5%
- Масштаб трансформации: 138%
Настройки строки
- Ширина желоба: 4
- Ширина: 80% (рабочий стол)
Расположение кнопок №3, результат
Проверьте окончательный результат.
Создание макета кнопок # 4: кнопки с вкладками
Для этого последнего макета кнопок мы собираемся создать несколько язычков в правом верхнем углу аннотации.
Чтобы приступить к дизайну, продублируйте ряд макета кнопок №2.
Настройки столбца
Затем обновите настройки фона для столбца №1 следующим образом:
- Цвет фона (рабочий стол): нет (по умолчанию)
- Цвет фона (телефон): # 2e3858
На вкладке «Дополнительно» обновите параметр видимости, чтобы переполнение было скрыто на дисплее телефона.
- Горизонтальное переполнение (телефон): скрыто
- Вертикальное переполнение (телефон): скрыто
Положение кнопки с отрывным язычком №1
Теперь мы можем использовать три кнопки, которые в данный момент находятся в столбце, в качестве наших кнопок с вкладками. Откройте настройки для верхней кнопки и обновите следующее:
- Вертикальное смещение: 0 пикселей
- Горизонтальное смещение: 0 пикселей
Поскольку мы собираемся использовать кнопку для вкладки, нам нужно освободить место для правого значка, чтобы он выглядел по центру, когда он торчит из-за модуля рекламного сообщения. Продолжайте и обновите отступы кнопок следующим образом:
- Заполнение: 2em слева, 3em справа
Затем добавьте следующий настраиваемый CSS в элемент After:
padding-left: 10px;
Затем обновите горизонтальное смещение на телефоне следующим образом:
- Горизонтальное смещение (телефон): -134 пикселей
Это скроет левую часть кнопки за пределами столбца на дисплее телефона, так что при наведении / щелчке будет отображаться вся кнопка.
Позиционирование кнопки откидного язычка №2
Чтобы разместить вторую выдвижную кнопку, продублируйте предыдущую кнопку и обновите цвет фона дубликата.
- Цвет фона: # df4570
Затем обновите позицию следующим образом:
- Вертикальное смещение: 63 пикселя
Затем обновите следующие параметры положения для дисплея телефона:
- Должность (телефон): Родственная
- Вертикальное смещение (телефон): 0%
Позиционирование кнопки язычка # 3
Наконец, чтобы расположить третью кнопку с язычком, скопируйте предыдущий модуль кнопок. Затем откройте настройки для дублирующего модуля кнопки и обновите следующее:
- Цвет фона: # 3599e5
- Вертикальное смещение: 126 пикселей
Как только третья кнопка будет на месте, используйте функцию множественного выбора Divi, удерживая Cmd (или Ctrl) и щелкая каждый из модулей кнопок.
Затем откройте настройки одного из модулей кнопок и добавьте следующее преобразование translate при наведении курсора.
- Transform Translate X Axis (при наведении): 68%
Это обновит все три кнопки с функцией отрывания при наведении курсора, перемещая его вправо на 68%.
Позиционирование модуля Blurb
Этот макет кнопок требует, чтобы модуль рекламного сообщения частично скрыл три кнопки. Поэтому мы зададим рекламному объявлению 100% ширину, а затем воспользуемся правым полем, чтобы открыть необходимую часть вкладок кнопок. Затем все, что нам нужно сделать, это присвоить рекламному объявлению высокий индекс Z, чтобы убедиться, что он находится над кнопками.
Откройте настройки модуля рекламного сообщения и обновите следующее:
- Ширина: авто
- Поле: 50 пикселей справа
- Должность: Родственник
- Индекс Z: 11
Затем обновите цвет фона.
- Цвет фона: # 2e3858
Настройки строки
После того, как кнопки с рекламным сообщением и отрывными язычками будут готовы, откройте настройки строки и обновите ширину, чтобы дать этим вкладкам пространство для перемещения.
- Ширина: 80%
Удалите столбец 2, а затем продублируйте столбец 1, чтобы в каждом из них был одинаковый дизайн.
Затем откройте настройки для столбца 1 и присвойте ему следующий индекс Z:
- Индекс Z: 12
Это гарантирует, что кнопки в первом столбце не будут скрыты за содержимым столбца 2 при наведении курсора.
При желании вы можете обновить значки для каждой кнопки в соответствии со своими потребностями.
Расположение кнопок №4, результат
Посмотрите на окончательный результат раскладки кнопок с вкладками.
Окончательные результаты
Последние мысли
Позиционирование кнопок абсолютно открывает двери для бесконечных раскладок кнопок в Divi. Надеюсь, это руководство поможет вам понять, как лучше всего использовать абсолютную позицию в Divi. Другие полезные встроенные функции, такие как параметры преобразования и Z-индекс, делают дизайн кнопок абсолютно позиционированным.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!