Визитные карточки являются популярным способом познакомить корпоративного лица с человеком. Он несет всю необходимую информацию об этом человеке и предоставляет свою полезную контактную информацию. Как насчет виртуальной визитной карточки на веб-сайте, который переворачивает и делает ту же работу? Это, безусловно, будет более динамичным, и социальные связи будут прикреплены к нему, чтобы каждый мог легко связаться с человеком. Ну, это звучит очень интересно, и мы узнаем об этой конструкции сегодня, на Диви! Итак, давайте начнем.
Предварительный просмотр дизайна
Сегодня мы построим эту конструкцию. Выглядит интересно, да?
Часть 1: Дизайн визитной карточки, которая переворачивается на кнопку
Добавить: Строка 1
Начните с добавления строки в одну колонку в обычный раздел.
Обновление следующих настроек.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчас- Уравнять высоты колонны: ДА
- Ширина: 90%
- Максимальная ширина: 1200px
Откройте настройку столбца и добавьте к нему обивку.
набивочный материал
- Рабочий стол - 30px сверху и снизу, 50px слева и справа.
- Планшет - 30px сверху и снизу, 50px слева и справа.
- Телефон - 15px сверху и снизу, 15px слева и справа
Добавьте следующий класс CSS из расширенной вкладки. Этот код будет работать в качестве триггера для нажатия для нашей флип-анимации.
- Класс CSS: карточная колонка
Клонирование столбца
Теперь дублируется предыдущий столбец. Теперь у нас есть макет для столбца, и каждый из них имеет тот же обивка и CSS класса.
Создание задней карты
Во-первых, мы создадим визитную карточку, которая, как правило, на спине и прийти на фронт при нажатии. Здесь мы разместим всю информацию о человеке. Мы перезвеем ему карту. Чтобы создать это, мы прикрепим разделитель в столбце 1. Затем мы выключаем видимость разделировок из настройки разделия, потому что мы будем использовать разделитель только для присоединения изображения к карте.
цвет фона
- Цвет фона: #322b3f
Фон Градиент
- Фон Градиент Левый цвет: rgba (50,43,63,0.72)
- Фон Градиент Правого цвета: #322b3f
- Тип градиента: Радиальный
- Конец позиции: 34%
- Место Градиент выше фоновое изображение: ДА
Фоновое изображение
- Справочное изображение: «Загрузить изображение или портрет члена команды»
- Размер фонового изображения: подходит
- Положение фонового изображения: Центр
сортировка
- Ширина: 100%
- Мин Высота: 300px
- Рост: 100%
Коробка Тень
- Окно тень: см скриншот
- Коробка Тень Вертикальное положение: 0px
- Коробка Тень Пятно Сила: 50px
Класс CSS и позиция
Теперь добавьте класс CSS в разделитель и обновите позицию.
- Класс CSS: бэк-карта
- Позиция: Абсолют
Добавить: Логотип на задней карте
У нас есть наша задняя карта на месте, мы добавим логотип на нем сейчас.
Теперь загрузите логотип. Размер должен быть около 60px-60px.
Класс CSS
- Класс CSS: карточный контент
позиция
- Позиция: Абсолют
- Вертикальная смещение: 30px (рабочий стол и планшет), 15px (телефон)
- Горизонтальное смещение: 50px (рабочий стол и планшет), 10px (телефон)
Добавить: Имя владельца карты
Теперь добавьте текстовый модуль под модулем логотипа к карте для имени. И обновить имя человека, которого вы хотите показать.
Сделайте это следующим образом изменено на вкладке дизайна.
- Текстовый шрифт: Поппинс
- Цвет текста: #ffffff
- Размер текста: 28px (рабочий стол и планшет), 22px (телефон)
- Расстояние между письмами: 1px
- Выравнивание текста: право
Добавить: Должность
Дублируйте предыдущий текстовый модуль, чтобы добавить должность задания. Редактировать содержимое тела и вносить коррективы во вкладку дизайна.
- Стиль текстового шрифта: TT
- Размер текста: 16px (рабочий стол и планшет), 14px (телефон)
- Маржа: 15px дно
Добавить: Название компании
Чтобы добавить название компании, дублировать предыдущий текстовый модуль и изменить содержание тела.
- Вес текстового шрифта: Легкий
- Стиль текстового шрифта: по умолчанию
- Размер текста: 22px (рабочий стол и планшет), 18px (телефон)
- Выравнивание текста: Слева
Добавить: Контактный номер
Чтобы добавить контактный номер человека. добавить модуль рекламного ролика под текстовым модулем компании. обновить содержимое тела с номером телефона и добавить значок.
Из настроек дизайна обновим следующее:
- Цвет иконы: #20BFAC
- Размещение изображения/иконы: слева
- Использование размера шрифта иконки: ДА
- Размер шрифта значка: 20px
- Тело шрифт: Поппинс
- Цвет текста тела: #ffffff
- Размер текста тела: 16px
- Маржа: 10px дно
Добавить: Адрес электронной почты
Дублируйте предыдущий модуль рекламного ролика и обновляйте содержимое тела в качестве адреса электронной почты. Затем обновив значок в конверте.
Добавить: Веб-сайт
Сделай то же самое, как мы сделали для раздела электронной почты. Копировать предыдущий модуль рекламного ролика и изменять содержимое.
Добавить: Иконки социальных медиа
Окончательный модуль мы добавим на задней карте социальных средств массовой информации следовать модуль. Добавьте этот модуль под последним модулем рекламного ролика.
Из настроек сделайте каждый социальный значок прозрачным и добавьте URL, если он вам нужен. Чтобы сделать все значки прозрачными, откройте каждый модуль социальных сетей и перетащите белый отмеченный бар вниз. Это изменит делать работу.
Кроме того, из вкладки дизайна, выровнять социальные медиа следовать иконки вправо.
Добавить: Один и тот же класс для всех модулей
Поскольку размещение и настройка всех наших модулей выполнены, теперь мы выбираем их с помощью многопользовательской функции Диви и добавим общий класс CSS. В соответствии с этим классом CSS, мы добавим CSS код, который будет показывать до содержания карты через флип анимации.
- Класс CSS: карточный контент
Держите "Cmd" или "Ctrl" и нажмите на элементы, чтобы выбрать их. Затем нажмите на настройки из любого модуля и внесите корректировку.
Создание передней карты
Наша задняя карта сделана, и теперь мы будем работать на передней карте, которая будет сидеть на месте задней карты и скрыть ее содержимое в спину. Мы спроектируем переднюю карту через модуль изображения в колонке 2, который заменит карту в колонке 1. Сначала мы добавим модуль изображения на столбце 2 и добавим логотип (60px-60px) на модуль.
Теперь откройте настройки модуля разделителя с задней карты и сыкверните фон.
Теперь откройте настройки изображения для передней карты и вставьте его.
Из раздела дизайна обновим расстояние между изображениями следующим образом:
- Обивка (рабочий стол и планшет): 30px сверху, 50px слева
- Обивка (телефон): 15px сверху, 10px слева
Расширенные настройки
Из расширенной вкладки, дать этому изображению CSS класса.
- Класс CSS: передняя карта
Добавьте пользовательский CSS на основной элемент.
height: 100%;
width: 100%;
Кроме того, обновление параметров положения.
- Позиция Абсолют
- Индекс: 13
Теперь, как вы сделали с передней карты, перетащите его на задней панели модуля в колонке 1.
Часть 2: Добавление пользовательского кода
Наконец, мы добавим некоторые индивидуальные CSS и J-Квери код довести флип анимации в нашем дизайне визитных карт. Для этого добавьте кодовое модуль ниже столбца 1.
Добавить: CSS код
Теперь добавьте код ниже внутри модуля кода. Убедитесь в том, чтобы сохранить то внутри стиль тега.
.card-column {
perspective: 1400px;
}
.front-card:hover {
cursor: pointer;
}
.front-card,
.back-card {
transition: all 500ms ease-in-out;
transform-style: preserve-3d;
}
.back-card {
transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}
.divi-transform-active .back-card {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
.divi-transform-active .front-card {
transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
transform-origin: 50% 50%;
}
.card-content {
transition: all 300ms ease-out 0ms;
}
.divi-transform-active .card-content {
transition: all 300ms ease-out 500ms;
opacity: 1 !important;
}
.divi-transform-active .front-card {
opacity: 0;
visibility: hidden;
}
Добавить: J-Квери код
Добавьте следующий код J-Кери ниже кода CSS. Не забудьте сохранить их внутри тегов сценария.
(function ($) {
$(document).ready(function () {
$cardColumn = $(".card-column");
$cardContent = $(".card-content");
$cardContent.css("opacity", "0");
$cardColumn.on("click", function (e) {
$(this).addClass("divi-transform-active");
e.stopPropagation();
});
$(document).on("click", function (e) {
if ($(e.target).is($cardColumn) === false) {
$cardColumn.removeClass("divi-transform-active");
}
});
});
})(jQuery);
Создание большего времени визитных карточек
Чтобы добавить больше визитных карточек ваших товарищей по команде, мы должны клонировать столбец столько раз, сколько вам нужно. Но убедитесь, что вы удалили модули кода из клонированных карт, потому что наличие двух модулей кода нарушит дизайн.
Теперь измените каждую карту в соответствии с каждым человеком, которого вы хотите показать здесь.
Окончательный вид
После всей проделанной работы наш дизайн выглядит так. Нажмите на каждую карту, и она будет переворачиваться и показывать информацию о человеке. Затем щелкните снаружи, и он вернется к своей прежней позиции.
заключение
Интерактивная визитная карточка является отличным способом для отображения ваших товарищей по команде на веб-сайте. Вы можете использовать это, чтобы показать информацию о наших проектах, поделиться идеями, и многое другое! Хит доля, если вы найдете этот учебник полезным, и если у вас есть какие-либо вопросы или вопросы, вы можете прокомментировать ниже.
