Шаблоны blogger для одностраничных сайтов, бизнеса и landing page

Вот все получившиеся файлы.

index.html

<!DOCTYPE html><html>     <head>          <title>Школа итальянского</title>          <link rel=»stylesheet» type=»text/css» href=»style.css» />          <script src=»js/jquery-1.10.1.min.js» type=»text/javascript»></script>     </head>     <body>          <div class=»wrapper»>               <div class=»header»>                    <div class=»menu»>                         <ul>                              <li><a href=»#about»>О нас</a></li>                              <li><a href=»#schedule»>Расписание уроков</a></li>                              <li><a href=»#contact»>Записаться на курсы</a></li>                         </ul>                         <span>8(495)000-00-00</span>                    </div>               </div>               <div class=»content»>                    <div style=»height:270px»></div>                    <div class=»about»>                         <h2 id=»about»>О нас</h2>                         <img src=»images/img1.png»>                         <p>Приветствуем тебя дорогой друг!</p>                         <p>Добро пожаловать в нашу школу итальянского языка. Занятия проводятся в игровой форме под руководством прекрасных преподавателей — носителей языка. В стоимость курса входят также языковые туристические туры в знаменитые города Италии. </p>                         <p>Обучаясь у нас, ты не только научишься свободно владеть итальянским языком, но и получишь массу приятных воспоминаний и новых друзей.</p>                    </div>                    <div style=»height:270px»></div>                    <div class=»schedule»>                         <h2 id=»schedule»>Расписание уроков</h2>                         <img src=»images/img1.png»>                         <p>1-я группа: с понедельника по пятницу 18.00-21.00</p>                         <p>2-я группа: по субботам и воскресеньям 15.00-21.00</p>                         <p>3-я группа: по субботам и воскресеньям 9.00-15.00</p>                         <p>Срок обучения 1-я и 2-я ступень 4 недели</p>                    </div>                    <div style=»height:270px»></div>                    <div class=»contact»>                         <h2 id=»contact»>Записаться на курсы</h2>                         <img src=»images/img1.png»>                         <p>Записаться на курсы вы сможете по телефону: 8(495)000-00-00, менеджер Анна</p>                         <p>Или по адресу:</p>                         <p>г. Москва, ул. Верхняя Солнечная, дом 25 аудитория 30</p>                         <p>Также вы можете оставить заявку по электронной почте 000@gmail.com</p>                    </div>                    <div style=»height:20px»></div>               </div>          </div>          <script> $(‘a’).click(function () { var target = $(this).attr(‘href’); $(‘html, body’).animate({scrollTop: $(target).offset().top — 290 }, 800); return false; });          </script>     </body> </html>

style.css

body {background: #0075d4;/*общий фон*/margin: 0;padding: 0;
}.wrapper {margin: 0 auto;/*центрируем блок с классом wrapper*/overflow: hidden;width: 1000px;/*ширина блока wrapper*/
}.header {position:fixed;/*фиксируем блок с классом header*/background:url(images/header.jpg) no-repeat;width: 1000px;/*ширина шапки*/height: 300px;/*высота шапки*/
}.menu {margin: 0 auto;/*центрируем блок с классом wrapper*/overflow: hidden;width: 998px;/*ширина панели меню*/height: 70px;/*высота панели меню*/background:url(images/menu.png);/*фоновый рисунок*/margin-top: 180px;/*отступ сверху*/border-radius: 10px;/*Закругление углов*/-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 1px solid #eef4f8;/*рамка*/box-shadow:3px 3px 5px 0px #0148a4;/*тень*/
}.menu ul li {list-style:none;/*убираем маркеры*/float:left;/*выравнивание по левому краю*/padding:10px 25px 10px 0;/*отступы*/
}.menu ul li a, span {font:24px «Century Gothic»;/*шрифт*/color:#020f5f;/*цвет текста*/text-decoration:none;/*убираем подчёркивание*/
}.menu  ul li a:hover {text-decoration:underline;/*добавляем подчёркивание*/
}span {float: right;margin: 10px 20px 0 0;
}.about, .schedule, .contact {background: #50aee1;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 1px solid #eef4f8;
}
#about, #schedule, #contact{margin-bottom: 3px;background: url(images/line.png) no-repeat bottom;
}h2 {padding-left: 20px;padding-bottom: 10px;font:24px «Century Gothic»;color:#020f5f;
}p {padding: 0 20px 20px 20px;font:18px «Century Gothic»;
}img {margin: 20px;float: left;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border: 1px solid #eef4f8;
}

По аналогии вы можете создать свой собственный сайт.

Работу сайта смотрим .

