7:25
Автор: Рубрика: Сайты 7 комментариев

Как скопировать лендинг и переделать его под себя. Часть 2

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

  • Изменяем фоновое изображение
  • Вставляем свои картинки
  • Убираем лишнее
  • Перепечатываем текст
  • Меняем ссылки на свои

Перед тем как начать

Для более комфортной работы советую установить к себе на компьютер браузер Google Chrome и приложение Notepad++. Я всегда использую эти инструменты при редактировании сайтов и считаю их необходимыми.

Ищем в папке со скопированным сайтом файл index.html и открываем его в Google Chrome и Notepad++.

Изменяем фоновое изображение

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

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

Изменяем размеры своего изображения в каком-нибудь графическом редакторе. Я использую Photoshop.

Называем полученную картинку тем же именем что и фоновая и копируем с заменой в папку с лендингом.

Обновляем страницу сайта и вот что у меня получилось

Вставляем свои картинки

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

Заменяю картинку с портмоне на свою и вот что получаю.

Чтобы расположить картинку на нужное место немного подправим код. В Google Chrome нажмем правой кнопкой мыши на нашем изображении и выберем пункт «посмотреть код».

Открылась панель кода страницы, при этом должна быть выделена строчка, отвечающая за отображение картинки. В правом столбце находятся стили с помощью них как раз и позиционируется наша картинка. Ищем в правой колонке параметры: “top”, “left”, “right”, “bottom” и убираем с них галочку. Если изображение сдвинулось, то это тот параметр, который нам нужен. Теперь ставим галочку обратно и изменяем значение так чтобы наша картинка встала так как нам нужно.

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

Расположим изображение так как нужно и запоминаем параметры. Теперь нужно найти их в коде и исправить. В моем случае параметры прописаны прямо в index.html об этом говорит Селектор element.style.

У вас может быть по-другому и если селектор другой, то напротив него находится название файла стилей и строчка в которой это правило прописано (на картинке правило header img прописано в файле index.css на 19 строчке).

Воспользуюсь поиском  Notepad++. Искать буду по названию картинки.

Изменяем эти свойства и сохраняем.

Удаляем лишнее

Любой элемент лендинга можно заменить на свой (как мы это делали выше) или удалить. Для примера я покажу как удалить целый блок.

Нажимаю правой кнопкой мыши на картинке и нахожу нужный div- блок.

Нажимаем на точки слева от выделенной строчки и выбираем delete element.

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

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

В моем случае нужно было уменьшить параметр top.

Перепечатываем текст

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

Нужно стараться чтобы ваш текст был примерно такой же длины, как и старый. Иначе какой-нибудь блок может уехать.

Меняем ссылки на свои

Ссылки в html коде имеют вот такую структуру:

<a href=”ССЫЛКА”>АНКОР</a>

На сайте отображается только анкор, кликнув по которому осуществится переход по ссылке. Что бы найти ссылку нужно воспользоваться поиском по анкору и уже в коде тега <a> измерить значение атрибута href.

У меня первая ссылка – это кнопка заказать на первом экране. Вот ее код:

<a href="#footer" id="a1" target="« class=»some_link" data-label="ЗАКАЗАТЬ">ЗАКАЗАТЬ</a>

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

Форма заявки

Форма заявки в моем случае выглядит таким образом:

Открываю «исходный код» в браузере. И удаляю возможность выбора цвета, в моем случае она не нужна.

 

Кнопка сдвинулась вверх. С помощью стилей увеличу отступ. Для этого добавлю свойство margin-top:30px.

Таким же способом увеличу отступы полей ввода имени и телефона.

Получилось так

Теперь прописываем все эти изменения в index.html и файле стилей по аналогии с описанными выше способами.

Как вы наверное уже поняли для того чтобы изменить лендинг под себя необходимо научиться разбираться в коде. Если вы занимаетесь интернет-маркетингом, то это один из ключевых навыков. Я не говорю что нужно в идеале знать все веб-программирование, но основы знать просто необходимо. Поэтому настоятельно рекомендую вам пройти 2 курса:

Курс по html

Курс по css

Я сам когда-то начинал с этих курсов и они мне очень помогли.

Нам осталось только создать файл-обработчик для формы заказа. Он будет отправлять данные, которые ввел пользователь к вам на e-mail. Но это большая тема и я расскажу об этом в следующей статье.

Хочешь получать статьи этого блога на почту?
Новые статьи блога
7 комментариев
  • Павал

    Редко статьи пишешь(

    2016-11-03 в 4:36 | Ответить
    • Максим Велик

      Ушел с головой в веб-разработку. Поэтому временно приостановил ведение блога. Скоро вернусь и продолжу цикл статей про копирование лендинга. А может и эти статьи дополню так как знаний существенно прибавилось =)

      2016-12-31 в 1:38 | Ответить
  • Игорь

    И все-таки как убрать ссылки?

    2016-11-28 в 9:42 | Ответить
    • Максим Велик

      Ссылки в html обозначаются тегами <a href="АДРЕС_ССЫЛКИ" rel="nofollow">Текст ссылки</a>. Если Вы хотите их удалить то необходимо найти их в коде и стереть. Если Вы имеете в виду удаление блока навигации, то возможно придется удалить целый блок. Поэкспериментируйте в Инструментах разработчика в Chrome.

      2016-12-31 в 1:47 | Ответить
  • Alex

    Как заставить форму заказа работать на свой email ?

    2016-12-05 в 2:48 | Ответить
    • Максим Велик

      Нужно создать файл обработки формы на PHP и поправить атрибут «action» тега <form>. Это если вкратце.

      2017-01-01 в 5:43 | Ответить
  • Анатолий

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

    2017-03-20 в 3:21 | Ответить
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: