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 автором: Илья Журавлёв

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

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

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

  • Андрей 03.12.2017 Ответить

    Здравствуйте! Помогите хотя бы в какую сторону “копать”, все запросы попробовал в поисковике. Даже не понимаю как сформулировать точный запрос. Помогите, не проходите мимо!!! Есть страница, при наведении курсора на допкарточку “столы”, двигается цена и корзина, а также элементы “добавить в избранное и просмотр”, как их зафиксировать?! Пожалуйста, хэлп!

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

      Здравствуйте. Никаких проблем у вас не обнаружил. Просто тема у вас такая, анимированная. Анимацию ищите в стилях, основной файл stile.css. Почему это вас так беспокоит?

  • Андрей 17.12.2017 Ответить

    Здравствуйте Илья.Посмотрел несколько месяцев назад ваше видео и установил этот плагин SiteOrigin CSS себе на сайт.Все было нормально, но после того как я перевел сайт с http на https (купил сертификаты) этот плагин перестал показывать сайт , когда нажемаеш на “глазик”.И в адресной строке плагина он отображается не https, а по старому – http.Подскажите пожалуйста, если есть возможность, как решить данную проблему.(плагин SiteOrigin CSS удалял и устанавливал снова но проблема осталась)

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

      Здравствуйте. Думаю дело не в плагине. Скорей всего конфликт возникает из-за того, что у вас в коде остались ссылки с протоколом HTTP. Вам может помочь плагин – HTTP / HTTPS Remover. Попробуйте его. Он удаляет все протоколы http и https из кода, чтобы не было конфликтов.

  • Андрей 19.12.2017 Ответить

    Большое вам спасибо Илья.Получилось но не сразу. Еще пришлось очистить кэш плагином WP Super Cache.И после этого плагин SiteOrigin CSS заработал .

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

      Пожалуйста! Пишите, если что.

  • дмитрий 18.03.2018 Ответить

    здравствуйте Илья. Почему то в плагине нет шрифтов.

  • Наталья 10.04.2018 Ответить

    Здравствуйте, Илья! Помогите, пожалуйста! Я для изменения на своем сайте использовала плагин SiteOrigin CSS. Многое изменила, плагин понравился. Но почему-то все мерцает: то есть сначала видно то, как было до установки плагина. Например, мелькают бывшие крупные шрифты, другой цвет строки поиска (в верхнем меню). Посмотрите, если можете, мой сайт. Спасибо!

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

      Здравствуйте! Ваша проблема очень просто решается. Перенесите все стили на страницу: Внешний вид – Настроить – Дополнительные стили. Прямо туда всё скопируйте и сохраните. Поле плагина можно оставить пустым.

  • Наталья 10.04.2018 Ответить

    Илья, спасибо большое Вам! Все получилось! )))

  • Ирина 12.04.2018 Ответить

    Спасибо вам большое за такой чудесный сайт!
    Нашла здесь много полезного. Не подскажете, как-то можно в SiteOrigin CSS
    1. опустить ниже меню. Оно выстроено линию, и загораживает часть фото в заголовке. Хотелось бы его опустить, но не получается.
    2. поставила на фон картинку и слегка размыла её. Вместе с ней размылся и текст, можно как-то оставить размытие только на фон?

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

      Пожалуйста! 1. Вам нужно изменить margin или padding. 2. Как размыли картинку?

      • Ирина 13.04.2018 Ответить

        Спасибо. По 2 не дождалась, откатила все назад и добавила просто размытую картинку на фон. Теперь в редакторе все хорошо, а на сайте нет. Кэш чистила, но пока грузит по старому. Почему так?

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

          У вас плагин кэширующий стоит?

  • Ирина 16.04.2018 Ответить

    Да. Спасибо большое . Примерно через час все стало как надо.

  • Ирина 17.04.2018 Ответить

    А не скажете еще как убрать мерцание меню?
    Как наводишь мышь на нужный раздел, все мерцать начинает. Очень не удобно.

    Спасибо за ваш сайт!

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

      Можете ссылку дать, чтобы посмотреть

  • Ирина 18.04.2018 Ответить

    Конечно.
    Вот сайт – фотопеленка.рф
    Сейчас посмотрела в другом браузере, для пользователя все выглядит хорошо. Мерцать начинает только в консоли.
    Вопрос отпал сам собой, спасибо!

  • Наталья 20.04.2018 Ответить

    Илья, добрый день! я к вам недавно обращалась, Вы мне очень помогли. ,… Можете еще помочь? Как выводить только одну запись от каждой категории? Но так, чтобы при помощи плагина “Content Views” выводились все же все записи? Вот, посмотрите, если можете, что я имею ввиду (на моем сайте).

    То есть я бы хотела, чтобы выводилась только одна запись-описание “Озера России”, а далее следовали записи с озерами, выводимые плагином Content Views. И все. А у меня выводятся записи и с плагином Content Views, и они же повторяются после вывода плагина. Заранее благодарю и надеюсь на помощь.

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

      Здравствуйте. Если я вас правильно понял, вам нужно на WordPress, в настройках Чтение, установить 1 запись для параметра “На страницах блога отображать не более”. Но, тогда на всех страницах архивов (Блог, Категории, Метки, Автор) будет отображаться одна последняя запись.

  • Наталья 21.04.2018 Ответить

    Спасибо, Илья. Неплохой вариант. Получилось))) Очень благодарна Вам!
    Еще можно спросить, как при помощи плагина Content Views не выводить запись-описание? (в моем случае здесь эта запись “Озера России”).

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

      Пожалуйста! Очень просто. В настройках отображения, уберите галочку возле параметра Показать содержимое.

  • Наталья 21.04.2018 Ответить

    Не поняла, это где? В плагине Content Views ?

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

      Да, в настройках Content Views. Там всё на Русском, очень просто разобраться.

  • Наталья 21.04.2018 Ответить

    Илья, спасибо, получилось.)))
    Еще мне очень нужно исключать из списка, выводимого плагином Content Views, выбранную запись. Чтобы было понятно, что я имею ввиду, посмотрите – например, мною выбрана запись “Чрезмерная детская застенчивость. Что делать?” – тут – а при прокрутке вниз у меня список других записей в этой же рубрике. Среди них есть и запись “Чрезмерная детская застенчивость. Что делать?” А по идее, ее уже быть не должно в списке, так как она уже выбрана и мы находимся на ней.
    Я не знаю, поняли ли Вы меня? Наверное, в этом случае нужно код какой -то вставлять?

  • Наталья 22.04.2018 Ответить

    “В настройках фильтрации плагина можно скрыть запись по ID. Как узнать ID записи WordPress смотрите здесь.” – Илья, к сожалению, это не поможет в данном случае. Тут наверное надо вставлять код :” если выбрана запись, то не выводить ее через плагин Content-Views” – только как написать этот код в html я не знаю, так как программированием не владею. Вы тоже не можете подсказать? Если нет, так нет, ничего страшного….

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

      Значит я вас не правильно понял. Возможно в PRO версии плагина есть такая опция, надо у автора уточнить. Разработкой кода, на данный момент, я не занимаюсь. Если есть ещё какие-то вопросы, обращайтесь. Удачи вам!

  • Наталья 22.04.2018 Ответить

    хорошо, Илья, большое Вам спасибо за все ваши подсказки.

  • Ram 05.09.2018 Ответить

    Я вот хочу убрать меню, но только с одной страницы и уже готовой. Возможно ли это? 

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

      Если у этой страницы своё отдельное меню, да, возможно. Если у вас на всех страницах одно и тоже меню, оно везде пропадёт.

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

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

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



WhatsApp 7 922 717 9869

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

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