Шаблон одностраничника html. Редактирование шаблона

Шаблон одностраничника html нельзя просто взять и использовать. Шаблоны одностраничников требуют редактирования.

Как отредактировать шаблон одностраничника html

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

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

Шаблон одностраничника html. Скачивание бесплатного шаблона

Чтобы найти и скачать бесплатный шаблон одностраничника, нужно вбить в поисковую строку браузера фразу «Скачать шаблон одностраничника html». Выбрать, например, шаблон Александра Новикова. На примере этого шаблона я буду показывать процесс редактирования шаблонов.

шаблон одностраничника html

Скачайте архив шаблона по предложенной в статье ссылке.

как скачать готовый шаблон

Разархивируйте архив в отдельную папку, которая будет содержать несколько файлов и папок.

папки шаблона подписной страницы

Внимательно рассмотрите все материалы в этих папках и файлах.

Перед началом работы сделайте копию папки «Готовый шаблон»,  в неё будете вносить изменения. Если ошибётесь, то у вас всегда будет правильный вариант, и вы сможете начать редактирование заново.

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

Для редактирования шаблона подписной страницы потребуются две папки: папка «img» с графическими материалами и файл «index» с изображением шаблона одностраничника.

 Шаблон одностраничника html. Редактирование файла «index»

Нажмите правой кнопкой мыши на название файла,  выберите «открыть с помощью…» и откройте файл в любом браузере, например в Google.

На скриншоте  отмечены красным те места, которые нужно отредактировать:

  • Название страницы в браузере – «Пример подписной страницы»
  • Рисунок, изображённый на подписной странице
  • Основной текст страницы подписки
  • Кнопку подписки
  • И ссылки на «Политику конфиденциальности», «Службу поддержки» и другие, которые будут вам нужны.

Редактирование HTML- кода

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

Нажмите правой кнопкой мыши на название файла и выберите «Edit with Notepad++» или «Открыть с помощью Notepad++».

Откроется код html одностраничника, часть которого вы видите на скриншоте ниже.

редактирование кода html

В строке меню обведена кнопка для сохранения изменений, обведено название файла, который мы редактируем – index.html и название страницы между тегами <title> и</title> . Это название мы и будем менять в первую очередь.

Для этого сотрите текст автора, и напишите своё название (у меня– «Редактирование»).  Сохраните сделанные изменения. Перейдите на страницу с шаблоном подписной и обновите её с помощью стрелочки, обведённой красным квадратом.

Как видите, страница изменила своё название -“Редактирование”.

Замена изображения в шаблоне одностраничника html

Для замены изображения в шаблоне одностраничника html необходимо загрузить выбранное изображение в папку «img».

На скриншоте изображён код, который необходимо заменить (подчёркнут красным). Сначала написан адрес рисунка – img/BOX006.png, а затем атрибут alt рисунка – «Коробка». Адрес указывает, что рисунок находится в папке img. В эту папку и нужно загрузить выбранный вами рисунок.

вставка картинки в html-код страницы

После загрузки назовите рисунок латиницей, атрибут alt картинки назван в статье «Руки».

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

атрибут Alt

В этом же коде вы сразу сможете изменить и размер изображения – width=”350″ height=”337″.

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

После произведённых действий сохраните изменения, а затем обновите страницу с шаблоном.

Текст в коде замените на свой.

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

Скопируйте ссылку и вставьте её между двумя кавычками в коде подписной страницы.

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

В конце страницы вы можете таким же образом изменить ссылку на службу поддержки, вставить ссылку на свой сайт. На скриншоте стрелками указаны ссылки на «Политику конфиденциальности» и на мой блог.  Эти ссылки я вставила, заменив ссылки Ал. Новикова, которые были в шаблоне подписной страницы до редактирования.

политика конфиденциальности

Редактирование формы подписки в  сервисе рассылок Джастклик

Чтобы заменить подписную форму в шаблоне, необходимо сделать некоторые шаги в сервисе рассылок, которым вы пользуетесь.

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

  • Создаём группу контактов в сервисе рассылок;
  • Создаём форму подписки для этой группы контактов;

Как создать группу контактов и форму подписки в сервисе Джастклик можно прочитать в статье на моём блоге.

Замена формы подписки в шаблоне

Скопируйте код формы от сервиса рассылок в программу  Notepad++, создав новый файл нажатием на изображение белой папки с крестиком, смотрите скриншот.

 

Удалите код формы подписки из шаблона подписной страницы.

шаблjн одностраничника html

 

На скриншоте форма подписки начинается с 81 строки и заканчивается 110 или с открывающегося тега формы  “<form” до закрывающегося тега “</form”>/. На место удалённого кода вставьте код формы подписки от Джастклик.

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

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

Если захотите, то вы всегда сможете найти видео уроки на эту тему на Ютубе.

Итак, в статье рассмотрен вопрос редактирования шаблона одностраничника. Вы узнали как редактировать HTML- код в программе Notepad++, как заменить изображение в шаблоне одностраничника html и форму подписки.

Если статья была полезной, поделитесь ей с друзьями.

Удачных и красивых шаблонов вам.

Матвеева Галина.

 

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.