Demo Data 끌고 왔고 모양 그대로 쓰거나 조금만 변경해서 사용하고자 한다면 페이지의 내용을 조금씩 바꾸면 됩니다하지만 계속 언급했듯이테마들은 워드프레스의 기본 기능에 비해 여러 기능이 추가되었기 때문에 해당 기능들을 “Short Code” 방식이나 “Builder” 방식으로 페이지에 위치시킬  있습니다이러한 방식은 기존의 Html 에디터 기능에 비해 훨씬 직관적이고 수월한 웹페이지 편집의 특징을 갖고 있어, Html  대해  몰라도 홈페이지를 쉽게 만들  있도록 합니다.

예를 들어 두장의 이미지 파일을 약간의 간격과 함께  화면에 위치시키고 싶다면 기존에는 <img scr=”이미지 주소라는 Html 코드를 입력하고 여기에 자리를 배치하는 코드들도 입력하여 이미지 주소(파일경로) 지정했습니다짧아도 두세줄의 Html 태그들이 사용되었고웹에디터를 통한다 해도 글자들이 잔뜩 나타난 화면은 초보자 입장에서는 어렵기 마련이었습니다. (따옴표나 괄호 하나때문에 웹페이지가 출력이 안되는 경우도 발생할  있습니다.)
하지만 Builder 사용한다면 키보드의  사용 없이 이미지의 자리를 배치하고 이미지 파일도 쉽게 업로드 하고 경로를 지정할  있습니다.

 하지만 테마마다 제공하는 Builder 다를  있으며 Builder 없는 테마라도 별도로 사용할  있는 Builder 플러그인들을 설치하여 사용할 수도 있습니다.

1. Page 대해

 처음 대문 화면인 Front Page부터 수정을 시작합니다. One Page Layout 경우는 더욱 중요한 페이지가 됩니다.
홈페이지의 웹페이지들은  그대로 “Page”입니다따라서 워드프레스의 관리자 화면에서도 “Pages” 메뉴에서 확인할  있습니다홈페이지의  화면도 하나의 Page이고 About Us 페이지도 하나의 Page입니다웹페이지 하나하나를 만들어주고  페이지들의 연결을 Menu 구성해 주는 것입니다.
 우리는 이미 Import 과정을 거쳤기 때문에  장의 페이지가 저장되어 있습니다이들  Front Page 찾습니다페이지의 제목(Title) Front Page 아닐 수도 있습니다혹시나 Appearance 테마 설정에서 Front Page 지정했을 경우페이지 제목 옆에 검정색 글씨로 — Frontpage 라고 표시됩니다.

 

해당 페이지에 들어가면  Builder 화면을 만날  있습니다.
혹시 페이지 제목 아래에 Default Editor 되어있다면 Advanced Layout Editor 변경하면 Builder 적용된 화면으로 변환됩니다.

2. Avia Layout Builder
 

 테마마다 제공하는 Builder , Enfold에서는 자체적으로 Avia Layout Builder  제공하고 있습니다테마에서 제공하지 않는 경우는 Visual Composer 같은 별도의 Builder 플러그인을 사용합니다. ( 플러그인은 유료이며 일부 테마의 경우  Visual Composer 함께 제공하는 경우도 있습니다.)
Enfold테마의 Builder  화면 구성 요소들을 고를  있는 Elements 해당 요소들을 배치하여 실제 웹페이지를 만들  있는 Page 파트로 구성되어 있습니다상단에 위치한 Elements 탭은 세가지의 탭이 있고  탭마다의 기능을 달리 합니다.
 

3. Layout Elements

 이 탭은 페이지의 레이아웃을 잡아주는 가로 분할의 역할을 맡습니다. Column() 배치를 구성하는데예를 들면 사진을 화면에 가로로 두장 배치해야  경우, 1/2  상자를 두개 만들어서 1/2 1/2 열을 만들고  안에 사진을 배치하면

