Вы хотите создать раздел участника команды с Elementor ?
Ну вы пришли в нужное место. Сегодня мы покажем вам, как создать замечательный раздел для членов команды с Страница Builder Elementor.
Для выполнения этого урока вам понадобится Elementor pro версия, потому что мы использовать собственный код CSS это возможно только с про версиейElementor. Если вы еще этого не сделали, обновите его.
И чтобы понять, о чем идет речь в этом уроке, мы предлагаем вам посмотреть следующее видео:
Для начала создайте страницу и отредактируйте ее с помощью Elementor.
Затем в последнюю вставьте структуру с 3 столбцами, затем в панель, под вкладку Содержание, установите для параметра «Высота» значение «Мин. высота» и выберите «Мин. высота VH», затем установите ползунок на 100.
Выберем средний столбец, чтобы отредактировать его, и перейдем на вкладку «Дополнительно». Установим для всех внутренних полей значение 30.
Давайте вставим виджет «Внутренний раздел» в этот столбец, затем удалим один из столбцов, содержащихся во «Внутреннем разделе», затем на панели под вкладкой. Содержание, давайте также установим высоту Min Height и ползунок на 450 пикселей.
НаВертикальное выравнивание выбрать Bas и переполнение выбрать Маска.
Во вкладке Стиль Измените фон на классический и выберите изображение из своей библиотеки.
Прочтите наше руководство по: Как создать карточку товара с Elementor
Юг Позиция выбрать Улучшенный по центру, Прикрепить файл из Скроллинг, Скажи еще раз из Не повторяется et Размер из обложка
В границах определите границы из 12.
Добавим теневые эффекты. В Shade of box изменим вертикальный из 22, Флоу из 40 et Диффузор из -10.
Добавим Виджет заголовка во внутреннем разделе и дайте имя нашему члену и центроны виджет.
Читайте также: Как изменить заголовок при прокрутке страницы с помощью Elementor
Во вкладке Стиль, Доработаем его цвет текста и оформление выбирать 22 для размера шрифта и 500 для смазка, трансформация из прописная буква et Межбуквенное расстояние из 1.2
Тогда давайте продублируем виджет заголовка и измените заголовок второго виджета и в типографике выберите 15 для размера шрифта и 500 для ширины, преобразование по УСПЕШНОЕ и межбуквенный интервал на 1.2
Переходим во вкладку Передовой и определить Верхнее поле из -15. Давайте добавим виджет значков социальных сетей во внутренний раздел.
Переходим во вкладку Стиль, измените цвет на Custom, сделайте основной цвет прозрачным и установите внутренние поля на 0.30.
Во вкладке Передовой, Определите поля Высокая на -15 и низкая на 20
Затем выберите столбец внутреннего раздела, чтобы изменить его, и на вкладке Стиль выберите тип классический а по цвету возьмем # FFFFFF28.
Читайте также: Как пролистать длинное изображение портфолио с помощью Elementor
Затем выберите столбец внутреннего раздела, чтобы изменить его, и на вкладке Передовой в поле CSS классы, давай возьмем член-информация
Затем выберите Внутренний раздел затем во вкладке Передовой в поле Пользовательские CSSвставьте следующий код:
/ * Эффект стекла CSS * /
селектор {
–Высота: 150 пикселей;
–Нижний край: -150 пикселей;
переполнение: скрыто! важно;
}
selector .member-info {
height: var (–height);
положение: абсолютное;
фон-фильтр: размытие (15 пикселей);
внизу: 0;
переход: легкость входа-выхода .5s;
}
После первого кода CSS вставьте следующее:
/ * CSS для скрытия или отображения при наведении * /
selector .member-info {
внизу: var (–bottom);
}
selector: hover .member-info {
внизу: 0 пикселей;
}
Теперь при наведении курсора на изображение появляется информация о члене.
Дублируйте столбец 2 раза и удалите остальные пустые столбцы.
Затем выберите Внутренний раздел и измените фоновое изображение на изображение другого члена команды, измените его имя и профессию, сделайте то же самое с другим столбцом.
Предварительный просмотр своей работы на планшете и мобильном телефоне, улучшая поля и многое другое для лучшего просмотра.
Вот так можно создать замечательный раздел для членов команды.
Получите Elementor Pro прямо сейчас!
Заключение
Так ! Вот и все, что касается этого руководства, в котором показано, как создать раздел для членов команды. Если у вас есть какие-либо вопросы о том, как туда добраться, сообщите нам об этом в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
