Создаем сайт-визитку для фотографа на uKit: пошаговая инструкция

Нужен сайт? Закажите или создайте самостоятельно,
следуя нашим пошаговым инструкциям!

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

Шаг 1. Собираем контент

Создание сайта начинаем со сбора имеющегося и сгенерированного контента. В него входят тексты, изображения, видео — всё, что пользователю нужно знать о вас. Поскольку мы делаем сайт-визитку для фотографа, контентом будут являться фотоработы. Для удобства создайте отдельную папку на компьютере и соберите в ней свои лучшие работы (10-20 штук).

Шаг 2. Выбор шаблона и его заполнение служебной информацией

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

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

Позднее, когда сайт будет готов, следует приобрести домен первого уровня вида site.ru или site.com для его более высокого ранжирования в поисковых системах.

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

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

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

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

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

Шаг 3. Замена контента на собственный

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

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

Для этого нажмем на любую область на фотографии (1), далее наведем курсор на миниатюру ниже, появится иконка карандаша в правом верхнем углу (2), далее “Заменить”. Откроется стандартный проводник. В нем выбираем непосредственно то изображение, которое хотим видеть на слайдере.

Также добавим еще два слайда. Удалим черно-белую миниатюру, нажав на иконку корзины.

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

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

Жмем на надпись “С компьютера” в прямоугольной области внизу окна.

Выбираем подходящее тематическое изображение для детской фотосессии.

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

Аналогичным образом добавим “Семейную фотосессию”.

Готово! Теперь у нас есть три слайда на сайте. При желании можно сделать больше слайдов. Однако учитывайте тот момент, что любая графика увеличивает размер (вес) сайта. По последним исследованиям средний размер веб-страницы должен быть 3-4 Мб. И этот показатель постепенно уменьшается, так как уже более половины пользователей заходит на сайты с мобильных устройств, используя интернет от сотовых операторов. Следует экономить их время и трафик, при этом донося смысл и идею сайта.

Займемся редактированием подложек на слайдере. Переименуем их соответственно отображаемому контенту и прикрепим онлайн-заявки при нажатии на кнопку. Начнем с первого слайда с фотографией невесты.

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

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

Переименуем кнопку на “Заявка онлайн” и приступим к созданию/редактированию всплывающего окна.

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

Для нашего сайта создадим форму с обязательным заполнением номера телефона и необязательными для заполнения полями e-mail и комментария к заказу.

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

Готово! Мы привязали к кнопке на первом слайде вызов формы для обратной связи. Когда клиент заполнит её, на привязанную электронную почту придет письмо с его данными. Осталось проделать то же самое с оставшимися двумя слайдами.

Переходим на второй слайд, нажав на миниатюру ниже. Редактируем текст подложки. Наводим курсор на кнопку, изменяем название кнопки. Нажимаем для сохранения на область рядом с кнопкой и снова наводим на нее до появления иконки карандаша. Появится окно с вкладкой “На всплывающее окно”. Выбираем “Заявка онлайн”. Сохраняем изменения.

Повторяем аналогичные действия с третьим слайдом.

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

Продолжаем замену шаблонного контента на свой. Следующий блок — текстовый. Здесь можно разместить свой текст приветствия посетителям сайта. Достаточно буквально 5-6 предложений. Пишите только самое важное и интересное из личной биографии. Не превращайте свой сайт в простыню из текста и “не лейте воду” — это никому не нравится.

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

Идем дальше. Шаблон предлагает достаточно стильный блок с фотографией слева и текстовым описанием справа. Заменим контент на свой.

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

После заменим поясняющий текст слева на свой. На кнопку сделаем обратную связь.

Таким же образом изменяем нижний блок.

Вы можете заменить тексты/фото на свои. Например, “Репортажная съемка”, “Lovestory” и т.д.

Следующим блоком идет портфолио из шести изображений. Заменяем на свои. К кнопке “Смотреть все” добавим переход на страницу “Портфолио”.

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

Главная страница сайта практически готова. Если вам требуется добавить какую-либо дополнительную информацию на сайт, всегда можно выбрать понравившуюся заготовку из вкладки “Блоки” в панели слева или собрать собственный блок.

Просто зажмите нужный и переместите его на требуемое место на сайте.

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

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

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

Всё! Теперь у нас есть страница с примерами наших лучших работ.

Редактируем страницу “Услуги”. В шаблоне перечень услуг удобно реализован в виде отдельных карточек по каждому виду. Нам же остается только изменить фотографию, название, стоимость и небольшое описание с подробностями к каждой из них. Редактирование происходит уже известным нам способом — наведением курсора на элемент, который мы хотим поменять. Также мы можем дополнительно выбрать понравившийся дизайн карточки в панели.

Для удобства пользователей добавим всплывающее окно при нажатии на кнопку “Заказать”. Для карточек прикрепим ссылку на всплывающее окно “Заказ услуги”, так как в нем по умолчанию включено поле с названием конкретной услуги, обозначенной в карточке.

Вносим корректировки для самого всплывающего окна. Отметим обязательные/необязательные поля для заполнения.

По окончании нажимаем на кнопку “Сохранить”. Теперь у нас к карточке привязано всплывающее попап-окно. Остается только привязать “Всплывающее окно” ко всем остальным карточкам.

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

Переходим к странице “Контакты”. Редактируем текст под заголовком, указываем все способы связи с нами.

Информация виджета контактов “подтянется” автоматически (мы уже редактировали её выше). При наличии офиса или студии указываем метку на карте. Делаем настройку карты: выбор типа карты, отображение ползунка масштабирования и т.п.

Перейдем к странице “Обо мне”. Здесь можно опубликовать подробную информацию о себе. Измените тексты на свои. Распишите свои преимущества и положительные качества. Разместите свою фотографию.

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

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

В нашем примере блог будет. Поэтому мы перейдем на соответствующую страницу.

Удалим демоконтент и сделаем первую запись.

При написании статьи обратите внимание на возможности форматирования текста в столбце слева. В текст статьи вы можете добавить изображение, изменить стиль, сделать выравнивание и даже разместить видео из Youtube, Vimeo или Rutube.

Не забудьте по окончании написания записи блога опубликовать ее.

Остается прикрепить доменное имя в панели управления сайтом. Теперь у вас есть собственный сайт-портфолио в сети!

Наши исполнители могут сделать это за вас!
Всего 3 500 рублей за 10 дней.