WordPress 웹 사이트에 대한 멋진 섹션 구분선을 만드는 방법

WordPress 웹사이트에 섹션 구분선을 추가하시겠습니까?

섹션 구분선은 콘텐츠를 분리하고 웹사이트 방문자의 참여를 유도하는 시각 효과를 만드는 훌륭한 방법입니다. 그러나 디자인 및 코딩 경험이 부족하면 만들기가 어렵습니다.

당신처럼 들리나요? 괜찮아요; 이 기사에서는 코드 없이 웹사이트 구분선을 만드는 방법을 보여줍니다.

WordPress의 섹션 구분선이란 무엇입니까?

섹션 구분선은 WordPress에서 모양 구분선이라고도 합니다. 페이지에 사용자 정의 모양과 효과를 추가하여 콘텐츠 간에 매력적인 전환을 만들 수 있습니다.

콘텐츠 블록 위와 아래에 섹션 구분선을 배치하여 다양한 주제를 쉽게 구성하고 구분할 수 있습니다.

웹사이트 구분선에는 SVG 모양의 페이지 구분선 및 텍스트 블록을 구분하는 텍스트 테두리인 텍스트 구분선과 같은 여러 형식이 있습니다. 많은 경우에 구분선을 사용자 지정할 수도 있습니다.

모양 구분선을 사용하면 어떤 이점이 있습니까?

모양 구분선은 웹사이트에서 주의를 끌기 위한 효과적인 도구입니다. 사용자가 스크롤을 멈추게 하여 놓치고 싶지 않은 정보에 주의를 집중시킵니다.

일부 웹사이트 소유자는 방문자의 관심을 끌기 위해 화려한 애니메이션과 인상적인 이미지를 사용합니다. 그러나 모양 구분선은 시각적 혼란을 줄이면서 동일한 작업을 수행할 수 있습니다.

또한 모양 구분선을 사용하면 처음부터 새로운 디자인을 만들지 않고도 웹사이트 디자인을 즉시 변형할 수 있습니다.

WordPress 사이트에 멋진 구분선을 추가하는 방법

앞서 언급했듯이 WordPress에서 멋진 섹션 구분선을 만들려면 일반적으로 약간의 디자인 및 코딩 지식이 필요합니다. 그러나 아래 코드 없이 사이트에 섹션 구분선을 추가하는 2가지 방법을 공유합니다.

방법 1: SeedProd로 웹사이트 구분선 만들기

첫 번째 방법으로 SeedProd를 사용하여 WordPress 사이트에 모양 구분선을 추가합니다.

SeedProd는 WordPress를 위한 최고의 웹사이트 빌더 중 하나입니다. 코드 없이 사용자 정의 WordPress 테마, 방문 페이지 및 반응형 웹사이트 레이아웃을 만들 수 있습니다.

수백 개의 미리 만들어진 템플릿, 수많은 콘텐츠 요소 및 WordPress 페이지를 사용자 정의할 수 있는 간편한 드래그 앤 드롭 비주얼 편집기와 함께 제공됩니다.

이 가이드에서 사용할 기능 중 하나는 SeedProd에 내장된 멋진 모양 구분선입니다. 코딩 없이 몇 번의 클릭으로 모든 게시물이나 페이지에 매력적인 모양 구분 기호를 추가할 수 있습니다.

SeedProd를 사용하여 WordPress에 모양 구분선을 추가하려면 아래 단계를 따르세요.

SeedProd WordPress 플러그인 설치 및 활성화

먼저 여기를 클릭하여 SeedProd를 시작하고 플러그인을 컴퓨터에 다운로드하십시오. 그런 다음 플러그인 .zip 파일을 WordPress 웹사이트에 업로드합니다.

도움이 필요한 경우 WordPress 플러그인 설치에 대한 이 가이드를 따를 수 있습니다.

참고: SeedProd의 무료 버전이 있지만 Shape Divider 기능을 위해 프리미엄 버전의 SeedProd를 사용할 것입니다.

