Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Пользовательский CSS в конструкторе сайтов

Обновлено: 16.05.2018
29 комментариев

В этой статье я расскажу, как добавить пользовательский CSS в WordPress с помощью Elementor. С помощью конструктора сайта Elementor вы можете добавить пользовательский CSS в секцию, колонку, виджет. Если вы желаете получить еще больший контроль над стилем CSS страницы, Вы можете использовать пользовательский идентификатор CSS, чтобы добавить CSS к каждому элементу на странице.

Добавление пользовательских CSS к элементам

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

2. Перейдите на вкладку Расширенные, далее в группу свойств Пользовательские CSS

3. Добавьте ваш CSS код в поле редактора CSS

4. Для примера добавим следующий код, который добавить красный фон для выбранного элемента.

selector {background-color:red;}

элемент мгновенно применит указанные стили.

Обратите внимание на встроенный специальный селектор selector перед стилями, который внедрен специально чтобы указать на необходимость применения свойств к текущему элементу.

Используйте "selector" для указания родительского элемента. Примеры:
selector {color: red;} // Для основного элемента
selector .child-element {margin: 10px;} // Для дочернего элемента
.my-class {text-align: center;} // Или используйте любой селектор

Как задать необходимы класс элементу?

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

2. Перейдите на вкладку Расширенные, далее в поле CSS ID или CSS класс введите необходимые данные, например класс для секции необходимо ввести в поле CSS класс в виде my-class т.е просто без точки.

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

Редактирование стилей на странице

1. В панеле свойств перейдите к настройкам документа нажав на кнопку Настройки (рис справа)

2. Далее необходимо перейти на вкладку Стили

3. В группе свойств Пользовательские CSS вы можете написать свой код css который вам необходим.

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

