Содержание

Адаптивный шаблон личного кабинета.

WP плагин WP-Recall расширяется за счет сторонних дополнений. В мы разобрали этот момент.

Есть отдельная категория дополнений WP-Recall: — перейдите по ссылке в каталог дополнений и ознакомьтесь с доступными шаблонами (там представлены как бесплатные шаблоны, так и VIP и премиум шаблоны ЛК).

Шаблоны личного кабинета — готовое решение, представляющее в wp личный кабинет (ЛК) пользователя в совершенно другом отображении. Многие плагины представляют личные кабинеты пользователей без возможности простой смены их внешнего вида — в WP-Recall этот вопрос решается простым переключением в админке.

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

На данный момент в базовой комплектации плагина идут 2 бесплатных дополнения-шаблона личного кабинета: Sunshine и Grace. Это адаптивные (responsive) шаблоны личного кабинета (при условии что ваша wordpress тема адаптивна).

Они представляют пользователю комфортное использование кабинета как на ПК, так и на планшетах или мобильных устройствах. Меню вкладок удобно группируется и скрывается в всем известный «бургер» — иконку, кликнув по которой вы получаете мобильное меню. Таким образом, большое количество вкладок в личном кабинете не разрывают шаблон кабинета, обеспечивая удобный пользовательский интерфейс.

Установка шаблона личного кабинета, его активация и обновление:

Установка шаблона личного кабинета: ничем не отличается от установки нового дополнения WP-Recall.
Переходим в админке: «WP-Recall» -> «Шаблоны» и в «Загрузить дополнение для WP-Recall в формате.zip» выбираем zip-архив дополнения шаблона личного кабинета и загружаем на сервер.


Активация шаблона личного кабинета: — активировать единовременно можно только лишь один шаблон личного кабинета. Для активации его на странице «WP-Recall» -> «Шаблоны» наводим на нужный шаблон в списке и нажимаем «Подключить»

Обновление сторонних шаблонов производится также как и сторонних дополнений — работу с которыми разобрали в 1-й главе. Базовые шаблоны обновляются при обновлении плагина.

Основная структура шаблонов личного кабинета:

100%-ное совпадение конечно зависит от используемого шаблона но как правило структура кабинета такая:

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

И в подвале ЛК вы тоже можете увидеть свою зарегистрированную зону для виджетов.

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

Кастомизация шаблона личного кабинета:

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

Про функционал WP-Recall шаблонов (templates, не путать с шаблонами личного кабинета) я рассказывал в 1-й главе.
Так вот: шаблон личного кабинета вы можете изменить, если вам нужно поменять что-то в верстке — изучите руководство «Используем функционал шаблонов в плагине WP-Recall. Список шаблонов» . В папке шаблона личного кабинета есть темплейт office.php — его копируйте по безопасному пути и там уже вносите изменения. Так вы их не потеряете при обновлении плагина и дополнений шаблонов ЛК.

В плагине WP-Recall есть хуки и фильтры — но в рамках этой книги для новичков мы не будем затрагивать вопросы по разработке.

Личные кабинеты базовой версии плагина:

В базовой версии плагина идут 2 дополнения-шаблона личного кабинета. Это Sunshine и Grace. Рассмотрим их особенности и внешний вид:

WP-Recall шаблон личного кабинета Sunshine


Внешний вид шаблона «Sunshine»

Шаблон позволяет пользователю устанавливать обложку в шапке шаблона (справа вверху иконка), устанавливать аватарку (иконка в области аватарки), выводить блок информации о пользователе (иконка «I» вверху аватарки, «Подробная информация»):


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

Шаблон личного кабинета регистрирует свои три области виджетов: RCL: Сайдбар контента личного кабинета, RCL: Сайдбар над личным кабинетом и RCL: Сайдбар под личным кабинетом. Смотрите в админке: «Внешний вид» -> «Виджеты»

Шаблон позволяет выводить кнопки из области меню как в вертикальном представлении, так и в горизонтальном (настройка в админке: «WP-Recall» -> «Настройки» -> «Общие настройки» -> «Размещение кнопок вывода вкладок»).

Горизонтальные кнопки при переполнении свернутся с в мобильное меню:


При нажатии на иконку «бургера» вы увидите остальные кнопки личного кабинета:


Цвет кнопок регулируется через общие настройки: «WP-Recall» -> «Настройки» -> «Общие настройки» -> «Оформление» -> «Основной цвет» — так вы их можете настроить под цвет вашего сайта.

В базовой версии плагина личный кабинет автора позволяет выводить:
1. чат (переписка в личных сообщениях)
2. выводить настройки профиля (заполнять произвольные поля профиля) — пользователь может их заполнить не заходя в админ панель (wp-admin).
3. выводить созданные группы
4. осуществлять вывод записей wordpress этого автора

5. выводить форму публикации
6. созданные заказы в интернет-магазине на базе бесплатного дополнения Commerce
7. выводить список созданных тем форума (дополнение PrimeForum)
8. выводить детализацию рейтинга пользователя
9. выводить список подписчиков и подписок на других авторов
10… произвольные вкладки созданные администратором в админке

Адаптивный дизайн кабинета позволяет им одинаково удобно пользоваться как на ПК, так и на планшетах и мобильных:

WP-Recall шаблон личного кабинета Grace

Шаблон Grace предоставляет такие же возможности личного кабинета как и Sunshine (за исключением: кнопок вывода вкладок личного кабинета — только вертикальный вид и он регистрирует 2 области виджетов — над и под кабинетом), поэтому вышесказанное справедливо и для него.

Посмотрим на внешний вид этого WordPress шаблона личного кабинета:


Внешний вид шаблона «Grace»

И его внешний вид на мобильном устройстве:

Сторонние личные кабинеты пользователей:

Сторонние шаблоны личного дополнения — все остальные шаблоны ЛК, доступные со страницы: Шаблоны личных кабинетов WP-Recall

Описание возможностей найдете на странице описания. Там же и скриншоты. Ниже я представлю несколько скриншотов с названиями wordpress кабинета — «для полноты картины»:


Шаблон ЛК «Across Ocean»
Шаблон ЛК «Across Ocean PRO»
Шаблон ЛК «Theme Line»
Шаблон ЛК «Theme Clear Sky»
Шаблон ЛК «Theme Control»
Шаблон ЛК «Theme Control» и доп «User Info Tab»
Шаблон ЛК «Light»

Сравнительная таблица возможностей шаблонов ЛК:

В этой таблице я проанализировал все существующие на этот момент вордпресс шаблоны личного кабинета для плагина WP-Recall. Выделил из них основные моменты и особенности:

Пояснения к таблице:
1-й экран — это экран, сразу по заходу в wp личный кабинет, т.е. без каких либо дополнительных переходов.

Из всех шаблонов, только один шаблон — «Theme Control», поддерживает расширение своих возможностей через дополнение.
Это дополнение User Info Tab

Кастомайзер (WP Customizer): это значит что шаблон позволяет настроить пользователю кастомные цвета. Обводки, цвет областей кабинета, выбор квадратной или круглой аватарки. Их задают в админке через: «Внешний вид» -> «Настроить». Все настройки происходят в режиме реального времени — т.е. вы сразу видите вносимые изменения без перезагрузки страницы.

Лайфхаки шаблонов ЛК:

Если личный кабинет выводится через шорткод:
«WP-Recall» -> «Настройки» -> «Общие настройки (включая advanced settings)» -> «Порядок вывода личного кабинета» -> «Через шорткод wp-recall»

То вы можете изменить заголовок личного кабинета «Personal office» на свой или стереть его совсем:


Возможно ваша ВП тема может позволить вам вывести кабинет на всю ширину. Для этого перейдите в админке на страницу с вписанным шорткодом wp-recall и справа (или снизу) в свойствах страницы выберите «шаблон» (смотри скриншот выше)

Урл кабинета, на той же странице, вы сможете поменять на свой — под заголовком страницы: «постоянная ссылка» — «изменить» (смотри скриншот выше)

Формат ссылки на личный кабинет вы можете изменить в расширенных настройках плагина. Например, лайфхаком выше, мы на странице с шорткодом уже изменили slug (слаг) страницы кабинета. Теперь изменим второй параметр:

Прочее:
Если вы хотите ссылку на кабинет вида: ваш-сайт/author/masha/ где masha — логин пользователя с которым он регистрируется, то вам нужно настраивать вывод кабинета через файл вордпресс шаблона author.php . Надо обладать некоторыми знаниями как это делать. Описание найдёте — второй способ.

Или выбрать и приобрести готовый дочерний ВП шаблон, где эту работу уже провели специалисты. Ссылка на дочерние шаблоны

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

Искали плагин личного кабинета на WordPress? WP-Recall идеально подойдет под эту задачу.

Подпишитесь на бесплатное получение оффлайн варианта книги: «WP-Recall для новичка» в формате pdf.
Укажите свой e-mail, на который я вышлю вам эту книгу, как только она будет завершена.

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

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

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2017 , хоть и бесплатны, но выглядят на уровне премиум-класса.

Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 — это то, что вам нужно!

Обновлено 12.03.2019 : Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow — бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron — штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima — шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White — прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White — два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz — бесплатный HTML5 шаблон сайта на основе сетки

Современный, визуально привлекательный HTML5 шаблон сайта, разработанный на основе сетки (подробнее о сетке читайте ). Красивый и отзывчивый дизайн шаблона для блога или сайта.

5. Mart eCommerce — прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

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

6. Nava — эффектный HTML5 и CSS3 шаблон для творческих сайтов

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

7. Box Portfolio — уникальный творческий шаблон сайта на HTML5 и CSS3

Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.

8. Mountain King — популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa — классный шаблон сайта на HTML5 и CSS3 для спа-салонов

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

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

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

11. Triangle — бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

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

12. Future Imperfect — блестящий шаблон сайта для творческих людей!

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

13. Bodo — прекрасный шаблон для персонального сайта

Bodo — красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens — идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное — крупно! Редкий шаблон сайта отвечает этим требованиям. Lens — один из таких шаблонов сайта фотографа.

15. Spectral — уникальный шаблон сайта ручной работы на HTML5 и CSS3

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

16. Oxygen — одностраничный HTML5 и CSS3 шаблон сайта

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

17. Mobirise Bootstrap — совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa — красивый и бесплатный HTML5 шаблон для сайта недвижимости

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

19. Drifolio — стильный HTML5 шаблон сайта для портфолио

Стильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.

20. Pluton — яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree — профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime — завораживающий шаблон сайта на HTML5 и CSS3

Sublime — чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber — необычный и красивый HTML5 и CSS3 шаблон сайта

Timber — свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ — главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper — лучший шаблон сайта для электронной коммерции

E-Shopper — прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic — бесплатный HTML5 и CSS3 шаблон для фотосайта

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

26. Mabur Portfolio — прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 — бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion — стильный одностраничный шаблон сайта на HTML5 и CSS3

Infusion — это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.

29. Yebo — корпоративный шаблон сайта на HTML5 и CSS3

Этот высококачественный шаблон сайта в плоском стиле прекрасно подойдет для любого корпоративного сайта. Адаптивный дизайн, масса настроек и возможностей для редактирования.

30. Twenty — эффектный HTML5 и CSS3 шаблон сайта с параллаксом

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

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase — HTML5 шаблон сайта для портфолио

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

33. Mamba One — простой и стильный шаблон сайта на HTML5 и CSS3

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

34. KreativePixel — бесплатный шаблон сайта для фотографов

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

35. Retina Ready Responsive App — бесплатный шаблон лендинга на HTML5 и CSS3

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

36. Brushed — отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed — отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

Добро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.

38. Tesselatte — бесплатный отзывчивый шаблон на HTML5 и CSS3

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

39. Overflow — уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper — отзывчивый и очень красивый шаблон сайта

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

41. Pinball Responsive Grid Style — отличный шаблон сайта на основе сетки

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

42. Prologue — чистый шаблон одностраничного сайта на HTML5 и CSS3

Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы — просто идеальное сочетание!

43. Helios — современный шаблон сайта на чистом HTML5 и CSS3

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

44. Telephasic — бесплатный и отзывчивый шаблон сайта на HTML5

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

45. Strongly Typed — очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него — очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре .

46. Striped — чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева — по вашему желанию).

47. Parallelism — необычный и стильный шаблон сайта на HTML5 и CSS3

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

48. Miniport — полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti — просторный и свободный отзывчивый шаблон сайта на HTML5

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

50. ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта — ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

Добавьте в закладки, чтобы потом быстро найти.

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу» . Будет полезно.

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

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

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

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

Lithium
Бесплатный адаптивный шаблон в стиле Flat , который подойдет практически любому фрилансеру, будь это веб-разработчик или фотограф, так как на станице предусмотрено как привычное портфолио с фильтром по категориям работ, так и фотогалерея .

Brandy
Еще один чрезвычайно качественный шаблон для создания личного портфолио . Он имеет множество плюшек, которые все так любят: Parallax эффекты, эффект появления блоков при скроллинге, плавная прокрутка, различные счетчики и, конечно же, блок самого портфолио.
Шаблон абсолютно бесплатен и подойдет для фрилансеров любой IT профессии.

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

MyFolio
Отличный адаптивный одностраничник-портфолио в зеленых тонах. Подойдет как фрилансеру-одиночке, так и команде разработчиков. Шаблон выполнен качественно и заслуживает внимания.

Basic
Строгий шаблон в синих тонах для создания портфолио. Построен на Bootstrsp 3. 2. Если заменить иконки в первом экране, можно использовать фрилансерам любой сферы деятельности.

Small
Небольшой одностраничный html шаблон в плоском стиле . Он разделен на три экрана с высотой 100%. Первый экран — фотография и краткая информация о фрилансере.
Второй экран — портфолио. Выводятся последние 8 работ из Вашего портфолио на dribbble . То есть все, что нужно сделать, это настроить интеграцию с и на этом все. Изображения будут обновляться сами, синхронно с вашими действиями на Dribbble.
Третий экран — Контактная информация.

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

Portio
Интересный, универсальный шаблон, хотя есть много моментов, из-за которых я бы не стал его использовать: это дурацкие шрифты, убогие кнопки. Возможно, кого-то заинтересует такой вариант. Как никак — яркая цветовая гамма. Если немножко поправить CSS стили, можно прийти к хорошему результату.

Port
Бесплатный, и, я бы даже сказал, элегантный одностраничный шаблон на базе Bootstrap. Лично мне нравятся красные активные элементы. Блок с примерами работ выполнен в виде мудреной сетки, и это плюс. Данный шаблон будет отличным решением для создания портфолио веб-дизайнера или программиста .

Hexa
Многостраничный Flat-шаблон со слайдером в шапке в характерной стилю цветовой гамме — зеленой. Используя данное решение, вы сможете создать отличный сайт-визитку с примерами работ и блогом.

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

Dribbble Portfolio
Еще один шаблон, портфолио в котором интегрировано с Dribbble . Требуется лишь настроить выгрузку последних работ и забыть о постоянном, нудном обновлении портфолио на своей личной странице.
Шаблон выполнен в строгой, современной цветовой гамме. Все смотрится очень чистенько.
Также как и предыдущий Dribbble-шаблон, он небольшой. Я бы даже сказал, лаконичный. В общем, моя оценка 9 из 10.

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

Dribbble Folio V2
Бесплатный шаблон с автонаполняемым портфолио . Работы импортируются с сайта Dribbble . Перед использованием данного решения, не забудьте настроить интеграцию с вашим профилем на Dribbble.
К сожалению, демо нет.

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

Страница шаблонов личного кабинета WP-Recall | CODESELLER

В этом видео вы увидите обзор страницы «Шаблоны» плагина, расположенной в админке вашего сайта по пути:
«WP-Recall» -> «Шаблоны»

Шаблоны личного кабинета или темы оформления личного кабинета (ЛК) — отличная возможность выбрать дизайн и вид личного кабинета и разнообразить ваш сайт. Базовая часть плагина уже содержит их 2 вида: Sunshine и Grace, но вы всегда можете скачать другой из каталога CodeSeller и включить его.
А сравнительная таблица возможностей ЛК помогут вам выбрать кабинет вашей мечты.

В этом видео мы рассмотрим RCLKEY (реколл кей) — для чего он нужен. Увидим как загрузить сторонний шаблон личного кабинета (а это обычное дополнение WP-Recall — с ними вы научились работать по прошлому видео), как его включить и обновить.
Расскажу о сравнительной таблице возможностей шаблонов ЛК и увидите вживую как работают и выглядят сторонние шаблоны личного кабинета.

WP-Recall: Обзор страницы «Шаблоны»:


Основные моменты:
1. Для чего нужен RCLKEY 0:33
2. Как загрузить шаблон ЛК 0:43
3. Как включить шаблон личного кабинета 1:08
4. Сравнительная таблица возможностей ЛК 3:06
5. Across Ocean PRO — премиум шаблон ЛК. Внешний вид 3:33
6. Шаблон Clear Sky 4:12
7. Шаблон Grace 4:34
8. Шаблон Sunshine 4:57
9. Шаблон Light 5:23
10. Шаблон Line 5:37
11. Шаблон Theme Control 5:54

Сравнительная таблица возможностей шаблонов ЛК:

В этой таблице я проанализировал все существующие на этот момент вордпресс шаблоны личного кабинета для плагина WP-Recall. Выделил из них основные моменты и особенности:

Пояснения к таблице:
1-й экран — это экран, сразу по заходу в wp личный кабинет, т.е. без каких либо дополнительных переходов.

Из всех шаблонов, только один шаблон — «Theme Control», поддерживает расширение своих возможностей через дополнение.
Это дополнение User Info Tab

Кастомайзер (WP Customizer): это значит что шаблон позволяет настроить пользователю кастомные цвета. Обводки, цвет областей кабинета, выбор квадратной или круглой аватарки. Их задают в админке через: «Внешний вид» -> «Настроить». Все настройки происходят в режиме реального времени — т. е. вы сразу видите вносимые изменения без перезагрузки страницы.

Полезные ссылки:

Шаблоны личного кабинета
«Глава 2. Личные кабинеты в WP-Recall» — книга: «WP-Recall для новичка»