인기검색어 머리글메뉴메가보행인메트폼

표제

목차

Want to make an attractive heading with the Gutenberg block editor? The default heading block won’t let you much to do. However, you can use the GutenKit heading block available with extensive features. 

You can add a subtitle, title description, shadow text, separator, and a focused title. Further, this block lets you have complete control over the customization.

Therefore, you will end up creating a stylish heading for your page or post. Let’s see how to use the GutenKit Heading block inside the block editor.

How to Use GutenKit Heading Block? #

Follow the steps below to learn about the use of the GutenKit Heading block.

Step 1: Add GutenKit Heading Block #

  • You’re required to have the 구텐킷 plugin installed. 
  • Then, add a page or post and enter the block editor.
  • “를 찾으세요.+편집기 화면 상단에 있는 ”아이콘을 클릭하세요.
  • Click it and the block menu will reveal.
GutenKit Heading Block
  • "를 넣어GutenKit Heading검색창에 "를 입력하세요.
  • Once you see it, click or drag & drop it to the editor screen. 

Once the GutenKit Heading block is on your screen, click on it. The block settings will open in the right sidebar, combined into 콘텐츠, 스타일, & 고급의 tabs. The 콘텐츠 tab will help to add title, subtitle, description, separator, etc.

Step 2: Enter Heading Title & Sub Title #

Under the content tab:

제목: You can type the title directly on the editor screen.

  1. HTML TAG: Define the heading’s HTML tag to H1- H6, Div, Span, or P.
  2. URL: Toggle this button to add a link to the heading.
  3. 테두리 표시: Enable this button to show the border.
    • Border Position: Set the border to the start or end of the heading title.

부제목: From here, you will add your Sub Title.

  1. Show Subtitle: Click the toggle button to enter the subtitle.
  2. Border Subtitle: Toggle this button to add a border with a subtitle.
  3. Heading Subtitle: Write your subtitle in this box.
  4. Subtitle Position: Show the subtitle before or after the heading title.
  5. Subtitle HTML Tag: Determine the subtitle heading’s tag to (H1- H6, Div, Span, or P)

Step 3: Add Title Description, Shadow Text & Separator #

제목 설명: This feature gives you control over adding a title description.

  1. 설명 표시: Click this button to insert the title description.
  2. 제목 설명: Enter your heading description here.
  3. 최대 너비: Define the width for the title description.

그림자 텍스트: Apply a beautiful text shadow with your headings.

  1. 그림자 텍스트 표시: Toggle this button to enable the shadow text feature.
  2. 콘텐츠: Add the content you want to show as shadow text.

분리 기호:

  1. 구분 기호 표시: Activate this button to add a separator.
  2. Separator Type: Choose from four different separator types.
  3. Separator position: Choose where to place the separator. 

Step 4: Align Heading Title #

로부터 스타일 tab, come under the 일반적인 settings:

  • 조정: Align your heading style to Left, Center, or Right.

Step 5: Style Heading Title #

The following features will help you to style your heading title:

제목 #

  1. 색상: Give a color to your heading.
  2. 호버 색상: Set the color for your heading on hover.
  3. 텍스트 그림자: Add shadow effects to your heading text.
  4. 여유: Adjust the margin for your heading design. 
  5. 타이포그래피: From here you will control all the typography settings like Font Family, Size, Weight, Transform, Style, Decoration, Line Height, Line Spacing, Word Spacing, etc.
  6. 테두리 너비: Set the width for the heading border. 
  7. 테두리 높이: Enter the height for the heading border.
  8. 수직 위치: Adjust the vertical placement of the border.
  9. Right /Left Gap: Define the gap between the title and the border.

*참고하세요 if you show the border at the start, you will need to set the right gap. And, while showing the border at the end you need to define the Left gap.

  • 테두리 색상: Select the color for the border.

Step 6: Create Focus Title #

The focus title feature makes an important part of your heading title more interesting and eye-catching. Simply bold (Ctrl+B) the part of your title you want more focus on. 

Under the style tab, you will get the Focused Title feature. See its setting below.

Focused Title: You will see some similar features (Color, Hover Color, Typography, Text Shadow) to the Title setting. Other features are:

  1. 텍스트 장식 색상: Specify the color of the decoration for the focused title.
  2. 심: Define the padding around the focused title.
  3. Use Background Color On Text: Give color to the focused title background.
  4. 테두리 반경: Set the roundness of your focused title border.

Here’s our focused title:

Step 7: Customize Sub Title & Title Description, #

Now, the following features are applicable to Sub Title and Title Description. Let’s see how to use them:

  • 색상: From here you will choose the color.
  • 타이포그래피: Control all the typography-related customizations like text font family, transform, style, decoration color, letter spacing, Word Spacing, and line height. 
  • 여유: Expand space around the text.
  • Use Text Fill: Give color or image background to your subtitle. (This feature only applies to Sub Title only.)

Step 8: Customize Separator & Shadow Text #

Now, we’ll learn about the Separator and text customization.

분리 기호: #

  1. 너비: Enter the Separator width value in this box in pixels.
  2. 키: Define the Separator height. Enter a value in pixels.
  3. 여유: Set space with other elements in your design.
  4. Separator Color: Choose a color from the color palette for the separator.

그림자 텍스트: #

  1. 위치: Place the shadow text by entering the top & left values in pixels.
  2. 타이포그래피: Get all the typography-styling settings for shadow text.
  3. 텍스트 색상: Add color for the shadow text.
  4. Stroke Width: Specify the line width that wraps around the shadow text. 
  5. Stroke Color: Pick a color for the stroke. 

Step 9: Advanced Settings #

From the Advanced Settings tab, you can configure the GutenKit Heading block layout, background, border styles, and control its visibility.

공들여 나열한 것, #

  • 여유: 블록 레이아웃 주변의 공간을 정의합니다. 다른 블록 사이의 간격을 설정하는 데 도움이 됩니다.
  • 심: 레이아웃 내의 블록 주변 공간을 설정하는 값을 입력합니다.
  • 너비: 기본 레이아웃 너비를 유지하는 것 외에.
    • 전체 넓이: 이 옵션을 선택하면 레이아웃이 화면 전체 너비에 걸쳐 적용됩니다.
    • 인라인(자동): 적용하면 블록 요소와 동일한 너비를 갖게 됩니다.
    • 관습: 이 옵션을 선택하면 블록 레이아웃의 수평 공간을 정의하는 슬라이더가 표시됩니다.
  • Z-지수: 슬라이더를 사용하여 다른 블록과 함께 블록의 스택 순서를 지정합니다.

위치: #

드롭다운 아래에 세 가지 옵션이 표시됩니다. 기본, 순수한, 그리고 결정된. 

  • 순수한: 이 옵션을 선택하면 블록의 절대 위치가 제공됩니다. 즉, 요소가 컨테이너에 맞습니다.
  • 결정된: 고정 위치 옵션을 사용하면 요소가 전체 뷰포트나 화면에 맞춰집니다.

절대 및 고정 옵션 모두 아래와 같이 유사한 설정을 갖습니다.

  • 수평 방향: 위치결정 방향을 왼쪽과 오른쪽 중에서 선택합니다.
  • 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수평 위치를 조정합니다.
  • 수직 방향: 위치결정 방향을 위, 아래 중에서 선택합니다.
  • 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수직 위치를 조정합니다. 

배경: #

  • 배경: 단색, 그라데이션, 이미지 중에서 배경 옵션을 선택합니다.

호버 옵션에서:

  • 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
    • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.
    • 이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.
  • 위치: 10가지 옵션의 위치를 선택합니다.
  • 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
  • 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.
  • 전환 기간: 슬라이더를 사용하여 배경이 일반에서 호버 상태로 전환되도록 조정합니다.

국경: #

  • 국경: 이 설정 옵션에는 너비, 스타일, 색상과 같은 테두리 설정 옵션이 제공됩니다.
  • 테두리 반경: 값을 입력하여 테두리의 둥근 정도를 설정합니다.
  • 박스 섀도우: 색상, 가로/세로, 흐림, 퍼짐 등의 모든 설정을 사용하여 테두리에 그림자 효과를 적용할 수 있습니다. 

호버 옵션에서:

  • 전환 기간: 수동으로 값을 추가하거나 슬라이더를 사용하여 마우스 오버 상태에서 테두리 디자인을 변경하는 시간을 설정할 수 있습니다.

시계: #

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 해당 장치의 블록 디자인을 숨기려면 토글 버튼을 켜십시오.

그러나 편집기 보기에서는 계속 볼 수 있습니다.

고급의: #

  • 블록 이름: 블록 스타일을 지정하기 위해 링크하거나 스크립팅하는 동안 이 블록을 고유하게 식별할 수 있도록 이름을 지정합니다.
  • HTML 앵커: 웹사이트 페이지를 링크하기 위한 URL을 추가합니다.
  • 추가 CSS 클래스: 추가 CSS 클래스를 블록에 할당하면 사용자 정의 CSS를 사용하여 원하는 대로 블록 스타일을 지정할 수 있습니다. 

주의: 공백을 사용하여 여러 클래스를 별도로 추가할 수 있습니다.

Hopefully, this document helped you to use the GutenKit Heading block. Now, it’s your turn to try this block and create stunning headings for your pages.

당신의 감정은 무엇입니까?
2024년 3월 4일에 업데이트됨