WordPress에서 SiteOrigin 페이지 빌더를 사용하는 방법

다른 WordPress 페이지 빌더와 마찬가지로 SiteOrigin은 CSS와 코딩 지식이 전혀 없는 강력하고 반응이 빠른 웹사이트를 구축하는 데 도움이 됩니다. 무료 및 Pro 페이지 빌더 플러그인뿐만 아니라 사용할 수 있는 몇 가지 테마(무료 및 프리미엄 모두)가 있습니다.

SiteOrigin의 Pro 버전을 테스트하고 랜딩 페이지를 구축했습니다. 끌어서 놓기 기능이 제공되며 모든 테마와 함께 작동하며 모든 무료, Pro 및 WordPress 위젯을 동시에 사용할 수 있습니다. 이 기사를 읽고 WordPress를 사용한 SiteOrigin 설치 및 구성에 대해 자세히 알아보겠습니다.

SiteOrigin 페이지 빌더를 선택하는 이유는 무엇입니까?

사이트 구축은 Classic과 Gutenberg 모두에게 친숙한 WordPress Editor의 도구 모음에서 시작됩니다. 소량의 출력 코드를 생성하고 부풀려지지는 않지만 출력 코드의 모든 라인은 가능한 한 한 페이지 빌더에 최적화되어 있습니다.

프론트 엔드 빌더가 없기 때문에 변경한 모든 사항을 실시간으로 미리 볼 수 있습니다.

또한 이력을 쉽게 확인하고 수행한 작업에 만족하지 않으면 이전 디자인으로 되돌릴 수 있습니다. 또한 다른 페이지 빌더와 마찬가지로 평소와 같이 행과 위젯을 사용합니다.

SiteOrigin 페이지 빌더의 기능

SiteOrigin의 무료 버전에는 "위젯" 옵션이 상당히 제한되어 있지만 Pro 버전에는 사이트를 쉽게 구축할 수 있는 유용한 추가 위젯이 많이 있습니다.

사용자 정의 포스트 유형 빌더

SiteOrigin의 가장 인기 있고 유용한 기능 중 하나는 재사용 가능한 Page Builder 레이아웃과 WooCommerce 템플릿이 있는 Custom Post Type Builder입니다. 다른 도구들과 조금 다른데 사용법에 대해서는 조금 더 자세히 설명드리겠습니다.

SiteOrigin에서 사용자 정의 포스트 유형 템플릿을 생성하기 위해 따라야 할 중요한 단계가 있습니다.

1 단계

새로운 사용자 정의 게시물 유형을 추가하고, Page Builder를 사용하여 게시물 유형 레이아웃을 구축하고, 게시물 유형 표시 설정을 선택해야 합니다.

WordPress 대시보드에서 도구 → 게시물 유형으로 이동하고 새 버튼 추가를 클릭하고 이름을 포트폴리오로 지정합니다. 이제 텍스트 및 시각적 탭 옆에 있는 페이지 빌더 탭을 클릭하고 페이지 빌더 위젯 추가 및 행 추가 버튼을 사용하여 포트폴리오 사용자 정의 포스트 유형 레이아웃을 빌드하십시오.

템플릿에 추가하는 모든 콘텐츠는 향후 게시되는 모든 포트폴리오 게시물에 표시됩니다. 따라서 클릭 유도문안, 뉴스레터 구독, 내 소개, 사용 후기 등과 같은 각 페이지에 특정 콘텐츠 블록을 표시하려는 경우 매우 유용합니다.

2 단계

생성한 사용자 정의 게시물 유형에 콘텐츠를 추가하는 방법을 알아야 합니다.

사용자 정의 게시물 유형 포트폴리오를 생성하면 WordPress 대시보드의 왼쪽 사이드바에서 포트폴리오 항목을 볼 수 있습니다. 그것을 클릭 한 다음 새로 추가를 클릭하십시오.

포트폴리오 항목의 이름을 지정하면 해당 항목에 콘텐츠를 추가할 수 있습니다. 전역 템플릿의 일부가 아닌 위젯만 편집할 수 있으며 해당 위젯은 읽어주기 텍스트로 표시됩니다. 마지막으로 해당 게시물을 게시물 캐러셀 또는 게시물 루프 위젯에 추가하는 방법입니다.

포스트 루프 위젯

SiteOrigin에는 포스트 루프 위젯이 포함되어 있지만 활성 테마 내의 루프 템플릿에 의존합니다.

포스트 루프 위젯을 삽입하려면 페이지 또는 포스트에 표시할 행을 추가하고 블로그 또는 그리드 레이아웃을 선택하면 완료됩니다. 다음으로 Build post query 버튼을 클릭하여 표시할 위젯을 선택해야 합니다.

마지막 단계에서 쿼리 빌더 위젯 상단의 게시물 유형 드롭다운에서 사용자 정의 게시물 유형을 클릭합니다.

포스트 캐러셀에서 하고 싶다면 포스트 루프 대신 포스트 캐러셀 위젯을 선택하는 것만 다를 뿐 나머지 절차는 동일합니다.

WooCommerce 템플릿 빌더

WooCommerce 템플릿을 사용하면 아름다운 WooCommerce 특정 페이지와 단일 제품 시각적 모양을 만들 수 있습니다. WooCommerce 템플릿 빌더 인터페이스는 7개의 탭으로 구분됩니다.

1. 제품
2. 제품 아카이브
3. 가게
4. 카트
5. 빈 카트
6. 점검
7. 내 계정

WooCommerce의 경우 단일 제품을 구축하는 데 필요한 모든 실제 개별 항목을 위젯으로 배포하여 제품을 쉽게 만들 수 있습니다. 레이아웃을 만들고 가격, SKU, 장바구니에 추가, 짧은/긴 설명, 제품 이미지, 제목 등과 같은 WooCommerce 위젯을 사용할 수 있습니다.

또한 WooCommerce Upsell 기능을 자유롭게 사용할 수 있는 제품 상향 판매를 위한 매우 유용한 위젯이 하나 있습니다. 그러나 이러한 위젯 및 WooCommerce 페이지의 디자인은 테마 CSS에 의해 설정되며 CSS를 사용하여 편집할 수 있습니다.

지도, 아코디언, CTA, 탭, 소셜 위젯, 캐러셀 등과 같은 다른 위젯은 일반적입니다.

Pro 구독을 사용하면 Pro Page Builder뿐만 아니라 모든 Pro 기능, 프리미엄 테마, CSS 및 위젯에 액세스할 수 있습니다.

SiteOrigin 페이지 빌더의 가격 및 계획

SiteOrigin은 두 가지 가격 모델을 제공합니다. 첫 번째이자 가장 유용한 것은 3개의 패키지로 제공되는 연간 구독입니다.

• $29의 가격으로 한 사이트당 싱글
• $49의 가격으로 최대 5개 사이트를 위한 비즈니스
• $99의 가격으로 무제한 사이트용 개발자

또한 구독이 아니라 1년의 업데이트 및 지원을 제외하고 모든 것이 동일한 단일 년 라이선스가 있습니다.

• $38의 가격으로 한 사이트를 위한 싱글
• $64의 가격으로 최대 5개 사이트를 위한 비즈니스
• $128의 가격으로 무제한 사이트용 개발자

SiteOrigin의 시스템/호스팅 요구 사항

SiteOrigin의 시스템 요구 사항을 찾는 것이 조금 어렵지만. 일부 지원 포럼 및 온라인 의견에 따르면 PHP 메모리가 512MB 이상인 PHP 7.4가 트릭을 수행할 것으로 보입니다. 그러나 테스트 목적으로 2GB PHP 메모리와 함께 VultrHF를 사용했습니다.

물론 최신 WordPress 버전과 다른 모든 플러그인이 최신 상태여야 합니다.

SiteOrigin 페이지 빌더 설치 및 구성

설치 및 구성과 관련하여 SiteOrigin은 대부분의 페이지 빌더가 제공하지 않는 흥미로운 것을 제공합니다.

WordPress의 모든 것은 Repository에서 직접 무료 SiteOrigin을 설치한 다음 SiteOrigin 계정에서 다운로드한 Pro 버전을 업로드해야 합니다. 설치가 완료되면 단계에 따라 권장 플러그인을 설치/활성화합니다.

플러그인 번들을 성공적으로 설치했으면 필요한 라이선스와 위젯을 활성화해야 합니다. 라이선스의 경우 바로 활성화해야 하고 위젯의 경우 지금 또는 나중에 필요할 때 활성화할 수 있습니다.

SiteOrigin의 장점은 필요하지 않은 위젯을 활성화할 필요가 없고 그렇게 함으로써 일부 리소스를 절약하고 필요한 옵션만 작동할 수 있다는 것입니다. 파란색 위젯은 활성 상태이고 회색 위젯은 비활성 위젯입니다.

완료되면 SiteOrigin 페이지 빌더를 사용하여 사이트 구축을 시작할 수 있습니다. 페이지 → 새로 추가로 이동하고 드롭다운 화살표를 클릭하면 SiteOrigin 페이지 빌더 및 블록 편집기로 새 페이지 추가 → SiteOrigin 페이지 빌더를 선택하라는 메시지가 표시됩니다.

