Avada WordPress 테마에서 Fusion Builder를 사용하여 편집

2016년 11월 업데이트: ThemeFusion에서 Avada를 버전 5.0으로 업데이트했습니다. 이 업데이트는 Fusion Builder를 플러그인 Fusion Core와 통합하는 대신 개별 플러그인으로 분리합니다. Fusion Builder는 완전히 재설계되었으며 이전 버전과 매우 다릅니다.

초기 Fusion Core 플러그인을 포함하여 전체 사이트를 Avada 백업으로 업그레이드하라는 요청을 받았을 때 페이지가 원활하게 이동하지 않으므로 페이지를 재구성하는 데 시간을 할애할 준비를 하십시오.

이미 Avada 5.0 업그레이드를 완료했고 페이지가 깨졌다면 이전 버전의 Avada를 사용해 보십시오. FTP를 사용하여 wp-content/themes 폴더로 이동하여 새 버전을 백업합니다. 그런 다음 이름을 바꾸고 이전 버전을 FTP합니다. 더 깔끔한 버전의 페이지를 다시 가져와야 합니다.

이 게시물은 버전 2.0.3 또는 이전 버전에 대한 것입니다.

Avada 테마 사용

WordPress 설치에 Avada 테마가 있는 경우 Fusion Builder를 사용하여 게시물과 페이지를 빌드할 수 있습니다. 이는 표준 페이지 업데이트와 매우 다릅니다.

Fusion Builder는 Avada 개발자인 ThemeFusion에서 개발한 플러그인으로 테마 내에서 반응형 레이아웃을 가능하게 합니다.

처음 하시는 분들은 조금 헷갈릴 수 있습니다.

Avada WordPress 테마 내에서 Fusion Builder를 사용하여 페이지 또는 게시물을 편집하는 데 도움이 되는 몇 가지 지침을 작성했습니다.

변경하기 전에 항상 백업

플러그인, 테마, 업로드 및 데이터베이스의 전체 백업을 먼저 수행하지 않고 WordPress 코어, 테마 또는 플러그인을 업데이트하지 마십시오.

업데이트로 인해 다른 것이 중단될 수 있으며 쉽게 되돌리거나 디버그할 수 있어야 합니다. 먼저 테스트할 수 있도록 개발 사이트에서 주요 업데이트를 수행하는 것이 좋습니다.

Avada의 Fusion Builder 활성화

먼저 콘텐츠 편집 영역 위의 파란색 버튼을 사용하여 페이지 또는 게시물에서 Fusion Builder를 활성화합니다.

웹 디자이너가 이미 페이지를 설정했다면 이미 버튼을 클릭했을 수 있습니다. 아래와 같이 콘텐츠 편집기의 모양이 변경됩니다.

Avada의 Fusion Builder를 사용하여 반응형 웹 페이지를 구축할 수 있습니다.

Fusion Builder를 사용하여 페이지를 편집하는 방법

WordPress 백엔드에 로그인합니다.

왼쪽에 있는 탭을 사용하여 페이지 또는 게시물로 이동한 다음 편집합니다.

Fusion Builder 상자는 페이지 편집 화면 상단에 있어야 합니다. 상단의 버튼에는 '열 옵션', '빌더 요소', '사용자 정의 템플릿' 및 '사전 제작된 템플릿'이라는 레이블이 붙어 있습니다.

이 게시물에서는 사용자 지정 템플릿 및 사전 빌드 템플릿을 무시할 것입니다.

시작하다

Fusion Builder 열 옵션

페이지를 열로 분할하려면 열 옵션을 선택하십시오. 그러면 페이지에 열 구조가 삽입되고 여기에 빌더 요소가 삽입됩니다. 열 크기와 숫자는 나중에 변경할 수 있습니다.

열 옵션을 선택하면 해당 옵션이 아래 공백에 나타납니다. 페이지를 만들려면 퍼즐을 맞추는 것처럼 생각하십시오.

왼쪽에 5 x 6번째 열을 추가한 경우 오른쪽에 맞는 유일한 다른 옵션은 1 x 6번째입니다.

페이지 왼쪽에서 페이지 오른쪽으로 한 열을 끌 수 있습니다.

한 열 옵션에서 빼기 버튼을 클릭하면 요소가 사용하는 열 수가 줄어듭니다. 더하기 버튼은 정반대입니다.

퓨전 빌더 요소

먼저 열 옵션을 선택하지 않고 빌더 요소를 추가할 수 있습니다. 요소는 페이지 전체에 걸쳐 있는 한 행에 삽입됩니다. 그런 다음 필요한 경우 열 내부로 끌 수 있습니다.

Avada에는 다양한 빌더 요소 옵션이 있습니다. 텍스트부터 시작하겠습니다. 위와 같이 열을 추가했으면 열에 텍스트 블록을 추가할 수 있습니다.

빌더 요소 버튼을 클릭하고 TEXT를 찾은 다음 클릭하여 열로 끌어다 놓기만 하면 됩니다.

요소 위로 마우스를 가져간 다음 오른쪽 상단에 나타나는 페인트 브러시 아이콘을 클릭하여 텍스트를 추가하거나 편집합니다.

모든 요소는 동일한 편집 아이콘을 사용하여 편집할 수 있습니다.