29 комментариев

  • хотела уменьшить расстояние между строками в блоке список с иконками. но не получается. можете подсказать какой код css вставить? я пробовала так my-class {margin: 0 0 1px;} и так selector {margin: 0 0 1px;} страница с блоком иконки с текстом тутhttps://www.anilatur.com/turyi/syirovarnya-alberobello-olivkovoe-maslo.html

    • A

      нужно переписать стили темы, добавив так
      .elementor-icon-list-item span {
      margin-bottom: 0 !important;
      }

      На будущее. Лучше не использовать готовые темы, а делать сайт на основе темы от elementor Hello. Тогда не будет проблем со стилями итд.

      • благодарю, это помогло. я разместила код в спец. настройках для css. но я бы хотела как то научиться использовать css для отдельных блоков. как тут на скрине https://prnt.sc/26doptk ,
        есть место куда вписывать css но как то не получается, они тут не работают. у меня бесплатная версия. как если здесь вставить css ?

        • A

          Все также делать, только писать стили с учетом указанного класса. При этом нужно еще просматривать код инспектором в браузере. Т.е есть блок , но нужно в нему вручную прописать стили, то в указанном поле css классы, пишите myblok , а в итоге получаете доступ с помощью .myblok {…. итд } Но как говорил выше, что бы не переписывать стандартные стили темы, используйте голую тему от элементор и почти все можно будет сделать с помощью обычных настроек. Ну а в платной версии еще больше возможностей.

  • А как переопределить заголовок.
    В браузере вижу:
    Вступление
    А мне нужно H2.
    Так — selector {section-title side-pattern: h2;} — не получается. ))

    • A

      А через css переопределяют так заголовок? Если такое не работает в инспекторе кода, то и на элементоре тоже не заработает. А вообще совсем не понятно что нужно.

  • Добрый день, не подскажите, как вставить кастомную анимацию css в елементоре про? Сгенерила на сайте animista код css

    .scale-down-center {
    -webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    /* ———————————————-
    * Generated by Animista on 2021-2-20 0:43:22
    * Licensed under FreeBSD License.
    * See http://animista.net/license for more info.
    * w: http://animista.net, t: @cssanimista
    * ———————————————- */

    /**
    * —————————————-
    * animation scale-down-center
    * —————————————-
    */
    @-webkit-keyframes scale-down-center {
    0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    }
    }
    @keyframes scale-down-center {
    0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    }
    }

    не могу понять применение селектора в данном случае(например нужно применить анимацию ко всей колонке с несколькими элементами), буду очень благодарна, если подскажите!

    • A

      День добрый. Назначить для колонки свой идентификатор id на вкладке Расширенные и на основе этого подправить css.

      Но, что вам не хватает в штатной анимации? Ведь очень много чего в elementor pro есть и так!

  • Здравствуйте. Как простым способом отбить заголовок тире слева и с права. Пример:
    — ДЛИННЫЙ ЗАГОЛОВОК САЙТА —. чтобы на мобильной версии текст становился друг под другом, а тире были посередине, по вертикали.

    • A

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

      @media (max-width: 478px) {
      .tire {display:block;}
      }

      .

      • A

        Либо без CSS. Просто разделить на 3 заголовка (два из них тире) и в свойствах на вкладке Расширенные, в позиционирование, выбрать Друг за другом. А для моб устройств, выбрать другой.

  • Добрый день! А можно ли создать карусель в элементоре, что при наведении на изображения они будут закрываться каким нибудь фоном и будет появляться текст и можно будет сделать текст кликабельным для перехода по ссылке. Я подумал о том, что можно узнать класс каждой из картинки и добавить фон, но потом понял, что не знаю как добавить ссылку. Вот ссылка для примера

    • A

      День добрый. Да, можете задать класс для виджета и на основе класса, выполнять различные css и js операции над слайдами.

  • а в бесплатной версии елементора можно вставить свой стиль?

    • A

      Можно. Не так удобно как в платной, но все же. А точнее вставка стиля не в элементор, а посредством функционала ворпресса. Например можно вставить необходимые стили через Консоль — Внешний вид — Настроить — Дополнительные стили.

  • Здравствуйте! Скажите как реализовать на элементор, на странице кнопку назад, точно такую как в браузере (что бы она возращала на прежнее место, без перезагрузки страницы)? Заранее спасибо!
    П. С. Коды не знаю(

    • A

      Здравствуйте. Без кодов нельзя сделать. Попробуйте использовать виджет html код и вставить один из вариантов кода

      < input type="button" onclick="history.back();" value="Назад"/>
      < a href="#" onclick="history.back();return false;" rel="nofollow">Назад

      пробел между < input и < a убрать и далее можно оформить стилями.

      • Спасибо заработало! Но не могу понять как сделать что бы нажимая на иконку элементор (крестик закрытия svg) , воиспроизводилась эта функция… Или как поменять внешность кнопки на обычный серый крестик…

  • Подскажите. Вставляю объект с помощью виджета html-в котором есть свои свойства стиля css. В этих свойствах стиля указываются ключевые селекторы которые есть и в основном стиле шаблона. Как сделать что бы вставляемый стиль применялся только к одному объекту а не ко всей странице?

    • A

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

      и к стилям приписываем типа #wrap > .myselectoretc .etc
  • А как придать для кнопки класс fancybox-inline? Установил плагин easy fancybox, для создания всплывающей формы обратного звонка. Прописываю класс fancybox-inline в настройках кнопки, придается почему то id

    • A

      Никак. Доступен только id. Поищите другой плагин всплывающих форм. Их много и более функциональны. Или создайте кнопку в html со своим классом и прочими данными.

  • Жаль нет описания как получить имя дочернего элемента

    • A

      В смысле имя? В стилях имя не получают, а используют. Или я не понял вопроса (

      • Я ни где не нашел как узнать имя дочернего элемента в самом Elementor. Сейчас создаю страницу и в html коде ищу имя класса, что бы обратно вернуться в Elementor и использовать его в CSS.

        • A

          Михаил. Класс дочернего элемента можно узнать как и в любом другом сайте через браузер (инспектором). Отдельного функционала по выявлению дочернего элемента в elementor нету. Да и по сути надобности такой нет (только в редких случаях). Обычно хватает или использование selector как описано выше для ссылки на родителя т.е по сути на текущий элемент или прямое задания класса на вкладке «Расширенные» для привязки к классу блока или элемента.

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

          • Задача простая: для виджета Posts в элементе Box задать градиентные цвета. Код CSS простейший, проблемой стал поиск имен классов .elementor-post и .elementor-post__text. Может стоит к статье для таких новичков как я добавить пример разбора виджета по дочерним классам.

            • A

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

Оставьте свой комментарий