Содержание

LPF — простой PHP-фреймворк для создания одиночных страниц

Не так давно возникла задача сделать простую Landing Page (целевая страница сайта). На такой странице, как правило располагается вся необходимая информация о товаре/услуге.

Технически она создается в виде отдельного html-файла. Проблема тут только в том, что работать с «голым» HTML не очень удобно, ну и страшно не хотелось отказываться от возможностей LESS для создания css-стилей.

Ставить отдельную копию MaxSite CMS тоже не совсем разумно: ради пары страниц это явный перебор. Таким образом родился небольшой PHP-фреймворк «Landing Page Framework» специально «заточенный» для создания одиночных страниц.

Его смысл в том, чтобы выделить верстку каждой страницы в отдельный php-файл, и при этом обеспечить вебмастера привычными «плюшками».

В частности LPF может выполнять автоматическую компиляцию LESS в CSS, выполнять авторасстановку тэгов (вручную расставлять P — бр-р-р-р…), поддерживать привычный BBCode. Помимо этого будет работать ЧПУ, а также поддержка любого CSS-,JS-фреймворка. Плюс высочайшая скорость работы (при минимальной нагрузке на сервер) и не требуется база данных.

Установка

Landing Page Framework — не требует инсталяции. Достаточно загрузить файлы на сервер и всё сразу начинает работать. Единственное, что возможно придётся указать права на запись на каталог кеша (и /css/), а также убедиться, что работает ЧПУ (обычно с этим проблем нет).

Для чего годится LPF

В первую очередь, конечно же, для создания landing pages. Также он отлично подходит для небольших сайтов из ограниченного количества страниц. Поскольку фреймворк работает на PHP, то с помощью LPF можно организовать простую CMS со связями между страницами и общими блоками (через set-каталог и компоненты).

LPF прекрасно подходит для изучения различных CSS-фреймворков. Причем их можно подключать как на уровне всего сайта (то есть для всех страниц), так и для каждой страницы отдельно. Для примера я сделал подключение:

  • bootstrap
  • foundation
  • kickstart
  • pure
  • uikit

Всё это работает без каких-либо переделок и ухищрений.

LPF можно использовать и для обучению верстке, и для организации разных демо-страниц. Если бы LPF появился раньше, то все свои примеры по MaxSite CMS я бы делал именно на нём. 🙂

Простота освоения

Страницы сайта размещаются каталоге /pages/. Причем имя страницы совпадает с именем её каталога. Это очень простая схема, при которой невозможно запутаться. Для главной страницы используется каталог /home/, но при необходимости можно задать любой другой.

Каждая страница содержит два файла: text.php и variables.php. Первый содержит текст страницы, второй — какие-то её опции, вроде title или meta.

Файл text.php по сути выводится как тело HTML-страницы между BODY. Выводится всё, что в нём указано без обработки. Но, при желании, можно разрешить использование BBCode (как в MaxSite CMS), разметки Markdown и даже HAML. Если лень расставлять абзацы P, то можно разрешить авторасстановку тегов. Всё это опционально и будет работать только по желанию вебмастера.

Строго говоря, в LPF можно подключить любой autotag, даже если вы его сделаете сами.

Если стоит задача вывести какой-то код в секции HEAD, то создается файл head.php. Файл header.php подключается сразу в начале секции BODY, а footer.php — в конце.

Про CSS/LESS

В LPF используются часть функций из MaxSite CMS (кого-то это удивляет?). Компилятор LESS — один из краеугольных камней фреймворка, поэтому он настроен сразу на автоматическое выполнение. Исходные less-файлы хранятся в каталоге /css-less/ с основным файлом style.less. Результат компилируется в каталог /css/ в файл style.css. Таким образом, в style.less правильным будет только подключение через @import любых других файлов со стилями. Организация less-файлов уже целиком ложится на вебмастера.

Отмечу особенность LESS-компиляции, которая с недавних пор также доступна пользователям MaxSite CMS. Сама библиотека компилятора достаточно объемна и компиляция требует дополнительных ресурсов сервера. Чтобы сгладить его работу происходит кеширование результата. В отличие от других разработок, в моей сверяется время не только основногого less-файла с конечным, но и всех остальных less-файлов. Если какой-то из них изменён, то произойдет автоматическая компиляция.

