WordPress는 단순한 인터페이스, 고도로 사용자 정의 가능한 테마 및 끝없는 다양성으로 인해 전 세계적으로 널리 사용되는 CMS입니다. 플러그인 강력한. 그것은 심지어 아마추어 사용자를 위해 웹 사이트의 생성, 개발 및 관리를 단순화했습니다.

오늘날 그리고 WordPress 덕분에 더 이상 매력적인 웹 페이지를 만들기 위해 특정 지식이 필요하지 않습니다. 그러나 당신은 peut 있다 정말 놀라운 디자인을 제공하는 웹 사이트를 발견 한 적이 있습니다. 그것은 어떻게 이루어졌다?

불행히도, 당신이 아마추어이거나 초보자라면, 워드프레스(WordPress), 테마를 수정하려면 테마의 특성뿐만 아니라 프로젝트 또는 목표에 따라 HTML, CSS, PHP 및 기타 여러 기술에 대한 어느 정도의 전문 지식이 필요합니다.

그러나 숙련 된 코더라도 최종 결과물에서 시간과 품질을 절약 할 수있는 도구가 반드시 필요합니다.

다행히도 플러그인 워드 프레스« WP 베이커리 페이지 빌더 이전에는 " 비주얼 컴포저 » 이 문제에 대한 해결책을 제공합니다. 후자의 경우에도 대부분 초보자 블로거 웹사이트에 대한 완전히 독특한 모양의 페이지를 만들 수 있습니다.

이 플러그인으로 다음을 만들 수 있습니다.

  • 매력적인 방문 페이지 (방문 페이지)
  • 판매 페이지에서 전문적인 모습
  • 귀하의 비즈니스를위한 "쇼케이스"사이트
  • 훈련에 대한 모듈 페이지
  • 잠시

제 생각에는 인터넷에서 가장 좋은 서식 (또는 레이아웃) 도구입니다. 특히 WordPress 사용자에게.

따라서이 자습서에서는 웹 사이트에 고유 한 모양을 제공하는 방법을 보여줍니다. (또는 블로그) 와 플러그인 비주얼 컴포저.

그래서 ...

설치 및 구성하는 방법 WPBakery 페이지 빌더 플러그인

WP 베이커리 페이지 빌더 은 플러그인 당신이 살 수있는 프리미엄 Codecanyon : 인터넷 플러그인에 최고의 판매 플랫폼입니다.

괜찮아. WordPress에서이 레이아웃 플러그인을 구입하고 다운로드 한 후 설치하고 활성화하기 만하면됩니다.

그런 다음 기본 조정을 시작합니다. 이렇게 하려면 해당 위치로 이동하십시오. "설정 >> 비주얼 컴포저 » 대시 보드에.

일반 설정

일반 설정 비주얼 작곡가첫 번째 탭 (일반 설정)변경할 수 있습니다 :

  • 그 내용에 시각 작성할 수 있습니다. 항목을 확인할 수 있습니다. (게시) 및 / 또는 페이지 (페이지)
  • 다른 규칙액세스 다른 역할. 이 옵션을 사용하면 다음을 결정할 수 있습니다 그게 무슨 변화. 사용 가능한 다른 역할이 표시됩니다. 각 요소를 클릭하여 해당 요소를 확인해야합니다. (역할) 액세스 할 수 있습니다. ""의 사용을 금지 할 수 있습니다. 시각 composer”를 특정 역할의 사용자에게 제공합니다.
    WPbakery 페이지 빌더에서 편집기 활성화
  • 항목 활성화 또는 비활성화 반응
  • Google 글꼴의 하위 집합 정의

wpbakery 역할의 선택디자인 옵션

디자인 옵션에서 "의 다양한 요소의 기본 시각적 모양을 수정할 수 있습니다. 시각 작곡가 ". 사용하기 전에 옵션을 선택했는지 확인하십시오 « 맞춤형 디자인 옵션 사용 ».

CSS 설정

이 옵션을 사용하면 모든 요소에 적용되는 색상을 정의 할 수 있습니다. 

  • " 맞춤 CSS »각 항목을 추가로 사용자 정의 할 수있는 기회를 제공하며 개발자 만 그것이 무엇인지 알 수 있습니다.
  • 탭« 제품 라이센스 »활성화 할 수 있습니다. 플러그인 자동 업데이트를받을 수 있습니다.
  • 탭« 단축 코드 활동적인 본질적으로 개발자에 관한 것입니다.

좋아요, 이제 우리는 다음을 사용하여 사용자 정의 웹 페이지를 만들겠습니다. 비주얼 작곡가.

로 맞춤 페이지를 만드는 방법 시각 작곡가

개인화 된 웹 페이지를 쉽게 만들려면 " 백 오피스 ", 즉, WordPress 대시 보드에서 사이트를 수정합니다. 프론트 오피스 ".

편집기 - 더 - 프런트 엔드 - 더 - 편집기 - 백엔드

Gutenberg를 사용하는 경우 상단 작업 표시 줄에 "페이지 편집기"버튼이 있습니다.

편집자 비주얼 작곡가 대시 보드 편집기 구텐베르크

