Elementor: как увеличить карточку профиля

Хотите узнать, как увеличить карточку профиля с помощью плагина компоновщика страниц? Elementor ?

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

Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:

Тогда давайте вернемся к тому, почему мы здесь.

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

Давайте создадим новый раздел со структурой из 3 столбцов, затем на панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.

Давайте добавим виджет Внутренний раздел в средней колонке. Виджет «Внутренний раздел» по умолчанию настроен на 2 столбца, давайте удалим один из них. Остальное настроим в панели, изменив ее Высокомерие из Мин. Высота и Минимальная высота давайте установим курсор на 400.

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

В разделе границы щелчок % и введите 4 для всех радиусов бордюра.

В количестве ящиков установите ползунок на 0 из горизонтальный, Чтобы 70 из вертикальный, Чтобы 63 из Флоу, Чтобы -60 из транслировать. Вы должны увидеть красивый эффект тени под своим изображением.

В внутренняя часть сдвинуть Виджет заголовка. В качестве названия введите Стив Джобс, на вкладке Стиль выберите белый цвет #FFFFFF. В типографике выберите Размер 20.

Затем выберите столбец виджета «Внутреннее сечение» и на вкладке «Стиль» выберите тип границы, щелкнув «Сплошная», все значения ширины равны 1, а цвета — #FFFFFF.

Во вкладке Передовой, измените поля на 15 и внутренние поля на 20.

Теперь вставьте значки социальных сетей, перетащив виджет «Значки социальных сетей» во внутренний раздел.

Редактируйте ссылки на социальные сети во вкладке Содержание нажав на «Каждая социальная сеть». Если вы хотите добавить другие социальные сети, нажмите кнопку «Добавить».элемент

В Поле значка нажмите на Библиотеку значков и в строке поиска введите первые буквы своей социальной сети, как только вы ее найдете, выберите ее и нажмите кнопку Вставить.

Затем перейдите на вкладку Стильв разделе значок, измените цвет на Personnalisé.

Также прочитайте наше руководство по; Как добавить пагинацию с помощью Elementor

Юг Основной цвет, установите прозрачность на минимум.

Юг Вторичный цвет, выберите цвет #FFFFFF. В поле «Размер» введите 20, Внутреннее поле вкл. 0.4.

Теперь нажмите на вкладку Передовой, а в разделе позиционирование, Cliquez сюр Personnalisé, на нестандартная ширина, входить 0.

Откройте для себя тоже Как использовать палитру цветов с Elementor

Юг Позиция, выберите абсолютный, по смене 15На Вертикальная ориентация Choisir Basи сдвиг из 20.

Выберите снова Внутренний раздел и во вкладке Передовойв разделе Пользовательские CSS (Если у вас нет этого раздела, быстро обновитесь до профессиональной версии Elementor, чтобы продолжить)

Скопируйте и вставьте следующий код в этот раздел:

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

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

Теперь скопируйте и вставьте следующий код после предыдущего кода, чтобы отобразить или скрыть определенные элементы столбца:

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

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

Давайте продублируем этот столбец 2 раза и удалим остальные 2 столбца.

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

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

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все, что касается этой статьи, в которой показано, как применить эффект масштабирования к карточке профиля. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...