Шаблон Onepress одностраничник для сайта на WordPress 2022

 

 

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

Перевод на русский язык

Наша команда перевела этот шаблон на русский язык. Скачайте эти файлы перевода: .po .mo и поместите их в папку languages самой темы.

Адаптивный дизайн

OnePress реагирует и адаптируется к любым устройствам и размерам экрана, таким как Desktop, ноутбуки, планшеты и смартфоны.

Эффект Parallax Backgrounds

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

Пользовательские блоки контента

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

Расширенные настройки темы

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

Оптимизирован по скорости

Оптимизирует исходный код. Совместимость с популярными плагинами кэширования и минимизации. Шаблон охватывает все. Не говоря уже о сверхбыстрой загрузке сайта, который с легкостью пройдете тест в PageSpeed от Google.

Шаблоны пользовательских страниц

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

Перевод на русский

Шаблон полностью переведен на русский язык и готов к переводу на любой другой.

Дополнительные функции

• Импорт демо-контента,
• Настройщик тем,
• Фотогалерея,
• Последние расширенные функции доступны с HTML5 и CSS3,
• Оптимизированный SEO,
• Оптимизированная скорость страницы,
• Пользовательские и настраиваемые виджеты.

Видео

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

Установить переведенную тему очень легко – выберите архив с шаблоном, нажав “Добавить новую” и затем “Загрузить” в меню “Вид – Темы”.

Смотрите также

адаптивный шаблон для лендинга на вордпресс – EightLaw Lite.

 

(Всего посетителей: 15 050, сегодня: 1)

Алексей Шевченко

Автор и редактор на wptheme.us

Опыт работы с WordPress более 10 лет. Создал более 1500 сайтов на Вордпресс. Перевел более 400 тем на русский и украинский язык. Сотни вылеченных сайтов от вирусов. Тысячи установленных и настроенных плагинов. Задать вопрос мне можно на https://profiles.wordpress.org/wpthemeus/

 

Как создать одностраничный сайт на wordpress бесплатно

Привет друзья! Последнее обновление плагина Page Builder от Site Origin сделало веб-разработку еще проще и доступней. Независимо от того знаете вы код или нет,прочитав эту статью до конца вы поймете как создать одностраничный сайт на WordPress бесплатно и самостоятельно.
Итак, чтобы сделать одностраничник на wordpress понадобится всего четыре инструмента:

1. СMS WordPress
2. Тема North
3. Плагин Page Builder
4. Плагин Site Origin сборник виджетов

Быстрая установка wordpress

Я надеюсь, что вы знаете, как установить вордпресс и подробно рассматривать этот вопрос не буду. Но если вам сложно сориентироваться в этом вопросе то знайте что ваш хостинг скорее всего имеет предустановленный автоустановщик всех популярных CMS. Называется это приложение Softaculous. С его помощью можно активировать установку wordpress и других скриптов прямо в cPanel хостинга. Установка интуитивно понятна:

• Выбираете версию вордпресс
• протокол http:// или если есть предустановленный ssl сертификат, то https://
• Директорию установки (папку куда будет загружена cms)
• Дайте сайту название (например, «Simple OnePage»)
• Сделайте описание сайта (например, «Одностраничник на wordpres»)
• Имя админа
• Пароль
• E-mail админа
• Название базы данных и префиксы таблиц можете оставить по умолчанию
• Жмете на кнопку «Установка» и все.

Базовая настройка одностраничного сайта

После того как вы попадете в консоль управления сайтом, войдите на вкладку Страницы и переименуйте страницу «Пример страницы» на «Simple OnePage». Ну, или дайте свое название. Затем идем во вкладку Настройки > Чтение и сделайте страницу «Simple OnePage» главной.

Настройка Главной страницы сайта на вордпресс

Выбор и установка темы

Чтобы установить тему сайта идем во вкладку Внешний вид > Темы и жмем на кнопку «Добавить новую». Я рекомендую установить тему North. Эта тема хоть и бесплатная, но имеет много настроек и удобна для создания одностраничника на wordpress. Вам не нужно лезть в файлы шаблона и многие базовые настройки можно сделать, не выходя из админ панели непосредственно в настройках страницы или в кастомайзере. Например, установить шрифты Google, подобрать цвет шрифта для заголовков и меню, сделать меню фиксированным, настроить разметку страницы с сайдбаром или на всю ширину.

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

Настройки темы wordpress в кастомайзере

После активации темы откройте снова главную страницу сайта и на вкладке «Атрибуты страницы» настройте разметку страницы Page Layout, активируйте контейнер как Full Width, то есть он будет на всю ширину. Также уберите метку флажка с чекбокса в поле Page Title, чтобы отключить показ заголовка страницы. Здесь же нужно убрать отступ под верхнем меню в поле Must Head bottom Margin убрав флажок с соответствующего чекбокса. После всех настроек страница готова чтобы импортировать в нее шаблон одностраничного сайта.

Установка плагинов и импорт шаблонов страниц

Идем во вкладку Плагины > Добавить новый и выбираем «Page Builder от Site Origin». Жмем на кнопку «установить» и активируем его. Также устанавливаем и активируем плагин со сборником виджетов «Site Origin виджеты». Эти два плагина работают в паре. С помощью первого создается разметка страницы любой сложности. Второй добавляет содержимое внутрь разметки.

После активации плагинов возвращаемся на страницу, очищаем ее от ненужного текста и переключаемся в режим пейдж билдера. Здесь нам нужна кнопка «Layouts», которая открывает путь к готовым шаблонам страниц. Активируем опцию «Каталог макетов» и получаем доступ к 26-ти макетам страниц wordpress.

Через кнопку «Preview» можно расмотреть каждый шаблон в отдельности. Некоторые из них подходят для страницы «Контакты», так как имеют карты google, контактные формы и разметку с адресом, телефонами и почтой. Другие подойдут для landing page поскольку имеют красивый первый экран с фоновым изображением, поверх которого написан текст с призывом к действию и настраиваемой кнопкой «заказать», «купить», «отправить» и т.д.

Импорт шаблона страницы в page builder

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

Я сделаю импорт с нескольких шаблонов, один называется Fitness Gym, второй Sport и третий Simple Business Contact с контактной формой. Ненужные ряды я удалю, а нужные оставлю.

Чтобы импортировать шаблон нужно выбрать его предварительно выделив, затем нажать на кнопку «Вставить». После нажатия на кнопку откроется окно с выбором позиции для размещения контента. Можно заменить имеющийся контент на вашей web-странице нажав на replace или вставить его до или после. Поскольку у нас страница пустая то все равно, на какую кнопку мы нажмем. Но когда будем выбирать следующий шаблон нужно смотреть внимательно и вставлять его либо before или after размещенного контента чтобы не затереть нужные элементы.

Когда мы вставим содержимое шаблона на свой одностраничник на wordpress увидим такую разметку.

Разметка страницы сайта с использованием плагина Page Builder by Site Origin

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

Концепция одностраничника

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

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

Первый экран сайта

Второй экран – это список ваших особенностей или преимуществ. Делается он с помощью виджета для создания заголовков и Особенности (Features). Здесь оба виджета вставляются в один ряд, один под другим.

Список услуг

В третий экран я вставлю раздел «О нас» с кнопкой «Задать вопрос». Кнопку можно сделать с всплывающим модальным окном и контактной формой для вставки номера телефона клиента. Решается это с помощью плагинов Contact Form7 и Easy Modal.

О нас

Четвертый экран сделан с таблицей цен на услуги и кнопками заказа услуги.

Цены

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

Контактная форма и информация

Делаем меню с якорными ссылками

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

Настройка ссылки

Я сделал пять якорных ссылок в меню на пять разделов – Intro, About, Membership, Price, Contact. Они начинаются со знака # хештега или октоторп (по латински восемь концов) и ведут на id блока. После знака # пишется имя якоря. Например, чтобы сделать ссылку на блок About, ему нужно прописать id About в поле предназначенное для идентификаторов блоков. Чтобы сделать скролл на этот блок в меню делаем «Произвольную ссылку» #About. Все, теперь на этот ряд произойдет плавный скролл. У меня получилось вот такое меню. Фоновый цвет и цвет ссылок меняется в кастомайзере.

Настройка менюВид меню

Заключение

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

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

Тема

Shoreditch — WordPress.com

Shoreditch — функциональная и адаптивная тема, идеально подходящая для присутствия вашего бизнеса в Интернете.

Шаблоны пользовательских страниц

Shoreditch имеет два шаблона пользовательских страниц, которые особенно хорошо подходят для корпоративных сайтов:

• Шаблон страницы панели
• Полноэкранный шаблон страницы

Шаблон страницы панели

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