Настройка навигации

Вы наверняка замечали, что на большинстве Landing Page сейчас используется навигация по странице. При клике, на пункты меню, вас перебрасывает в соответствующую часть страницы. Сейчас мы научимся делать такое меню для своей Landing Page на WordPress.

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

  1. 1.Наводим курсор на ключик в верхнем правом углу строки, выбираем «Редактировать строку».

  2. 2.В разделе «Атрибуты» в поле «row id» ставим решетку, и вводим какой-нибудь идентификатор для данной секции Landing Page.

    Идентификатор обязательно должен состоять только из латинских букв. Теперь мы этот идентификатор копируем и нажимаем на кнопку «Выполнено».

  3. 3.Затем нажимаем на кнопку «Обновить» и переходим в раздел «Внешний вид» => «Меню».
  4. 4.При помощи стрелочки вниз открываем нужный пункт для редактирования и вместо решетки вставляем скопированный идентификатор. После чего нажимаем на кнопку «Сохранить меню». Тоже самое вы проделываете для всех остальных разделов страницы и для всех остальных пунктов меню.

Плагины для создания лендингов на Вордпресс

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

Плагин Free Landing Pages Builder by Wishpond

Бесплатный лендинг пейдж на Вордпресс с плагином Free Landing Pages Builder by Wishpond функционирует по типу конструктора страниц способом перетаскивания.

  • Имеется поле страницы, на нужное место которой мышкой перетаскиваются элементы с помощью панели инструментов.
  • При этом панель инструментов функциональна: настроить в разделе дизайн можно практически всё.
  • Кроме того Free Landing Pages Builder by Wishpond создаёт формы и всплывающие формы.
  • Ещё один положительный момент – Free Landing Pages Builder by Wishpond оснащён функцией анализа (лиды, просмотры).
  • Free Landing Pages Builder by Wishpond предоставляет две сотни шаблонов. Плагин позволяет править, не касаясь исходного кода страницы.
  • Free Landing Pages Builder by Wishpond работает со всеми сервисами сбора аналитических данных и дополнениями, которые требуются чтобы сделать лендинг.

Недостатки Free Landing Pages Builder by Wishpond:

  • За более богатый функционал придётся заплатить, потому плагин является условно бесплатным.
  • Англоязычный.
  • Ощутимо нагружает сервер во время создания LP.

Другие плагины

  1. Landing Pages. Здесь есть LP конструктор и возможность наблюдать количество посетителей страницы. Плагин оснащён впечатляющим числом опций, представляет собой оптимальный выбор с целью вызвать интерес у подписчиков и потенциальных клиентов.
  2. Ultimate Landing Page. Позволяет самостоятельно создать лэндинг на WordPress без написания кода. Здесь имеется база шаблонов и возможность проверки, какой из них будет смотреться наиболее выигрышно. Чтобы воспользоваться плагином технических познаний не потребуется.
  3. Ultimate Coming Soon Page. С этим плагином взаимодействует любая тематика Вордпресс, которую вы пожелаете установить на одностраничник. Несложный и гибкий, русскоязычный.
  4. Beaver Builder. Здесь имеется конструктор, дающий возможность сделать эффективные лэндинги перетягиванием элементов. Составляющие макета отзывчивы и великолепно выглядят на экране с любым разрешением. Эта функция удаляется.
  5. Coming soon and Maintenance mode. Чтобы создать LP при помощи этого плагина навыки вёрстки не потребуются. Coming soon and Maintenance mode имеет много особенностей (сео оптимизация, настройка параметров), а также про-версию с увеличенным числом функций.
  6. Landing Pages Builder. Даёт возможность управлять созданными одностраничниками из одной точки. Увеличивает число посетителей. Landing Pages Builder дружественный к поисковым системам.
  7. Bulk City Landing Page Creator. Позволяет сделать LP для какого-либо города индивидуально, для чего нужно лишь изменить шапку с именем (геотаргетинг). Bulk City Landing Page Creator хранит параметры первоначальной страницы, шаблона, заглавие, контент. Общее число страниц здесь записывается в форме перечня по наименованию города (области).
  8. Site Offline or Coming Soon. Позволяет создать лэндинг и расположить на нём все требующиеся сведения. Версия премиум с впечатляющим набором функций.
  9. Easy Pie Coming Soon. Позволяет сделать LP с формой захвата. Работает с большей частью шаблонов Вордпресс.
  10. Maintenance Page. При помощи плагина Maintenance Page можно сделать лэндинг быстро. Настройки дают возможность добавить иконки, логотип, фоновое изображение, поменять цвета.

Builders Landing Page – Шаблон строительной тематики

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

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

Всё это упаковано в адаптивный, кроссбраузерный макет с умеренным количеством эффектов, поддерживающий виджеты и популярные плагины. Шаблон легковесный, дружит с микроразметкой Schema и RTL-скриптами. Присутствует удобный интерфейс локализации в бекэнде и редактор стилей CSS.

Genoa (WordPress)

Another remarkable tool for building landing pages is Genoa. While its default layouts and settings primarily aim towards software and app landing pages, you can easily go beyond that. After all, quick use of Elementor page builder means you can improve the out of the box version of Genoa to your wants with ease.

In the Genoa package, you will discover over ten predefined demos with more dropping in the near future. Each demo is also packed with impressive features and functions for your convenience. The modern look makes the sample quickly adapt to your wants, without the need to spend too much time editing and customizing it. In some cases, you will want to use the layout out of the box and enjoy speedy page realization.

More amazingness includes a lifetime worth of free updates, support team, Gutenberg compatibility, six widget areas, as well as sticky header and sidebar. The layout is 100% responsive and retina-ready and optimized for speed and SEO to ensure stable and secure site operation.

Как редактировать содержимое шаблона Вашего сайта

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

Как создать одностраничный сайт на основе HTML шаблона the Wander

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

Для того чтобы изменить шаблон по своему вкусу, Вам необходимо изменить HTML файл, который обычно называется index.html.  В случае с Wander, я буду редактировать файл с именем home-one-page.html, так как мы создаем одностраничный сайт. 

Работа с HTML

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

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

Параграф в документе будет выглядеть следующим образом :  . Заголовок будет окружен тегом h с номером от 1 до 6, который обозначает уровень заголовка 1  по 6 уровневой системе заголовков. 

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

Самый легкий способ редактировать Ваш шаблон-это открыть его в браузере, а затем просмотреть код. Сначала, делаем двойной щелчок по HTML файлу, чтобы открыть его в Вашем браузере по умолчанию. Первым делом, Вы увидите, что Вам необходимо изменить текст в поле Заголовок. Нажмите правой кнопкой мыши на предложении We Make BRENDS Shine и выберите Просмотреть код ( Inspect).

Просмотр HTML в браузере 

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

Откройте шаблон в редакторе кода путем клика правой кнопкой мыши по имени шаблона и выбора Открыть в Sublime Text ( Open with Sublime Text). Найдите ту же самую строку кода, которую Вы видели в панели Просмотра, выберите текст между тегами и замените его на слоган Вашей компании. 

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

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

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

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

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

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

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

Бесплатные шаблоны

В Интернете доступно большое количество бесплатных шаблонов лендингов для сайтов на WordPress

Эти шаблоны созданы в виде одностраничных сайтов, основная цель которых – привлечь внимание потенциальных посетителей и заставить их совершить требуемое действие. Шаблоны WordPress одностраничных сайтов по-другому еще называют темами WordPress для landing page

Это один из лучших способов создать лендинг бесплатно.

Все эти бесплатные лендинги для WordPress хороши тем, что они выполнены профессиональными дизайнерами, очень красивые и если грамотно “допилить” их по свои нужды, то они способны обеспечить высокую конверсию. Кроме того, все эти шаблоны лендингов адаптивны, т.е. имеют мобильную версию и версию для планшетов. И они останутся с вами навсегда, и никто не сможет забрать их у вас. Вот пример такой совершенно бесплатной темы, которую можно сразу же скачивать и устанавливать на WordPress – One Engine:

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

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

Не могу не упомянуть родную тему, созданную основателями WordPress, – Twenty Seventeen, которая идеально подойдет, чтобы создать лендинг бесплатно. Она позволяет делать отличные лендинги такого вида: образец лендинга на Twenty Seventeen. Это замечательный лендинг, но, к сожалению, его функционал сильно ограничен, и если он вам не подходит “как есть”, то придется нанимать программиста для его доработки. Хотя лучше найти другой бесплатный шаблон лендинга или купить платный шаблон лендинга.

Далее я расскажу, как установить шаблон лендинга на WordPress и какие у них есть недостатки.

Как установить шаблон лендинга на WordPress

Чтобы установить такой шаблон, Вам надо установить на свой хостинг сайт WordPress, что на большинстве хостингов делается нажатием одной кнопки, а затем установить шаблон (тему) WordPress. Сделать это очень легко! У вас займет это не более 10-15 минут. Узнайте у своего хостера как сделать это. Вы также можете установить WordPress “вручную”, если вам интересно, и это тоже не сложно. О том, как это сделать, подробно написано на сайте wordpress.org в статье: “Установка WordPress“.

