필수 그리드: 자세한 개요 및 검토

ThemePunch는 WordPress에서 가장 인기 있는 플러그인을 만듭니다. Essential Grid는 Slider Revolution과 함께 라이브러리에서 최고 수입원 중 하나입니다 . 시간이 지남에 따라 Essential Grid는 CodeCanyon에서 가장 인기 있고 성공적인 플러그인 중 하나가 되었습니다. 그래서 우리는 플러그인을 강조하고 사람들이 이것이 사이트를 개선할 수 있는 것인지 결정할 수 있도록 하고 싶었습니다.

필수 그리드

그리드 플러그인은 드문 일이 아닙니다. 사실, 우리의 Divi 빌더에는 이러한 목적을 위한 포트폴리오 모듈이 있습니다. 그러나 Essential Grid는 대부분의 다른 그리드 플러그인이 수행한 것 이상입니다. 따라서 많은 테마에 자체 사용자 지정 그리드 템플릿이 포함된 후에도 사람들은 여전히 ​​매일 EG 라이선스를 구매하고 있습니다.

원래 판매 광고 문구를 사용하면 EG로 무엇을 할 수 있는지 알 수 있습니다.

Essential Grid Gallery는 사용자 정의가 가능한 갤러리 그리드에 다양한 콘텐츠 형식을 표시할 수 있는 WordPress용 프리미엄 플러그인입니다. 가능한 응용 프로그램은 포트폴리오, 블로그, 갤러리, WooCommerce 상점, 가격표, 서비스, 제품 슬라이더, Instagram, YouTube, 사용 후기 및 상상할 수 있는 모든 것입니다.

그러나 그들의 광고가 당신에게 말하지 않는 것은 단지 그 모든 사용자 정의가 무엇으로 구성되어 있는지입니다. 그것이 우리의 일이며 우리는 그렇게 할 계획입니다. 그럼 모든 소란이 무엇인지 파고 들어 봅시다.

시작하기

우선, 이것은 프리미엄 플러그인이라는 것을 기억하십시오. CodeCanyon으로 이동하여 $27 USD에 다운로드해야 합니다. 그런 다음 수동 설치 프로세스( 플러그인 – 새로 추가 – 업로드 )를 진행합니다. 이 시점에서 WordPress 관리 대시보드에 Ess라는 3개의 새 항목이 있습니다 . 그리드 , 펀치 글꼴 및 Ess. 그리드 예시 게시물 . 먼저 간단한 Ess를 살펴보겠습니다 . 그리드 .

첫 번째 메뉴 항목은 활성화 코드를 입력하고 업데이트, 변경 로그 등을 확인하는 곳입니다. 그들은 플러그인을 사용하는 방법에 대한 간단한 지침을 제공합니다. 즉, 단축 코드를 사용하거나 위젯을 사이드바로 드래그합니다.

이 페이지는 사용하려는 새 그리드를 생성할 수 있는 곳이기도 하므로 해당 버튼을 클릭하는 데 익숙해지십시오.

아이템 스킨 에디터

항목 스킨 편집기 아래에는 Essential Grid와 함께 제공되는 모든 기본 템플릿이 있습니다. 스킨별로 편집하여 원하는 대로 변경할 수 있습니다. 또는 그대로 사용합니다. 처음부터 직접 만들 수도 있습니다.

여기에서 EG는 다양한 유형의 그리드 항목에 대해 탭을 통해 정렬하는 옵션을 제공합니다. (짝수 간격, Masonry 디자인, 게시물 또는 WooCommerce 제품 그리드.) 각 항목 위에 마우스를 올리면 녹색 톱니바퀴 아이콘 을 클릭하여 사용자 정의할 수 있는 제목, 발췌문, 색상 오버레이 등을 애니메이션으로 표시하고 표시 합니다 .

이 옵션 패널 내에서 모든 단일 요소를 편집할 수 있습니다. 요소 사이의 간격, 표시되는 아이콘, 애니메이션 스타일 및 지속 시간, 링크, 그림자, 미디어 유형 및 맞춤, 모든 것.

Essential Grid에는 원하는 대로 조작할 수 있는 일반 보기의 CSS 클래스가 있다는 사실에 주의를 기울이고 싶습니다. 어떤 이유로 여기 옵션에서 완벽한 디자인 옵션을 찾을 수 없는 경우 사용자 정의 CSS를 통해 직접 추가할 수 있습니다.

페이지 하단에서 액세스할 수 있는 모든 레이어와 현재 스타일이 지정되는 방식을 한눈에 볼 수 있습니다.

메타 데이터 및 검색 설정

스킨 편집기는 아마도 Essential Grid의 가장 강력한 개별 부분이지만 EG는 다른 곳에서 이러한 옵션을 회피하지 않습니다. 플러그인에서 필요할 수 있는 사용자 정의 기능을 위한 상자를 배치하는 옵션을 제공하는 메타 데이터 처리 아래에서 사용자 정의 메타 상자를 생성할 수 있습니다.

검색 설정 에서 거의 동일한 작업을 수행할 수 있지만 (추측한) 검색에 대해 수행할 수 있습니다. EG는 검색 결과 페이지로도 작동하므로 일반적인 아카이브 및 이러한 모양이 마음에 들지 않으면 빠르게 수정할 수 있는 좋은 방법입니다.

전역 설정

들리는 것처럼 전역 설정 은 모든 기지를 다룹니다. 그리드를 변경하고 편집할 수 있는 사람, 글꼴 및 JavaScript 로드 방법, 캐싱을 위해 수행하는 작업, 아이콘을 가져오는 위치, 그리드 요소의 기본 이미지 설정 등에 대한 권한을 설정할 수 있습니다. skin-only와 같은 단일 요소가 아닌 전체 플러그인에 적용되는 경우 여기에서 찾을 수 있습니다. 인상적인 부분은 제어 기능입니다. 많은 플러그인에서 사용하는 쿼리 종류를 선택할 수 있는 옵션을 제공하지 않지만 EG를 사용하면 get_posts() 또는 WP_Query() 가 사이트에 가장 적합한지 선택할 수 있습니다. 그게 무슨 뜻인지 모르니 그냥 기본값으로 두세요.

수입 수출

플러그인을 처음 설정할 때 가져오기/내보내기 페이지를 반드시 확인해야 합니다. 전체 데모 데이터 가져오기 및 소셜 미디어 데모 그리드 가져 오기 를 클릭하면 시작할 수 있는 방대한 초기 템플릿이 있습니다. 그것들도 훌륭하므로 버튼을 클릭하기만 하면 가져오기/다운로드가 거의 즉시 수행됩니다.

가져온 그리드는 Ess로 다시 이동할 때 목록 맨 아래에 나타납니다 . 그리드 . 새로운 그리드 라이브러리가 그곳에서 만나실 수 있습니다.

에스. 그리드 예시 포스트

새로운 관리 메뉴 옵션의 두 번째는 Ess입니다. 그리드 예시 게시물 . 메뉴 제목을 지정하는 것은 이상한 선택입니다. 템플릿화된 그리드 항목이 있을 위치이기 때문입니다. 이 페이지에 나열된 모든 게시물은 실제로 Ess 아래의 그리드에 포함된 상자의 내용입니다 . 그리드 개요.

그리드를 표시하려는 게시물이나 페이지의 개요 페이지에서 얻은 단축 코드를 사용하면 팝업되는 개별 항목입니다.

새 그리드에 대한 게시물을 만드는 것도 쉽습니다. 다른 유형의 새 게시물을 추가하는 것과 동일하게 작동합니다. 이 제목 아래에 있는 새로 추가 버튼을 누르고 매개변수를 설정하기만 하면 됩니다.

저장된 필수 그리드 사용

템플릿을 사용하든 직접 만들든 템플릿 사용 방법을 알아야 합니다. Essential Grid를 사용하면 모든 것이 단축 코드를 중심으로 이루어집니다. 계속해서 사용하려는 특정 그리드가 있는 경우 Ess 에서 Create New Ess Grid 를 클릭해야 합니다 . 관리자 패널의 Grid 개요 페이지. 내부에서 그리드의 항목을 정렬하는 방법, 그리드에 포함된 로딩 애니메이션, 요소의 실제 출처, 이름 지정 등 모든 것을 선택합니다.

이름을 지정할 때 단축 코드 별칭도 선택할 수 있습니다. 해당 별칭은 Essential Grid 단축 코드를 사용하여 이 특정 그리드를 호출하는 데만 사용됩니다. 또한 미래에 외부 조정을 하고 싶은 경우를 대비하여 CSS ID에 동일한 ID를 사용하기로 했습니다.

다음에는 게시물이나 페이지의 텍스트 편집기에 단축 코드를 입력하기만 하면 됩니다.

그리고 짜잔!

독특한 필수 그리드 사용

한 페이지나 한 게시물에 무언가를 표시해야 한다는 것을 안다면 완전히 새로운 그리드를 설정하고 해당 콘텐츠에 대한 새 게시물을 템플릿으로 만들고 별칭 등을 만드는 수고를 겪을 이유가 없습니다. 저것. 대신 게시물 편집기 자체에서 동적 단축 코드를 생성할 수 있습니다. 도구 모음에서 Essential Grid Shortcode Creator 버튼을 누르기만 하면 됩니다.

그런 다음 이 단축 코드에 렌더링할 콘텐츠를 알려주는 단계를 거쳐야 합니다. 개요 메뉴에서 미리 정의된 것 중 하나를 선택하거나(짧은 코드를 수동으로 복사/붙여넣기할 필요 없이), 제공된 옵션을 기반으로 직접 만들 수 있습니다.

페이지를 살펴보고 다른 곳에 있는 것과 동일한 옵션(애니메이션, 레이아웃 등)을 모두 선택하고 준비가 되면 Shortcode 생성 버튼을 누릅니다.

보시다시피 동적으로 생성되는 단축 코드는 그리드 자체에 대한 모든 정보를 담고 있기 때문에 훨씬 더 복잡합니다.

그러나 렌더링되면 차이가 없습니다. 특히 생성하는 동안 스킨을 적용하기로 선택한 경우.

필수 그리드 위젯

마지막으로 위젯에 생성한 필수 그리드를 넣을 수 있는 옵션이 있습니다. 이것은 말 그대로 드래그 앤 드롭이기 때문에 설정하기가 다른 것보다 쉽습니다. 모양 – 위젯 으로 이동하여 Essential Grid 위젯을 선택하고 렌더링하려는 위치로 끕니다. 홈페이지에서만 원하는 경우 설정하거나 미리 만들어진 그리드를 선택할 수 있습니다. 그러나 위와 같은 방법으로 동적 그리드를 만들 수는 없습니다. 이는 미리 생성되어야 합니다.

그러나 명심해야 할 것은 모든 레이아웃이 사이드바에서 보기에 좋지 않다는 것입니다. 콘텐츠 중 일부가 매우 이상하게 렌더링될 수 있지만 놀라지 마십시오. 그런 일이 발생하면 설정을 변경하여 다르게 표시되도록 하십시오. 전체 화면 대신 상자가 표시되거나 Masonry 대신 Even이 표시될 수 있습니다. 원하는 대로 보일 때까지 실험하십시오. 이를 위해 사이드바별 그리드를 만드는 것이 좋습니다. (원하는 것을 복제하고 원본 대신 수정할 수 있습니다.)

펀치 글꼴

마지막으로 Essential Grid를 통해 얻을 수 있는 마지막 사용자 지정 기능이 있습니다. Punch Fonts 는 EG에서 Google 글꼴을 사용하기 위한 간단한 인터페이스입니다. 그게 다야

제목이 좋은 새 글꼴 추가 버튼을 눌러 설치할 글꼴을 선택할 수 있습니다. 모달에 있는 Google 글꼴 링크를 따라가면 필요한 매개변수를 찾을 수 있으며 플러그인이 글꼴을 사이트로 가져옵니다.

그리고 tp- moniker가 내부 전용이라는 것은 기본적으로 이전 별칭과 동일하다는 의미입니다. 글꼴을 사물에 적용할 때 알 수 있습니다. 따라서 적절하게 이름을 지정하십시오.

마지막 생각들

전반적으로 Essential Grid는 가장 강력하고 강력한 그리드 플러그인 중 하나입니다. Slider Revolution을 사용한 적이 있다면 레이아웃과 레이어가 이와 매우 유사하게 작동하며 집에 있는 것처럼 느껴질 것입니다. 그렇지 않은 경우 어떤 부분이 서로 맞는지 알아낼 때 약간의 학습 곡선이 있을 수 있습니다. 그러나 일단 그렇게하면 진정으로 아름다운 페이지를 만들 수 있습니다.

이 수준의 사용자 지정이 필요하지 않은 경우 프리미엄 가격을 지불하고 싶지 않을 수 있습니다. 필요에 맞는 다른 그리드 플러그인이 많이 있습니다. 또한 그리드의 무게에 따라 사이트 속도가 문제가 될 수 있습니다. 이유가 있어 로딩 애니메이션을 사용자 정의할 수 있습니다.

그러나 필요하고 올바르게 완료되면 플러그인이 정말 빛납니다. Essential Grid가 해당 카테고리에서 1위 판매자인 이유가 있습니다. 그리고 평점과 지원 스레드를 확인하면 테마펀치가 빠르게 답장하고 도와드립니다.

따라서 $27의 가격은 아마도 입장료의 가치가 있을 것입니다. 또한 테마 디자이너인 경우 확장 라이선스를 구입하여 자신의 테마에 대한 팩인으로 포함할 수 있습니다. 꽤 멋지다.

에센셜 그리드를 사용하십니까? 댓글에서 여러분의 작품을 감상해 봅시다!

Bloomicon/Shutterstock.com의 기사 특집 이미지