Раньше приходилось на этапе разработки включать принудительную компиляцию, теперь же это просходит автоматически.

Про компоненты

Смысл компонентов, такой же как и в MaxSite CMS — вынести сложный многократно используемый код отдельно и подключать только при необходимости. В Landing Page Framework компоненты располагаются в каталоге /components/ каждый в своем подкаталоге.

Подключение компонента происходит вручную в нужном месте страницы с помощью функции mso_component(). Первым параметром указывается название/каталог компонента, вторым — опции компонента. Переданные опции автоматически доступны в файле компонента в переменной $OPTIONS. Что это за компонент и какие у него должны быть опции — зависят уже только от самого компонента.

Для примера я включил в комплект фреймворка menu, просто потому что он мне понадобился на своём сайте. Ну и как пример работы. Делать какие-то другие варианты я не планирую, поскольку компоненты обычно завязаны на HTML-разметку, CSS-стили и JS-скрипты, которые могут быть произвольными и меняться от сайта к сайту.

LPF as CMS

Если на сайте две и более страниц, то неизбежно возникнут какие-то общие блоки. Самый простой вариант — счетчики, шапка и подвал сайта. Очевидно, что такие блоки удобно оформить в отдельных файлах и подключать уже в коде страниц. Я долго не мог определиться как назвать такие блоки и пришел к выводу, что такие вещи нужно группировать в отдельном каталоге в виде набора SET.

Например для своего сайта я сделал /set/mysite/, где разместил header.php, footer.php и counters.php. В тексте страниц подключение выполняется одной коммандой:

<?php require(SET_DIR . 'mysite/header.php') ?>

Поскольку организация каталога /set/ может быть произвольной (или даже вовсе отстутствовать), то он и не создается при установке LPF. Но при этом существуют две php-константы SET_DIR и SET_URL, которые чуточку упрощают написание php-кода.

Итого

Анонсирую Landing Page Framework в первую очередь для вебмастеров, которым может быть полезен подобный инструмент. Делал я его под свои задачи, но после публикации первых версий, интересные идеи и дельные замечания мне подкинул Павел Белоусов (@pafnuty_name). Сейчас список задач пуст и LPF уже прошел небольшое тестирование, поэтому его можно использовать на рабочих сайтах.

Другие записи сайта

Как скопировать лендинг пейдж на свой хостинг и сделать чтобы он работал 💻

Landing Page – посадочная страница, оформленная под продажу какого-то одного или нескольких товаров или услуги. Их специально делают очень красивыми и манящими, чтобы у человека, который попал на неё и пролистал до конца, не осталось ни единого сомнения в том, что надо брать!

Потому разработка лендинг пейджа это дорогое удовольствие, требует времени и фантазию. Но ведь практически под всё уже есть лендинги! И даже продаются готовые варианты. В этой статье я расскажу как взять готовую страницу, перенести к себе на хостинг и отредактировать. Да, это по сути воровство и вас за это могут привлечь к ответственности. Поэтому делать это можете на свой страх и риск. Основное применение – в образовательных целях. Потом в любом случае лучше сделать свой лендинг.

Что потребуется

Я уже рассказывал как скопировать любой сайт на компьютер. Этот способ работает и для Landing Page, но могут быть нюансы. Если вы уже пробовали подобную программу, скачали лендинг и залили на свой хостинг, но что-то пошло не так, то мой способ точно сработает.

Требования:

  • Скрипт Dollysites (платно)
  • Хостинг с поддержкой Apache или Apache+nginx (есть у всех)
  • PHP 5.6+ с установленными модулями curl, json, mbstring (в 99% стоят по умолчанию)

В принципе это всё. Принцип такой:

  • На хостинг копируется скрипт, он работает как небольшая CMS
  • В настройках указывается нужный сайт

Опять всё 🙂 После этого на вашем домене лендинг пейдж открывается точно в таком же виде, как вы его видите на другом сайте.

Возможности скрипта Dollysites:

  • Удобная админка
  • Визуальный редактор страниц
  • Оживление форм
  • Учёт заказов
  • Замена текста
  • Регулярные выражения
  • Поддержка изменений на оригинальной странице
  • Перевод текста с помощью Яндекса или Google
  • Синонимайзер

К слову, Dollysites работает с любыми сайтами, не только лендингами.