После установки WordPress, скачайте тему WordPress на свой компьютер. Затем вам нужно войти в админку WordPress, перейти в меню Внешний вид > Темы и нажать по порядку кнопки Установить новую тему, Загрузить тему, Выбрать файл и выбрать предварительно загруженный файл на вашем компьютере, и нажать кнопку Установить. После этого Ваша тема будет установлена и вам надо найти ее в списке установленных тем, и нажать кнопку Активировать. Все, вы установили и активировали шаблон лендинга!

Минусы бесплатных шаблонов лендингов

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

  • время. Вам потребуется время, чтобы разобраться, как настроить и адаптировать под себя бесплатный шаблон одностраничного сайта. Установить его не проблема, а вот на настройку может уйти много времени. Зато это время надо потратить всего один раз, и следующие лендинги на этом шаблоне вы будете создавать намного быстрее;
  • ограниченность функционала. Очень часто бывает, что бесплатный шаблон лендинга – это ограниченная версия платного шаблона. Выясняйте это заранее, чтобы не попасть впросак. Как правило, вам должно хватать базового функционала одностраничного сайта для основных нужд. Но все-таки лучше, чтобы это было бесплатной версией при платном шаблоне лендинг пейдж, потому что это гарантирует то, что шаблон будет обновляться, что за ним будут следить;
  • отсутствие обновлений.  Если у вас полностью бесплатный шаблон, то его автор, скорее всего, не будет обновлять его. Зачем ему? И в течение времени с этим шаблоном могут возникнуть проблемы. Не факт, конечно, но все может быть. В этом случае вам придется нанимать программиста для решения этих проблем. Поэтому бесплатная версия платного шаблона лендинга лучше, потому что ее будут обновлять;
  • отсутствие поддержки. Если у вас возникнет какая-то проблема с шаблоном, то не у кого будет спросить, как ее решить. Тоже придется в случае чего нанимать программиста.

Исходя из моего опыта, скорее всего, вас все эти проблемы не будут беспокоить – вы сделаете лендинг один раз и забудете про него, а он будет себе спокойно работать много лет.

Готовые страницы от WordPress для Landing page

Вордпресс предлагает бесплатные и платные дизайнерские решения. Что в них содержится?

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

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

Quards

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

  • Размещение публикаций на лендинг пейдж.
  • Размещение дизайна на лендинг пейдж при помощи перетягивания.
  • Можно создать изменение обложки.
  • Контроль за меню и типами категорий.
  • Позволяет делать виджеты социальных сетей и формы подписки.

Thrive Landing page WordPress не free

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

  • Кнопка СТА(Call To Action) с призывом к действию.
  • Таймер.
  • Отзывы и комментарии об услугах на гугл картах.
  • Рейтинг.
  • Лиды.

WP profit builder не free

Плагин поможет реализовать конверсионный лендинг пейдж. Гарантирует повышение конверсии продаж. Шаблоны, предлагаемые плагином, протестированы на дели и приносят результат. Вам остаётся грамотно выбрать дизайн и настроить его. Всё остальное сделает макет. Лендинг пейдж, реализованные при помощи этого плагина, подходят для долгосрочного использования. Регулируемые SЕО настройки гарантируют продвижение через поисковики.

Landing pages free

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

Instabuilder

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

Optimizepress

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

Leadpages

Мощный и полностью нафаршированный плагин. Что предлагает этот модуль?

  • Простое редактирование при создании дизайна.
  • Множество готовых шаблонов, показавших себя с хорошей стороны.
  • Настройки для СЕО оптимизации лендинг пейдж.
  • Адаптирующийся дизайн под любые гаджеты.

Ultimate Landing page

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress лендинг своими руками

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

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

Если вы решили самостоятельно создать WordPress лендинг пейдж, вам нужно:

  1. Нарисовать PSD макет или заказать у дизайнера. Желательно сразу говорить что нужен адаптивный макет, иначе иОсы и Андроиды будут воротить нос от вашего landing page.
  2. Качественно сверстать PSD макет, желательно с использованием HTML5 и CSS3 — это придаст даже самому простому дизайну статуса и вида, а от сюда доверие к вашему сайту.
  3. Натянуть HTML макет на Вордпресс или проще говоря создать шаблон landing page.

Дальше, я расскажу вам о последнем и самом важном пункте (3)

Как создать шаблон WordPress лендинг пейдж из готового HTML

Для просмотра краткого урока по созданию лендинг пейдж на ВП нажимайте на переключатели ниже, шаг за шагом:

Закрыть шаг 1

