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

Обычный лендинг представляет собой набор из html-верстки, css-файлов и изображений. Иногда к нему прибавляются JS-скрипты и JQuery-библиотеки.

Итак:

1. Загружаем все изображения в Сайт => Страницы => Файловый менеджер

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

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

Варианты каталогизации:
IMG — папка для изображений
CSS — папка для css стилей
JS — папка для JS-скриптов и JQuery

или

Main — все файлы для главной страницы
Lanpage1 — все файлы для продающей страницы
и т.д.

Вашу фантазию здесь никто не ограничивает. В данном примере рассматриваются пути для корневого (основного) каталога файлового менеджера, в то время как пути до папок в файловом менеджере могут незначительно отличаться.

2. В html-коде и в css-стилях находим и меняем адреса для всех изображений

Файлы с расширением .html и .css открываются блокнотом или любым другим текстовым редактором.

Обычно по-умолчанию путь к картинке прописывается как «…/image.png». В этом случае нужно поменять ссылку, к примеру, на:

Также, можно прописывать не абсолютные пути, как в примере выше, а относительные (из ссылок убираем домен):

3. Загружаем css-стили, js-скрипты и jquery-библиотеки

Так же, как и изображения, располагаем эти файлы в Сайт => Страницы => Файловый менеджер. Копируем и сохраняем пути до файлов.

4. Создаем новую страницу в разделе Сайт => Страницы

Присваиваем ей уникальный Идентификатор. Обратите внимание, Идентификатор добавляется в адрес страницы, то есть будет виден посетителям сайта.

5. Копируем весь html-код, начиная с тега <body> и заканчивая тегом </body>, и вставляем через кнопку Источник в html-код страницы.

Если в скопированном html-коде прописаны JS-скрипты, внимательно проверяем их на наличие ссылок на загруженные в Файловый менеджер файлы.

6. Весь код, начиная с тега <head> и заканчивая тегом </head>, копируем и вставляем в поле «Дополнительный код в HEAD» во вкладке Дополнительно.

Не забываем менять пути для css-стилей, скриптов и библиотек! Рассмотрим пример, как это сделать правильно. По-умолчанию пути могут быть прописаны так:

для CSS:

для JS:

Вам нужно заменить путь либо на абсолютный так:

для CSS:

для JS:

либо на относительный так:

для CSS:

для JS:

7. Выбираем шаблон — empty.html

Это специальный пустой шаблон, чтобы верстка вашей страницы не была испорчена особенностями верстки наших внутренних шаблонов.

Если требуется особый шаблон, то создать его можно в разделе Сайт => Страницы => html-шаблоны.

8. Сохраняем изменения и проверяем отображение шаблона

Проверить можно просто — введя в адресную строку браузера адрес созданной страницы.

Оценить статью

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...