Шаблон персональная страница html css. Snow - бесплатный шаблон лендинга на 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 шаблон в фиолетовых тонах для создания персонального сайта. Это многостраничная тема, где главная выполнена в стиле одностраничника, но, в свою очередь, имеются также внутренние страницы. Подойдет для создания личного сайта фрилансера любой специальности.

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

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

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

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

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, на который я вышлю вам эту книгу, как только она будет завершена.