1. Для начала нам нужен тестовый ВП, устанавливаем его на хостинг и понеслась.

Раскрыть шаг 2

2. Создаем папку под ваш макет, например «mylanding» и забрасываем туда папку «img» — под картинки, папку «js» — если нужен яваскрипт, файлы: «style.css», «index.php», «404.php», «functions.php», «header.php» и «footer.php»

Раскрыть шаг 3

3. В стили «style.css» в самый верх забрасываем вот такой код:

+ ваши стили, или же подключаем их отдельно в шапке

Раскрыть шаг 4

4. functions.php — можно оставить пустым

Раскрыть шаг 5

5. в файл 404.php забрасываем сообщение для ошибки с хтмл разметкой

Раскрыть шаг 6

6. в header.php копируем хтмл макет до тега <body> или малость больше, можно например захватить верхнее меню в этот файл, как это делал я:

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

Раскрыть шаг 7

7. footer.php — у меня выглядит вот так:

у вас могут быть другие варианты, например сюда можно забить copyright или адрес с телефоном.

Раскрыть шаг 8

8. Самое главное заполняем файл index.php, по сути этот момент самый важный для того чтоб создать wordpress лендинг.

Я привык делать шаблон landing page так, чтоб каждая страница с нашего меню, была отдельной страницей в нашем WP:

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

далее нужно делать вывод отдельных веток страниц в один макет.

Делается приблизительно вот так если это просто текстовая информация:

ид 8 — это конкретно та страница что нам нужна

или вот так если это слайдер или каталог:

Это примитивные ветки, свободные циклы вордпрес, которые я уже не раз описывал как делать циклы WordPress

Идем далее, если нужно вставить форму обратной связи в wordpress лендинг пейдж записываем вот такую вставку шорткода:

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

Большим плюсом такого landing page будет скорость его загрузки и возможность править с админки. Ведь простенькие лендинги, созданные на чистом ХТМЛ, не позволяют легко править контент без знаний тегов и стилей. Вордпресс позволяет делать лендинги удобными для наполнения и правки во время сопровождения сайта.

Как создать крутой лендинг на wordpress

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

Основными преимуществами такого плагина для создания wordpress лендинга есть:

  • мобильность полей (все в одном месте);
  • простота добавления динамического текста и изображения;
  • уменьшение нагрузки на сервер;
  • более высокий уровень сайта в админ части (в админке лендинг выглядит более круто).

Подробно прочесть о том как создать крутой лендинг на wordpress можно вот здесь: https://help-wp.ru/acf-for-wordpress-landing/

Самые крутые и популярные платные конструкторы посадочных страниц

  • американские: LeadPages, Instapage.com, Unbounce.com;
  • русский Lpgenerator.ru.

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

Обзор популярных конструкторов landing page

Конструктор Бесплатная версия Цена в месяц Кол-во шаблонов
LeadPages.net Нет $25-199 160
Unbounce.com 30 дней бесплатно $79-399 75-375
Instapage.com 14 дней бесплатно $29-127 200
Pagewiz.com 30 дней бесплатно $25-169 70
Wishpond.com 14 дней бесплатно $49-199 100
Landingi.com 30 дней бесплатно $39-109 100
Lander.com 14 дней бесплатно $16-149 30
Lpgenerator.ru 7 дней бесплатно 560-11000 р. 300
Platformalp.ru 14 дней бесплатно 490-1990 р. 40
Tilda.cc 1 сайт бесплатно 500-1000 р. 100
Lpmotor.ru Без публикации лендинга 300-2000 р. 90

Выводы и рекомендации

Одностраничные Шаблоны WordPress крайне разнообразны. По внешнему виду, характеру поддерживаемых возможностей, совместимости с плагинами и внешними сервисами. Они несут много функциональности. Некоторые содержат внутри визуальные редакторы на манер тех, что бывают в конструкторах сайтов. То есть шаблон WP – это не просто обложка. От его выбора зависит то, насколько легко и эффективно будет протекать создание сайта.

Создать сайт на WordPress + Bluehostустановка CMS в 1-клик ↵

Быстрый, простой и безопасный хостинг с автоматической установкой WordPress. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!Цена: от $2.95

* Bluehost — надежный хостинг-провайдер, обслуживает более 2 млн. сайтов, официально рекомендуемый компаниями WordPress, PrestaShop, WooCoomerce и др.!

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

Вывод

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

Не для рекламы, а для понимания возможностей. Компания Joomshaper создавшая Helix3, создала платный конструктор шаблонов SP Page Builder (https://www.joomshaper.com/page-builder). С его помощью можно делать, отличные шаблоны, как ребенок собирает лего.

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий