전체 테마로 구텐베르크에서 영웅 웹 사이트 섹션을 만드는 방법

Total WordPress 테마에는 비즈니스 웹사이트에 필요할 수 있는 모든 도구가 포함되어 있습니다.

테마는 WordPress Customizer를 통한 시각적 편집과 빠른 데모 데이터 가져오기를 제공하며, 이는 특히 뛰어난 첫 페이지를 구축하는 데 도움이 됩니다.

보시다시피 Total의 무료 버전은 추가 WordPress 페이지 빌더로 사용자를 잠그지 않고 웹사이트를 디자인할 수 있는 WordPress 고유의 방법을 제공합니다.

블록 기반 WordPress 편집기인 Gutenberg가 출시되면서 Total을 포함한 모든 WordPress 테마를 훨씬 더 사용자 정의할 수 있습니다. 콘텐츠 요소(블록)를 선택하면 WordPress 코어에서 이전에 볼 수 없었던 사용자 정의의 자유를 부정하기 어렵습니다.

그러나 일부 블록 스타일 설정은 기본 편집기에서 여전히 매우 제한적입니다. 따라서 새로운 Gutenberg 편집기와 Total 에서 더 나은 콘텐츠를 만들고 디자인하려는 경우 이 자습서에서 몇 가지 유용한 팁을 찾을 수 있습니다.

좀 더 정확하게 말하자면, 이 포스트에서는 Gutenberg에서 Hero, subhero, call-to-action 섹션과 같은 중요한 웹사이트 요소를 구축하고 사용자 정의하는 방법에 대한 몇 가지 예를 보여드리고자 합니다. 일반적으로 비즈니스를 돕는 사람들:

• 소개/환영 웹사이트 섹션 만들기
• 주요 제품 또는 이벤트 홍보
• 특정 포트폴리오 항목 또는 서비스 등에 중점을 둡니다.

Gutenberg의 사용자 정의 가능성을 강화 하기 위해 Total 테마 사용자에게 권장되는 Getwid WordPress Blocks 플러그인을 사용합니다. 일부 Total 사용자는 이미 Getwid를 사용해 보았을 것입니다.

그러나 Getwid가 무엇인지 궁금하신 분들을 위해 다음은 간략한 설명입니다.

간단히 말해서, 이것은 지금까지 가장 큰 프리미엄급 블록 라이브러리와 구텐베르크를 위한 픽 앤 페이스트 맞춤형 디자인 컬렉션과 함께 제공되는 무료 구텐베르크 네이티브 애드온입니다. 우리가 그것을 추천하는 유일한 이유는 아닙니다.

우리는 이 플러그인을 특히 좋아합니다. 기본 Total 스타일과 잘 조화되고 필요하지 않은 블록을 끌 수 있고 기능이 풍부하기 때문입니다.

Total을 활성화하면 플러그인이 권장 플러그인으로 나타납니다. 이는 고객에게 적합한지 확인하기 위한 임시 솔루션입니다.

그러나 그것이 당신의 해결책인지 확인하기 위해 스스로 시도해야 합니다. 그동안 우리가 만든 예제를 살펴보겠습니다.

Total에서 Getwid로 만든 영웅 및 클릭 유도문안 섹션 예

우리는 Total 테마의 무료 버전에서 이러한 테스트 실행을 수행했으며 거의 ​​제한이 없다고 안전하게 말할 수 있습니다.

그러나 전체 웹 사이트 컨테이너 너비 옵션은 제한되어 있으므로 전체 화면 몰입형 레이아웃을 찾고 있다면 Total Plus를 고려해 볼 수 있습니다.

우선 Getwid WordPress 블록 의 Section 블록 을 거의 항상 사용해야 합니다. 다른 블록을 얼마든지 처리할 수 있는 컨테이너입니다. 따라서 영웅 섹션은 모든 종류의 콘텐츠를 표시할 수 있습니다.

섹션 컨테이너의 또 다른 눈에 띄는 점은 이미지, 색상, 비디오(WP 미디어 라이브러리 또는 YouTube), 다중 색상 그라디언트 등 다양한 배경 유형을 제공한다는 것입니다.

따라서 섹션 블록으로 웹 사이트 영역을 디자인할 때의 주요 작업은 다음과 같습니다.

• 배경 유형을 선택하고 사용자 정의하여 그 위에 있는 콘텐츠가 읽기 쉽고 명확하게 유지되도록 합니다.
• 원하는 순서대로 필요한 블록을 삽입하십시오.
• 간격을 조정합니다(비주얼 빌더에서 내부 및 외부 공간을 설정하는 것처럼 끌 수 있는 각도가 있음).
• 선택 사항: 애니메이션, 모양 구분선 및 기타 장식 요소를 추가합니다.

이제 예를 들어 보겠습니다.

예 1. 제품 쇼케이스

이 예의 모든 블록은 Section 블록 안에 배치됩니다.

1. 고급 제목
2. 고급 제목
3. 고급 제목
4. 버튼 그룹
5. 섹션 배경: 이미지(위치 지정 > 오른쪽 상단, 크기 > 자동)

제목 블록을 사용하면 모든 Google 글꼴, 텍스트 크기, 글꼴 두께 등을 사용할 수 있습니다. 버튼(채우기 또는 윤곽선)에도 여러 스타일이 있습니다.

발생할 수 있는 가장 큰 문제는 올바른 배경 이미지를 찾고 뷰포트에 따라 자동으로 크기가 조정되기 때문에 적절한 이미지 위치를 선택하는 것입니다.

실시예 2. 포트폴리오 추출물

모든 블록은 섹션 블록 안에 배치됩니다.

1. 고급 제목
2. 고급 제목
3. 3열(단락, 이미지, 이미지, 이미지)
4. 섹션 배경: 그라데이션

클릭 유도문안 버튼을 배치하여 전체 포트폴리오 페이지로 연결할 수도 있습니다.

예 3. 기능 또는 이벤트 카드

이러한 영웅 섹션에서는 제품, 이벤트, 서비스, 사물, 사람 등을 선보일 수 있습니다.

고급 제목 블록을 사용하면 글꼴을 선택할 수 있습니다.

이 예에서는 그라데이션 배경과 배경 하단 모양 구분선(Waves Multilayered)을 사용했습니다.

1. 두 개의 고급 제목
2. 절
3. 단추
4. 영상
5. 섹션 배경: 그라디언트 + 모양 구분선

예 4. 클릭 유도문안 섹션

다시 섹션 블록으로 시작해야 합니다. 아래 예와 같이 제목을 배치하려면 Getwid 템플릿 라이브러리의 템플릿을 사용하거나 처음부터 패턴을 생성할 수 있습니다.

배경 이미지, 몇 가지 제목 및 중앙 집중식 버튼이 있는 매우 쉬운 섹션입니다.

1. 3개의 고급 제목 블록
2. 버튼 블록
3. 섹션 배경: 불투명도가 있는 이미지(크기 > 표지)

또한 드래그 가능한 각도로 콘텐츠 정렬을 얼마나 쉽게 조정할 수 있는지 알게 될 것입니다.

이미지 위에 제목을 넣어 오프셋 레이아웃을 만드는 것도 추세입니다.

Getwid에서는 텍스트 줄에 약간의 공백이 있는 적절한 배경 이미지를 설정하여 이를 달성할 수 있습니다.

예 5. 서브 히어로 섹션

종종 하위 영웅 섹션은 프로젝트 또는 사람에 대한 더 많은 정보를 제공합니다. 약력, 스토리 또는 주요 목표를 표시하는 데 적합합니다.

시각적 요소로 여러 스타일과 함께 제공되는 Getwid의 Image Stack Gallery 블록을 사용했습니다. 그러나 이미지, 비디오 또는 기타 콘텐츠 요소로 대체할 수 있습니다.

1. 두 개의 고급 제목
2. 절
3. 단추
4. 이미지 스택 갤러리 블록
5. 단면 배경: 단색

예 6. 시각적 액센트

이미지 갤러리, 슬라이더 및 비디오는 시선을 사로잡는 섹션을 만들기 위한 매우 일반적인 시각적 도구입니다.

예를 들어 Getwid의 미디어 및 텍스트 슬라이더 블록을 사용하여 선택적 텍스트 콘텐츠가 포함된 슬라이드쇼를 만들 수 있습니다.

1. 미디어 및 텍스트 슬라이더
2. 섹션 배경: 그라디언트 + 사용자 정의 높이가 있는 위쪽 및 아래쪽 구분선

슬라이더에 표시할 수 있는 포스트 기반 Getwid 블록도 많이 있습니다(웹 사이트 콘텐츠에서 자동으로 제공됨). 슬라이더 또는 그리드/목록 형식으로 최신 또는 수동으로 선택한 게시물을 표시하고 싶으십니까? 그것을위한 블록이 있습니다.

예 7. 배너

Getwid는 이미지 및 텍스트 기본 컨테이너를 제공하는 편리한 배너 블록과 함께 제공됩니다. 또한 배너가 있는 섹션을 보다 동적으로 만들 수 있는 애니메이션 효과를 선택할 수 있습니다.

블록은 임시 판매 및 지속적인 하이라이트 모두에 완벽하게 일치합니다.

1. 배너
2. 단면 배경: 단색 그라데이션

예 8. 정보 섹션

구조적이고 간결한 방식으로 더 많은 정보를 표시하려는 경우 Getwid는 이러한 목적을 위해 Tabs, Accordion 및 Toggle의 세 가지 전용 블록을 제공합니다.

다음은 아코디언 블록과 그 옆에 이미지가 있는 2열 레이아웃입니다.

이러한 블록의 고유한 기능은 탭 위젯 내부에 모든 블록을 포함할 수 있다는 것입니다. 즉, 텍스트 외에도 이미지, 목록, 비디오, 갤러리, 슬라이더를 탭에 추가할 수 있습니다.

마케팅 섹션에 고유한 기능을 추가할 수 있는 더 많은 블록이 있습니다. 예를 들어 정보를 제공하는 이미지 섹션을 구축하기 위한 Image Hotspot, 서비스를 위한 Icon Box, 실시간 Instagram 갤러리 피드 등.

전체 페이지 설정에서 필요한 페이지 레이아웃을 선택하여 빈 Gutenberg 페이지에서 유사한 섹션을 만들고 디자인할 수 있습니다.

마무리하자면

무료 Total 테마에서 Gutenberg와 Getwid 콤보를 사용할 때 가장 좋은 점이 무엇인지 아십니까? 아니요, 중요한 것은 블록의 수만이 아닙니다.

더 중요한 것은 멋진 콘텐츠를 만들기 위해 디자이너의 눈(또는 개발자의 기술)이 필요하지 않다는 것입니다. 미리 만들어진 스킨, 블록 패턴 및 바로 사용할 수 있는 디자인이 많이 있습니다. Getwid WordPress Blocks는 Total의 무료 버전을 계속 사용하는 사람들을 위한 페이지 빌더의 좋은 대안이기도 합니다.

블록 편집기가 충분히 성숙하지 않을 때까지 추가 Gutenberg 네이티브 애드온이 훌륭한 출발점이 될 수 있습니다.

Gutenberg 또는 Getwid를 사용해 보셨습니까? 의견에 알려주십시오.