워드프레스 페이지 빌더의 행과 열 사용법

워드프레스 페이지 빌더의 행 사용법

워드프레스 플러그인 페이지 빌더에 대해 설명을 드렸습니다. 설명드린 일반적인 인터페이스에 대해 설명하고 장단점을 정리했는것을 읽었다고 가정하고 설명해 드리겠습니다.

이 가이드는 페이지 빌더를 사용하여 페이지를 작성하는 고급 개념에 대해 도움을 줍니다.

행 추가하기

행은 페이지 레이아웃의 전체 구조를 형성하고 있습니다. 이것이 귀하의 페이지에 추가 할 첫 번째 사항입니다. 행을 추가하려면 '행 추가'를 클릭하시기 바랍니다.

'Add New Row (새 행 추가)'대화 상자가 나타납니다.

행 레이아웃 설정

행의 셀수와 셀비율 및 해당 비율을 적용 할 방향 (왼쪽 또는 오른쪽)을 선택하여 행레이아웃을 설정할 수 있습니다. 페이지 빌더는 이 값을 변경할 때 레이아웃을 업데이트하거나 "설정"을 클릭하여 레이아웃을 설정할 수 있습니다.

아래 예제는 왼쪽에서 오른쪽으로 짝수 비율의 3개의 셀 레이아웃입니다.

다음 예제는 오른쪽에서 왼쪽으로 황금 비율을 사용하는 3개의 셀 레이아웃입니다. 오른쪽에서 왼쪽으로는 가장 큰 너비의 셀이 오른쪽에 있고 그 다음 셀은 비율에 따라 더 작음을 의미합니다.

새 행의 레이아웃에 만족하면 "삽입"을 클릭하여 페이지에 행을 추가하시기 바랍니다.

행 삭제

행을 삭제하려면 해당 행 위 오른쪽 상단의 스패너 아이콘 위로 마우스를 가져갑니다. 편집, 복제 또는 삭제 옵션이있는 드롭 다운 메뉴가 나타납니다. "Delete Row"를 클릭 한 다음 "Are you sure?"를 클릭하여이 동작을 확인하시기 바랍니다.

행 편집

기존 행을 편집하려면 해당 행 위 오른쪽 상단 모서리에있는 스패너 아이콘을 클릭하시기 바랍니다.

그러면 행 편집 대화 상자가 열립니다.

셀 너비 수동 편집

셀 너비는 두 가지 방법으로 수동으로 조정 할 수 있습니다.

두 개의 셀 사이에서 구분 막대를 드래그하여 수행 할 수 있습니다. 막대를 왼쪽이나 오른쪽으로 드래그하여 셀 너비를 늘리거나 줄일 수 있습니다. 변경 내용을 적용하려면 "저장"을 클릭하시기 바랍니다.

기본 빌더보기에서 편집 대화 상자 외부의 셀 너비를 조정할 수도 있습니다. 그러나 페이지 빌더는 셀 너비를 나타내는 숫자 값을 표시하지 않습니다.

페이지 빌더를 사용하면 행 편집 대화 상자에 셀 너비를 직접 입력 할 수도 있습니다. 첫번째 셀에서 백분율 표시기를 클릭하시고 (왼쪽에서 오른쪽으로 이동) 너비를 퍼센트로 입력하시기 바랍니다. Enter 또는 Tab을 눌러 다음 셀로 이동하시기 바랍니다. 마지막 셀에 도달하면 Enter를 누르면 페이지 빌더가 너비를 설정합니다.

위의 예에서 19.1에서 25로 조정하고 입력을 밀어 넣고 30.9에서 35를 입력하고 Enter 키를 누른 다음 마지막으로 50에서 40을 입력하고 Enter를 눌러 새 너비를 설정합니다.

"행 레이아웃 설정"블록에서 "설정"을 클릭하면 레이아웃이 비율 기반 레이아웃으로 복원됩니다. 행 수정이 완료되면 '저장'을 클릭하시기 바랍니다.

위젯 추가하기

위젯을 추가하려면 먼저 위젯을 추가 할 행 셀을 활성화 하시기 바랍니다. 행 셀을 선택했으면 "+ 위젯 추가"를 클릭하시기 바랍니다.

처음 행을 만들지 않고 위젯을 추가하여 게시물이나 페이지를 만들기 시작하면 선택한 위젯이 포함 된 페이지에 하나의 셀 행이 자동으로 추가됩니다.

"+ 위젯 추가"버튼을 클릭하면 "위젯 추가"대화 상자에 사용 가능한 모든 위젯 테이블이 열립니다. 이 경우 위젯 번들 위젯, 페이지 빌더 위젯, WordPress 위젯 및 권장 위젯과 같이 "출처, 작성자"에 따라 위젯을 필터링 할 수 있습니다. 각 링크를 각각 클릭하여 필터링 하시기 바랍니다.

위젯을 선택하려면 위젯을 클릭하기 만하면 됩니다. 위젯이 선택한 행 셀에 나타납니다.

위젯을 이동하려면 클릭하고 새 셀로 드래그 하시기 바랍니다. 이동하면 선택한 셀에 위젯이 배치됩니다.

위젯 위에 마우스를 올려 놓으면 편집, 복제 또는 삭제라는 위젯 옵션이 표시됩니다.

레이아웃 위젯 사용

레이아웃 위젯은 간단한 위젯에서 페이지 빌더의 모든 기능을 제공합니다. 이를 통해 복잡한 레이아웃, 중첩 된 레이아웃을 만들고 페이지 빌더의 힘을 사이드 바, 바닥 글 및 기타 widgetized 영역으로 가져올 수 있습니다.

아래에 제시된 예제는 복잡한 레이아웃 가능성을 보여줍니다. 레이아웃 위젯을 2열 행의 첫 번째 열에 추가하고 자리 표시 자 텍스트로 채 웁니다. 진행 상황을 명확히하기 위해 파란색 배경 (# 289BFF)을 지정했습니다.

레이아웃 위젯에서 아래의 편집 대화 상자에서 레이아웃 위젯의 배경색과 텍스트 색상이 위젯 스타일 디자인 탭에서 분홍색 (# FF665F)으로 조정되었습니다.

3행 1열과 2열 2행을 2행 추가했습니다. 우리는 자리 표시 자 비주얼 에디터로이 레이아웃을 채웠습니다.

3 열 행과 2 열 행의 배경색은 각각 흰색과 하늘색 (# 79B9F1)으로 설정되었습니다. 결과 레이아웃은 아래와 같이 표시됩니다.

이렇게 복잡해 보이지만 익숙해지면 이것만큼 쉽고 빠르게 디자인 할수 있는 빌더는 없을 것으로 보입니다. 

---

• 워드프레스 플러그인 Page Builder Interface 페이지 빌더 인터페이스
• 워드프레스 유용한 플러그인 SiteOrigin Page Builder
• 워드프레스 플러그인 젯팩 Jetpack by WordPress.com
  
• 워드프레스 Avada무료테마
• SiteOrigin의 테마 알아보기
• CSS hover 스타일값을 다르게 보여주고 싶을때
• HTML/CSS 참고링크