HTML коды внутренних страниц

HTML коды внутренних страниц для работы с визуальным редактором SUMMERNOTE

Система Администрирования Сайтов САС 2.1 Компания+Блог имеет радельное управление Главной Страницей Сайта и Внутренними Страницами.
Внутренние страницы создаются и редактируются в разделе САС 2.1 "Управление Категориями и содержимым внутренних страниц"
К внутренним страницам относятся:
- Страницы Категории, в данном случае УСЛУГИ
- Страницы Темы Блога
- Страница О нас (О компании)
- Страницы Портфолио
- Страницы Товары
Каждая из этих страниц имеет определенный набор секций, обозначенных в тексте HTML кода тегом section. Приведенное выше разделение внутренних страниц весьма условно. Секции могут использоваться на разных страницах, так как их стили уже определены стилями основного шаблона сайта. Эти стили устанавливаются в основной шаблон сайта template.html в разделе САС 2.1 "Управление Стилями JS и Кодами Статистики".

Каждая внутренняя страница имеет два типа отображающегося на ней контента:
Индивидуальный Контент;
Общий Контент для всех страниц, например, футер сайта, карта, вопросы клиентов.
Управление Общим Контентом внутренних страниц происходит либо в разделе САС 2.1 "Главная Страница", либо в других блоках, например "Управление Блоком Подвал (Футер)"
Управление Индивидуальным Контентом внутренних страниц происходит ТОЛЬКО в разделе САС 2.1 "Управление Категориями и содержимым внутренних страниц"

Индивидуальный контент также можно разделить на два типа:
Контент, который вводится через поля формы редактирования (SEO страницы, Параметры шапки, отображение товаров категории на страницах категорий);
Контент, который вводится через поле визуального редактора SUMMERNOTE.

Шаблон отдельной страницы ТЕМА БЛОГА

Ниже будет приведен HTML код индивидуального контента отдельной внутренней страницы ТЕМЫ БЛОГА, который вводится через визуальный редактор Summernote в режиме вставки HTML кода.
Для перехода в режим HTML в редакторе Summernote нужно нажать значок </> и растянуть экран значком ⤧ .
Выйдите из HTML режима в обратном порядке и сохраните изменения.
После этого введенный HTML контент можно редактировать в режиме визуального редактора, предварительно растянув экран для удобства. После редактирования не забывайте сохранять изменения!
ВНИМАНИЕ! HTML код темы блога надо вводить ПОЛНОСТЬЮ!

Код

<section id="blog" class="blog"> <div class="container" data-aos="fade-up"> <div class="row"> <div class="col-lg-12 entries"> <article class="entry entry-single"> <h2 class="entry-title text-center"> ШАБЛОН СТРАНИЦЫ ТЕМЫ БЛОГА </h2> <div class="entry-img text-center pt30"> <img src="../assets/img/blog/blog-1.jpg" alt="" class="img-fluid"> </div> <h2 class="entry-title"> Dolorum optio tempore voluptas dignissimos cumque fuga qui quibusdam quia </h2> <div class="entry-content"> <p> Similique neque nam consequuntur ad non maxime aliquam quas. Quibusdam animi praesentium. Aliquam et laboriosam eius aut nostrum quidem aliquid dicta. Et eveniet enim. Qui velit est ea dolorem doloremque deleniti aperiam unde soluta. Est cum et quod quos aut ut et sit sunt. Voluptate porro consequatur assumenda perferendis dolore. </p> <p> Sit repellat hic cupiditate hic ut nemo. Quis nihil sunt non reiciendis. Sequi in accusamus harum vel aspernatur. Excepturi numquam nihil cumque odio. Et voluptate cupiditate. </p> <blockquote> <p> Et vero doloremque tempore voluptatem ratione vel aut. Deleniti sunt animi aut. Aut eos aliquam doloribus minus autem quos. </p> </blockquote> <p> Sed quo laboriosam qui architecto. Occaecati repellendus omnis dicta inventore tempore provident voluptas mollitia aliquid. Id repellendus quia. Asperiores nihil magni dicta est suscipit perspiciatis. Voluptate ex rerum assumenda dolores nihil quaerat. Dolor porro tempora et quibusdam voluptas. Beatae aut at ad qui tempore corrupti velit quisquam rerum. Omnis dolorum exercitationem harum qui qui blanditiis neque. Iusto autem itaque. Repudiandae hic quae aspernatur ea neque qui. Architecto voluptatem magni. Vel magnam quod et tempora deleniti error rerum nihil tempora.</p> <h3>Et quae iure vel ut odit alias.</h3> <p> Officiis animi maxime nulla quo et harum eum quis a. Sit hic in qui quos fugit ut rerum atque. Optio provident dolores atque voluptatem rem excepturi molestiae qui. Voluptatem laborum omnis ullam quibusdam perspiciatis nulla nostrum. Voluptatum est libero eum nesciunt aliquid qui. Quia et suscipit non sequi. Maxime sed odit. Beatae nesciunt nesciunt accusamus quia aut ratione aspernatur dolor. Sint harum eveniet dicta exercitationem minima. Exercitationem omnis asperiores natus aperiam dolor consequatur id ex sed. Quibusdam rerum dolores sint consequatur quidem ea. Beatae minima sunt libero soluta sapiente in rem assumenda. Et qui odit voluptatem. Cum quibusdam voluptatem voluptatem accusamus mollitia aut atque aut. </p> <img src="../assets/img/blog/blog-inside-post.jpg" class="img-fluid" alt=""> <h3>Ut repellat blanditiis est dolore sunt dolorum quae.</h3> <p> Rerum ea est assumenda pariatur quasi et quam. Facilis nam porro amet nostrum. In assumenda quia quae a id praesentium. Quos deleniti libero sed occaecati aut porro autem. Consectetur sed excepturi sint non placeat quia repellat incidunt labore. Autem facilis hic dolorum dolores vel. Consectetur quasi id et optio praesentium aut asperiores eaque aut. Explicabo omnis quibusdam esse. Ex libero illum iusto totam et ut aut blanditiis. Veritatis numquam ut illum ut a quam vitae. </p> <p> Alias quia non aliquid. Eos et ea velit. Voluptatem maxime enim omnis ipsa voluptas incidunt. Nulla sit eaque mollitia nisi asperiores est veniam. </p> </div>  <div class="entry-video"> <h4> Новое видео о том о сем </h4> <div class="col-lg-12 video-play position-relative" style="background: linear-gradient(rgba(102, 255, 255, 0.7), rgba(102, 255, 255, 0.7)), url(../assets/img/marketing-video.jpg);"> <a href="https://youtu.be/BRTucu44CpA" class="glightbox play-btn" rel="nofollow noopener"></a> </div> </div>  <div class="entry-footer"> <i class="icofont-document-folder"></i> <ul class="cats"> <li>Маркетплейсы</li> </ul> </div> </div> </div> </div> </section>

Посмотреть как выглядит контент отдельной внутренней страницы ТЕМЫ БЛОГА, который вводится через визуальный редактор Summernote.

Шаблон страницы О КОМПАНИИ (О НАС)

Ниже будет приведен HTML код индивидуального контента внутренней страницы О КОМПАНИИ, который вводится через визуальный редактор Summernote в режиме вставки HTML кода.
Для перехода в режим HTML в редакторе Summernote нужно нажать значок </> и растянуть экран значком ⤧ .
Выйдите из HTML режима в обратном порядке и сохраните изменения.
После этого введенный HTML контент можно редактировать в режиме визуального редактора, предварительно растянув экран для удобства. После редактирования не забывайте сохранять изменения!
ВНИМАНИЕ! Можно использовать отдельные части HTML кода, заключенные в теги < section > </section >

Код

<section id="dlyachego" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(../assets/img/otkuda.png); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Откуда я и какое у меня образование</h2> <div class="col-lg-4 text-center" data-aos="fade-right" data-aos-delay="100"> <img src="../assets/img/otkuda1.png" class="img-fluid p-4" alt="Откуда я и какое у меня образование"> </div> <div class="col-lg-8 d-flex flex-column " data-aos="fade-up" data-aos-delay="100"> <div class="content"> <p> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div> </div> </section>  <section id="dlyachego" class="col2sect"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Опыт работы в интернет-маркетинге</h2> <div class="col-lg-4 text-center" data-aos="fade-right" data-aos-delay="100"> <img src="../assets/img/opyt.png" class="img-fluid p-4" alt="Опыт работы в интернет-маркетинге"> </div> <div class="col-lg-8 d-flex flex-column " data-aos="fade-up" data-aos-delay="100"> <div class="content"> <p> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div> </div> </section>  <section id="dlyachego" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url(../assets/img/features-2.png); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Мои сильные стороны как маркетолога</h2> <div class="col-lg-4 text-center" data-aos="fade-right" data-aos-delay="100"> <img src="../assets/img/features-2.png" class="img-fluid p-4" alt="Мои сильные стороны как маркетолога"> </div> <div class="col-lg-8 d-flex flex-column " data-aos="fade-up" data-aos-delay="100"> <div class="content"> <p> 1. Я молодец <br/> 2. У меня все отлично получается. <br/> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div> </div> </section>  <section id="dlyachego" class="col2sect"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Мои самые успешные проекты</h2> <div class="col-lg-4 text-center" data-aos="fade-right" data-aos-delay="100"> <img src="../assets/img/proekty.png" class="img-fluid p-4" alt="Мои самые успешные проекты"> </div> <div class="col-lg-8 d-flex flex-column " data-aos="fade-up" data-aos-delay="100"> <div class="content"> <p> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div>  <div data-aos="fade-up" data-aos-delay="500"> <div class="col-lg-12 d-flex align-items-center justify-content-center"> <div class="text-center text-lg-start pb40"> <a href="/CAC21/#portfelli" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center"> <span>Мое Портфолио</span> <i class="icofont-arrow-right"></i> </a> </div> </div> </div>  </div> </section>

Посмотреть как выглядит контент внутренней страницы О НАС (О КОМПАНИИ), который вводится через визуальный редактор Summernote.

Шаблон страницы ПОРТФОЛИО

Ниже будет приведен HTML код индивидуального контента внутренней страницы ПОРТФОЛИО, который вводится через визуальный редактор Summernote в режиме вставки HTML кода.
Для перехода в режим HTML в редакторе Summernote нужно нажать значок </> и растянуть экран значком ⤧ .
Выйдите из HTML режима в обратном порядке и сохраните изменения.
После этого введенный HTML контент можно редактировать в режиме визуального редактора, предварительно растянув экран для удобства. После редактирования не забывайте сохранять изменения!
ВНИМАНИЕ! Можно использовать отдельные части HTML кода, заключенные в теги < section > </section >

Код

<section id="dlyachego" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../assets/img/uslugi/menedzher-marketplejsa.jpg); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Описание проекта Завод Пиролизных Котлов</h2> <div class="col-lg-9 d-flex flex-column " data-aos="fade-up" data-aos-delay="100"> <div class="content"> <p> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div> </div> </section>  <section id="services" class="advancement"> <div class="container" data-aos="fade-up"> <h2>Работа над проектом завод пиролизных котлов</h2> <p class="sdvigal">Veritatis et dolores facere numquam et praesentium</p> <div class="row gy-4"> <div class="col-lg-6 col-md-6" data-aos="fade-up" data-aos-delay="200"> <div class="service-box blue"> <h3>Проблема</h3> <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p> </div> </div> <div class="col-lg-6 col-md-6" data-aos="fade-up" data-aos-delay="300"> <div class="service-box orange"> <h3>Решение</h3> <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p> </div> </div> <div class="col-lg-6 col-md-6" data-aos="fade-up" data-aos-delay="400"> <div class="service-box green"> <h3>Результат</h3> <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p> </div> </div> <div class="col-lg-6 col-md-6" data-aos="fade-up" data-aos-delay="500"> <div class="service-box red"> <h3>Сроки/бюджет</h3> <p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p> </div> </div> </div> </div> </section>

Посмотреть как выглядит контент внутренней страницы ПОРТФОЛИО, который вводится через визуальный редактор Summernote.

Шаблон страницы ТОВАР

Ниже будет приведен HTML код индивидуального контента внутренней страницы ТОВАР, который вводится через визуальный редактор Summernote в режиме вставки HTML кода.
Для перехода в режим HTML в редакторе Summernote нужно нажать значок </> и растянуть экран значком ⤧ .
Выйдите из HTML режима в обратном порядке и сохраните изменения.
После этого введенный HTML контент можно редактировать в режиме визуального редактора, предварительно растянув экран для удобства. После редактирования не забывайте сохранять изменения!
ВНИМАНИЕ! Можно использовать отдельные части HTML кода, заключенные в теги < section > </section >

Код

<section id="portfolio-details" class="portfolio-details"> <div class="container"> <div class="row gy-4"> <div class="col-lg-8"> <div class="portfolio-details-slider swiper"> <div class="swiper-wrapper align-items-center"> <div class="swiper-slide"> <img src="../assets/img/portfolio/portfolio-1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../assets/img/portfolio/portfolio-2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../assets/img/portfolio/portfolio-3.jpg" alt=""> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div class="col-lg-4"> <div class="portfolio-info"> <h3>Информация о товаре</h3> <ul> <li><strong>Category</strong>: Web design</li> <li><strong>Client</strong>: ASU Company</li> <li><strong>Project date</strong>: 01 March, 2020</li> <li><strong>Project URL</strong>: <a href="#">www.example.com</a></li> </ul> </div> <div class="portfolio-info mamuk"> <h3>Это пример краткого описания товара или услуги</h3> <p> Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. </p> </div> </div> <div class="col-lg-12"> <div class="portfolio-info"> <h2>Это пример Подробного описания товара или услуги.</h2> <p> <b>Код секции о товаре можно просто вставлять на страницу в HTML режиме визуального редактора Summernote при создании страниц. <br/> Страницы создаются в блоке "Категории/Страницы". </b> <br/><br/> <b>В настоящий момент разрабатывается следующая версия САС в которой будет возможность создавать и редактировать основные параметры товара: изображения для слайдера, заголовки, характеристики через поля формы ввода данных. </b> <br/><br/> Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius. </p> </div> </div> </div> </div> </section>

Посмотреть как выглядит контент внутренней страницы ТОВАР, который вводится через визуальный редактор Summernote.

Шаблон страницы УСЛУГА

Ниже будет приведен HTML код индивидуального контента внутренней страницы УСЛУГА, который вводится через визуальный редактор Summernote в режиме вставки HTML кода.
Для перехода в режим HTML в редакторе Summernote нужно нажать значок </> и растянуть экран значком ⤧ .
Выйдите из HTML режима в обратном порядке и сохраните изменения.
После этого введенный HTML контент можно редактировать в режиме визуального редактора, предварительно растянув экран для удобства. После редактирования не забывайте сохранять изменения!
ВНИМАНИЕ! Можно использовать отдельные части HTML кода, заключенные в теги < section > </section >

Код

<section id="chtodelay" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../assets/img/uslugi/menedzher-marketplejsa.jpg); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Что сделаю (например, Оценю состояние вашего веб-ресурса)</h2> <div class="col-lg-6 d-flex flex-column " data-aos="fade-up" data-aos-delay="200"> <div class="content"> <p> Найду ошибки и битые ссылки на сайте, проверю скорость загрузки, код, положение тега H1, наличие на страницах Title и Description, а также другие факторы, которые влияют на продвижение </p> </div> </div> <div class="col-lg-6 d-flex flex-column " data-aos="fade-up" data-aos-delay="200"> <div class="content"> <p> Подскажу, как эффективно оптимизировать сайт и отдельные страницы под поисковые системы Яндекс и Google </p> </div> </div> </div> </div> </section>  <section id="features" class="features"> <div class="container" data-aos="fade-up">  <div class="row feature-icons" data-aos="fade-up"> <h3>Менеджмент маркетплейсов под ключ включает в себя:</h3> <div class="row"> <div class="col-xl-4 text-center" data-aos="fade-right" data-aos-delay="100"> <img src="../assets/img/features-3.png" class="img-fluid p-4" alt=""> </div> <div class="col-xl-8 d-flex content"> <div class="row align-self-center gy-4"> <div class="col-md-6 icon-box" data-aos="fade-up"> <i>1</i> <div> <h4>Поменял текст так просто</h4> <p>Это самый первый этап работы он очень важен и поэтому на него стоит обратить больше внимания onsequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p> </div> </div> <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100"> <i>2</i> <div> <h4>Ullamco laboris nisi</h4> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p> </div> </div> <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200"> <i>3</i> <div> <h4>Labore consequatur</h4> <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p> </div> </div> <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300"> <i>4</i> <div> <h4>Beatae veritatis</h4> <p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p> </div> </div> <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400"> <i>5</i> <div> <h4>Molestiae dolor</h4> <p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p> </div> </div> <div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500"> <i>6</i> <div> <h4>Explicabo consectetur</h4> <p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p> </div> </div> </div> </div> </div> </div> </div> </section>  <section id="dlyachego" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../assets/img/uslugi/menedzher-marketplejsa.jpg); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Для чего нужен менеджмент маркетплейсов</h2> <div class="col-lg-6 d-flex flex-column " data-aos="fade-up" data-aos-delay="200"> <div class="content"> <p> Он позволяет выявить критичные ошибки, влияющие на его удобство, конверсию и ранжирование. На то, какую позицию занимает ресурс в поисковой выдаче. Например, если сайт будет медленно загружаться, на нем будут нерабочие кнопки и т. д., пользователь простой уйдет к Вашим конкурентам </p> </div> </div> <div class="col-lg-6 d-flex flex-column " data-aos="fade-up" data-aos-delay="200"> <div class="content"> <p> С помощью аудита Вы сможете подробнее узнать недочеты Вашего сайта и своевременно устранить их. Сделать ресурс более привлекательным для поисковых систем </p> </div> </div> </div> </div> </section>  <section id="priceblok" class="pricik"> <div class="container" data-aos="fade-up"> <h2>Стоимость работ</h2> <div class="batbar"> <span>Ресурсы до 100 страниц от 10 000 руб.</span> </div> <div class="batbar"> <span>Ресурсы от 101 до 300 страниц от 12 000 руб.</span> </div> <div class="batbar"> <span>Ресурсы от 301 до 500 страниц от 15 000 руб.</span> </div> <div class="batbar"> <span>Ресурсы более 500 страниц от 20 000 руб.</span> </div> </div> </section>  <section id="dlyachego" class="col2sect" style="background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../assets/img/uslugi/menedzher-marketplejsa.jpg); background-size: no-repeat; background-position: center; background-size: cover;"> <div class="container" data-aos="fade-up"> <div class="row gx-0 conteblo"> <h2>Сроки выполнения работ по Менеджменту Маркетплейсов</h2> <div class="col-lg-9 d-flex flex-column " data-aos="fade-up" data-aos-delay="200"> <div class="content"> <p> Технический анализ сайта выполняется около 15 дней и оформляется как список рекомендаций по исправлению ряда проблем. Вы можете сразу внедрить все пункты технического аудита или начать с самых важных, критических ошибок. Однако, чем больше исправлений Вы сделаете, тем быстрее увидите результаты: рост трафика потенциальных клиентов и заказов. </p> </div> </div> </div> </div> </section>

Посмотреть как выглядит контент внутренней страницы УСЛУГА, который вводится через визуальный редактор Summernote.