Як створити онлайн-портфоліо з WordPress (та загальною темою)

Портфоліо – це ідеальна платформа для демонстрації всього, що ви хочете. Це можуть бути продукти, які ви продаєте, проекти, які ви закінчували, отримані нагороди, фотографії, які надихають, або твори мистецтва, якими ви пишаєтесь. Портфоліо буде продавати ваші товари, послуги та навички цільовій аудиторії. Більше того, це може бути корисно для отримання потенційних клієнтів. Якщо ви творчий професіонал (веб-дизайнер, художник, художник, письменник, графічний ілюстратор), добре розроблений веб-сайт особливо важливий для залучення клієнтів та розширення вашого бізнесу.


У цій публікації ми переглянемо кроки створення веб-сайту портфоліо з WordPress за допомогою теми Total. На початку вам слід знати, що тема Total включає вбудований спеціальний тип публікації для портфоліо. Тож простіше створити портфоліо та додати його елементи. І якщо ви знаєте, як працювати зі стандартними повідомленнями, створення портфоліо буде для вас набагато простішим.

Давайте розпочнемо!

Крок 1: Виберіть веб-хост

Що стосується хостингу, то існує велика кількість варіантів хостингу на будь-який кишеню. Але якщо ви застрягли у виборі, погляньте на хостинг-рішення WordPress, які WPExplorer рекомендує.

Найкращий хостинг WordPress

Bluehost – це чудовий варіант, якщо ви тільки починаєте роботу, оскільки він пропонує безліч ресурсів за низькою ціною – що ще нижче, коли ви використовуєте наше посилання. Ви можете отримати Bluehost всього за $ 2,95 в перший рік!

Але якщо ви хочете, щоб хостинг було легким, Flywheel та WP Engine – це два найкраще керованих хостинг-компанії WordPress. Обидва пропонують чудові функції за розумною ціною, і найкраще, що вам ніколи не доведеться думати про свій сервер, оскільки вони дбають про все за вас.

Крок 2. Виберіть ім’я домену

Під час реєстрації з хостом для серверного простору вам знадобиться мати своє доменне ім’я. Ваше доменне ім’я є унікальним для вашого веб-сайту, і ви можете отримати ці імена від реєстраторів, таких як NameCheap та GoDaddy. Вибирайте ім’я ретельно, оскільки воно може стати досить безладним, щоб змінити його згодом.

Крок 3: Встановіть WordPress

Установка WordPress проста! З керованими хостами ваша установка WordPress вже налаштована для вас. Якщо ви вибрали Bluehost, просто дотримуйтесь процесу встановлення одним натисканням кнопки, і ви повинні мати WordPress готовий за кілька хвилин.

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

Крок 4: Виберіть і активуйте тему

Цей крок буде для нас легким, оскільки ми будемо обирати Total. На наш погляд, це одна з найкращих тем, яку ви могли обрати для будь-якого проекту, оскільки ця тема має безліч функцій та варіантів, які ви можете використовувати для бізнесу, благодійних організацій, портфелів тощо. А за допомогою легкого демо-імпорту ви можете створити прекрасні веб-сайти з портфоліо Total за кілька кліків, як цей нижче:

Після встановлення теми «Всього» активуйте її на інформаційній панелі, натиснувши її Зовнішній вигляд> Теми> Додати нове.

На цьому етапі у вас є вибір – ви можете просто імпортувати будь-який демонстраційний веб-сайт із Total за допомогою Демо імпортер.  Всього є 40+ попередньо створених веб-сайтів, включаючи демонстраційні версії для портфоліо. Ви можете вибрати будь-яку демонстраційну версію, імпортувати її та додати до неї власний вміст.

Просто виберіть демонстрацію, яка вам подобається, і виконайте підказки на екрані, щоб встановити, потім активувати будь-які необхідні плагіни та імпортувати зразок вмісту (повідомлення, типи публікацій, віджети, меню тощо).

Крок 5: Створення та редагування елементів портфоліо та створення списку елементів портфоліо

Звичайно, вам не потрібно імпортувати демонстраційну версію для початку роботи, ви завжди можете створити власний веб-сайт з нуля. Використовуючи тему Total, створити власне портфоліо легко.

Але перш ніж ми зможемо створити нашу сторінку портфоліо, нам потрібно створити елементи портфоліо, які будуть входити в неї. У системі Total ви маєте два варіанти створення елементів свого портфоліо.

Варіант 1: Використання загальноприйнятого портфоліо загального користувальницького типу “Як є”

Ваш перший варіант – використовувати тип публікації в портфоліо так само, як створити свій портфель. На інформаційній панелі WordPress натисніть Портфоліо> Додати нове.

Загальний розмір елементів портфоліо

Додайте назву, теги, категорії та будь-який текстовий вміст. Усього підтримує різні типи вмісту – додайте Вибране зображення якщо ви хочете відобразити одне зображення, додайте до зображення кілька зображень Галерея зображень розділ, щоб створити повзунок або додати посилання на аудіо- чи відеофайл у Елемент портфоліо розділ. Але в усіх цих випадках, ймовірно, ви також хочете вибрати макет сторінки в Основних налаштуваннях (ліва, права або бічна панель) та встановити образне зображення для вашої публікації для використання у сітках портфоліо, каруселях та пов’язаних публікаціях. Коли ви закінчите, збережіть публікацію.

Загальні параметри типу публікації портфоліо

Наступний крок – це перейти Зовнішній вигляд> Налаштувати> Портфоліо щоб налаштувати сторінки архіву вашого портфоліо (основні, теги та категорії), а також сторінки вашого одного портфоліо. Звідси ви можете вибрати макет бічної панелі, підрахунок відповідних публікацій та включити різні елементи сторінки, а потім перетягнути їх у потрібний порядок.

Це воно! Просто додайте більше елементів для заповнення свого портфоліо.

Варіант 2: Створіть власний шаблон портфоліо за допомогою Visual Composer

Якщо ви хочете більше працювати, ви можете бути власним дизайнером, використовуючи функції Total та конструктор сторінки Visual Composer. Visual Composer – це візуальний конструктор сторінок, який допомагає створювати красиві макети за допомогою методу перетягування. Як користувач, це означає, що ви не повинні знати жодного кодування і можете фактично насолоджуватися процесом побудови веб-сторінок. Він оснащений програмою Total, і ви побачите підказку про встановлення плагіна на своєму веб-сайті, коли ви активуєте тему. Просто пам’ятайте, щоб також його активувати.

Відвідайте Параметри візуального композитора на інформаційній панелі, щоб налаштувати плагін. Натисніть на Visual Composer> Менеджер ролей і відрегулювати налаштування. Найголовніше, увімкніть композитора для типів публікацій, на яких ви хочете використовувати його. За замовчуванням Visual Composer увімкнено лише на сторінках. Увімкніть його також для типів публікацій у портфоліо, щоб ви могли створювати елементи портфоліо за допомогою Visual Composer.

Як і останній варіант, вам потрібно буде створити нову публікацію, натиснувши на Портфоліо> Додати нове. Дайте назву своїй публікації, виберіть категорії або теги, виберіть макет бічної панелі під розділом основних налаштувань та встановіть зображення. Збережіть чернетку пошти. Тепер можна приступати до будівництва!

Ви можете скористатися редактором фронтенду (візуального) або бекенда (блоку) Visual Composer для редагування елемента портфоліо. Ми віддаємо перевагу редактору фронтенду, оскільки ви можете бачити елементи сторінки, спеціальні кольори, прокладки / поля тощо. Але незалежно від того, який ви вирішите використовувати, просто виберіть Visual Composer Додати елемент кнопка для початку роботи.

Загальний конструктор сторінок портфоліо

Ви побачите всі елементи, доступні в бібліотеці елементів. Total має ряд спеціально розроблених елементів у бібліотеці, крім стандартних елементів Visual Composer. Ви можете бачити, що на знімку вище використовується параметр Слайдер зображення і а Текстове вікно для створення позиції портфоліо. Однак ви можете використовувати майже будь-який інший елемент бібліотеки.

Завершивши редагування, збережіть публікацію портфоліо та натисніть Опублікувати. Якщо ви будете створювати багато подібних елементів, ви можете навіть збережіть шаблон для багаторазового використання. Щоб зберегти ваш макет у вигляді шаблону, поверніться до бек-редактора.

Загальний творець шаблонів сторінки портфоліо

Натисніть кнопку Templatera (яка виглядає як маленький сірий значок макета).

Загальний шаблон сторінки портфоліо

Потім дайте назву шаблону і збережіть його. Щоб використовувати шаблон на новій публікації, просто натисніть на піктограму Templatera, щоб вставити збережений макет. Крім того, ви можете встановити шаблон за замовчуванням для всіх нових публікацій певного типу публікації.

Загальні параметри шаблонів сторінки портфоліо

Для цього перейдіть до Visual Composer> General Settings і встановіть бажаний шаблон для кожного типу публікації. Якщо ви плануєте додавати багато елементів до свого портфоліо, персоналу тощо, це дійсно заощадить певний час, оскільки всі ваші стандартні елементи сторінки будуть автоматично вставлені та відформатовані для вас.

Крок 6: Створення сторінки портфоліо

Тепер, коли у нас є список елементів портфоліо, які ми хочемо відобразити у своєму портфоліо, саме час створити сторінку, на якій будуть розміщені ці позиції портфоліо. Створіть сторінку так, як ви це робите з WordPress. Йти до Сторінки> Додати нове. Назвіть нову сторінку та збережіть її.

Потім натисніть на опцію Visual Composer, з якою ви хочете працювати – знову ж у вас з’явиться можливість використовувати редактор фронтенду або редактор бекенда. Це відкриє редактор перетягування в реальному часі. Клацніть на синій Додати елемент кнопка. Ми будемо використовувати елемент Сітка портфоліо для створення нашої сторінки портфоліо. Виберіть Сітку портфоліо. Якщо це потрібна карусель на сторінці вашого портфоліо, виберіть елемент «Карусель портфоліо».

Ви можете відрегулювати налаштування в елементі “Сітка портфоліо”, щоб точно налаштувати спосіб відображення сторінки вашого портфоліо. Ви можете вибрати розмір зображень, додати рамки, назвати їх, sВизначте категорії, виберіть порядок, стовпці та публікації на сторінці, увімкніть сторінку, виберіть стилі сітки, додайте уривки та багато іншого. Зберегти сторінки портфоліо після заповнення параметрів налаштувань під текстовим редактором.

Зміни можна переглянути навіть під час їх внесення. Ось так виглядає моя сторінка портфоліо у передній частині, коли я зберегла зміни в елементі “Сітка портфоліо”.

Крок 7: Налаштуйте портфоліо

Ви можете скористатися налаштуваннями у прямому WordPress Customizer, щоб встановити параметри панірувальних сухарів, макет архівів, стиль однієї публікації, обрізання зображень та багато іншого.

Якщо ви хочете внести зміни до піктограми адміністратора, введіть назву типу публікації, слугу та систематики Портфоліо Редактор типів публікацій.

Крок 8: Додавання портфоліо до меню

На веб-сайті з портфоліо має сенс, щоб сторінка портфоліо відображалася в головному меню, щоб відвідувачі могли отримати доступ до «Портфоліо» безпосередньо та переглянути сторінки портфоліо. Щоб додати нову сторінку портфоліо, перейдіть на сторінку Зовнішній вигляд> Меню, виберіть сторінку «Портфоліо» та натисніть Додати в меню.

Тепер Портфоліо відображається як легкодоступний пункт меню на домашній сторінці (та будь-якій іншій сторінці з увімкненим головним меню).

Якщо ви хочете, щоб сторінка вашого портфоліо була вашою домашньою сторінкою, просто перейдіть на сторінку Налаштування> Читання, встановіть відображення передньої сторінки на статичну сторінку, а потім виберіть портфоліо. Простенька!

Оздоблення

Якщо на вашому веб-сайті розміщено розділ «Портфоліо», ви можете продовжити та додати більше сторінок на свій веб-сайт. Розгляньте контактну сторінку, інформацію про послуги чи послуги, які є надзвичайно корисними та є необхідною частиною веб-сайту з портфоліо. Створіть стільки сторінок, скільки вам потрібно чи потрібно, пам’ятаючи, що включити важливі в меню, щоб мати повноцінний веб-сайт із портфоліо.

Зробляючи свій портфель, ви можете перейти на генерування трафіку до свого портфоліо, оптимізуючи свої зображення або навіть монетизуючи свій веб-сайт. Які ще поради ви маєте для створення свого портфоліо в Інтернеті?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map