Научись создавать красивые, современные подписные и продающие страницы [Сергей Немцев] [Повтор-4]

​ Не секрет, что красивая и лаконичная страница вызывает интерес у посетителя и на подсознательном уровне мысль, что здесь ему предлагают что-то КАЧЕСТВЕННОЕ. Поэтому, разумеется, чтобы увеличить конверсию продаж или подписок, нужно сделать максимально качественную страницу. Сергей Немцев научит Вас самостоятельному написанию кода Html и Css, разобравшись в котором, Вы сможете не только создавать индивидуальные страницы, но и уникализировать уже готовые. Знание кода всегда пригодится и не раз выручит если Вы пришли в интернет всерьез и надолго! ​ 1.1 - Продающая страница 1.1.1 - Разбор продающих страниц. В самом начале мы поговорим с вами о видах продающих страниц, проанализируем реальные страницы разных авторов, обращу ваше внимание на основные моменты структуры и дизайна таких страниц. Вы узнаете, каким должен быть текст и изображения, каким образом их грамотно сочетать и какими триггерами можно насытить сайт, чтобы он привлекал больше внимания. 1.1.2 - Информационные разделы. В этом уроке мы по пунктам разберем какие информационные разделы должен содержать одностраничный сайт и как их написать чтобы подвести посетителя сайта к покупке. 1.2 - Подписная страница В этом разделе, мы поговорим и о подписных страницах. Проанализируем реальные примеры удачных и неудачных вариантов таких страниц. Расскажу про оптимальный (простой и красивый) вариант подписной страницы. 2.1 - Введение в Html и Css 2.1.1 - Введение в Html. В этом уроке я расскажу что такое код Html, для тех кто еще не знаком с ним. Покажу основные принципы написания этого кода, изучим, созданный мной, файл-подсказку, который вам будет пригождаться при создании сайтов. Рассмотрим структуру html-документа. 2.1.2 - Введение в CSS. Здесь мы рассмотрим стили css, расскажу вам зачем они нужны. Разберемся с кодом написания стилей. Научу вас пользоваться файлом подсказкой для стилей. 2.2 - Создание основы для одностраничка В этом уроке мы создадим файл Html и файлы Css, зададим необходимые параметры нашего сайта, напишем заголовок, подзаголовок и несколько абзацев, подготовим стилевую основу будущему одностраничнику (кроссбраузерность, стили для заголовка, подзаголовков, абзацев и т.д.). 3.1 - Учимся работать в программе Photoshop 3.1.1 - Базовые моменты в программе Photoshop. В этом уроке я познакомлю вас с программой Photoshop, я покажу вам базовые моменты, разобраться в которых необходимо для того чтобы в дальнейшем редактировать готовые элементы для сайта (блоки, фоны, изображения).Найдем в интернете несколько изображений и отредактируем их под наш сайт. 3.1.2 - Более продвинутые моменты в Photoshop. В этом уроке я покажу вам некоторые продвинутые моменты, которые помогут вам научиться самостоятельно создавать графические элементы для сайта (блоки с текстом, красивые кнопки, фоны и т.д.), а также более грамотно редактировать готовые. 3.2 - Заголовок, шапка сайта 3.2.1 - Разбор разных шапок продающих сайтов. Здесь мы будем говорить с вами о самой верхней части нашего сайта, т.е. о "шапке", ее называют еще - "header (хэдэр)" по названию тега, который ее задает. Этому элементу я уделю особое внимание, т.к. он является одним из самых важных на странице (это первое, что видит посетитель). Расскажу о факторах, которые нужно учитывать, при написании цепляющего заголовка. Проанализируем многие варианты других авторов. Расскажу что лучше цепляет посетителей. 3.2.2 - Создание простой шапки сайта. Просто - не значит некрасиво. Простота - сестра таланта, поэтому даже при создании простой шапки, можно сделать ее очень привлекательной, иногда достаточно простой шапки. В этом уроке мы уже будем практиковаться. Покажу как можно при помощи изображения и текста (поэкспериментируем со стилями для текста) создать красивую простую шапку. Так же, в этом уроке мы рассмотрим помещение изображений или текста поверх других элементов. Я покажу вам как этот метод применить в создании незамысловатой шапки для сайта, чтобы сделать ее объемней и красивее, а также данный метод нам пригодиться в последующих уроках при создании блоков. 3.2.3 - Создание эффектной шапки сайта. В этом уроке покажу где взять, как отредактировать и использовать изображения для создания шапки. Покажу как полностью нарисовать шапку в Photoshop вместе с текстом, научу вас создавать красивые надписи., чтобы потом осталось только вставить изображение в шапку сайта! Дам советы на случай если вы захотите очень красивую, эффектную шапку на свой сайт. 3.3 - Фон 3.3.1 - Фон для сайта. Фон всего сайта, статический и прокручивающийся, фон отдельных блоков и элементов, помещение больших изображений как фон (чтобы браузер не учитывал их ширину) - все это в данном уроке. И еще: работа с программой фотошоп, использование паттернов для фона, редактирование (оптимизация) больших изображений как для фона всей страницы (как сделать чтобы изображение повторялось без стыка) так и для небольших элементов, поиск фонов и паттернов в интернете и др. 3.3.2 - Фон для блоков и других элементов. Фон всего сайта, статический и прокручивающийся, фон отдельных блоков и элементов, помещение больших изображений как фон (чтобы браузер не учитывал их ширину) - все это в данном уроке. И еще: работа с программой фотошоп, использование паттернов для фона, редактирование (оптимизация) больших изображений как для фона всей страницы (как сделать чтобы изображение повторялось без стыка) так и для небольших элементов, поиск фонов и паттернов в интернете и др. 3.4 - Дизайн информационных блоков 3.4.1 - Обзор различных блоков. И вот наконец мы дошли до самого основного - блоки, из которых строится сайт-продажник - это блоки с отзывами, блоки с формой или кнопкой заказа, блоки с часто задаваемыми вопросами, блоки с контактной информацией, блоки с бонусами и в основном это конечно блоки с описанием товара или услуги. В этом уроке я сделаю обзор различных блоков, на сайтах разных авторов, В основном мы будем уделять много внимания блокам на всю ширину экрана, но я так же рассмотрю и блоки ограниченные шириной основного блока, который имеет фиксированную ширину по всей длине сайта. 3.4.2 - Блоки посредством только CSS. В этом уроке я покажу вам несколько симпатичных блоков, которые можно сделать без использования Photoshop и картинок, только лишь используя стили CSS. При создании своего сайта вы будете не раз их применять, их очень просто создавать. 3.4.3 - Блоки посредством Photoshop+CSS. В основном на данной странице и вообще, чаще используются именно такие блоки, при небольших навыках в программе Photoshop, их довольно просто создавать, они значительно красивее, чем блоки только лишь средствами CSS, да и сделать их можно какими угодно на что хватит фантазии. Мы рассмотрим самые разные блоки, с информацией о товаре и услуге, блоки выделяющие главные мысли, блоки для отзывов, блок-гарантияи т.д. 3.5 - Списки, иконки. В этом уроке я покажу вам как создавать списки (пункты), например перечень плюсов или минусов используя, например, красивую иконку плюса или минуса слева. А так же покажу где найти и как можно использовать разнообразные иконки. Предыдущие складчины (есть отзывы): Складчина 1 Складчина 2 Складчина 3