SeedProd를 설치하고 활성화한 후 SeedProd » 설정 으로 이동하여 플러그인 라이선스 키를 입력합니다.

SeedProd 웹사이트에 로그인하고 다운로드 섹션에서 라이선스 키를 찾을 수 있습니다.

WordPress 테마 또는 방문 페이지 만들기

SeedProd에서 섹션 구분선을 사용하는 방법은 2가지가 있습니다.

새 WordPress 테마를 만들고 다른 테마 부분에 모양 구분선을 추가할 수 있습니다. 또는 독립 실행형 랜딩 페이지를 만들고 단일 페이지에 모양 구분선을 추가할 수 있습니다.

다음은 둘 다 설정하는 방법입니다.

워드프레스 테마

SeedProd의 테마 빌더를 사용하면 끌어서 놓기 편집기로 새 WordPress 테마를 만들 수 있습니다.

사이드바, 머리글, 바닥글, 단일 게시물 등을 포함하여 테마를 구성하는 모든 파일을 생성합니다. 그런 다음 코드 없이 각 파일을 시각적으로 사용자 지정할 수 있습니다.

새 테마를 활성화하면 기존 WordPress 테마를 덮어쓰므로 기존 테마를 잃어도 마음에 드는 경우에만 이 옵션을 선택하세요.

이 튜토리얼에 따라 SeedProd로 맞춤형 WordPress 테마를 만드십시오.

방문 페이지

SeedProd의 방문 페이지 빌더를 사용하면 끌어서 놓기 인터페이스를 사용하여 WordPress에서 단일 방문 페이지를 만들 수 있습니다. 디자인을 완전히 사용자 지정할 수 있지만 테마 빌더 버전과 달리 기존 테마를 덮어쓰지 않습니다.

이것은 현재 WordPress 테마를 유지하지만 모양 구분선 기능을 계속 사용하려는 경우에 좋은 솔루션입니다.

이 단계별 가이드에 따라 WordPress에서 랜딩 페이지를 만드십시오.

WordPress 테마 또는 방문 페이지를 만든 후 다음 단계로 이동할 수 있습니다.

섹션 구분선으로 디자인 사용자 지정

WordPress에 모양 구분선을 추가하려면 SeedProd의 시각적 페이지 빌더를 여는 테마 템플릿 또는 방문 페이지를 편집하십시오. 이 자습서에서는 사용자 지정 WordPress 테마의 홈페이지를 편집합니다.

비주얼 편집기에 들어가면 모양 구분선을 추가할 페이지 영역을 찾아야 합니다. SeedProd를 사용하면 섹션, 열 및 행에 모양 구분선을 추가할 수 있습니다.

선택한 섹션이나 행을 클릭하여 왼쪽에 있는 설정 패널을 엽니다. 해당 패널 내에서 고급 탭을 클릭하여 더 많은 사용자 정의 옵션을 확인하십시오.

패널 하단에 모양 구분선 제목이 표시됩니다. 제목을 클릭하여 모양 구분선 설정을 엽니다.

먼저 섹션의 상단 또는 하단에 구분선을 추가하도록 선택할 수 있습니다.

그런 다음 드롭다운 메뉴를 클릭하여 구분선에 대해 18가지 다른 모양을 선택할 수 있습니다.

모양을 선택한 후 SeedProd는 모양의 모양을 사용자 정의하기 위한 추가 설정을 표시합니다.

예를 들어 다음을 수행할 수 있습니다.

• 도형의 색상 변경
• 사용자 정의 너비와 높이 선택
• 모양 뒤집기
• 모양을 앞으로 가져옵니다.

동일한 단계에 따라 섹션 하단에 모양 구분선을 추가할 수 있습니다. 몇 번의 클릭만으로 눈에 띄는 시각 효과를 만들 수 있습니다.

다음은 SeedProd의 모양 구분선으로 만들 수 있는 다양한 효과의 몇 가지 예입니다.