Когда вы впервые активируете Shoreditch , вы увидите свои сообщения в традиционном формате блога.

Если вы хотите настроить свой сайт так, как показано в демо, следуйте этим инструкциям:

1. Создайте или отредактируйте страницу, а затем назначьте ее шаблону страницы панели в окне «Параметры страницы».
2. Добавьте введение к вашему сайту в редакторе.
3. Добавить избранное изображение, которое будет отображаться за текстом на этой панели.
4. Перейти к Настройщику → Статическая главная страница и установите для параметра «Отображение первой страницы» значение «Статическая страница».
5. Выберите страницу, которой вы только что назначили шаблон страницы панели, в качестве «Главной страницы», а затем выберите другую страницу в качестве «Страницы сообщений», чтобы отображать сообщения в блоге.
6. Добавьте несколько дочерних страниц к странице, которой вы только что назначили шаблон страницы панели.

Шаблон страницы во всю ширину

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

Страница блога

Несмотря на то, что его основная цель — бизнес, тема Shoreditch отлично подходит и для личного блога.

Избранное содержимое

Shoreditch отображает избранное содержимое в виде слайд-шоу на странице блога. Чтобы настроить его:

1. Перейдите к Customize → Featured Content.
2. Выберите слово для использования в качестве тега рекомендуемого контента и добавьте его в текстовое поле. Мы предлагаем использовать одно слово в нижнем регистре, например 9.0068 показал .
3. Нажмите кнопку Опубликовать , чтобы сохранить изменения.
4. Создайте хотя бы несколько сообщений. Для каждой публикации, которую вы хотите показать, используйте область редактора «Теги и категории», чтобы добавить тег, который вы выбрали в разделе «Настроить» → «Рекомендуемый контент» . С помощью этой темы вы также можете пометить страницы, которые будут отображаться как рекомендуемый контент, в дополнение к сообщениям.
5. Добавьте избранное изображение к каждой публикации или странице, которую вы показываете.

Ознакомьтесь с полным руководством по настройке Featured Content и видео.

Отзывы

Shoreditch предоставляет отзывы двумя способами:

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

Чтобы добавить отзыв, перейдите на страницу Мой сайт → Отзывы → Добавить. Отзывы состоят из текста отзыва, имени клиента, добавленного в качестве заголовка отзыва, и изображения или логотипа, которые можно добавить в качестве избранного изображения.

Страница архива отзывов

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

Где находится страница архива отзывов?

Допустим, у вас есть сайт WordPress.com по адресу:
https://shoreditchdemo.wordpress.com/

URL-адрес страницы архива отзывов будет следующим:
https://shoreditchdemo.wordpress.com/testimonial/

Эту страницу можно дополнительно настроить, добавив заголовок, вступительный текст и избранное изображение через Customizer → Testimonials . Этот контент появится над списком отзывов.

Области виджетов

Shoreditch предлагает три области виджетов, настроенные в

Customizer → Widgets :

• Область виджетов боковой панели, которая отображается справа.
• Необязательная область виджета верхнего нижнего колонтитула.
• Необязательная область виджета нижнего колонтитула.

Область виджетов верхнего колонтитула

Область виджетов нижнего колонтитула

Параметры темы

Shoreditch поставляется с тремя параметрами темы, доступными через настройщик:

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

Пользовательское меню

Shoreditch включает одно пользовательское меню в заголовке, которое можно настроить с помощью Настройщик → Меню .

Социальные ссылки

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

Extras

Shoreditch поставляется с несколькими специальными стилями CSS.

Кнопки

кнопка и минимальная кнопка

Вы можете добавить эти классы к своим ссылкам в редакторе HTML, чтобы создать кнопки «призыв к действию»:

Например:

Кнопка

Минимальная кнопка
 

Столбцы

(рекомендуется только для опытных пользователей)

Два специальных класса CSS доступны для создания области с двумя или тремя столбцами в сообщении или на странице:

столбец-1-2 и столбец- 1-3 (плюс столбец-первый и столбец-последний )

Для создания столбцов вам потребуется редактор HTML.

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

Например, этот код создает двухколоночный макет:

<дел>

Лондон! — это прекрасное место! — никто — даже мистер Бамбл — никогда не мог найти его там! Он часто слышал, как старики в работном доме тоже говорили, что в Лондоне нет нужды ни в одном мужественном парне; и что в этом огромном городе существуют способы жизни, о которых те, кто вырос в сельской местности, не подозревают.