Как создать страницу портфеля в WordPress с элементом

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

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

С WordPress и Elementor создать веб -страницу портфеля так просто. Потому что вы можете сделать это просто перетаскивать, без кодирования. В этом учебном посте мы объясним вам, как создать страницу портфеля в WordPress с элементом. Начните!

Что такое веб -страница портфолио?

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

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

Различия между веб -сайтом портфеля и веб -страницей портфеля

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

Проверьте, как создать веб -сайт портфеля в WordPress с элементом.

Элементы на веб -странице портфеля могут иметь

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

1. Краткое введение

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

2. Портфолио галерея

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

3. Контактная информация или кнопка

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

4. Призыв к действию (CTA)

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

Как создать страницу портфеля в WordPress с элементом: пошаговое руководство

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

• Элементар
• Elementor Pro
• HappyAddons
• HappyAddons Pro

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

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

Шаг 01: Определите элементы, которые вы хотите показать на странице портфолио

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

• Краткое введение
• Портфолио галерея
• Контактная информация или кнопка
• Призыв к действию

Шаг 02: Откройте страницу с холстом Elementor

Теперь откройте страницу с холстом Elementor. Здесь вы должны перетаскивать элементы и добавлять подходящий контент.

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

Шаг 03: Добавьте краткое описание

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

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

Теперь выберите цвет для контейнера.

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

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

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

Добавьте виджет текстового редактора под виджетом заголовка, как показано на изображении, прикрепленном ниже. Это позволит вам написать краткое описание.

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

Шаг 04: Добавьте кнопку на страницу

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

На вкладке Content вы можете добавить желаемую копию для кнопки .

Добавив прокладки

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

Шаг 05: Создать раздел портфеля

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

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

# Назовите вкладки

Каждая вкладка должна работать как категория. Итак, вы должны переименовать их.

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

Точно так же добавьте имена на все вкладки. Затем, при необходимости, нажав кнопку « + Добавить» , вы можете добавить больше вкладок в раздел портфеля.

# Стилизовать виджет вкладок

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

Шаг 06: Начните добавлять контент на вкладки

Как и Canvas Elementor по умолчанию, вы получите аналогичный интерфейс на каждой вкладке, чтобы добавить виджеты и отображать соответствующий контент. Нажмите значок плюса (+) .

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

# Отображать контент портфеля

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

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

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

Точно так же добавьте свой портфельный контент во все контейнеры.

Примечание: но весь этот контент может выглядеть таким грязным, верно? Это потому, что у них нет места между ними.

# Добавить пробелы между контейнерами на странице портфеля

Чтобы добавить пространство между ними, выберите материнскую контейнер , перейдите на вкладку Content , приходите к опции Gaps и введите значения , чтобы добавить пространство между контейнерами.

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

Шаг 07: Добавьте контент в другую вкладку

Не все вкладки должны следовать одной и той же макете контента. Это не обязательно. Вы можете создать разные макеты для разных вкладок.

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

Вы можете видеть, что мы добавили изображения в галерею.

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

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

Шаг 08: Добавьте форму в конце страницы (необязательно)

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

Вы можете видеть, что мы добавили контактную форму в конце страницы. Узнайте, как создать страницу контактов в Elementor.

Шаг 09: Предварительный просмотр страницы портфеля

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

Таким образом, вы можете создать страницу портфолио на вашем сайте WordPress с помощью плагинов Elementor и HappyAddons.

Последнее слово!

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

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

Или вы можете дать нам поболтать. Наша команда поддержки вернется к вам очень скоро. Спасибо, что были с нами до конца. Хорошего дня впереди!