Как скопировать дизайн сайта — подборка инструментов
Доброго времени дня, читатели моего блога. С вами Андрей Зенков и сегодня я расскажу, как скопировать дизайн сайта. Перед началом своего повествования я хотел бы сказать, что не одобряю такую деятельность, так как это является интеллектуальным воровством. Любое воровство — это плохо. Я надеюсь, что вы воспользуетесь полученной информацией в благих целях. Что ж, усаживайтесь поудобнее, можете взять что-нибудь покушать. А мы начинаем!
Сегодня я расскажу о методах создания «зеркала» сайта. Как надеть шаблон на свой сайт — тема отдельная и весьма специфичная. Своими руками подобное можно сделать, обладая глубокими знаниями HTML, CSS, PHP и JavaScript. Если вы такими знаниями не обладаете, то рекомендую обращаться к специалистам в этой сфере.
Я советую использовать уникальные шаблоны. Их можно заказать у дизайнеров, либо купить в магазине TemplateMonster . Здесь предлагается большой ассортимент по выгодным ценам.
Шаблоны сайтов и Дизайн сайта от TemplateMonster.
1. Первый метод — своими руками
Самый традиционный вариант — сделать своими руками. Никакие сторонние инструменты, кроме рук и браузера, не понадобятся. Для начала найдите интересующий вас сайт. Я для примера возьму собственный блог. Перехожу на главную страницу. В любой области кликаю правой кнопкой мыши. В открывшемся меню выбираю пункт «Сохранить страницу как…»:
Процесс сохранения длится несколько секунд. На выходе получаю файл главной страницы и папку со всеми составляющими элементами. Там находятся картинки, PHP и JS файлы и стили. Файл с разрешением HTML можно открыть с помощью блокнота для просмотра исходного кода.
Если вы думаете, что сохранённые файлы можно смело натягивать на свой ресурс, то сильно ошибаетесь. Это — очень сырой вариант. Скорее, он пригоден только для просмотра исходного кода страницы, что можно сделать в окне браузера без сохранения. Пользоваться этим методом я не рекомендую, так как толку от него ноль и как перенести его на WordPress (к примеру), вам никто не расскажет (такой возможности просто нет).
2. Второй метод — использование онлайн-сервисов
Как вы помните, я сторонник использования различных инструментов для автоматизации ручной работы. Даже для таких случаев разработали вспомогательный софт.
2.1. Xdan.Ru
Бесплатный, простой и доступный сервис. Копия сайта создаётся в два клика. Всё, что я сделал — зашёл на главную страницу, ввёл адрес своего блога и нажал на кнопку «Создать копию». Через несколько минут процесс завершился и я получил архив с копией сайта. Вот, что я получил:
Интересующие вас файлы (в случае WP) находятся в папке wp-content. В папке «themes — img» лежат все необходимые изображения, из которых можно сделать рип сайта. Файлов со стилями я не нашёл, но их легко выгрузить через браузер. Снова захожу на страницу своего блога, нажимаю правую кнопку мыши и выбираю в меню «Исследовать элемент».
Меня интересует окошко Styles. Дальше просто выделяю все стили, копирую и вставляю в нужный файл с расширением css. Преимущества Xdan очевидны — простой и бесплатный проект, который даёт годный к дальнейшей работе материал. Но, опять же, для дальнейших действий потребуются знания или специалист, который таковыми обладает. Подобных сервисов в интернете больше не нашёл.
2.2. Recopyrirght
Сервис чем-то похож на CLP. Даёт возможность сделать рип сайта любой сложности. При первом использовании можно воспользоваться тестовой попыткой. На главной странице в поле «Введите сайт» я указываю ссылку на свой блог. После этого нажимаю кнопку «Создать копию».
Меня отправили в демо-кабинет, где я добавил свой блог в список сайтов. После этого в таблице напротив своего сайта нажал на кнопку «Создать копию» и процесс запустился.
По окончании процесса копирования всех файлов можно получить копию с большинством файлов ресурса. Я ждал около 15-20 минут, пока завершится процесс. Ожидания не оправдались. Сервис выдаёт сырой вариант, из которого трудно сделать рип и поставить на собственный проект. Но если постараться, то сделать можно. Но вот оправдывает ли результат затраченного времени, если есть множество других вариантов, — большой вопрос.
3. Третий метод — использование программ
Если онлайн-сервисы вас не устраивают, можете воспользоваться специальным софтом, который устанавливается на компьютер.
3.1. WinHTTrack Website Copier
Бесплатная утилита с минимум настроек. Позволяет создать полноценную копию любого сайта. Вы можете установить глубину копирования. На выходе получаете локальную версию ресурса, которым можно пользоваться в оффлайн-режиме. В полученном архиве можно найти файлы шаблона.
3.2. Teleport Pro
Наверное, один из лучших вариантов для создания полной копии любого веб-сайта. Teleport Pro загружает все каталоги и подкаталоги, в которых можно легко найти нужный шаблон. Единственный минус — программа платная. Даётся пробный период на 30 дней. Лицензия стоит 50 долларов. Я рекомендую данный продукт, если вы хотите получить качественный результат.
4. Четвёртый метод — использование графического редактора
А именно — Photoshop. Самый трудоёмкий, но зато самый надёжный способ сделать копию понравившегося дизайна на свой ресурс. Опять же, если вы не обладаете навыками работы в этой программе, а также не умеете верстать готовый шаблон, то без помощи специалиста не обойтись.
Честно, я даже не знаю, сколько стоит подобная услуга у дизайнера. Найти точный ценник можно на какой-нибудь бирже фриланса. Используя этот метод, вы можете быть уверены в том, что получите качественную копию, и поставить её на свой сайт не составит труда.
Главное преимущество заключается в том, что здесь не играет роли CMS понравившегося проекта. Скопированный шаблон можно будет установить на WP, DLE, Opencart и любые другие платформы.
5. Какие можно сделать выводы?
Наша статья подходит к концу, поэтому самое время сделать небольшие выводы. Во-первых, я против воровства чужих шаблонов. Поставьте себя на место людей, которые трудились над созданием индивидуального образа, и вы всё поймёте.
Во-вторых, для меня оптимальный вариант — создание копии в фотошопе. Это самый качественный и универсальный вариант. Закончить сегодняшний рассказ хочу выражением Роберта Энтони:
«Если у тебя нет своей цели в жизни, то ты будешь работать на того, у кого она есть».
Если вы хотите обрести независимость, ставьте перед собой всё новые и новые цели, а также не забывайте добиваться их любыми способами (законными, разумеется).
На этой позитивной и мотивирующей ноте я с вами прощаюсь. Не забудьте подписаться на мой блог, чтобы в будущем быть в курсе всех новых статей. До свидания, с вами был Андрей Зенков.
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Копируем дизайн понравившегося сайта
Порой натыкаешься на сайт с красивым дизайном и хочется узнать, а можно ли сделать что-нибудь наподобие у себя. Так вот здесь и поговорим об этом.
Скачать исходники для статьи можно ниже
1. Узнаем какая тема (шаблон) используется на сайте, так как она в основном и определяет его общий дизайн и функционал.
И следовательно если мы установим данную тему на свой сайт, то достаточно близко приблизимся к нужному дизайну.
Первое что нужно сделать – это определить на каком движке (CMS) сделан сайт.
Есть очень полезные онлайн сервисы, помогающие нам определить CMS сайта, например:
2ip.ru/cms/
Здесь просто указываем имя сайта и смотрим признаки какой CMS найдет данный сервис.
Нужный нам сайт базируется на WordPress – отлично! Значит тема подойдет для нашего сайта.
Идем далее и смотрим – какую тему использует сайт.
Как это сделать, оказывается достаточно просто.
Рассмотрим на примере браузера Firefox.
1. Открываем нужный нам сайт, например mnogoblog.ru.
2. Открываем “Исходный код страницы”, для этого нажимаем комбинацию клавиш CTRL + U (одновременное зажатие этих двух клавиш: CTRL и U) или же заходим в меню браузера в пункт “Инструменты”, далее подпункт “Веб-разработка” и выбираем в нем строчку “Исходный код страницы”.
3. Ищем строчку с ссылкой на файл стилей style.css.
Вот так она выглядит на моем сайте:
Как ее легче отыскать?
В появившемся окошке “Исходный код страницы” выбираем в верхнем меню пункт “Правка” и подпункт “Найти”.
И вводим в строку поиска “css” (без ковычек) или сразу “style.css” (без ковычек).
Что дает нам данная строчка?
Она дает нам название темы, то есть на моем сайте используется wordpress тема “glossyblue”, так как ее файл стилей использует на данный момент сайт mnogoblog.ru.
Теперь нам осталось вбить в поисковик запрос: “wordpress тема glossyblue” – и вы без проблем отыщете мою тему (правда я ее немного доработал).
Но данный способ определения темы может и не сработать, например владелец сайта может переименовать папку с темой.
Для решения этой задачки есть небольшая хитрость – в основном темы включают в себя скриншот (картинку как будет выглядеть тема после установки) – вот его то и нужно найти.
То есть, например на своем сайте я возьму и переименую папку темы с glossyblue на mytheme, тогда при отыскании файла стилей style.css вы увидите в исходном коде сайта следующую строчку:
Понятно, что реальное название моей темы не mytheme, но как тогда узнать ее название?
Для этого достаточно в браузер вбить путь, заменив окончание style.css на screenshot.jpg или на screenshot.png.
Например если я вобью на своем сайте в браузер следующий url, то увижу скриншот темы glossyblue:
Теперь нам нужно сохранить данный скриншот на свои компьютер.
Далее нужно воспользоваться поиском через картинки, например с помощью поисковика Google:
нажимаем в строке поиска на иконку фотоаппарата и указываем путь до скаченного нами скриншота темы.
И в выдаче результатов Google на 5 позиции у меня оказался сайт разработчика моей темы.
2. Тему скопировали, теперь ищем как создать интересные дизайнерские элементы понравившегося нам сайта.
Для этого можно воспользоваться расширением для браузеров.
Например для браузера Firefox – это Firebug.
Как его установить?
Для того, чтобы его поставить себе на Firefox нужно зайти в менюшке браузера в пункт “Инструменты”, далее выбрать подпункт “Дополнения” и в строке поиска ввести Firebug.
Как им пользоваться?
Я пользуюсь в основном следующей функцией (отмечена на скриншоте):
Как пользоваться данной функцией?
После того как вы нажали на эту кнопку плагина Firebug, ведите мышью над нужными участками вебстраницы, и в левой части окна плагина Firebug сможете наблюдать участки Html кода, отвечающие за формирование данных элементов дизайна (они будут выделены синим фоном), а в правой части окна вы сможете увидеть стили, которые описывают данный элемент в файле стилей style.css.
При этом элемент страницы, над которым находится курсор мыши, будет заключен силами плагина Firebug в синюю рамочку.
Скопировать дизайн сайта — рип сайта — это просто
Очень часто клиентов кроме верстки сайта интересует рип сайта — проще говоря копирование шаблона чужого сайта. Ну и, чаще всего, этот самый дизайн нужно интегрировать на wordpress.
Задача эта одновременно и сложная и простая:
Как скопировать дизайн сайта — сделать рип сайта
Для начала я копирую структуру сайта. Полностью. Для этого можно использовать много разного софта, например teleport pro или его бесплатный аналог HTTrack Website Copier. Я использую первый, у него есть удобная фича, о которой расскажу позже.
Сделал небольшую гифку, по настрйоке Teleport Pro для парсинга сайта, что бы потом удобно было скопировать сайт.
Когда сайт скачается — у вас будет нормальная копия сайта — все файлы, стили, графика — все будет сохранено к вам на жёсткий диск. Но это все вам не нужно. Как правило при рипе сайта нужно сохранить только главную страницу, страницу рубрик и внутреннюю страницу. По этому примеру я и буду показывать как скопировать дизайн сайта ну и как перенести его на WordPress
Ах, да. Я предполагаю что вы понимаете что рип сайта это своего рода интелектуальнео воровство. А воровать плохо. Я вас предупредил, а дальше — дело за вами.
В следующей статье, я покажу как из всего сброда файлов выбрать нужные страницы и сохранить только нужные для шаблона файлы. Ну и как потом єто все дело интегрировать на движок, в моём случа это WordPress
7 комментариев
расскажите как интегрировать файлы сайта на движок вордпресс. Очень нужно, хотя бы в 2-х словах.
Как скопировать сайт целиком и переделать под себя
Допустим, вы хотите скопировать сайт и изменить под себя. Ничего плохого в копировании нет, если не нарушаются авторские права. Как их не нарушать – тема отдельной статьи, а в этой мы остановимся на способах копирования веб-сайта с последующей доработкой под себя.
Повторять дешевле, чем продумать концепцию веб площадки заранее. Подражание приемлемо на начальном этапе в любой сфере. Предположим, вы ставите себе цель получить сайт не хуже, чем у конкурента, заимствуя с него дизайн, структуру, маркетинговые уловки.
Вначале ответим на самые наболевшие вопросы.
Давайте начнем. Изберём себе инструмент для копирования сайта. В нашем случае это любимый WordPress, тема Impreza с конструктором страниц wp bakery page builder. В этом конструкторе очень просто работать и менять под себя блоки и картинки сайта. Также в нём содержатся уже готовые дизайн шаблоны, которые поддаются гибкой настройке.
Сразу определимся на что мы можем рассчитывать прибегая к нашему способу. Используя Impreza с wp bakery page builder возможно повторить целиком структуру возможно таких разновидностей веб-сайтов как, например, визитка, каталог, корпоративный, блог. С помощью этого чудо плагина возможно заимствовать чужое и сотворить своё. Только не стоит рассчитывать, что на wp вы сможете создать соц сеть или портал недвижимости. Простые структуры помогает копировать простой движок без знаний программирования.
Простой способ копирования сайта на конструкторе
Шаг 1: установим WordPress, тему Impreza, и плагин wp bakery page builder
Кстати, совершенно неважно, какой вы будете использовать вид конструктора. Их на сегодняшний день в каждой WordPress теме хватает. Можно любой, главное чтобы вы понимали как с ним взаимодействовать. Принцип един для всех. Выбираем наиболее простой и недорогой вариант с гибкими настройками. Что позволит экономить время на сложных элементах.
Допустим, нам нужно скопировать шапку сайта. В ней есть логотип, горизонтальное меню с выпадающими списками, контакты, кнопка заказа звонка. Для этого используем такой конструктор как header builder (конструктор шапки сайта). Можно пользоваться также бесплатным Elementor.
Собираем шапку как лего в детстве. Перетаскиваем элементы в нужное место и указываем настройки дизайна. Все настройки находятся на вкладках в каждом блоке, который вы видите. Наводим мышь, выбираем карандаш и редактируем.
Шаг 2: скопируем текст с сайта
Это мы делаем, чтобы начать получать органический трафик с поиска. Для копирования текста с сайта достаточно знать о такой комбинации клавиш как ctrl+c ctrl+v. Это в том случае, если материал не защищен от копирования. Снять эту защиту просто, открыть исходный код страницы (инспектор кода f12) и выделить нужный текст мышью. Но таким образом, мы не сможем придать тексту уникальности. Нужно немного его изменить, так сказать отрерайтить.
Доведя до нужного вида текст, вставьте его в шаблон текстового блока. Разбавляйте текст интересными картинками. Изображения также нужно стараться выбирать уникальные и качественные, а это сделать просто если у вас в компании/на предприятии есть свой фотограф. Если фоток совсем не будет, сайт станет похож на научный.
Заказать копию сайта у тех, кто давно занимается веб разработкой
Воспользуйтесь возможностью заказать копию сайта с доработкой под ваши нужды. Осуществим мечту в короткие сроки и небольшие затраты. Копируем многостраничные сайты от 5000 руб, визитки от 3000 руб. А как же бесплатно? Бесплатно копию сайта на просторах интернета получить можно, но опять же это 1. не уникально 2. не своё. В этом помогут специальные программы скачивания сайтов на уровне разметки html css. Без дальнейшего редактирования в удобном веб интерфейсе само собой.
Если вы или ваши знакомые заинтересованы в услугах копирования сайтов конкурентов и их доработке под ваши нужды, уделите нам 1 минуту вашего внимания. Мы являемся профессионалами в сфере разработки веб ресурсов с опытом более 12 лет. Сможем сотворить чудеса. Речь идет о постоянном развитии и заполнении сайта с дальнейшая поддержка и сопровождением. Поисковикам, как и посетителям, подавай всё только уникальное, свежее и полезное. Унылый вид старого, не обновляющегося сайта их не впечатлит. Мы готовы предложить свежее решение, с анимацией, современным дизайном.
Копируем интернет-магазин, структура блоков, минимализм
Под себя, что это значит?
Ваше творение должно отличаться от веб творчества конкурентов. Выделимся крутым логотипом, анимацией, легкостью загрузки сайта. Это и есть переработка под себя. Свежий глоток воздуха, который дает ваша фантазия и понимание бизнес задач сайта.
Со своей стороны мы способны помочь вам воплотить недорого и оперативно любую задумку.
Как украсть оформление чужого сайта
Всем привет! Пару дней назад, я обещал, что расскажу, как можно скопировать оформление чужого сайта. В этом уроке рассмотрим, как скопировать отдельные элементы с чужого ресурса и установить на свой сайт. Например, Вам понравилась форма подписки на другом сайте, и Вы хотели бы установить себе такую же. Для этого надо проделать несколько несложных движений. В следующем уроке, я расскажу, как можно скопировать и сам сайт.
Копируем (крадем, клонируем) оформление чужого сайта
Все, что описано в этом уроке, можно сделать на любом сайте и на любом движке. Для начала надо найти, что Вы хотите скопировать. Посмотрите на шаблон своего сайта, и определитесь, что бы Вы хотели изменить. Я уже давно знаю, что хочу изменить, но все время мне было лень этим заниматься, да и сам шаблон я буду в скором времени менять. В этом уроке, я покажу, как я скопирую форму подписки Feedburner на другом сайте.
После того, как Вы скопируете с другого сайта часть дизайна, не стоит устанавливать на свой сайт 100% копию. Надо ее хоть немного видоизменить, т. е. сделать под свой дизайн шаблона. Возможно, надо будет изменить цвет и размер шрифта. Если Вы украдете форму подписки, то в любом случае надо будет изменить ссылки и возможно номер ID (идентификатор). А теперь перейдем к действиям.
Я просмотрел около 150 сайтов, в поиске красивой формы подписки Feedburner, но толком ничего не нашел. Покажу пример на том, что нашел. Смотрите видео, как легко можно скопировать форму и установить на свой сайт.
