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 индекс элемента.

 





Изменить сайт wordpress супер плагин CSS обновлено: Февраль 3, 2017 автором: Илья Журавлёв

33 комментария

  • Алексей 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 Ответить

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

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

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



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

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

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