산

파도

곡선

모든 것이 어떻게 보이는지 만족할 때까지 다양한 웹사이트 구분선을 실험해 보십시오.

WordPress에 멋진 구분선 게시

이제 모양 구분선이 준비되었으므로 새 디자인을 게시할 수 있습니다.

WordPress 테마를 만드는 경우 SeedProd 테마 빌더로 이동하여 "SeedProd 테마 활성화" 토글을 클릭하여 예 위치로 설정하여 게시할 수 있습니다.

저장 버튼의 드롭다운 화살표를 클릭하고 방문 페이지용 게시 를 클릭하기만 하면 됩니다.

이제 라이브 웹사이트를 방문하여 섹션 구분선이 작동하는 것을 볼 수 있습니다. 다음은 영웅 배경 이미지 섹션에 섹션 분할이 있는 데모 사이트의 예입니다.

방법 2: 플러그인 없이 WordPress에서 섹션 구분선 만들기

내장된 WordPress 설정을 사용하여 사이트에 구분선을 추가할 수도 있습니다. 이 방법은 추가 WordPress 플러그인을 설치하지 않으려는 경우에 유용합니다.

그러나 사용자 정의 옵션은 더 제한적입니다. 예를 들어 다른 선 스타일만 추가하고 각 줄 바꿈의 배경색을 변경할 수 있습니다.

고급 사용자 지정 옵션에 방법 1을 사용하는 것이 좋습니다. 플러그인 없이 WordPress에 수평선 섹션 구분선을 추가하려면 아래 단계를 따르세요.

WordPress 블록 편집기에서 수평선 추가하기

WordPress 블록 편집기를 사용하여 가로 섹션 구분선을 추가하려면 게시물이나 페이지를 열고 구분선을 배치할 위치에 더하기(+) 아이콘을 클릭하세요.

그런 다음 검색 상자에 "Separator"를 입력하고 Separator 블록을 클릭합니다.

페이지에 블록을 추가하면 텍스트의 각 섹션 사이에 가로 구분 기호가 표시됩니다.

오른쪽 패널에서 기본값, 굵은 선 또는 점을 클릭하여 구분선 스타일을 변경할 수 있습니다.

동일한 패널에서 구분 기호 배경색을 변경할 수도 있습니다.

모든 것이 마음에 들면 페이지를 업데이트하거나 게시하여 결과를 확인하세요.

WordPress Classic Editor에서 수평선 추가하기

다음 지침에 따라 WordPress 클래식 편집기를 사용하여 웹사이트에 섹션 구분선을 추가하십시오.

기존 게시물 또는 페이지를 편집하거나 새로 만듭니다. 모든 편집기 설정이 표시되지 않으면 Toggle Toolbar 아이콘을 클릭하십시오.

그런 다음 페이지에서 구분선을 추가하려는 지점을 클릭합니다. 그런 다음 수평선 아이콘을 클릭합니다.

수평선 구분선은 흑백 또는 밝은 회색이며 다음과 같이 전체 게시물 또는 페이지를 덮습니다.

SeedProd와 중소기업

이 기사가 WordPress에 섹션 구분선을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. SeedProd의 강력한 드래그 앤 드롭 웹 사이트 빌더를 사용하면 멋진 모양 구분선을 만드는 것이 아주 쉽습니다.

SeedProd는 모든 면에서 귀하의 비즈니스 성장을 돕습니다! 더 많은 중소기업 및 웹 개발 팁을 보려면 블로그를 확인하십시오. 다음은 우리가 가장 좋아하는 관련 게시물 중 일부입니다.

• WordPress에서 블로그 페이지를 만드는 방법
• WordPress에 작성자 상자를 추가하는 방법
• WordPress에 사용자 정의 사이드바를 추가하는 방법

읽어 주셔서 감사합니다. YouTube, Twitter 및 Facebook에서 팔로우하여 비즈니스 성장에 도움이 되는 더 많은 콘텐츠를 확인하세요.