Как конвертировать PSD в WordPress с помощью Elementor и WidgetKit
Опубликовано: 2019-12-12Вы ищете решение для преобразования PSD в WordPress? Хотите преобразовать готовый сайт PSD в WordPress, но не знаете как? Хорошо, я могу помочь тебе с этим делом.
Вы уже знаете, что WordPress — одна из самых используемых и универсальных платформ CMS за последнее время. Теперь создание полнофункционального веб-сайта из PSD в тему WordPress без кодирования стало намного удобнее с помощью конструктора страниц, такого как Elementor.
В этой статье я собираюсь шаг за шагом показать вам «Как преобразовать PSD в WordPress с помощью Elementor и WidgetKit» .
Посмотрим, как.
Выбор дизайна PSD
Прежде чем преобразовать тему PSD в WordPress, первое, что вам нужно сделать, это выбрать дизайн сайта в формате PSD. Короче говоря, PSD — это сокращение от PhotoShop Design, одного из самых популярных инструментов дизайна, с помощью которого создается большинство дизайнов веб-сайтов WordPress.
Вы можете выбрать любой предпочитаемый дизайн PSD из обширной коллекции PSDHUB.
Они предоставляют бесплатные шаблоны PSD премиум-качества для вашего веб-сайта, как для личного, так и для коммерческого использования. Помните, что выбранный вами дизайн PSD должен быть простым и современным.
При выборе дизайна PSD проверьте следующие факторы:
- Структура дизайна. Первое, что вы должны рассмотреть, это структура дизайна. Дизайн не имеет границ, но кодирование имеет.
- Чистый и элегантный макет. В- третьих, предпочитаемый вами PSD-дизайн должен быть чистым и элегантным. Это помогает разработчику сделать веб-сайт с идеальным пикселем из чистого и элегантного макета.
- Выполнение цели: во- вторых, соответствует ли дизайн вашей цели или нет. Предположим, вам нужен туристический веб-сайт, тогда ваш PSD-дизайн должен быть в формате PSD для туристического веб-сайта.
- Сложность: наконец, постарайтесь игнорировать сложность, как и для PSD, также при выборе степени.
Здесь мы используем шаблон Eventia-Conference и Event Management от PSDHUB.
Установить WordPress
WordPress известен своей простотой установки. В большинстве случаев установка WordPress — очень простой процесс, который занимает менее пяти минут. Чтобы преобразовать тему PSD в WordPress, установка WordPress является вторым шагом, который необходимо рассмотреть.
WordPress.org предоставляет подробную статью «Как установить WordPress» на странице поддержки своего сайта. Однако; Вот основные инструкции по установке WordPress для вас,
- Сначала загрузите и разархивируйте пакет WordPress.
- Создайте базу данных для WordPress на своем веб-сервере, а также MySQL.
- Загрузите файлы WordPress в нужное место на вашем веб-сервере:
- Если вы хотите интегрировать WordPress в корень вашего домена, переместите или загрузите все содержимое разархивированного каталога WordPress в корневой каталог вашего веб-сервера.
- Если вы хотите, чтобы ваша установка WordPress находилась в собственном подкаталоге на вашем веб-сайте, создайте каталог блога на своем сервере и загрузите содержимое разархивированного пакета WordPress в каталог через FTP.
- Запустите сценарий установки WordPress, открыв URL-адрес в веб-браузере.
Вот и все! Теперь WordPress должен быть установлен.
Установить Элементор
Эта статья посвящена преобразованию темы PSD в WordPress с помощью Elementor. Итак, нам нужен Elementor для настройки и редактирования файла PSD. Давайте тогда посмотрим, как установить Elementor.
Elementor — одна из лучших полных дизайнерских платформ для создания пиксельного идеального дизайна в WordPress. Он лучше всего подходит для расширяемого и удобного для пользователя подхода к дизайну. Процесс установки Elementor также является простой задачей. Просто выполните несколько простых шагов, и вы готовы создать свой PSD в конструкторе страниц Elementor.
Есть два способа установить плагин Elementor. Процесс установки описан ниже,
Через сайт Elementor
- Сначала перейдите на elementor.com и нажмите « Загрузить».
- На панели инструментов WordPress нажмите « Плагины» > «Добавить новый» .
- Нажмите « Загрузить плагин » и выберите файл, который вы загрузили для Elementor.
Через панель управления WordPress
- На панели инструментов нажмите « Плагины» > «Добавить новый».
- В поле «Поиск» введите Elementor и выберите конструктор страниц Elementor для установки.
- После установки нажмите Активировать.
Это все, что вам нужно сделать, чтобы установить конструктор страниц Elementor. Вы также можете просмотреть видео ниже, чтобы узнать больше о процессе установки.
Установить виджеткит
WidgetKit для Elementor — самый продвинутый и мощный набор дополнений Elementor, который расширяет возможности создания вашего веб-сайта, добавляя больше элементов и макетов. Здесь мы используем виджеты и их элементы для преобразования PSD в WordPress.
Вы можете создавать практически любые страницы из PSD, используя WordPress и WidgetKit. Установка Widgetkit так же проста, как создание с его помощью темы PSD для WordPress. Из панели управления WordPress вы можете легко добавить WidgetKit, выполнив несколько простых шагов. Давайте посмотрим,
Установите WidgetKit через панель инструментов WordPress.
- На панели инструментов нажмите « Плагины» > «Добавить новый».
- Введите WidgetKit в поле поиска и выберите WidgetKit для установки Elementor .
- После успешной установки нажмите Активировать .
WidgetKit готов к использованию с Elementor. Если у вас есть путаница, просто следуйте видео. Это также поможет вам в использовании WidgetKit.
Преобразуйте свой PSD в WordPress
Установочная часть завершена. Теперь пришло время конвертировать PSD в WordPress Elementor и WidgetKit. Существует множество поставщиков услуг PSD в WordPress, которые в настоящее время предоставляют PSD в WordPress, а также PSD в Joomla. Однако; вы можете создать свой собственный предпочтительный способ. Здесь мы просто показываем базовый способ преобразования PSD в WordPress.
Кроме того, вы также можете выбрать любую из наших готовых тем и шаблонов из обширной коллекции нашего каталога тем WordPress и плагинов.
Попробуйте следовать последовательности при разработке макета из PSD. Это вам очень поможет,
Создать новую страницу
Первое, что вам нужно сделать, это создать новую страницу из панели инструментов WordPress. В верхней левой части панели инструментов WordPress нажмите « Страницы» > «Добавить новую».
Затем нажмите «Редактировать с помощью Elementor», чтобы войти в Elementor Page Builder. Вы увидите панель Elementor, как показано ниже.
Создайте свою страницу из файла PSD
Чтобы создать страницу или преобразовать тему PSD в WordPress, необходимо учитывать три основных момента; Разделы, столбцы и виджеты. Здесь разделы являются самыми большими строительными блоками и захватывают столбцы. Вы можете размещать виджеты внутри столбцов. Нажав на опцию редактирования, вы можете управлять разделом, столбцом и виджетами с помощью их дескриптора.
Добавить раздел заголовка
Для раздела заголовка здесь мы используем существующую тему Eventia от Themexpert. В WordPress вы должны использовать существующую тему в качестве рамки для разработки шаблона, в противном случае WordPress сам добавит ее для вас. Затем вы можете добавить логотип и несколько страниц, используя существующий дизайн темы или макет.
Добавить раздел героя
Теперь конвертируем раздел героя. Сначала мы добавляем фоновое изображение, как в PSD, затем добавляем столбец в столбец для добавления нескольких материалов и значков.
Для опции счетчика здесь мы используем элемент обратного отсчета WidgetKit. Вывод и вариант редактирования ниже.
Добавить внутреннюю часть
Теперь пришло время спроектировать внутреннюю часть. Здесь мы используем элементы Elementor, чтобы добавить фон и текст между двумя столбцами.
Это раздел «Об этом событии», отредактированный с помощью элемента Elementor. Здесь мы добавляем текст и изображение баннера в колонку раздела. Вид смотрит ниже.
С помощью вертикального значка команды WidgetKit мы создаем раздел динамика PSD-файла. Там мы добавляем изображения и значок социального сайта в другой столбец с именем и обозначением.
В этом разделе мы просто добавим случайную иконку из PSD и дадим заголовок.
Мы не можем сделать все с Elementor. В таком случае, что мы делаем? Мы используем аддон из другой темы или делаем аддон для себя. Это обычное дело при разработке темы PSD для WordPress. Здесь мы используем Schedule Addon из темы Eventia.
Для раздела «Блог» мы используем элемент карусели блога WidgetKit. С другим визуальным контентом вы можете добавить фон, даже кнопку «Читать больше».
Для раздела нижнего колонтитула здесь мы используем существующую тему Eventia от Themexpert, как и перед разделом верхнего колонтитула. Здесь мы получаем несколько значков социальных сетей и кнопку подписки.
Предварительный просмотр и публикация вашей страницы
После того, как вы закончите разработку своей страницы из PSD, вы можете предварительно просмотреть свою работу и опубликовать ее. Вы также можете отредактировать опубликованную страницу и сохранить свою работу как черновик . Это означает, что вы не испортите опубликованную страницу, сохранив свою работу как черновик . Вот предварительный просмотр Eventia PSD.
Заключительное слово
Это все на сегодня, ребята. Надеюсь, вам понравится статья, и вы получите четкое представление о том, как конвертировать PSD в WordPress с помощью конструктора страниц Elementor и WidgetKit. Примените ресурс и, конечно же, не забудьте поделиться своим опытом и ценным мнением в разделе комментариев ниже.