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

Опубликовано: 2020-06-10

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

Традиционное резюме просто не может справиться с этим. На помощь приходит сайт-портфолио.

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

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

Хорошие новости для вас! Сегодня это не то, что требует тяжелой работы или слишком много времени. В WordPress вы можете создать сайт за считанные минуты. И есть такие решения, как Elementor и Happy Addons с тысячами готовых шаблонов, которые с легкостью придадут вашему сайту профессиональный вид.

Без лишних слов давайте посмотрим, как легко создать сайт-портфолио в WordPress. Но вот простой вопрос.

Почему WordPress или Elementor, а не другие?

how to create a portfolio website in WordPress

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

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

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

Как создать сайт-портфолио в WordPress (Краткое руководство пользователя)

how to create a portfolio website

Однако сейчас мы узнаем, как создать сайт-портфолио с помощью Elementor и Happy Addons.

Вот предварительные условия для создания веб-сайта портфолио в WordPress:

  • Сайт на WordPress
  • Элементор (бесплатно)
  • Счастливые дополнения (бесплатные и профессиональные)
  • Элементы Envato (необязательно)

Сначала убедитесь, что вы успешно установили WordPress , Elementor и Happy Addons . Теперь следуйте приведенным ниже инструкциям шаг за шагом.

Статья по теме : Как создать профессиональный веб-сайт с помощью Elementor и Happy Addons

Добавьте заголовок на свой сайт

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

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

 Note: Creating a header and footer are the same procedure. So you can also create footer following the tutorial below

Выберите шаблон или тему Elementor

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

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

Сначала откройте страницу, которую вы хотите создать. А затем нажмите на «Папка».

how to create a portfolio website

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

  • Блоки : Здесь вы можете выбрать различные разделы. Например, часть заголовка, часть нижнего колонтитула, главный баннер, карты, формы и т. д.
  • Страницы : Здесь вы можете выбрать всю страницу, где все элементы доступны в целом.
  • Мои шаблоны : если вы настраиваете какой-либо раздел или хотите сохранить его в соответствии со своим стилем, вы можете сохранить его как мои шаблоны.
How to choose Templates
Правильный шаблон для Elementor

Теперь вы можете выбрать подходящий для вашего сайта. Сегодня мы выбираем следующий.

Choosing the template

Итак, после добавления шаблона ваша страница будет выглядеть так:

How to create a portfolio website
 Note: We will customize this template step by step to make it a professional-looking portfolio website

Настройте шаблон для сайта портфолио вашей мечты Elementor

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

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

how to create a portfolio website

После редактирования заголовочной части это будет выглядеть так?

Header part

Добавление или настройка раздела «Обо мне»

Чтобы настроить раздел «О нас», выберите виджет «Заголовок» на левой боковой панели. А затем перетащите его в отмеченную область.

About me

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

Статья по теме: Как использовать панели навыков на веб-сайте портфолио

How to create a portfolio website

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

Dual Button

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

Buttons

Добавление моих услуг на сайт вашего портфолио

Здесь вы можете либо остаться с текущим дизайном, либо просто настроить его. Или вы можете полностью принести новый дизайн. В нашем случае мы добавим различные виджеты, чтобы показать часть « Мой сервис » более выгодно.

Для этого выберите «Виджет карты» Happy Addons на левой боковой панели. И аналогичным образом перетащите его в отмеченную область.

How to customize portfolio website

Связанная статья: Как создавать страницы магазина с карточным виджетом Happy Addons

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

Create your portfolio site

Добавить панели навыков

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

В любом случае, сейчас мы покажем, как вы можете добавить панель навыков на этот сайт. Хорошо?

Прежде всего, выберите «Виджет панели навыков» от Happy Addons. Для этого просто выберите виджет на левой боковой панели. А затем перетащите его в отмеченную область.

How to add skill bars

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

How to create portfolio site

Важное примечание: вы можете легко скопировать любые функции Happy Addons и вставить их на свой веб-сайт с помощью Live copy-paste.

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

Добавить виджет галереи

Теперь пришло время показать некоторые из ваших работ или фотографий в галерее. В этом случае вы можете использовать «Виджет карусели изображений» от Happy Addons.

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

How to add image carousel

Статья по теме: Как улучшить внешний вид сайта с помощью Elementor и Happy Addons

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

web design tutorial

Добавить виджет отзыва

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

Чтобы сделать это, вы можете использовать виджет Testimonial Widget от Happy Addons. Все, что у вас есть к тому же. Просто выберите его и перетащите на область. Вот и все!

How to use Testimonial feature

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

Дополнительный совет: настройте свой нижний колонтитул

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

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

Прежде всего, мы выберем раздел.

How to create a footer

Затем выберите виджет « Текстовый редактор » Elementor. А потом добавить заголовок.

How to create portfolio site

Точно так же снова добавьте «Текстовый редактор» в раздел раздела вместе с заголовком. И назовите его «Услуги».

website design with elementor

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

How to design portfolio

Далее, в третьем разделе, вы можете добавить еще одну вещь. Если вы хотите, вы можете использовать другой виджет Happy Addons в разделе нижнего колонтитула, чтобы сделать его более привлекательным. И это виджет «Список функций».

 Feature list is a pro widget of Happy Addons

Просто выберите виджет и добавьте его.

How to build portfolio

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

How to add features

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

Окончательный предварительный просмотр вашего личного веб-сайта портфолио в WordPress

Итак, после идеального применения всех процессов вы можете предварительно просмотреть окончательный результат ниже. И вот как создать сайт-портфолио в WordPress с помощью Elementor и Happy Addons вместе.

Final Preview 1

Связанная статья: Разумно ли использовать Happy Addons вместе с Elementor.

Несколько примеров сайтов-портфолио с самым высоким рейтингом

Design your dream blog

Что ж, у вас есть навыки, знания, качества и опыт работы, но что, если вы не можете заявить о себе миру? Конечно, клиенты или работодатели не смогут найти вас, даже если вы на 100% подходите и подходите для их будущей работы.

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

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

Итак, приступим:

Робби Леонарди

Robby Leonardi- portfolio website

По сути, Робби — дизайнер, который представил свое портфолио совершенно по-другому. После того, как вы войдете на его сайт, вы получите мультяшный аромат. Особенно это напомнит вам о мультике, например, dave game, помните игру? Тем не менее, иллюстрации этого сайта просто превосходны. Так что, если вы дизайнер, вы можете выбрать этот сайт.

Юл Моро

Yul Moreau- portfolio site example

Юл создает поистине неповторимую атмосферу на своем сайте

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

Дэниел Спатцек

Daniel Spatzek- portfolio site example

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

ИгрушкаБорьба

Toyfight- portfolio site example

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

Узнайте больше: лучший веб-сайт, созданный с помощью Elementor

Студия Шурк

Studio Schurk- portfolio site example

Studio Schurk использует иллюстрацию и юмор, чтобы привлечь посетителей

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

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

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

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

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

Вы уже создали какой-либо сайт с помощью Elementor? Поделитесь с нами своим путешествием в разделе комментариев ниже!

Создайте сайт-портфолио своей мечты на WordPress!