Как быстро и красиво разместить статью на сайте 1с-Битрикс
Приветствую, друзья!
Сегодня мы поговорим о том, как быстро разместить статью на сайте. Как привести текст в порядок. Как оформить заголовки. Как оформить отступы и сделать это без знания HTML- разметки быстро, буквально за считанные минуты. Ранее у меня на канале уже выходило видео. Это вот одно из самых первых видео: Называется оно «Как быстро и красиво оформить HTML страницу на сайте»
Но, там я рассматривал ручной вариант вёрстки текста. Сегодня же у нас будет вариант автоматический и давайте, приступим.
Итак, у нас есть статья, которую нам прислал копирайтер в Word-файле. Наша задача её разместить на сайте. Выделить заголовки, сделать маркированные списки. Для этого мы будем использовать другой сайт. Сервис абсолютно бесплатный и называется сайт: wordhtml.com. (в описании ссылку я прилагаю).
Возникает первый вопрос: почему мы не можем использовать встроенный в 1С – Битрикс редактор?
То есть, у нас здесь, когда мы размещаем статью… Вот допустим, мы перешли в раздел со статьями. Нажимаем кнопочку «Добавить статью». Здесь мы указываем название. Переходим во вкладку «Подробно» и вот здесь у нас есть детальное описание, собственно, куда и размещается весь текст.
И у нас здесь есть три варианта: текст. Когда мы выбираем вот этот параметр и здесь какой-то указываем текст, то текст на сайт у нас попадает без вёрстки. Сейчас я его размещу, чтобы вам продемонстрировать.
Предварительно во вкладке «Параметры» мы указали название указали активность [выбрали сегодняшнее число] и нажимаем кнопочку «Сохранить».
Далее, чтобы посмотреть, нажимаем здесь «бургер» и нажимаем кнопочку «Посмотреть». Открываем и видим, что у нас такое себе всё:
То есть, мы получили сухой текст, без нормальной вёрстки. Также мы можем выбрать параметр HTML. Битрикс автоматически подставит отступы, но выглядеть это будет не лучшим образом. Практически ничего не изменилось:
Третий вариант — это мы можем использовать визуальный редактор, встроенный в систему. Он уже получше, но опять же, если мы прям вот из word возьмём весь этот текст, скопируем его, сюда вставим, то мы видим, тут появляются дополнительные отступы. Здесь, если мы посмотрим, код вот здесь вот выберем:
Мы увидим, здесь вот эти появляются лишние символы пробелов. Очень много лишних пробелов. И если мы применим и посмотрим, что получается то получается тоже ерунда:
И для этого нам на помощь приходит вот этот сайт: wordhtml.com. Сюда мы точно также вставляем наш текст из word прямо. Выбираем вкладку «HTML» и нажимаем первым делаем кнопочку «Clean». Она очистит наш текст от всех вот этих вот лишних пробелов. Нажали. Возвращаемся во вкладку «Word». И уже видим, что здесь всё стало гораздо приличнее.
Следующий шаг. Нам нужно выделить заголовки. Для этого выделяем заголовок, выбираем здесь H2, [то есть, heading 2]
И таким образом выделяем все заголовки. Где-то два, где он идёт общий, где-то три. Список тут уже нормальным образом встал.
Следующий шаг. Выбираем опять вкладку HTML. С помощью сочетания клавиш на клавиатуре Ctrl + A мы выделяем всё содержимое. Потом нажимаем кнопочку «Ctrl + С» и копируем это всё дело в буфер. Возвращаемся на наш сайт. Выбираем здесь детальное описание «HTML»:
Также всё выделяем через Ctrl + А и вставляем скопированный ранее в буфер текст. То есть, Ctrl + V мы нажимаем. Нажимаем кнопочку «Сохранить» и смотрим, что у нас получилось.
У нас получилась аккуратно оформленная статья. Потратил я на это примерно, 1-2 минуты.
Также добавляем к статье картинку для анонса. У меня она уже заготовлена. Также добавляем картинку для содержания статьи в самом начале. И также, мы можем ещё вставить картинку куда-нибудь в середину текста. Для этого мы возвращаемся в режим визуального редактора. Здесь переключаем также «Вид»:
И выбираем место, куда вставим картинку. Ну, давайте вставим её вот сюда. Нажимаем здесь:
«Выбрать картинку», «загрузить файл». Выбираем наш файл, нажимаем «Загрузить».
И, собственно говоря, всё. Нажимаем «Сохранить». Проверяем, что получилось? Получилась у нас статья таким образом. Также у нас добавилась картинка для анонса. Вот она:
Ну, и напоследок. Я рекомендую сразу заполнить текст на вкладке «Анонс». У меня уже подготовлен текст. Мы его также копируем и сюда вставляем. Много текста не нужно. И заполнить мета-теги во вкладке «SEO», чтобы у вас сразу статья начала индексироваться.
Здесь мы название менять не будем. Добавим ключевые слова и добавим описание. Нажимаем кнопочку «Сохранить». И, собственно говоря, всё, наша статья готова.
В ближайшее время поисковые системы её проиндексируют, и пользователи смогут её с лёгкостью находить.
А самое главное – её приятно читать.
На этом у меня всё…
Благодарю вас за внимание. Надеюсь, это видео было для вас полезным.