개인적으로 프론트엔드 빌더 시대에 백엔드 페이지 빌더의 열렬한 팬은 아닙니다. 그러나 이는 더 적은 리소스를 소비하고 서버에 더 가볍다는 것을 의미합니다. 일반적으로 건축업자만큼 배고프지 않습니다.

이것이 페이지 빌더가 실제로 유용한 라이브 편집 모드에서 보이는 방식입니다. 백엔드 편집기는 변경 사항을 확인하기 위해 매번 미리보기를 눌러야 하기 때문에 상당히 어렵고 시간이 많이 걸립니다.

편집 페이지를 클릭하면 백엔드 편집기 내부로 이동하게 됩니다. 거기에서 도구 모음에서 라이브 편집기를 클릭하기만 하면 됩니다.

왼쪽에는 실제로 사이트를 구축하고 있는 사용자 지정 프로그램과 유사한 사이드바가 있으며 오른쪽에는 변경 사항이 적용된 후 변경 사항을 표시하기 위해 보기가 다시 로드됩니다.

사이트에서 직접 끌어서 놓기를 지원하지 않지만 왼쪽 사이드바 사용자 지정 프로그램을 통해 모든 작업을 수행해야 합니다.

왼쪽 상단 모서리에 4개의 항목이 있는 도구 모음이 표시됩니다. 왼쪽에서 오른쪽으로 다음을 수행합니다.

톱니바퀴 아이콘은 생성한 행에 삽입할 수 있는 사용 가능한 위젯을 엽니다. 같은 장소에서 WordPress 위젯과 SiteOrigin 위젯을 모두 볼 수 있습니다. 그러나 왼쪽에서 선택하여 WordPress만 보거나 SiteOrigin만 볼 수도 있습니다.

다음 아이콘은 새로운 행을 추가하는 Burger이며 행 레이아웃을 선택하는 순간입니다. 나중에 언제든지 레이아웃을 변경할 수 있으므로 걱정하지 마십시오.

레이아웃 아이콘을 클릭하면 실제로 기존 레이아웃을 가져오거나 내보내는 옵션이 열립니다. 내가 알아차린 것은 SiteOrigin에 더 많은 레이아웃과 더 현대적인 디자인이 부족하다는 것입니다. 또한 이 도구에서 이미 생성한 기존 페이지를 복제하거나 섹션/블록을 미러링할 수 있습니다.

마지막 아이콘은 기록으로, 결과가 마음에 들지 않거나 단순히 실수를 한 경우 수행한 작업을 되돌릴 수 있는 곳입니다.

Cloudways의 SiteOrigin 페이지 빌더 성능

예상대로 SiteOrigin은 코드에 부풀려진 부분이 많지 않고 매우 간단하기 때문에 매우 훌륭하게 수행됩니다. 이는 동시에 장점이자 단점입니다. 우리는 이미지 최적화를 전혀 하지 않았다는 것을 언급해야 합니다.

– GTMetrix의 SiteOrigin 결과

– Pingdom 도구에서 SiteOrigin의 결과

– WebPageTest의 SiteOrigin 결과

SiteOrigin 페이지 빌더 사용자 리뷰

플러그인을 설치하기 전에 항상 확인해야 하는 것 중 하나는 WordPress.org 플러그인 저장소에 대한 리뷰와 평가입니다. SiteOrigin의 경우 지금까지 922개의 별 5개 등급이 있으며 최근 리뷰는 굉장합니다.

요약

간단한 웹사이트나 방문 페이지를 구축하기 위해 가벼운 도구가 필요한 경우 SiteOrigin이 완벽한 선택이 될 수 있습니다. 단점은 머리글 및 바닥글 작성기를 제공하지 않으므로 사이트의 머리글 및 바닥글을 편집할 수 있는 테마가 필요하다는 것입니다.

학습 곡선은 가파르고 WordPress에 대한 이전 경험과 위젯 및 요소에 대한 이해가 필요합니다. 프론트 엔드 편집기가 없다는 것도 초보자에게는 제한 요소이며 최종 결과를 멋지게 보이게 하려면 약간의 CSS 지식과 기술이 필요합니다. 그러나 개발자 입장에서는 초보자에게 그다지 직관적이지는 않지만 대부분의 기능이 상당히 편리합니다.

SiteOrigin 주변의 생태계는 다른 페이지 빌더만큼 크지 않지만 무료 버전의 경우 100만 개의 활성 설치가 있고 위젯 번들의 경우 900.000개가 있으며 일부 외부 애드온 작성자는 30.000+ 활성 설치.