Elementor 및 WidgetKit을 사용하여 PSD를 WordPress로 변환하는 방법
게시 됨: 2019-12-12PSD에서 WordPress로의 변환 솔루션을 찾고 있습니까? 준비된 웹사이트 PSD를 WordPress로 변환하고 싶지만 방법을 모르십니까? 알겠습니다. 이 문제를 도와드릴 수 있습니다.
WordPress가 최근 가장 많이 사용되는 다목적 CMS 플랫폼 중 하나라는 것을 이미 알고 있습니다. 이제 코딩 없이 PSD에서 WordPress 테마까지 모든 기능을 갖춘 웹사이트를 만드는 것은 Elementor와 같은 페이지 빌더로 훨씬 더 편안합니다.
이 기사에서는 "Elementor 및 WidgetKit을 사용하여 PSD를 WordPress로 변환하는 방법" 을 단계별로 보여 드리겠습니다.
방법을 봅시다.
PSD 디자인 선택
PSD를 WordPress 테마로 변환하기 전에 가장 먼저 해야 할 일은 웹사이트의 PSD 디자인을 선택하는 것입니다. 요컨대, PSD는 Photoshop Design의 약자이며, 대부분의 WordPress 웹 사이트 디자인이 생성되는 가장 인기 있는 디자인 도구 중 하나입니다.
광범위한 PSDHUB 컬렉션에서 원하는 PSD 디자인을 선택할 수 있습니다.
개인 및 상업적 용도로 웹사이트를 위한 프리미엄 품질의 무료 PSD 템플릿을 제공합니다. 선택한 PSD 디자인은 단순하고 현대적인 디자인이어야 합니다.
PSD 디자인을 선택할 때 다음 요소를 확인하고,
- 디자인 구조: 가장 먼저 고려해야 할 것은 디자인 구조입니다. 디자인에는 한계가 없지만 코딩에는 한계가 있습니다.
- 깨끗하고 우아한 레이아웃: 세 번째는 선호하는 PSD 디자인이 깨끗하고 우아해야 한다는 것입니다. 그것은 개발자가 깨끗하고 우아한 레이아웃에서 픽셀 완벽한 웹 사이트를 만드는 데 도움이됩니다.
- 목적 달성: 두 번째는 디자인이 목적을 달성했는지 여부입니다. 여행 웹사이트가 필요하다고 가정하고 PSD 디자인은 여행 웹사이트 PSD여야 합니다.
- 복잡성: 마지막으로 디자인 선택 시 PSD의 복잡성을 무시하십시오.
여기에서는 PSDHUB의 Eventia-Conference 및 이벤트 관리 템플릿을 사용합니다.
워드프레스 설치
워드프레스는 설치가 간편하기로 유명합니다. 대부분의 상황에서 WordPress 설치는 매우 간단한 프로세스이며 완료하는 데 5분 미만이 소요됩니다. PSD를 WordPress 테마로 변환하려면 WordPress 설치를 고려해야 하는 두 번째 단계입니다.
WordPress.org는 사이트의 지원 페이지에서 "WordPress 설치 방법"에 대한 자세한 기사를 제공합니다. 하지만; 다음은 WordPress 설치의 기본 지침입니다.
- 먼저 WordPress 패키지를 다운로드하고 압축을 풉니다.
- 웹 서버와 MySQL에 WordPress용 데이터베이스를 만드십시오.
- 웹 서버의 원하는 위치에 WordPress 파일을 업로드합니다.
- WordPress를 도메인 루트에 통합하려면 압축을 푼 WordPress 디렉토리의 모든 콘텐츠를 웹 서버의 루트 디렉토리로 이동하거나 업로드합니다.
- 웹사이트의 자체 하위 디렉터리에 WordPress를 설치하려면 서버에 블로그 디렉터리를 만들고 압축을 푼 WordPress 패키지의 내용을 FTP를 통해 디렉터리에 업로드합니다.
- 웹 브라우저에서 URL에 액세스하여 WordPress 설치 스크립트를 실행합니다.
그게 다야! 이제 WordPress가 설치되어 있어야 합니다.
엘리멘터 설치
이 기사는 Elementor를 사용하여 PSD를 WordPress 테마로 변환하는 방법에 관한 것입니다. 따라서 PSD 파일을 사용자 정의하고 편집하려면 Elementor가 필요합니다. 그럼 Elementor를 설치하는 방법을 알아보겠습니다.
Elementor는 WordPress에서 완벽한 픽셀 디자인을 만드는 최고의 완벽한 디자인 플랫폼 중 하나입니다. 확장 가능한 사용자 친화적인 디자인 접근 방식에 가장 적합합니다. Elementor의 설치 과정도 간단한 작업입니다. 몇 가지 간단한 단계만 수행하면 Elementor 페이지 빌더에서 PSD를 디자인할 준비가 된 것입니다.
Elementor 플러그인을 설치하는 방법에는 두 가지가 있습니다. 설치 과정은 아래에 설명되어 있으며,
Elementor 사이트를 통해
- 먼저 elementor.com 으로 이동하여 다운로드를 클릭합니다.
- WordPress 대시보드에서 플러그인 > 새로 추가 를 클릭합니다.
- 플러그인 업로드 를 클릭하고 Elementor용으로 다운로드한 파일을 선택합니다.
WordPress 대시보드를 통해
- 대시보드에서 플러그인 > 새로 추가를 클릭합니다.
- 검색 필드에 Elementor 를 입력하고 설치할 Elementor 페이지 빌더를 선택합니다.
- 설치 후 활성화를 클릭합니다.
이것이 Elementor 페이지 빌더를 설치하기 위해 해야 할 전부입니다. 또한 아래 비디오를 따라 설치 프로세스에 대해 자세히 알아볼 수 있습니다.
위젯킷 설치
Elementor용 WidgetKit - 더 많은 요소와 레이아웃을 추가하여 웹사이트 구축 기능을 향상시키는 가장 진보되고 강력한 Elementor 애드온 키트입니다. 여기에서 우리는 PSD에서 WordPress로의 변환을 위해 위젯과 요소를 사용합니다.
WordPress와 WidgetKit을 사용하여 PSD에서 거의 모든 종류의 페이지를 만들 수 있습니다. Widgetkit의 설치는 PSD를 WordPress 테마로 디자인하는 것만큼 간단합니다. WordPress 대시보드에서 몇 가지 간단한 단계에 따라 WidgetKit을 쉽게 추가할 수 있습니다. 보자,
WordPress 대시보드를 통해 WidgetKit 설치
- 대시보드 에서 플러그인 > 새로 추가를 클릭합니다.
- 검색 필드에 WidgetKit 을 입력하고 설치할 Elementor용 WidgetKit을 선택합니다.
- 성공적으로 설치한 후 활성화 를 클릭합니다.
WidgetKit은 이제 Elementor와 함께 사용할 준비가 되었습니다. 아직 헷갈리시면 영상을 따라오세요. 이것은 WidgetKit을 사용하는 방법에 대해서도 도움이 될 것입니다.
PSD를 WordPress로 변환
설치 부분이 완료되었습니다. 이제 PSD를 WordPress Elementor 및 WidgetKit으로 변환할 시간입니다. 현재 PSD를 WordPress로, PSD에서 Joomla로의 변환을 제공하는 WordPress 서비스 제공업체에 PSD가 많이 있습니다. 하지만; 원하는 방식으로 디자인할 수 있습니다. 여기에서는 PSD를 WordPress로 변환하는 기본적인 방법을 보여줍니다.
게다가, WordPress 테마 및 플러그인 디렉토리의 광범위한 컬렉션에서 기성품 테마 및 템플릿을 선택할 수도 있습니다.
PSD에서 레이아웃을 디자인할 때 순서를 따르십시오. 이것은 당신에게 많은 도움이 될 것입니다,
새 페이지 만들기
가장 먼저해야 할 일은 WordPress 대시 보드에서 새 페이지를 만드는 것입니다. WordPress 대시보드의 왼쪽 상단에서 페이지 > 새로 추가를 클릭합니다.
그런 다음 Elementor로 편집을 클릭하여 Elementor Page Builder로 들어갑니다. 아래와 같이 Elementor 패널이 표시됩니다.
PSD 파일에서 페이지 구축
페이지를 만들거나 PSD를 WordPress 테마로 변환하려면 고려해야 할 세 가지 주요 사항이 있습니다. 섹션, 열 및 위젯. 여기서 섹션은 가장 큰 구성 요소이며 열을 캡처합니다. 열 내부에 위젯을 배치할 수 있습니다. 편집 옵션을 클릭하면 핸들로 섹션, 열 및 위젯을 제어할 수 있습니다.
헤더 섹션 추가
여기 헤더 섹션의 경우 Themexpert의 기존 Theme Eventia를 사용합니다. WordPress에서 템플릿을 디자인하기 위한 프레임으로 기존 테마를 사용하고 그렇지 않으면 WordPress 자체에서 하나를 추가합니다. 그런 다음 기존 테마 디자인이나 레이아웃을 사용하여 로고와 여러 페이지를 추가할 수 있습니다.
영웅 섹션 추가
이제 영웅 섹션을 변환합니다. 먼저 PSD와 같은 배경 이미지를 추가한 다음 여러 콘텐츠와 아이콘을 추가하기 위해 열에 열을 추가합니다.
여기에서 카운터 옵션의 경우 WidgetKit Countdown 요소를 사용합니다. 출력 및 편집 옵션은 다음과 같습니다.
내부 섹션 추가
이제 내부 섹션을 디자인할 차례입니다. 여기서는 Elementor 요소를 사용하여 두 열 사이에 배경과 텍스트를 추가합니다.
이것은 Elementor 요소를 사용한 이 이벤트 정보 섹션 편집입니다. 여기에서 섹션 열 내에 일부 텍스트와 배너 이미지를 추가합니다. 아래에서 내려다본 모습입니다.
WidgetKit 팀 수직 아이콘을 사용하여 PSD 파일의 스피커 섹션을 디자인합니다. 거기에서 이름과 명칭이 있는 다른 열에 이미지와 소셜 사이트 아이콘을 추가합니다.
이 섹션에서는 PSD에서 임의의 아이콘을 추가하고 헤드라인을 지정합니다.
Elementor로 모든 것을 만들 수는 없습니다. 이 경우 우리는 무엇을합니까? 우리는 다른 테마의 애드온을 사용하거나 자체 애드온을 만듭니다. 이것은 WordPress 테마에 PSD를 디자인할 때 일반적인 것입니다. 여기에서는 Eventia 테마의 스케줄 애드온을 사용합니다.
블로그 섹션의 경우 WidgetKit의 블로그 캐러셀 요소를 사용합니다. 다른 콘텐츠 비주얼로 배경을 추가할 수도 있습니다. 더 보기 버튼도 읽을 수 있습니다.
여기 바닥글 섹션의 경우 헤더 섹션 이전과 마찬가지로 Themexpert의 기존 Theme Eventia를 사용합니다. 여기에 여러 소셜 사이트 아이콘과 구독 버튼이 있습니다.
페이지 미리보기 및 게시
PSD에서 페이지 디자인을 완료하면 작업을 미리 보고 게시 할 수 있습니다. 게시된 페이지를 편집하고 작업을 초안 으로 저장할 수도 있습니다. 즉, 작업을 초안 으로 저장하는 동안 게시된 페이지가 손상 되지 않습니다 . Eventia PSD 미리보기 영상입니다.
마지막 단어
오늘은 여기까지입니다. 이 기사를 즐기고 Elementor 페이지 빌더와 WidgetKit을 사용하여 PSD를 WordPress로 변환하는 방법에 대한 명확한 아이디어가 있기를 바랍니다. 리소스를 적용하고, 물론 아래의 댓글 섹션에서 경험과 귀중한 의견을 공유하는 것을 잊지 마십시오.