Как установить скрипт

Скачать скрипт можно только после его покупки. Для посетителей моего сайта предоставляется скидка 5%, работает при переходе по ссылке:

Скачать скрипт

Далее его установка не отличается от установки обычной CMS:

  • Копируем архив в корень или папку сайта
  • Разархивируем его в панели управления хостинга
  • На следующие файлы и папки, необходимо поставить права 777:
    • каталог, в котором находится скрипт (public_html или название домена)
    • файлы index.php, admin.php в корне
    • папка /lib и все файлы в ней
    • папка /system и все файлы в ней

Права, они же атрибуты, можно поменять в панели управления хостинга.

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

Настраиваем копирование

Вводим URL и кликаем в любое пустое место, чтобы определилась кодировка страницы и нажимаем «Далее»

На следующей странице настроек мастер предлагает выбрать режим кэширования. Здесь нужно оставить по умолчанию – «Файлы», а также поставить галочки на «Подключаемые JS/CSS» и «Изображения». Это нужно для того, чтобы копировались все скрипты и картинки, даже те, которые подгружаются с поддоменов.

Нажимаем «Далее» и теперь всё готово, уже должен открыться «ваш» landing.

Какие есть настройки

Когда вы залогинены в админке, то на всех страницах скопированного лендинг пейджа в левом верхнем углу будет меню.

Визуальный редактор позволяет редактировать текст, изменять оформление, добавлять/изменять/удалять картинки, ссылки и т.д.

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

Дальше настройка происходит в контрольной панели (админке). В разделе «Скрипты» можно видеть, редактировать и отключать подключаемые на странице скрипты, в том числе inline-вые, т.е. встроенные с помощью тегов <script></script>

С помощью замен в тексте можно изменить все вхождения одних слов или кода на другие, например, «Киев» на «Москва». Для вырезания кода удобно пользоваться регулярными выражениями. Также можно добавлять свой код, если ввести, например, замену «</body>» на «код</body>» мы добавим свой код в самый конец страницы.

На вкладке «Контент» можно включить переводчик или синонимайзер, но в рамках моделирования лендингов эти функции не нужны:

В пункте меню «Изображения» настраивается уникализация картинок: отзеркаливание и водяной знак:

Функция «Выгрузить архив» позволяет сохранить весь лендинг пейдж в архив.

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

Скачать DollySites

В каких случаях что-то не будет работать

Такое может быть, что целевой landing page использует не только Javascript, но и php-скрипты на действия. Т.е., когда вы что-то делаете на странице, идёт обращение к php скрипту на сервере. Такое скачать не возможно, потому что скрипт возвращает результат, в зависимости от действий посетителя. Но такое бывает крайне редко и при ручном вмешательстве также интегрируется куда надо.

Вот в принципе и всё, успехов!

Как сделать Создать веб-сайт лендинг

Узнайте, как создать отзывчивый веб-сайт, который будет работать на всех устройствах,
ПК, ноутбук, планшет и телефон.

Создание веб-сайта с нуля

«проект макета»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Navigation bar

Side Content

Some text some text..

Main Content

Some text some text..

Some text some text..

Some text some text..

Footer

Первый шаг-базовая HTML страница

HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.

Примечание: Если вы не знаете, HTML и CSS, мы предлагаем вам прочитать HTML учебник.

Пример

Page Title

body {
   
font-family: Arial, Helvetica, sans-serif;
}

<h2>My Website</h2>
<p>A website created by me.</p>

</body>
</html>

Пример как работает

  • <!DOCTYPE html> Декларация определяет этот документ как HTML5
  • <html> элемент является корневым элементом HTML-страницы
  • <head> элемент содержит мета-информацию о документе
  • <title> элемент задает заголовок документа
  • <meta> элемент должен определить кодировку UTF-8
  • <meta> элемент с именем = «видовой экран» делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана
  • <style> элемент содержит стили для веб-сайта (макет/дизайн)
  • <body> элемент содержит видимое содержимое страницы
  • <h2> элемент определяет большой заголовок
  • <p> элемент определяет абзац

Создание содержимого страницы

Внутри <body> элемента нашего сайта, мы будем использовать наш «макет проекта» и создать:

  • A header
  • A navigation bar
  • Main content
  • Side content
  • A footer

Semantic Elements

HTML5 ввел несколько новых семантических элементов. Семантические элементы важны для использования, поскольку они определяют структуру веб-страниц и помогают читателям экрана и поисковым системам правильно читать страницу.

Вот некоторые из наиболее распространенных семантических HTML-элементов:

Элемент <Section> можно использовать для определения части веб-сайта с соответствующим содержимым.

Элемент <статья> можно использовать для определения отдельного фрагмента содержимого.

Элемент <Header> можно использовать для определения заголовка (в документе, разделе или статье).

Элемент <Footer> можно использовать для определения нижнего колонтитула (в документе, разделе или статье).

Элемент <Nav> можно использовать для определения контейнера навигационных ссылок.

В этом уроке мы будем использовать семантические элементы.

Тем не менее, это до вас, если вы хотите использовать <div> элементы вместо.

Заголовка

Заголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:

<div>
  <h2>My Website</h2>
  <p>A website
created by me.</p>
</div>

Затем мы используем CSS для стиля заголовка:

.header {
    padding: 80px; /* some padding */
   
text-align: center; /* center the text */
    background: #1abc9c;
/* green background */
   
color: white; /* white text color */
}

/* Increase the font size of the <h2> element */
.header h2 {
    font-size: 40px;
}

Панель навигации

Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:

<div>
  <a href=»#»>Link</a>
  <a href=»#»>Link</a>
 
<a href=»#»>Link</a>
  <a href=»#»>Link</a>
</div>

Use CSS to style the navigation bar:

/* Style the top navigation bar */
.navbar {
   
overflow: hidden; /* Hide overflow */
    background-color: #333;
/* Dark background color */
}

/* Style the navigation bar links */
.navbar
a {
    float: left; /* Make sure that the links stay
side-by-side */
    display: block; /* Change the display to
block, for responsive reasons (see below) */
   
color: white; /* White text color */
    text-align: center;
/* Center the text */
   
padding: 14px 20px; /* Add some padding */
    text-decoration: none;
/* Remove underline */
}

/*
Right-aligned link */
.navbar a.right {
    float: right;
/* Float a link to the right */
}

/*
Change color on hover/mouse-over */
.navbar a:hover {
   
background-color: #ddd; /* Grey background color */
    color: black;
/* Black text color */
}

Содержимого

Создайте макет из 2 столбцов, разделенный на «боковое содержимое» и «основное содержимое».

<div>
  <div>…</div>
  <div
class=»main»>…</div>
</div>

We use CSS Flexbox to handle the layout:

/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
    flex: 30%; /* Set the width of the sidebar
*/
    background-color: #f1f1f1; /* Grey background color
*/
    padding: 20px; /* Some padding */
}

/* Main column */
.main {

    flex: 70%; /* Set the width of the main content */
   
background-color: white; /* White background color */
   
padding: 20px; /* Some padding */
}

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

/* Responsive layout — when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
    .row {
       
flex-direction: column;
    }
}

/*
Responsive layout — when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
       
float: none;
        width: 100%;
   
}
}

Нижний колонтитул

Наконец, мы добавим нижний колонтитул.

<div>
  <h3>Footer</h3>
</div>

And style it:

.footer {
    padding: 20px; /* Some padding */
   
text-align: center; /* Center text*/
    background: #ddd;
/* Grey background */
}

Поздравляю! Вы создали сайт с нуля.

Как создать LandingPage самому – пошаговая инструкция для новичков

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

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

Сайты лендинг пейдж – что это такое?

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

Термин: Лендинг пейдж (landing page) – это страница, где продвигается товар, услуга, посетители «направляются» к совершению определенного действия.

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

  • состоит из одной страницы, а все сведения и полезные данные расположены в виде блоков;

  • можно разместить информацию разного типа – тексты, фото и видео, файлы для скачивания;

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

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

Семь шагов создания Landing page для новичков

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

Шаг 1. Скачиваем html-шаблон для лендинга (обычно, такие предложения бесплатные).

Фактически, речь идет об отдельной странице в интернете, которая сподвигает пользователя на конкретное действие. У таких сайтов не меню и ссылок на другие ресурсы. Чтобы реализовать проект, сначала надо найти подходящий html-шаблон и отредактировать его.

Шаг 2. Меняем картинки на главном экране.