위와 같이 배치가 가능합니다처음에는 조금 생소할  있는데 두개의 이미지를 1/1 열에 넣을 경우 배치는 위아래로 적용되기 때문에 나란히 두개의 이미지를 배치  경우에는 1/2  상자를 두개 만들어서 안에 이미지를 넣습니다물론 3 경우는 1/3 상자 3개를 배치하고  안에  이미지를 넣습니다. 4개의 경우는 1/4 상자 4개가 되겠지요.

여기서  상자  상단에 마우스를 올리면 아래와 같은 아이콘들이 노출됩니다.

1번과 2번의 아이콘은 열의 크기를 조정할  있습니다. 1/1에서 1/2 바꾸고 1/3 등으로 클릭으로 쉽게 바꿀  있습니다.
3번의 아이콘은 해당 열상자를 저장할  있는 기능입니다상자 자체의 저장이라기 보다는 Template 저장해두고 다른 페이지를 구성할 때에 불러오기를 통해서 미리 저장한 열상자의 Template 불러올  있습니다반복되는 구성요소들이 있다면 유용하게 사용할  있습니다.

이렇게 이름을 지정하여 저장하면 상단의 Template 버튼에서 불러올 수 있습니다.
 

 4번의 아이콘은 복사 기능입니다열상자 자체를 복사합니다보통 하나의 상자 안에 조금 여러가지 요소들을 넣었을 때에 상세한 내용을 조금 바꾸게 된다면 복잡한 작업을 반복해야 하기 때문에복사해서 여러  사용하고 조금씩 수정해서 배치할  있습니다.

5번은 열상자의 세부적인 내용을 변경할  있습니다여백이나 높이테두리나 색상 등에 대한 변경이 가능합니다.


4. Color Section

1/2열상자와 같은 레이아웃과 다르게 Color Section 열상자들을 내부에 배치할  있는 특징이 있습니다물론  안에 다시 여러 요소들을 넣을수도 있습니다. Color Section  특징 두가지는 Background 색상 지정이 가능해서 화면을 구성할  인위적으로 구역을 나누는 효과를 나타낼  있습니다 하나의 특징은 Color Section Edit 통해 Section ID 입력하면 One Page Layout 에서 링크나 버튼을 통해 지정해  Section으로의 이동이 가능합니다, Section ID About, Works, Contact 라는 이름을 지정하고 상단의 메인 메뉴나 링크 버튼에 #About  대한 링크를 지정할 시에  페이지에서 About이나 Works, Contact섹션으로 이동합니다 페이지 내에서  아래로 오갈  있는 효과의 활용이 가능합니다.


5. Tab Section

가로 탭으로 구성된 레이아웃을 구성할  있습니다오른쪽 상단의 X 버튼을 통해 필요 없는 탭을 지울  있고 + Add Tab 버튼을 클릭해서 탭을 추가할  있습니다또한  내부에 열상자를 넣어 내용을 구성할  있고좌우 화살표 아이콘을 클릭하고 드래그 하면 탭의 위치를 변경할  있습니다탭을 사용하면 특정 내용이 높지 않게 구성하되유사하거나 연관된 내용을 탭을 클릭하거나 슬라이드 효과로 탭을 보여줄  있습니다.

 

6. 기본 사용 

 Builder  통해 내용을 만드는 것은 직관적이고 사용하기 쉽습니다수정하고자 하는 내용을 클릭하면 팝업이나 브라우저 탭이 아닌화면 내에서 새로운 화면이 떠오르고 (떠오른다는 표현이 맞는것 같습니다세부수정이 가능합니다. 그 안에서 여러 설정이나 변경 하단의 Save 버튼을 클릭하면 적용 됩니다물론 Section 이나 열상자다음번에 다를 여러 Element들을 수정한 뒤에는 페이지 자체를 저장(Publish Update) 해야 웹페이지 적용이 완료됩니다주의할 점은 세부 수정창에서 Save 버튼을 

릭하지 않고화면의 빈공간을 클릭했을 경우 저장되지 않고 해당 창이 종료 됩니다.

빨간 화살표로 가리키는 파란 Save 버튼을 클릭해야 저장이되고 뒤쪽의 어두운 회색 부분(X표시 클릭하면 저장되지 않고 세부수정 창이 닫히게 됩니다중요한 내용은 저장을 습관화 합시다.