편집자의 장점 프론트 오피스 페이지를 실시간으로 편집하고 테마에 다른 요소가 어떻게 나타나는지 확인할 수 있습니다.

백 오피스 편집기 사용

"의 편집기에 액세스하려면 백 오피스 », 나는 당신이 클릭«을 초대합니다 발행자 BACK-OFFICE ". "를 클릭하여 언제든지 WordPress 비주얼 편집기로 돌아갈 수 있습니다. 클래식 모드 ". 그러나 나는 그것이 필요하지 않을 것이라고 생각 하므로이 플러그인 웹 페이지 형식이 완료되었습니다.

백 오피스 편집기에서 페이지에 적용 할 전역 레이아웃을 선택할 수 있습니다.

업데이트 페이지 당신이 페이지로 무엇을 할 계획에 따라 다릅니다. 그래서 당신은 « 상륙 페이지» 홈페이지를 만들려면 "서비스 목록" 서비스 등을 보여주는 페이지 경험이 있으면 베팅을 만들 수도 있습니다. en 페이지 사용자 정의 설계 매우 프로.

귀하가 선택한 설정이 무엇이든간에 페이지, 요소들의 표현은 후자 모두에서 유사하다. 새 항목을 추가 할 수 있습니다. 요소 en cliquant sur "+" 맨 위에 메타 상자« 비주얼 편집기 »또는 아이콘을 클릭하여 모델 추가 "모델".

각 행에서 다음을 수행 할 수 있습니다. (왼쪽에서 오른쪽으로) :

  • 라인을 이동
  • 행에서 열 관리
  • 새 열을 추가

wpbakery 페이지 빌더 인터페이스상자 오른쪽에서 다른 옵션을 사용할 수 있습니다. 이 옵션을 사용하면 (왼쪽에서 오른쪽으로)받는 사람 :

  • 줄을 줄이다
  • 행을 편집
  • 행을 복제
  • 행을 삭제

wpbackery 레이아웃각 열의 중간에서 항목을 추가하거나 열을 편집하거나 삭제할 수 있습니다.

wpbackery 섹션 옵션wpbackery 섹션 옵션

추천 자료

다음은 강력하게 권장하는 몇 가지 비주얼 작곡가 확장입니다.

1-열 관리 방법

열 관리 탭에서 행에 추가 할 열 수를 선택할 수 있습니다. 다른 열 모델을 이해하려면 각 분수가 열이 차지할 너비에 해당한다는 것을 알아야합니다. 템플릿에 분수가있는 한 페이지에는 여러 개의 열이 있습니다.

물론 11의 다른 열 템플릿을 사용할 수 있지만 링크를 클릭하여 원하는만큼 만들 수 있습니다 "개인화 된" 열 목록 바로 아래에 있습니다.

예를 들어, 동일한 너비의 2 열이있는 페이지 섹션을 표시하려면 (또는 추가) "1 / 2 + 1 / 2". 

열이 블로그에 표시되고 너비가 테마의 크기에 비례하여 분배됩니다. 열은 가능한 한 많은 항목을 포함 할 수 있으므로이 수준에는 제한이 없습니다.

레이아웃 wpbakery 섹션

다른 요소는 모든 열로 이동할 수 있습니다.

움직이는 WordPress의 텍스트 상자 wpbakery각 요소 위로 마우스를 가져 가면 해당 옵션, 특히 다음을 수행 할 수있는 버튼에 액세스 할 수 있습니다.

  • 움직임 요소
  • 변화 요소
  • 복제 요소
  • supprimer 요소

옵션 - 더 - 요소

2-요소를 추가하는 방법

"에서 제안한 요소로 각 열을 맞춤 설정할 수 있습니다. 시각 작곡가 ". 항목을 추가하려면 버튼을 클릭하십시오 "+" 특정 열 또는 버튼 "+" 메인 메뉴 플러그인.

wpbakery 요소를 추가하십시오
열이 비어있는 경우 (ne 포함 내용 없음)그녀는 버튼이있다 "+" 내부.
 예를 들어 비디오를 추가하려면이 버튼을 클릭하고 비디오 요소를 선택합니다.

추가-A-비디오

클릭하면 새 창이 열립니다. 이 창에서 제목, 비디오 링크 및 추가 수업을 제공해야합니다. (의무적이지 않은). 비디오에 대한 다양한 정보 입력을 마치면 변경 사항을 저장하는 것을 잊지 마십시오.

wpbakery 비디오 튜닝비디오는 백 오피스 편집기에서 사용할 수 있습니다. 변경 사항을 한 번 더 저장하십시오. 클릭 만하면 볼 수 있습니다 "미리보기".

비디오 wpbakery wordpress를 추가하십시오항목을 추가하는 프로세스는 몇 가지 예외를 제외하고 다른 모든 항목에 대해 동일합니다. 완료해야 할 정보는 요소에 따라 다를 수 있습니다. 

예를 들어 텍스트 요소를 선택하면 클래식 비주얼 편집기를 찾을 수 있습니다. (기사 나 페이지를 쓸 때 사용 가능한 것)이지만 요소를 표시하는 동안 애니메이션을 추가 할 수있는 옵션도 있습니다. 따라서 후자는 설정에 따라 한 위치에서 다른 위치로 페이드 될 수 있습니다.

텍스트 블록 설정이것에 가장 흥미로운 플러그인, 당신이 만들 수 있다는 것입니다 사이드 바 예를 들어 테마가 그렇지 않은 경우. 이렇게하려면 추가 버튼을 클릭하십시오. ( " + ")을 클릭하고 " WP 코멘트 최근 "," 페이스북 처럼 그리고 마지막으로« Wp 카테고리 ".

이제이 맞춤 열 템플릿을 만듭니다. 1 / 3 + 2 / 3 »또는 기타 및 요소 추가 사이드 왼쪽 열 또는 오른쪽 열에 있습니다. 그것은 모두 Visual Composer에서보다이 레이아웃 확장에서 사이드 바를 생성하려는 너비에 달려 있기 때문에 중요하지 않습니다.

wpbakery 컬럼 설정

오른쪽에 비어있는 새 열이 표시되고 선택한 새 요소를 추가합니다 (간단한 텍스트를 추가하는 것이 좋습니다.). 이제 페이지를 저장하고 미리보기로 이동하여이 연습의 결과를 확인합니다.

3-페이지 템플릿을 저장하고 재사용하는 방법

페이지의 템플릿을 저장하고 나중에 사용할 수 있습니다. 이 옵션을 사용하면 페이지에서 템플릿을 복사하는 데 드는 시간을 절약 할 수 있습니다. 여기에서 모든 것이 한 번의 클릭으로 완료됩니다. 예, 한 번의 클릭으로… 또는 두 번 🙂

템플릿을 저장하려면 템플릿 아이콘을 클릭하십시오. 표시되는 창에서 " 현재 레이아웃을 템플릿으로 저장 »를 클릭 한 다음« 템플릿 저장 ".

중요 사항: 빈 페이지가 아닌 템플릿으로 저장하려는 페이지에서이 작업을 수행해야합니다.

모델 wpbakery 등록

저장 한 다른 모델을 찾는 것과 동일한 방법이며 섹션의 동일한 창에서 더 아래에 있습니다. "모델로드".

내 wpbakery 모델이 경우에는 새 페이지를 만든 다음 템플릿으로 이동하여 페이지에 제공 할 페이지를 선택하기 만하면됩니다.

프론트 오피스 편집자와 함께

프론트 오피스 편집자는 장점이 있습니다 de 실시간으로 페이지를 편집 할 수 있습니다. 즉, Visual Composer를 사용하여 사이트에 대한 모든 변경 사항이 어떻게 표시되는지 확인할 수 있습니다. 이 접근 방식의 장점은 백 오피스 페이지 편집기를 사용하는 것처럼 맹목적으로 작업 할 필요가 없다는 것입니다.

언제든지 한 옵션에서 다른 옵션으로 전환 할 수 있습니다. (사무실 백 오피스 또는 가장자리).

프론트 오피스 에디터는 바가 있다는 점에서 백 오피스 에디터와 크게 다르지 않습니다. utilisateur 동일하지만 백 오피스 편집기의 모든 옵션은 프론트 오피스 편집기와 동일합니다.

wpbakery 툴바그러나 다음과 같은 XNUMX 개의 새로운 버튼이 추가되었습니다.

  • 가이드 활성화 또는 비활성화
  • 다른 기기에서 블로그가 어떻게 보이는지 확인할 수있는 에뮬레이터
  • 백 오피스에 뒤로 버튼
  • 변경 사항 저장 버튼
  • 출구 버튼 시각 작곡가

wpbakery 옵션페이지의 각 요소를 수정할 수 있으며 각 요소 위에 마우스를 올려 놓으면 사용 가능한 옵션을 볼 수 있습니다. 버튼 모양 "플레이", 요소에 대해 더 많은 옵션을 표시 할 수 있습니다.

사무실 - 중 - 전면 옵션 - 더 - 요소

첫 단계는 어려울 수 있지만 실제로 연습하면 홈페이지 이 같은.  원한다면, 플러그인당신은 할 수 있습니다 그것을 무료로 시험해 보라. (로그인, 사용자 : 데모, 비밀번호 : 데모).

집에서 1 분만에 이룰 수 있었던 것입니다. 연습을 통해 매우 만족스러운 결과를 얻을 수 있습니다. 이 강력한 플러그인을 사용하여 WordPress 웹 사이트를 구축하는 데 도움이 필요하면 주저하지 마십시오. BlogPasCher 팀에 문의누가 당신의 프로젝트를 기꺼이 실현할 것입니다.

이 튜토리얼이 프랑스어로만 제공되기를 바랍니다. 플러그인 « 비주얼 컴포저 ". 문제가 있으면 (또는 지원) 기꺼이 도와 드리겠습니다. 잊지 마요: 아름다운 웹 페이지가 더 궁금 고객을 변환합니다.

권장 확장

다음은 강력하게 권장하는 몇 가지 비주얼 작곡가 확장입니다.

더 많은 플러그인 찾기 Codecanyon

필요로하는 사람들이 자습서를 공유 할 수 있습니다.