Когда задача по скачиванию шаблона выполнена, необходимо перейти на следующий этап – редактирование. Здесь будет такой порядок действий:

  1. Скачали, переходите в папку «blue», в которой хранятся файлы с расширением «html». Необходимо кликнуть по файлу index.html и открыть шаблон, который был скачан, в браузере.

  2. Переходим к редактированию при помощи программы Notepad++. Потребуется ее сказать и установить на компьютер.

  3. Первоочередные действия – установка нормальной картинки на начальный экран проекта. Для этого ищем картинку, которая будет подходить к теме сайта. Найти полезный контент можно в Яндекс-картинках, указав размер «Большой».

  4. Скачиваем выбранную картинку и копируем ее в папку ««images», меняем название на «banner.jpg». Старое изображение тоже нужно переименовать.

  5. Обновляем шаблон в браузере. Если картинка появляется, значит все встало как надо. Переходим к следующему этапу


    6. Шаг 3. Редактируем тексты на главном экране.


    Переходим к редактированию текстовой информации. Для этого используем алгоритм:

    1. Правой кнопкой мышки кликаем по «index.html» — «Открыть с помощью Notepad++».

    2. Открывается исходный код шаблона. Задача исполнителя – заменить черный текст на другие параметры. Качество правки – это 80% успеха всей работы.

    3. Меняем заголовки: «Alpha» на нужный нам (например, Консультация с опытным юристом по любым вопросам и в любое время). Текст надо вставить между тегами

      .

    4. Сохранить и обновить. Заголовок появляется на весь экран, но он очень растянут. Необходимо его отредактировать, поэтому после слова «с юристом» можно поставить тег «
      ». Он выполняет функцию переноса, и часть текста опустится ниже.


    5. По аналогии меняем подзаголовки

    6. Переходим к замене текста для кнопок. На белой пишем «Заказать», а на прозрачной – «Подробнее»»

    7. В итоге, главная страница сайта готова.

    Шаг 4. Затемняем картинку, выбранную для фона.

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

    1. Переходим в папку «assets -> css ->images».

    2. Меняем название двух файлов, которые представлены здесь. К примеру, светлый переименовываем в «overlay2.png», а более темный — просто «overlay».

    3. Сохраняем и обновляем. Теперь все смотрится намного лучше.

    4. Аналогичным образом меняем весь шаблон, приводим его к красивому виду.

    Шаг 5. Меняем форму подписки.

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

    В коде шаблона нужно будет просто удалить всю форму и вписать номер мобильного телефона.

    В результате получится вот такая картинка.

    Шаг 6. Загружаем сайт на хостинг.

    Готовый проект необходимо выложить в интернет. Для этого покупает домен и хостинг, например у Reg.ru и закачивает страницу на хостинг. Предварительно нужно будет переименовать папку «blue», например, в «services». Это позволит лендингу приобрести адрес yourdomain.ru/services/index.html. На завершающем этапе необходимо сменить расширение на «php».


    Шаг 7. Продвигаем лендинг и привлекаем целевую аудиторию

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


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




Cкрипт Лендинг Пейдж | ЗЕКСЛЕР

Первый скрипт лендинга

Для непрофессионалов будет неожиданностью утверждение, что сам сайт – по большому счету – это тоже скрипт. На смену языку разметки HTML давно пришел альтернативный вариант – использование препроцессора гипертекста PHP, скриптового инструмента создания веб-страниц. Отличие от предшественника только одно – обработка запрограммированных событий происходит на серверной стороне. Зато возможности появляются несоизмеримые.

  • На базе PHP работают популярные движки (CMS) WordPress, Joomla и Drupal.
  • Происходит управление администрированием баз данных.
  • Созданы приложения для интернет-коммерции.
  • Действуют галереи изображений.

В целом, скрипты на PHP – это универсальный инструмент разработки приложений любой конфигурации сложности для продающего сайта.

JavaScript на целевых страницах

Это второй герой скриптовой эпопеи – язык программирования JavaScript, основанный на множественном подходе к приемам создания компьютерных программ. В отличие от своего коллеги из первого раздела, он обрабатывает события не только на стороне клиента, т.е. в браузере компьютера конечного пользователя, а сотрудничает и в серверных решениях. Технология поддерживается подавляющим большинством производителей программного обеспечения, поэтому JavaScript стабильно работает на всех устройствах.

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

