css wordpress сайт

Изменить сайт wordpress супер плагин CSS


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

 Установить плагин SiteOrigin CSS вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

site origin css

 

 После установки и активации плагина, перейдите на страницу: Внешний видCustom CSS. Здесь будут отображаться изменённые CSS стили вашего сайта. Чтобы приступить к изменению сайта, нажмите на значок «глазик», который отображается над полем справа. (смотри скриншот)

 

настройки css

 

 Далее, у вас откроется ваш сайт. Слева в боковой панели будут отображаться инструменты для изменения вашего сайта. Всё очень просто, наведите курсор мыши на любой элемент сайта, который вы хотите изменить. Нажмите по элементу сайта, слева появится название его CSS стиля и вы сможете его изменить, пользуясь доступными инструментами.

 

изменить css сайт

 

 После сделанных изменений, нажмите вверху страницы слева на «кнопку с галочкой».

 

сохранить изменения

 

 Далее, на странице плагина появятся изменённые CSS стили, чтобы их сохранить нажмите внизу на кнопку — Save CSS.

 

css стили сохранить

 

 

Обозначения инструментов

 

Text

— Text Color, цвет текста.

— Font Size, размер шрифта.

— Line Height, высота линий.

— Font Weight, вес шрифта.

— Font Style, стиль шрифта.

— Text Decoration, оформление текста.

— Font Variant, вариант шрифта.

— Text Transform, преобразование текста.

— Font Family, название шрифта.

— Text Align, выравнивание текста.

— Text Indent, отступ текста.

— Letter Spacing, межбуквенный интервал.

— Word Spacing, интервал между слов.

— White Space, пустое пространство.

— Text Shadow, тень текста.

 

Decoration

— Background Color, цвет фона.

— Background image, фоновое изображение.

— Background Position, позиция фона.

— Background Repeat, повторение фона.

— Background Size, размер фона.

— Box Shadow, тень рамки.

— Opacity, непрозрачность.

— Borders, бордюр, тип, размер, цвет.

 

Layout

— Margin, края, граница полей, тип, размер.

— Padding, заполнение, набивка.

— Position, позиция.

— Absolute Position, абсолютная позиция.

— Width, ширина.

— Height, высота.

— Display, тип отображения.

— Float, плавающий элемент.

— Clear, свободный элемент.

— Visibility, видимость.

— Overflow, переполнение.

— Overflow X, переполнение X элемента.

— Overflow Y, переполнение Y элемента.

— Z-Index, Z индекс элемента.

 

Остались вопросы? Напиши комментарий! Удачи!

 






info-effect.ru
Изменить сайт wordpress супер плагин CSS обновлено: Август 14, 2017 автором: Илья Журавлёв

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

  • Алексей 30.08.2016 Ответить

    Большое спасибо за этот удивительный блог с кучей полезных материалов!
    Есть вопрос: на работе создал внутренний сайт. Разумеется фантазия разыгралась по увеличению функциональности, красивостям и т.д
    Сайт находится исключительно в локалке и не имеет доступа в Инет. Разумеется все плагины и другие вещи приходится ставить путём скачивания соответствующих файлов с Инета.
    Но знаком с мнением, что установка с не репозитория WP может грозить неприятностями в виде всякой хрени (извините).
    Можно ли подробней узнать по этой теме о страхах и рисках особенно при загрузке «бесплатно» изначально платного контента?
    Спасибо за блог, спасибо за внимание!

    • Илья Журавлёв 31.08.2016 Ответить Автор

      Привет, нет никаких рисков, если качать плагины с официального сайта WordPress ! Только один минус обновления не доступны, а плагины и система постоянно обновляются !

  • Daulet Meldeshev 12.12.2016 Ответить

    подскажите как сделать две колонки?

    • Илья Журавлёв 12.12.2016 Ответить Автор

      Смотри на вкладке «Layout» параметр «Display». Можно добавлять и свои стили, не обязательно только те которые там есть. Поставь себе ещё плагин — Simple Custom CSS, чтобы свои стили добавлять.

  • Ольга 15.02.2017 Ответить

    Здравствуйте! Подскажите какой-нибудь способ убрать с темы сайта лишние теги h1, h2. Может есть какой-нибудь плагин для этого?

    • Илья Журавлёв 15.02.2017 Ответить Автор

      Здравствуйте, залезть в код и убрать. Внешний вид — Редактор, header.php, возможно и в других файлах.

  • Роман 01.03.2017 Ответить

    Обязательно ли создавать дочернюю тему? Сохранятся ли изменения после обновления темы?

    • Илья Журавлёв 01.03.2017 Ответить Автор

      Нет, Не обязательно создавать дочернюю тему. Все изменения сохранятся, при любых обновлениях. CSS стили прописываются на странице плагина и они никуда не денутся.

    • Роман 01.03.2017 Ответить

      Спасибо!
      А может быть у вас есть статья о плагине Theme Customisations? Интересно было бы разобраться

      • Илья Журавлёв 01.03.2017 Ответить Автор

        А что за плагин ? В админ-панели не могу найти его…

    • Роман 01.03.2017 Ответить

      Это плагин от WooCommerce.
      Скачивается из админпанели:
      Внешний вид — Storefront

      • Илья Журавлёв 01.03.2017 Ответить Автор

        Понял, а зачем вам этот плагин ? Что вы хотите сделать ?

    • Роман 01.03.2017 Ответить

      Мне подойдет вариант со вставкой кода виджета прямо на страницу Оформление заказа. Только вот где эта страница? Мне нужно в определенном месте вставить код. Как ее найти?

  • Роман 01.03.2017 Ответить

    Мне нужно разместить виджет службы доставки на страницу оформления заказа.
    Но, возможно, при обновлении темы все изменения удалятся…
    Я только начал разбираться, поэтому — может не совсем в тему

    • Илья Журавлёв 01.03.2017 Ответить Автор

      А проблема в чём ? Вы можете поставить код виджета прям на страницу Оформление заказа, откройте её для редактирования и вставьте код. Можно в виджет «Текст» вставить и отобразить виджет только на странице Оформление заказа с помощью плагина Display Widgets.

      • Роман 01.03.2017 Ответить

        Вот об этом виджете идет речь…

        • Илья Журавлёв 01.03.2017 Ответить Автор

          Не важно какой виджет. Чтобы вставить его в определённое место, нужно плагин искать соответствующий. Я посмотрю.

          • Роман 01.03.2017

            Спасибо

    • Роман 01.03.2017 Ответить

      Мне подойдет вариант со вставкой кода виджета прямо на страницу Оформление заказа. Только вот где эта страница? Мне нужно в определенном месте вставить код. Как ее найти?

  • Анна 18.04.2017 Ответить

    Здравствуйте! У меня проблема с мобильной версией. Товар идет в две колонки и кнопка Заказать плавает, т.е. название товара размещено в двух строках, то кнопка Заказать находится ниже рядом стоящей. Как сделать, чтобы вне зависимости от названия кнопки находились на одном уровне.

    • Илья Журавлёв 18.04.2017 Ответить Автор

      Здравствуйте. Измените стили CSS, margin и padding.

    • Илья Журавлёв 18.04.2017 Ответить Автор

      Используйте CSS стили вот в таком формате:

      @media screen and (max-width: 600px) {
      #chto_izmenit {
      css стили
      }
      }

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

  • Эдуард 04.05.2017 Ответить

    Здравствуйте!
    У меня редактируется этим плагином только «главная» страница. А как перейти на другие страницы?

    • Илья Журавлёв 04.05.2017 Ответить Автор

      Здравствуйте. Вверху есть специальное поле, вставьте туда любой URL адрес вашего сайта.

  • Эдуард 05.05.2017 Ответить

    Спасибо за помощь!
    Ещё вопрос: можно ли в этом плагине, после захода в редактирование, убирать на время левую панель (где все настройки). Так, чтобы страница сайта была во всю ширину окна. Это удобно бы было выбирать любые элементы на странице.

    • Илья Журавлёв 05.05.2017 Ответить Автор

      Такой функции нет у плагина.

  • Надежда 01.06.2017 Ответить

    Спасибо вам за ваши труды, это очень круто!! Странно, я в форме оформления заказа через этот плагин убираю поля, где нужно вводить адрес места жительства, и он показывает, что убрал. Я всё сохраняю, как тут написано. Но, когда потом захожу в «оформление заказа», там все эти поля присутствуют.

  • Надежда 01.06.2017 Ответить

    Спасибо, я уже убрала эти поля с помощью другого плагина. Хотя непонятно, почему этот не подействовал. Можно ещё вопрос? Я установила плагин Woocommerce Easy Booking, чтобы была возможность бронировать даты к услугам. Всё прекрасно, но смущает, что все его функции отображаются на английском, можно ли как-то его русифицировать автоматически, или может как-то вручную перевести некоторые элементы, которые бросаются в глаза? (кнопка «Select date» ; при выборе даты брони, — слова «start, end», и т д).

  • Александр 13.07.2017 Ответить

    Круто. Получается. Только вот как настроить, чтобы зафиксированный элемент перемещался не за картинками, а поверх всего?

  • Любовь 24.09.2017 Ответить

    Привет Илья!
    Подскажи, пожалуйста, как мою проблему решить?
    У меня перестал быть управляемым плагин SiteOrigin CSS.
    Полностью!
    Причем когда открываю окно настройки CSS — все идеально, сайт выглядит как надо.
    Сохраняю.
    Смотрю результата нет. И сам сайт отображается не так как надо.

    Как ты пишешь, решила почистить кеш плагином WP Fastest Cache, как ты советуешь.
    Но не могу скачать плагин…
    Пишет: Установка не удалась: Не удалось создать директорию.

    Получается какие-то проблемы на всем сайте?
    Сайт на вирус проверила-чисто.
    Но что то заклинило. Плагин SiteOrigin CSS как парализовало(
    Спасибо огромное огромное!

  • Любовь 24.09.2017 Ответить

    Спасибо Илья!
    Уже, сейчас же!)

  • Дмитрий 13.11.2017 Ответить

    Подскажите, если плагин будет удален, все изменения сбросятся, и будет все в первозданном виде?

    • Илья Журавлёв 13.11.2017 Ответить Автор

      Да, если плагин удалить, все изменения вернуться в исходное состояние. Но, вы можете скопировать весь CSS код (который сгенерировал плагин) и добавить его в файл style.css (Внешний вид — Редактор). Тогда все изменения сохранятся, а плагин можно будет удалить.

  • Дмитрий 13.11.2017 Ответить

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

    • Илья Журавлёв 13.11.2017 Ответить Автор

      Да, у меня у самого такое было. Перенесите все стили в style.css и тогда проблема решится.

      • Александ 21.11.2017 Ответить

        А как это сделать, где можно подробней об этом почитать.

    • Илья Журавлёв 13.11.2017 Ответить Автор

      Только потом кэш не забудьте удалить. Это можно сделать с помощью плагина WP Fastest Cache.

  • Дмитрий 13.11.2017 Ответить

    огромное Вам спасибо!

  • Дмитрий 13.11.2017 Ответить

    рано радовался))) там столько текста в style.css, не подскажите куда именно скопированный текст вставлять?)

    • Илья Журавлёв 13.11.2017 Ответить Автор

      В самый конец ставьте и всё. Не забудьте как-то обозначить стили. Например ///* Custom CSS */// (перед стилями).

  • Александ 21.11.2017 Ответить

    Хочу поменять цвет шрифта. а он меняет цвет его при наведении курсора. а основной цвет остается таким же

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

восклицательный знак Отправляя свои данные Вы соглашаетесь с Политикой Конфиденциальности сайта info-effect.ru.


Яндекс.Метрика

- Карта - Связь - Мой хостинг

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх