Многостраничные HTML шаблоны с сотнями вариантов дизайна. Многостраничные HTML шаблоны с сотнями вариантов дизайна One Solution – универсальный HTML-шаблон

Урок №9
Создаём свой сайт из трёх страниц

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

Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,

и две фотографии:
irbis.jpg
polyarnyi-volk.jpg

Сделаем третью страницу, она будет посвящена полярной сове .

Данные третьей страницы

Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html

Название страницы , сделайте:
Страница о полярной сове

Внедрите CSS-код:

Заголовок статьи

:
Полярная сова

Фотография :

Статья состоящая из двух абзацев :

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.

В итоге, вы должны получить следующую страницу .

Соединяем ссылками страницы сайта

На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:

Index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

Снежный барс Полярный волк Полярная сова

В итоге, ваш сайт должен выглядеть следующим образом . Нажимая по ссылкам, вы будете попадать на страницы: снежного барса, полярного волка и полярной совы.

Как вы уже знаете, каждый HTML-документ начинается с тега , данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки , а уже под ним ставится тег . Строка даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.

Конечный HTML-документ, например файла index.html , в итоге должен выглядеть следующим образом:

Страница о снежном барсе

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.

Охотится снежный барс в основном на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов запрещена.

Снежный барс Полярный волк Полярная сова

Всегда добавляйте строку , в начале каждого HTML-документа.

Регистрация домена и хостинг

Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html

и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен) , наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс :
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU , нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год) .

После регистрации имени сайта, нужно купить себе хостинг , наиболее качественная компания на данный момент это Бегет .

Благодаря появлению готовых решений для веб-разработки создание сайта стало не таким уж сложным процессом. Одним из таких решений являются шаблоны. В частности, сверстанные многостраничные HTML шаблоны. Они создаются для различных вариантов применения в какой угодно области деятельности.

HTML-шаблоны предоставляют вам не только шикарную возможность избавиться от необходимости реализации дизайнерской концепции сайта с нуля, но и дают на выходе полноценный сайт, сверстанный с применением современных технологий и подходов в области веб-разработки. Если сравнивать их с WordPress-шаблонами, единственное их преимущество заключается в свободном выборе платформы для разработки. По всем остальным параметрам, в частности по простоте разработки, они серьезно уступают шаблонам под Вордпресс и другие CMS. По крайней мере, если вы новичок в этом деле. Платформа WordPress не зря набрала такую популярность – больше 53% сайтов на CMS и 29% всех сайтов создано именно на ней.

Если у вас нет соответствующих навыков в области разработки, и вы не хотите тратить лишние деньги и время на верстку, лучше сразу выбрать . На сайте InBenefit вы найдете сотни вариантов таких тем для различных сайтов. Но если ваши познания на достаточно высоком уровне, можете не сомневаясь использовать HTML-шаблоны.

Многостраничные HTML шаблоны с сотнями вариантов дизайна

Missio – классный шаблон для портфолио фотографа

Missio — это великолепно выглядящий шаблон одностраничного и многостраничного сайта для уникального портфолио, который подойдет фотографам, художникам, цифровым агентствам и фрилансерам, которые хотели бы красиво продемонстрировать свои навыки, а блоггеры — иметь привлекательные журналы. Missio был создан на Twitter Bootstrap 4 и содержит огромное количество качественных HTML5-страниц с более чем 40 различными демонстрациями, 16 цветовых схем, 7 шрифтов, вариант макета одностраничника, а также бесчисленное множество вариантов портфолио, блогов, хэдеров и слайдеров. Вы можете создать уникальный веб-сайт, используя мощные функции Missio, которые включают макеты для различных сфер бизнеса.

Cryto – современный макет для портала криптовалют

Cryto – идеальный макет для сайта криптовалют. Это современный, уникальный и чистый многостраничный шаблон для сайта, посвященного освещению проектов и их продвижению. Вы также можете использовать его для других сфер бизнеса. Все HTML-файлы хорошо организованы. Таким образом, вы можете легко изменить и обновить дизайн. Все элементы, доступные в шаблоне, можно редактировать на 100%. Cryto отлично смотрится на всех основных браузерах и устройствах, в том числе на планшетах и телефонах. Чистый код данного макета обеспечивает удобство при использовании Cryto.

Agro – отзывчивый шаблон HTML для магазинов органических продуктов питания

Agro является шаблоном для веб-сайтов различных компаний, задействованных в сельском хозяйстве и занимающихся производством органических продуктов питания. Используя данный шаблон, вы можете демонстрировать свои продукты в самой изысканной манере. Также Agro подойдет для фермеров, которые хотят запустить свой бизнес. Agro предоставляет многостраничные адаптивные HTML-шаблоны для сельского хозяйства и магазина натуральных продуктов. Лаконичный и креативный дизайн, настраиваемый код и разные PSD файлы, идущие в комплекте, помогут вам при создании мощного интернет-магазина.

Многостраничные HTML шаблоны для любых видов сайта

PLUME – многозадачный HTML5-шаблон

В этом шаблоне 300 HTML-страниц и 49 сайтов для различных вариантов использования и сфер деятельности: кафе, аренда автомобилей, плотник, клининговая компания, строительство, корпорация, стоматология и так далее. Чистый код, контактные формы и стильные иконки.

Vixa – адаптивная тема на HTML5 для различных сайтов

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

Alien – крутая универсальная тема успешного сайта

В этой теме не только 240 страниц, но и 60 PSD-макетов Photoshop. На ее базе можно создать корпоративный и творческий сайт, сайт для ресторана или спа-салона, блог и портфолио.

One Solution – универсальный HTML-шаблон

В комплекте этого шаблона базовое решение веб-разработки. Чистый дизайн и полный функционал позволят получить первоклассный сайт для продвижения бренда, услуг или товаров. Есть мобильная и десктопная версия.

Многостраничные HTML шаблоны – Сфера услуг

The Experts – консалтинговая тема для профессиональных компаний

При разработке этой темы была тщательно изучена сфера консалтинга и учтены основные требования компаний. В комплекте ключевые разделы, в том числе «Отзывы», «Портфолио» и «Блог». Красивый слайдер с крутыми эффектами. Доступен аналогичный шаблон WordPress для новичков.

ConsultingPress – универсальная тема сайта консалтинговой фирмы

Хотите выйти на новый уровень в бизнесе – с этой темой это легко! В комплекте несколько сайтов для ускорения процедуры разработки. Полная SEO-оптимизация за счет качественной разметки и легкого кода.

Идеальная тема для любой компании, оказывающей услуги по чистке, уборке и ремонту помещений. Красивый дизайн в различных цветовых вариациях. Предусмотрена форма заказа услуг. Отдельно есть тема WordPress .

При разработке вы сможете выбрать одну из шести главных страниц. Это значительно упростит весь процесс. Можно использовать крутые слайд-шоу и оформить сайт в любом цвете. Новичкам приглянется тема на Joomla .

Industrial – шаблон сайта промышленной или производственной компании

На базе этого шаблона любая промышленная компания или компания, оказывающая профессиональные инженерные услуги, сможет создать надежный сайт. На выбор 11 вариантов оформления. Есть эффект параллакса и множество элементов с призывом к действию.

Перед вами готовое решение для сайта профессиональной хостинговой компании с современным UI-оптимизированным дизайном. Предусмотрено два цветовых варианта оформления. Есть страница регистрация и поддержка системы WHMCS.

Этот довольно универсальный шаблон подойдет компаниям, оказывающим различные услуги по садоводству, огородничеству, сельскому хозяйству, стрижке газонов и уборке территории. Дизайн красочный и отзывчивый. Интегрирована карта Google и контактная форма.

Также у нас есть отличные темы WordPress для и .

Eco Friendly – шаблон многостраничного сайта HTML природоохранной организации

С этой темой можно легко получить действительно красивый и надежный сайт для успешного продвижения своей деятельности и привлечения внимания к важным проектам. Богатые дизайнерские решения и возможность выбора макета. Доступна аналогичная тема WordPress .

The Zayka – универсальная HTML-тема сайта кафе или ресторана

У этой темы качественный код на базе HTML5 и CSS. Особенные варианты оформления, привлекающие внимание слайдеры и улучшенные инструменты ручной разработки сайта. Потрясающие эффекты, липкое меню и социальная интеграция.

Soup – тема ресторана с функцией онлайн-заказа

Потрясающее оформление и поддержка системы заказа еды онлайн – это лишь малая часть преимуществ HTML-темы Soup. Также разработчики создали аналогичную тему WordPress , которая подойдет новичкам.

Sunset Hotel – тема веб-сайта отеля или курорта

Современная универсальная тема под отельный и курортный бизнеа. Состоит из 12 страниц с возможностью сортировки в каталоге, галереей и информационной рассылкой.

Хотите больше вариантов HTML-шаблонов для и бизнеса? У нас для них были специально подготовлены обзоры. Если вам нужны темы WordPress для

Такой шаблон позволит вам в современном стиле представить свои лучшие программные продукты. Идеальный вариант для программистов и разработчиков софта и мобильных приложений. В комплекте стильные шрифты и иконки.

Прекрасное решение для продвижения и привлечения внимания к различного рода событиям: выставкам, семинарам, конгрессам, конференциям и деловым встречам. Предусмотрен раздел для спикеров, расписания, спонсоров и билетов.

BlockBuster – шаблон каталога или сайта с обзорами фильмов

Хотите создать сайт в духе IMDb или Кинопоиска? Тогда этот шаблон для вас! В нем легко собрать базу данных классических и новых фильмов, размещать отзывы и обзоры, и зарабатывать на рекламе. Шаблон адаптивный и совместим в работе с любыми браузерами.

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

Артём – автор многочисленных обзоров и статей на сайте проекта сайт "Веб-лаборатория успеха", посвященных шаблонам, плагинам, курсам и другим тематикам сайта. Эксперт по подбору шаблонов и плагинов для платформы WordPress и др. Увлечения: чтение интересной литературы и активный отдых.

В этом разделе я постараюсь рассказать о том, как с использованием PHP создать шаблон многостраничного веб-сайта. Думаю, что многие в процессе интернет-серфинга замечают, что большинство сайтов состоят из “однотипных” страниц. Заголовок, левая, правая и нижняя части каждой такой страницы практически идентичны, а отличаются они друг от друга содержимым только основной части, размещенной по центру. В верхней части страницы обычно располагается главное меню сайта. Левая и правая колонки могут содержать различного рода ссылки, баннеры и рекламные блоки. В нижней части предпочитают размещать информацию о проекте, авторских правах и прочие, общие для всех страниц данные. Вручную создавать такие страницы, безусловно, можно, но не целесообразно, поскольку исходная HTML разметка каждой страницы будет содержать изрядную часть дублирующегося кода, а в случае ошибок или попыток изменить их структуру придется вносить изменения во все страницы. С помощью PHP проблема создания шаблона такой страницы решается довольно просто.

Исходный код формирования страницы, соответствующей данному шаблону, будет выглядеть примерно следующим образом:

begin_center(); echo "

Блок информации в основной части 1
"; echo "
Блок информации в основной части 2
"; echo "
Блок информации в основной части 3
"; echo "
Блок информации в основной части 4
"; echo "
Блок информации в основной части 5
"; echo "
Блок информации в основной части 6
"; echo "
Блок информации в основной части 7
"; get_page()->end_center(); include "footer.php"; close_page(); ?>

Исходный код page.php.

До начала формирования разметки страницы необходимо подключить файл global.php , что указано в самой первой инструкции require_once . Далее мы инициализируем страницу вызовом глобальной функции open_page() , передавая значение заголовка, описания и ключевых слов страницы. После, с помощью инструкции include подключаем заголовок и боковые панели страницы и открываем разметку основной области вызовом метода begin_center() класса Page . Теперь можно сформировать основную разметку страницы, которая будет отображена в границах основной области. В заключении необходимо закрыть основную область вызовом end_center() , добавить разметку подвала и закрыть страницу с помощью глобальной функции close_page() .

Все достаточно просто. Исходный код файлов header.php , left_side.php , right_side.php и footer.php приведен далее. Если для какой-то группы страниц вам понадобится изменить содержимое этих областей, то создайте специальные версии этих файлов и измените аргументы соответствующих им инструкций include в шаблоне страницы.

begin_header(); echo "

Название сайта

"; get_page()->end_header(); ?>

Исходный код header.php.

begin_left_side(); echo "

Блок информации слева 1
"; echo "
Блок информации слева 2
"; echo "
Блок информации слева 3
"; get_page()->end_left_side(); ?>

Исходный код left.php.

begin_right_side(); echo "

Блок информации справа 1
"; echo "
Блок информации справа 2
"; echo "
Блок информации справа 3
"; get_page()->end_right_side(); ?>

Исходный код right.php.

begin_footer(); echo ""; get_page()->end_footer(); ?>

Исходный код footer.php.

Результат обработки рассмотренного шаблона можно посмотреть .

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


Это сложный выбор. Лучший способ определиться между одностраничным и многостраничным дизайном — рассмотреть содержимое вашего сайта и поток навигации. Является ли контент вашего сайта быстрым и удобным для просмотра, или есть много контента, который необходимо стратегически разместить для пользователей? С помощью подхода, основанного на контенте, вы, скорее всего, подберете правильную навигационную систему.

Этот пост поможет вам взвесить все плюсы и минусы каждого вариант.

Одностраничный сайт

Веб-сайт с одной страницей — это просто веб-сайт, содержащий только одну страницу HTML. Нет дополнительных страниц, таких как страница «О программе», «Особенности» или «Контакты».

Как объясняет Awwwards, контент на сайтах с одной страницей полностью загружается на начальную страницу, что делает процесс более постоянным и естественным для пользователя. Чтобы перейти к различным разделом на одностраничном веб-сайте, пользователи нажимают на ссылки навигации, которые позволяют им переходить к местам назначения на странице, или прокручивать страницу, чтобы охватить разные разделы контента.

Одностраничные веб-сайты нацелены на предоставление только релевантного количества информации для пользователя. Необходимого, чтобы принять решение и действовать в соответствии с ним. Вот почему одностраничный дизайн часто используется для целевых страниц, портфолио и связанных с событиями веб-сайтов. Этот, отчисти, минималистичный подход устраняет ненужный шум из интерфейса, фокусируя внимание пользователя на самом важном контенте.

Эффективные одностраничные веб-сайты являются чистыми и понятными. Веб-сайт с одной страницей, которая разбивает содержимое на мелкие части и устраняет беспорядок из пользовательского интерфейса, дружелюбна к пользователям.


Дизайн одной страницы также способствует интуитивному путешествию пользователя. Без дополнительных страниц посетители наслаждаются линейным потоком навигации, который рассказывает историю с четко обозначенным началом, серединой и концом.

Еще одно преимущество наличия простой навигационной системы состоит в том, что пользователь направлен только на одно действие. Исследования показывают, что наличие одной страницы может привести к увеличению количества конверсий до 37,5%, по сравнению с многостраничными сайтами.

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

Но это еще не все — для дизайнеров тоже есть интересные преимущества. Например, только на одной странице гораздо меньше контента, чем на многостраничном дизайне. Это делает одностраничный веб-дизайн, как правило, более простым в реализации, повторении и обслуживании.

Недостатки одностраничного сайта

Также существует несколько причин, по которым одностраничный дизайн может оказаться неправильным решением для вашего сайта.

Одностраничные веб-сайты уступают в плане (поисковая оптимизация). Кроме того, сайт с одной страницей не является идеальным кандидатом для растущего бренда, поскольку его способность масштабироваться ограничена. Как мы уже видели, веб-сайты с одной страницей имеют тенденцию к узкому фокусу и поэтому не подходят для веб-сайтов, для которых требуется большое, сложное и / или разнообразное использование контента.

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

Многостраничный дизайн хорошо подходит почти для всех типов проектов. Примеры многостраничного веб-дизайна можно найти на сайтах электронной коммерции (таких как Amazon) и сайтах электронного обучения (например, Lynda).


Преимущества многостраничного дизайна

Существует три основных преимущества многостраничной страницы на одном веб-сайте.

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

Во-вторых, поток навигации на многостраничном сайте легко отслеживается. Этот тип веб-сайта существует с 90-х годов, что означает, что большинство пользователей знакомы с ним и часто ожидают найти несколько страниц на сайтах.

Наконец, сайты с несколькими страницами имеют мощные возможности SEO. Иногостраничные сайты с большей вероятностью будут иметь больший объем контента, чем у одностраничных.

Например, рассмотрите, как вы будете управлять регулярными обновлениями на вашем сайте. Не забывайте, что все это содержимое должно поддерживаться группами разработчиков и контента. При рассмотрении вопроса о том, следует ли создавать веб-сайт с одной страницей или несколькими страницами, вам нужно подумать о том, является ли наличие большого количества контента рентабельным.

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


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

Сравнение одностраничных и многостраничных веб-сайтов — резюме

Мы надеемся, что наш пост прояснил различия между одностраничным и многостраничным дизайном. Подводя итог: одностраничный дизайн релевантен, когда у вас узкий фокус, или вы поощряете пользователей выполнять определенную задачу. Он также идеален для мобильного дизайна. С другой стороны, многостраничный дизайн позволяет вам расширить свой потенциал достижений, придерживаться традиционных навигационных систем и оптимизировать свою стратегию поисковой оптимизации.

Для определения того, следует ли создавать одностраничный или многостраничный веб-сайт, не существует эмпирического правила. Самое главное — сначала продумать контент. Рассмотрите информацию, которая вам нужна для работы с вашими пользователями, и, исходя из ее объема, принимайте решение.

Дата публикации: 02-02-2016 9155

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

Шаг 1. Определите, какие страницы будут на сайте. Например: Главная страница, О нас, Каталог, Контакты. Заьтем создаем главную страницу сайта. На ней делает меню - добавляем для этого соответствующий блок.

Не забудьте сохранять все свои действия, чтобы ничего не потерялось.

Шаг 2. Создаем вторую страницу. Для этого нужно зайти на страницу и нажать на три точки рядом с кнопкой РЕДАКТИРОВАТЬ. Там вы увидите знаки в ряд, в них нужно выбрать значок "копировать".

При этом важно "закрыть" значок глаза, который вы увидите слева от страницы. Просто нажмите на значок глаза, и он перечеркнется. Это нам и нужно.
И так - со всеми страницами, кроме главной.

Шаг 3. Важный шаг - создание меню сайта. Переходим в редактор главной страницы и кликаем на меню. Выйдет окно. В этом окне вам нужно кликнуть на каждую строчку меню (например, "О нас", "Контакты" и так далее) и в появившейся строке прописать якорь или ссылку на нужную страницу. Но важно прописать якоря или ссылки правильно.

Для того, чтобы, нажав на строку меню, перейти в какой-либо блок на этой же странице, вам нужно:

  • нажать на настройки блока,
  • прокрутить вниз и в строке "Якорь блока" вы увидите сам якорь. Он может выглядеть, например, так a_1116942 или так anchor3,
  • скорпируйте данный якорь и вставьте его в нужную строку меню. Но важно, чтобы перед самим якорем стоял знак решетки: #

Для перехода из меню на другую страницу, нужно проделать все то же самое, что и выше, но только вместо якоря прописать ссылку на страницу. Для этого нужно:

  • сначала перейти в "Настройки проекта" и там в самом низу выбрать строку "Использовать страницы вместо A-B тестирования", активируйте ее. Страница с проектами будет выглядеть примерно так:

  • далее нам нужно прописать URL для страниц. Для этого заходим на сайт Транслит и в окно для русского текста вставляем название страницы (например, "О нас"), нажимаем - Перевести. И копируем то, что сайт выдал. В данном случае: o-nas;
  • переходим снова в Проекты, нажимаем на три точки рядом с кнопкой РЕДАКТИРОВАТЬ и из ряда значков выбираем знак редактирования (Карандаш). Появится окно. В нем в строку "URL страницы" (см. скриншот ниже) вставляем то, что скопировали на сайте Транслит.

Повторяем это с каждой страницей сайта. И затем переходим в режиме редактирования на Главную страницу - в меню. Далее здесь нужно проделать следующее:

  • Кликаем на меню. Выйдет окно слева.
  • В этом окне нажимаем на нужную строку в меню и увидите справа от строки зеленый квадрат со знаком цепочки.
  • Нажмите на нее и из появившегося списка выберите то, что вам необходимо. Например, "О НАС" (см. скриншот ниже). И так проделываем со всеми страницами.

Не забывайте нажимать кнопки сохранения между выходом из сайтов!

Шаг 4. Делаем SЕО оптимизацию нашего сайта. Переходим на страницу Проекты . Кликаем на три точки и выбираем первый редактор. Значок с карандашом. В открывшемся окне сначала активируем галочку у строки "Использовать индивидуальные SEO настройки для этой страницы". И ниже прописываем Title, Description, Keywords на каждую страницу по аналогии с инструкцией - СЕО для лендинг пейдж .

И так проделываем с каждой страницей. Не забывая сохранять все действия.

Шаг 5. Чтобы упростить работу на многостраничном сайта, нужно создать единое меню. В данном видео все подробно рассказано: как сделать единое меню для сайта.

Чтобы созданное вами меню появлялось на каждой странице, не нужно ставить меню на каждую страничку сайта. Можно поступить гораздо проще. И это будет намного быстрее и удобнее. Что нужно сделать?

  • Открываем редактирование каждой страницы.
  • В настройках меню в главном разделе появилось ID. Копируем его.
  • В редактировании остальных страниц добавляем "Блок-ссылку" и поднимаем её наверх. Туда, где находится шапка сайта. В настройках вставляем ID секции.
  • И эту процедуру проделываем на каждой странице.
  • Сохраняем и проверяем.

Поздравляем! Вы сделали многостраничный сайт своими руками!