Скрипты на лендингах и для лендингов

Каждый из клиентов профессиональных веб-студий, приступая к поиску разработчика проекта, обязательно сталкивался с типовой строчкой коммерческих предложений: «Производим индивидуальную разработку, решаем задачи любого уровня сложности». Вот за этими словами и скрыто обещание разработать авторские скрипты для продающих сайтов (и не только для них).

Все обязательные элементы landing page – кнопки СТА, бланки заказов, корзина покупок, формы обратной связи или оплаты, модальные окна и слайдеры – это не что иное, как программные решения с использованием скриптов. Понятно, что существуют типовые шаблоны, универсальные для всех случаев жизни – разработчик подключает библиотеки и несколько строчек кода, производит корректировку деталей (цвет, размер, визуальные эффекты) и элемент занимает свою позицию на продающей странице.

Но существует и другая сторона этой медали, когда заказчику требуется нечто уникальное, не имеющее аналогов.

  • Сложные калькуляторы с нестандартной системой расчетов.
  • Органайзеры или внедрение графических эффектов.
  • Создание обязательных элементов лендинга, отвечающих техническим требованиям заказчика.

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

Мультилендинг скрипт подмены заголовка и картинки заказать в г. Москва

Скрипт работает на основе UTM метки. UTM метку можно генерировать здесь.



<?php

$utm = $_GET[‘utm_content’];

 

if($utm == ‘sozdanie’) {

$multiTitle = ‘Создание landing page’;

}

elseif($utm == ‘verstka’) {

$multiTitle = ‘Верстка landing page’;

}

elseif($utm == ‘razrabotka’) {

$multiTitle = ‘Разработка landing page’;

}

else{

$multiTitle = ‘Разработка интернет проектов под ключ’;

}

?>

Как видите, при помощи _Get запроса ловим нужные нам данные (utm_content или любой другой интересующий нас параметр), а затем следует элементарное условие. Если значение параметра “sozdanie”, то сохраняем в переменную текст “Создание landing page” и выводим в нужное место таким образом:



<h2>https://iwebs.pro — <span><?php echo $multiTitle; ?></span> </h2>

То есть если пользователь перейдет по ссылке с utm меткой в которой параметр utm_content=sozdanie, то он увидит надпись: Smartlanding.biz – Создание landing page. Вот так все просто.



else{

$multiTitle = ‘Блог о создании landing page’;

}

Для подмены не только заголовков, а и картинки, например, добавляем:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?php

$utm = $_GET[‘utm_content’];

 

if($utm == ‘sozdanie’) {

$multiTitle = ‘Создание landing page’;

$multiImage ='<img src=»https://iwebs.pro/img/icon-1.png»>’;

}

elseif($utm == ‘verstka’) {

$multiTitle = ‘Верстка landing page’;

}

elseif($utm == ‘razrabotka’) {

$multiTitle = ‘Разработка landing page’;

}

else{

$multiTitle = ‘Индивидуальное обучение SEO с нуля’;

}

?>

 

<?php echo $multiTitle; echo $multiImage; ?>

Скачать скрипт

[sociallocker] Скачать рабочий пример можно здесь. [/sociallocker]

Заказать лэндинг пейдж под ключ

Landing Page – это один из наиболее эффективных инструментов онлайн-продаж. С его помощью вы можете максимально быстро презентовать свой товар или услугу в интернете. Разработка профессионального лендинга в MMP Group займет от 1 недели – вы получаете готовое решение «под ключ» и не тратите дополнительное время на продвижение: посадочная страница начинает работать с момента запуска Проекта.

Как работает Landing Page

Посадочная страница предназначена для реализации одного УТП (уникальное торговое предложение). Это может быть товар, услуга или специальный сервис. При разработке Landing Page мы учитываем специфику вашего предложения и вкусы потенциального клиента. Задача лендинга – подтолкнуть посетителя к действиям: совершить покупку, позвонить вам или оставить контактные данные. Мы используем передовые разработки ведущих мировых маркетологов и создаем уникальный дизайн одностраничного сайта, чтобы добиться от посетителя нужной для вас реакции.

Профессиональное решение для бизнеса

Максимальной эффективности посадочная страница достигает в комплексе с другими инструментами интернет-маркетинга. Привлечение клиентов на Landing Page осуществляется с помощью контекстной или таргетированной рекламы. Профессиональная настройка Яндекс.Директ и GoogleAdwords обеспечит вам CTR (кликабельность) не менее 10-15%, а грамотное продвижение в социальных сетях приведет дополнительный поток новых клиентов. Что мы делаем:

  • выполняем анализ вашего УТП и целевой аудитории;
  • изучаем возможности рынка и предложение конкурентов;
  • создаем концепцию и прототип лендинга;
  • разрабатываем дизайн посадочной страницы;
  • создаем уникальный контент;
  • делаем верстку сайта и его адаптивных версий;
  • подключаем Яндекс.Метрики и Google Analytics;
  • запускаем контекстную рекламу и продвижение в соцсетях;
  • обеспечиваем вам техподдержку.

Что получаете вы:

  • Эффективный инструмент продаж;
  • Настроенные рекламные кампании с высоким CTR;
  • Конверсия Landing Page – до 30%;
  • Расширение клиентской базы.

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

Как создать шаблон целевой страницы для вашей темы

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

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

Что такое целевая страница?

Целевая страница — это специальная страница на вашем сайте, которая предназначена для продажи чего-либо. Эффективная целевая страница будет простой и продавать только одно. Это не то же самое, что страница ваших продуктов, страница ваших услуг или страница «о нашей компании, мы не фантастические».

У вашей целевой страницы одна задача — продавать только одну вещь.

Вещь, которую вы продаете, может отличаться. Это может быть подписка на услугу или курс.Это может быть один продукт. Или это может быть что-то, что ничего не стоит — например, подписка на ваш список рассылки.

Вы будете использовать свою целевую страницу в сочетании с SEO и другим интернет-маркетингом, чтобы люди приходили на ваш сайт и попадали на эту страницу. Как только они появятся, вы хотите, чтобы они купили или подписались на то, что продвигает ваша целевая страница, и ничего больше. Как только они это сделают, вы направите их на другую страницу, поблагодарите и разрешите просматривать остальную часть сайта.

То, что отличает целевую страницу от других, — это лазерная фокусировка на достижении только одной цели. Для многих из нас это получение адреса электронной почты, который нужно добавить в наш список рассылки (именно так я использую целевые страницы), или побуждение кого-то подписаться на услугу (например, подписку WPMU DEV).

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

Вот целевая страница одного из моих сайтов:

Как видите, все очень просто. В нем нет ссылок, и только одна кнопка, которая ведет к форме регистрации. Мне нужно доработать копию (сайт все еще находится в разработке), но вы видите, насколько это просто.

Вы не хотите давать людям возможность делать что-либо еще на вашей целевой странице, поэтому вам нужен специальный шаблон для этого.На странице не будет ссылок, уводящих посетителя от процесса продажи или подписки. Единственные ссылки на этой странице (и они должны быть красивыми очевидными кнопками) будут представлять верхнюю часть вашей воронки продаж.

Это означает удаление всех других ссылок — и я имею в виду их всех. Это включает в себя меню навигации, боковые панели, ссылку с логотипом на главную страницу — даже ссылку на колофон.

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

Создание шаблона целевой страницы

Для этого вам понадобится:

  • Доработка вашего сайта
  • Ваша собственная тема или дочерняя тема сторонней темы (не редактируйте сторонние темы напрямую)
  • Редактор кода.

По мере продвижения я покажу вам код шаблона целевой страницы моего собственного сайта.

Шаблон страницы или произвольный тип сообщения?

Во-первых, вам нужно решить, собираетесь ли вы использовать настраиваемый шаблон страницы или настраиваемый тип сообщения.Вот когда я бы использовал каждый:

  • Используйте настраиваемый тип сообщения, если вы планируете создать несколько целевых страниц для поддержки нескольких маркетинговых кампаний или нескольких продуктов. Это дает вам больше гибкости.
  • Используйте настраиваемый шаблон страницы, если вам нужна только одна целевая страница, например, если у вас есть одна страница подписки на список рассылки.

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

Создание шаблона страницы

В своей теме вам нужно будет создать новый шаблон страницы. Вы можете сделать это, скопировав шаблон page.php или создав пустой файл и скопировав в него содержимое page.php . Я звоню своему landing-page.php .

Вот мой файл page.php :

