Как создать веб-сайт онлайн-портфолио в WordPress

Опубликовано: 2023-11-03

Хотите создать веб-сайт онлайн-портфолио на WordPress?

Рынок фрилансеров быстро растет. Резюме и профили в LinkedIn важны, но чтобы победить оппонентов, вам понадобится веб-сайт-портфолио, на котором можно продемонстрировать свои лучшие работы и привлечь больше клиентов.

В этой статье мы покажем вам, как легко, шаг за шагом, создать веб-сайт онлайн-портфолио в WordPress.

How to create an online portfolio website in WordPress

Зачем вам нужен веб-сайт онлайн-портфолио?

Думайте о своем веб-сайте онлайн-портфолио как о своей цифровой визитной карточке.

Портфолио — это актив для всех, включая фрилансеров, соискателей работы и представителей малого бизнеса.

Example of portfolio website

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

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

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

Как создать веб-сайт онлайн-портфолио в WordPress с помощью SeedProd

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

1. Выберите хостинг WordPress

Для начала вам понадобится доменное имя и веб-хостинг. Веб-хостинг хранит файлы вашего сайта и является его домом в Интернете.

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

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

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

К счастью, Hostinger согласился предложить нашим читателям бесплатное доменное имя и скидку до 78% на хостинг WordPress. Вы можете начать всего за 2,69 доллара в месяц.

Чтобы настроить Hostinger за несколько минут, просто нажмите эту кнопку:

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

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

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

Оттуда вам нужно будет ввести новое доменное имя.

Hostinger get a domain

Вам будет предложено создать новый веб-сайт или перенести существующий веб-сайт.

Для использования этого руководства вы можете нажать «Пропустить, создать пустой веб-сайт».

Skip website hostinger

Затем нажмите кнопку «Выбрать» в разделе «Получить бесплатный домен».

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

Claim free domain

Если вам нужна помощь в выборе доменного имени, WPBeginner предлагает бесплатный генератор названий компаний, который поможет вам найти название компании, которое легко читать и продвигать в Интернете.

Конечно, если вы создаете личное портфолио, проще всего использовать свое имя и фамилию в качестве доменного имени. Если оно занято, вы можете добавить свою профессию вместе со своим именем.

Например, если занят johndoe.com , вы можете найти johndoephotography.com или janedoewriter.com .

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

2. Установите WordPress

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

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

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

С правильными плагинами и темами WordPress вы также получите тот же конструктор с возможностью перетаскивания, который делает такие платформы, как Squarespace или Wix, такими простыми в использовании.

Независимо от того, используете ли вы Hostinger или другую службу хостинга WordPress, например WPEngine или Bluehost, вы можете следовать нашему руководству по установке WordPress для получения подробных пошаговых инструкций.

Затем на панели управления Hostinger нажмите кнопку «Панель администратора» с логотипом WordPress, чтобы перейти на панель управления вашего веб-сайта WordPress.

Вы также можете перейти на yoursite.com/wp-admin прямо в браузере.

3. Выберите тему портфолио

После настройки WordPress вы готовы настроить дизайн своего веб-сайта, выбрав тему и создав новые страницы.

В этом уроке мы будем использовать SeedProd для создания темы специально для веб-сайтов-портфолио.

SeedProd — лучший конструктор страниц WordPress на рынке. Он позволяет быстро и легко создавать страницы любого типа без написания единой строки кода.

Если вы хотите создать веб-сайт-портфолио для привлечения потенциальных клиентов, создать блог WordPress или интернет-магазин, SeedProd — это универсальное решение, которое предоставит вам шаблоны, адаптированные к вашим потребностям.

Вам понадобится установить и активировать плагин SeedProd. Для получения дополнительной помощи ознакомьтесь с нашим подробным руководством по установке плагина WordPress.

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

SeedProd setup wizard

Завершив работу мастера настройки, перейдите в SeedProd ≫ Настройки и введите свой лицензионный ключ. Вы можете найти свой лицензионный ключ на странице своих учетных записей на веб-сайте SeedProd.

После ввода информации нажмите кнопку «Проверить ключ».

Verify key for SeedProd

Теперь у вас будет доступ ко всем функциям SeedProd.

4. Создайте целевую страницу своего портфолио

Далее переходим в SeedProd ≫ Theme Builder .

Отсюда нажмите оранжевую кнопку с надписью «Наборы шаблонов тем».

SeedProd theme builder

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

Кроме того, вы можете поискать по другим ключевым словам, если вы находитесь в определенной нише. Например, если вы риэлтор, вы можете найти темы WordPress для недвижимости на SeedProd.

Мы выберем тему «Портфолио фрилансера», но вы можете выбрать любую тему, которая соответствует вашим потребностям.

Online portfolio theme in SeedProd

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

На панели управления WordPress перейдите в «Настройки» ≫ «Чтение» . Рядом с главной страницей выберите раскрывающийся список «Портфолио», чтобы сделать страницу портфолио домашней страницей.

Set portfolio page as homepage

Затем вернитесь в SeedProd ≫ Theme Builder , и вы увидите список всех страниц темы.

Прокрутите вниз и наведите указатель мыши на страницу «Портфолио». Затем нажмите «Редактировать дизайн».

Edit portfolio page

5. Отредактируйте веб-сайт портфолио.

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

Просто перетащите нужный виджет и переместите его в то место, где вам нужен этот элемент.

Widgets in SeedProd

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

Просто нажмите на поле внешнего слоя, и в разделе «Содержимое» бокового меню вы увидите параметры настройки фона.

Background in SeedProd

Если вам нужна помощь в работе с интерфейсом SeedProd, вы можете посмотреть наши видеоуроки SeedProd.

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

Сильный призыв к действию (CTA): сайты-портфолио должны иметь четкий призыв к действию, чтобы посетители могли нанять вас или связаться с вами. Кнопка CTA должна быть размещена как над сгибом, так и внизу страницы.

Просто найдите поле «Кнопка» в меню слева и перетащите его на свою страницу справа.

Call to action in SeedProd

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

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

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

Edit button SeedProd

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

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

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

Services page in SeedProd

Раздел «Обо мне». Потенциальные клиенты и клиенты также хотят узнать больше о вашем прошлом и опыте. Это шанс наладить связь с людьми и продемонстрировать, почему вы увлечены тем, что делаете.

Чтобы создать раздел «Обо мне», все, что вам нужно сделать, это добавить на страницу виджет «Окно изображения». Затем добавьте свою портретную фотографию и напишите описание, которое расскажет людям больше о вас.

Если вы создаете портфолио для бизнеса или бренда, вместо этого вы можете использовать здесь свой собственный логотип.

Author bio in SeedProd

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

Просто добавьте виджет «Отзывы» на свою страницу. Затем вы можете добавить фотографию клиента и отредактировать его имя и отзыв. Если вы хотите добавить больше отзывов, нажмите значок «Дублировать» рядом с именем человека.

Duplicate testimonials in SeedProd

6. Добавьте галерею для демонстрации примеров ваших работ.

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

Для этого мы будем использовать Envira Gallery, лучший плагин галереи WordPress. Хотя вы можете использовать виджет «Расширенная галерея» на SeedProd, галерея Envira предоставляет вам больше функций.

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

Сначала установите и активируйте плагин Envira Gallery. Вы можете следовать нашему руководству по установке плагина WordPress для получения подробных инструкций.

Перейдите в галерею Envira ≫ «Добавить новый» на панели управления WordPress. Затем укажите название своей галереи в строке заголовка. Оттуда нажмите «Поиск файлов на вашем компьютере», чтобы добавить изображения проектов вашего портфолио.

Add new gallery Envira Gallery

Загрузив элементы портфолио, прокрутите вниз и выберите вкладку «Конфигурация».

Здесь вы можете изменить количество столбцов галереи, которые хотите отображать. Установка значения «Автоматически» установит количество изображений для автоматического заполнения каждой строки.

Configurations in Envira Gallery

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

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

Image size in Envira Gallery

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

Перейдите на вкладку «Лайтбокс» и измените размер изображения на «Исходное изображение».

Lightbox in Envira Gallery

Прокрутите страницу вверх и нажмите «Опубликовать». Под кнопкой публикации вы увидите шорткод.

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

Publish gallery in Envira Gallery

Вернитесь на страницу своего портфолио в SeedProd. Перетащите блок «Шорткод» в любое место страницы.

Затем просто вставьте шорткод в поле «Шорткод» в меню боковой панели.

Shortcode in SeedProd

Если вы хотите просмотреть шорткод, нажмите кнопку «Предварительный просмотр» в правом верхнем углу страницы.

Это покажет вам, как выглядит вся страница.

Preview portfolio website

Здесь вы увидите, что ваша галерея Envira встроена в ваш сайт-портфолио.

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

Recent projects in SeedProd

7. Добавьте контактную форму

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

Лучший способ создать простую и профессиональную контактную форму — использовать WPForms.

WPForms form builder

WPForms — лучший конструктор форм WordPress, который позволяет создавать онлайн-формы контактов.

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

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

WPForms in SeedProd

8. Сделайте это живым

Если все выглядит хорошо, вы готовы запустить свой веб-сайт.

Все, что вам нужно сделать, это нажать стрелку под зеленой кнопкой «Сохранить» в правом верхнем углу. Затем нажмите «Опубликовать».

Publish portfolio in SeedProd

Идите и проверьте действующий сайт.

Должно появиться все, включая галерею портфолио, кнопки и контактную форму.

Portfolio website live example

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

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube с видеоуроками по WordPress. Вы также можете найти нас в Twitter и Facebook.