텍스트 또는 요소 내의 매체를 변경한 다음 저장을 클릭하면 상자가 닫힙니다.

해당 창이 닫히면 파란색 업데이트 버튼을 클릭하여 변경 사항을 저장합니다.

Avada 내에서 콘텐츠 상자 편집

콘텐츠 상자는 빌더 요소 아래에 있습니다. 이것들은 정말 유연하기 때문에 유용합니다.

하나의 '컨텐츠 상자' 요소 내에는 여러 개의 '하위 상자' 또는 '항목'이 있을 수 있으며, 이는 컨텐츠 상자 화면의 맨 아래로 스크롤하여 추가할 수 있습니다.

기본 콘텐츠 상자 화면은 '자식'에 고유한 스타일이 없는 경우 모든 하위 상자에 대한 옵션을 변경합니다.

페인트 브러시 아이콘을 사용하여 콘텐츠 상자의 편집 화면으로 이동합니다.

콘텐츠 상자의 옵션은 다음과 같습니다.

부모/자식 설정
"상위 수준" 설정은 모든 상자 스타일을 함께 제어합니다. "하위 레벨" 설정은 각 상자 스타일을 개별적으로 제어합니다.

콘텐츠 상자 레이아웃
콘텐츠 상자의 레이아웃 선택

열 수
행당 열 수를 설정합니다.

콘텐츠 정렬
"제목이 있는 클래식 아이콘" 및 "측면에 클래식 아이콘" 레이아웃 옵션과 함께 작동합니다.

제목 크기
제목의 크기를 제어합니다. 테마 옵션 선택을 위해 비워 둡니다. 픽셀 단위 예: 18px.

제목 글꼴 색상
제목 글꼴의 색상을 제어합니다. 테마 옵션 선택을 위해 비워 둡니다. 예: #000

본문 글꼴 색상
본문 글꼴의 색상을 제어합니다. 테마 옵션 선택을 위해 비워 둡니다. 예: #000

콘텐츠 상자 배경색
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경
아이콘 뒤에 배경을 표시하려면 선택합니다. 테마 옵션 선택에 대해 기본값을 선택합니다.

아이콘 배경 반경
아이콘 배경의 테두리 반경을 선택합니다. 테마 옵션 선택을 위해 비워 둡니다. 픽셀(px) 단위, 예: 1px 또는 "둥근".

아이콘 색상
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경색
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경 내부 테두리 색상
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경 내부 테두리 크기
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경 외부 테두리 색상
테마 옵션 선택을 위해 비워 둡니다.

아이콘 배경 외부 테두리 크기
테마 옵션 선택을 위해 비워 둡니다.

아이콘 크기
아이콘의 크기를 제어합니다. 테마 옵션 선택을 위해 비워 둡니다. 픽셀 단위 예: 18px.

아이콘 호버 애니메이션 유형
마우스 오버 시 아이콘의 애니메이션 유형을 선택합니다. 테마 옵션 선택에 대해 기본값을 선택합니다.

호버 애니메이션 색상
호버 애니메이션의 강조 색상을 선택합니다. 테마 옵션 선택을 위해 비워 둡니다.

링크 유형
콘텐츠 상자에 표시할 링크 유형을 선택합니다. 테마 옵션 선택에 대해 기본값을 선택합니다.

링크 영역
링크가 할당될 영역을 선택합니다. 테마 옵션 선택에 대해 기본값을 선택합니다.

링크 대상
_self = 같은 창에서 열기
_blank = 새 창에서 열기. 테마 옵션 선택에 대해 기본값을 선택합니다.

애니메이션 지연
세트의 각 요소 간의 애니메이션 지연을 제어합니다. 밀리초 단위로 1000 = 1초입니다.

애니메이션 오프셋
애니메이션을 시작해야 하는 시간을 선택합니다.

애니메이션 유형
단축 코드에 사용할 애니메이션 유형 선택

애니메이션의 방향
애니메이션의 들어오는 방향 선택

애니메이션의 속도
애니메이션 속도를 초 단위로 입력합니다(0.1 – 1).

여백 상단
픽셀(px) 단위, 예: 1px.

여백 하단
픽셀(px) 단위, 예: 1px.

CSS 클래스
래핑 HTML 요소에 클래스를 추가합니다.

CSS ID
래핑 HTML 요소에 ID를 추가합니다.

콘텐츠 상자 '하위' 편집

컨텐츠 상자를 편집하려면 페인트 브러시 아이콘을 클릭하십시오.

아래로 스크롤하여 '새 콘텐츠 상자 추가' 또는 콘텐츠 상자 내에 이미 항목이 있는 경우 '콘텐츠 상자 항목 1+'를 찾습니다.

여기에서 콘텐츠 상자 '하위'에서 텍스트, 이미지를 편집하고 아이콘을 추가하고 다양한 옵션을 변경합니다. 이러한 설정은 상위 설정을 덮어씁니다.

이제 파란색 SAVE 버튼을 클릭합니다. 편집 상자가 닫힙니다.

페이지를 저장하려면 오른쪽에 있는 업데이트 버튼을 클릭하는 것을 잊지 마십시오.

유용한 링크

아바다 업데이트 정보