Давайте просто рассмотрим, что содержит этот файл шаблона:

  • Сначала вызов заголовка .php файл.
  • Затем условная проверка на наличие избранного изображения. Если да, то он отображается с выравниванием по правому краю. Это довольно специфично для моей темы — в вашей может быть что-то похожее, а может и нет.
  • Цикл для отображения заголовка и содержимого страницы.
  • Вызов боковой панели.
  • Вызов нижнего колонтитула.

Нам нужно сделать две вещи с этим файлом:

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

Вверху файла добавьте строку с закомментированным текстом, чтобы сообщить WordPress, что это шаблон страницы. Вот мой:

Теперь, когда вы редактируете или создаете страницу на экране редактирования страницы, у вас будет возможность выбрать этот шаблон в метабоксе Атрибуты страницы :

Редактирование условного кода

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

Обратите внимание, что стили CSS для макета находятся в таблице стилей моей темы — вам нужно добавить что-то похожее на свою тему, если вы хотите такой же макет.

Удаление вызова боковой панели

Наконец, давайте удалим этот вызов боковой панели.Просто удалите функцию get_sidebar () . Оставьте здесь нижний колонтитул — мы скоро отредактируем нижний колонтитул, чтобы удалить все ссылки.

Редактирование верхнего и нижнего колонтитула

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

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

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

Удаление навигации из заголовка

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

Вот мой код для названия сайта:

Я не хочу удалять эту ссылку на других страницах своего сайта, поэтому я добавляю условный тег, чтобы проверить, находимся ли мы в шаблоне страницы, и, если это так, выведите имя сайта без ссылки:

Обратите внимание, что я не удаляю имя полностью; просто ссылка.

А теперь удалим меню навигации. Вы, вероятно, сможете решить это сами, так как вам нужно использовать тот же условный тег.

Вот оригинал:

А вот исправленная версия с условным тегом:

Просто!

Удаление ссылок из нижнего колонтитула

А теперь перейдем к нижнему колонтитулу. В моем файле footer.php у меня есть код для колофона:

Мне нужно добавить условный тег вокруг этой ссылки на домашнюю страницу, как я делал ранее:

Если вы хотите, вы также можете сделать это для ссылки WordPress — я призываю вас сделать это без моей помощи!

Редактирование таблицы стилей

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

У меня по умолчанию используется следующий стиль макета для моего контента и боковой панели:

Мне нужно добавить стиль, чтобы настроить таргетинг на контент только на этом шаблоне страницы:

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

Создание ваших страниц

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

Создайте две страницы в админке WordPress, обе с использованием нового шаблона целевой страницы. Один будет включать текст, побуждающий людей щелкнуть, а другой будет включать форму — и только форму.

Если вы нажмете кнопку на целевой странице моего сайта, вы получите эту простую страницу регистрации:

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

Шаблон целевой страницы повысит коэффициент конверсии

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

Если вы выполните шаги, описанные в этой публикации, вы сможете создать свой собственный шаблон целевой страницы, что упростит вам добавление целевых страниц на свой сайт в будущем. Это поможет вам продать свой продукт или превратить посетителей в подписчиков. Удачи!

Ключевое слово Выход
{{skip_link}} Выводит ссылку пропуска, по которой пользователи могут перейти к разделу основного содержимого страницы.
Важно для оптимизации доступности страницы.
{{public_header}} Выводит заголовок с системного уровня.
{{панировочные сухари}} Выводит хлебные крошки в формате Справочник учреждения> Имя системы> Имя страницы .
{{page_title}} Выводит заголовок страницы.
{{page_description}} Выводит описание страницы.
{{page_nav}} В настоящее время не выводит содержимое.
{{navbar}} Выводит панель навигации с раскрывающимся списком тем.
{{content_box_search}} Выводит поле поиска.
{{content_box_ }} Выводит поле содержимого с любым идентификатором, указанным в ключевом слове.
Замените на соответствующий идентификатор коробки.
Идентификатор коробки должен уже существовать в руководстве к системе (например, в руководстве по многоразовому контенту), чтобы это работало.
{{system_footer}} Выводит системный нижний колонтитул, который включает ссылки «Войти в LibApps» и «Сообщить о проблеме».
{{public_footer}} Выводит настраиваемый нижний колонтитул, определенный на системном уровне.