WordPress를 Visual Builder로 설정하는 방법

Jan 28, 2026

어떻게

(이미지 크레딧 : 요소 / 조셉 포드)

Visual Builders는 WordPress에 오랜 시간 동안 존재했지만 항상 사용과 함께 나누기를 일으켰습니다. 대부분은 페이지 속도와 그들이 생성하는 코드와 편집 화면의 드래그 앤 드롭 블록이 아닌보다 자주 상당한 단점이 최종 결과를 현실적으로 표현하지 못했습니다. 반면에 코드를 작성하지 않고도 신속하게 설계하고 프로토 타입을 작성할 수 있기를 원합니다.

PageBuilder Plugin Elements를 사용하여 올바른 설정으로 WordPress를 최소한의 시각적으로 변환 할 수 있습니다. 웹 사이트 빌더 , 테마와 거의 독립적 인 설정 배열을 휘두르게하여 복잡한 디자인을 쉽게 만들 수 있습니다.

219를 사용하여 기본값을 사용합니다 Wordpress 테마 프로토 타입 또는 프로덕션 준비에 사용할 수있는 준비가되는 캔버스를 만들 수 있습니다. WordPress 웹 사이트 ...에 이 캔버스를 사용하면 두 섹션과 연락처 양식이있는 간단한 페이지를 만들 것입니다.

우리는 웹 페이지를 모바일 친화적으로 만들고 두 개의 플러그인을 사용하여 시각적 인 작성기를 사용하고 페이지의 이미 최소한의로드 시간을 최소화하는 데 주요 관심사를 해결합니다. 또는 그레이트의 순종을 보아라 WordPress 자습서 당신의 기술을 더 깊게 연마합니다.

각 이미지의 오른쪽 상단에있는 아이콘을 사용하여 확대됩니다.

2019 년 최고의 WordPress 호스팅 서비스

01. WordPress 사본을 설치하십시오

걷어차려면 사용중인 시스템에 WordPress 사본을 설치하십시오. 우리는 내 컴퓨터에 인스턴스를 만드는 빠른 설치 옵션을 제공하는 Laragon이라는 프로그램을 사용하고 있습니다.

02. 필요없는 부품을 제거하십시오

Give yourself a clutter-free page to work with — 함께 일할 클러 터없는 페이지를주십시오. (이미지 크레딧 : 요소 / 조셉 포드)

플러그인으로 넘어 가서 WordPress와 함께 번들로 제공되는 모든 것을 삭제하십시오. 글쓰기 당시 '클래식 편집기'플러그인을 설치하여 새로운 것을 비활성화하기위한 노력을 간소화합니다. 구텐부르크 편집자 ...에 혼란을 줄이기 위해, 우리는 또한 외관 & gt; 위젯을 사용하고 모든 위젯을 제거합니다.

03. 머리글과 바닥 글으로 테마를 선택하십시오

우리가 사용할 테마의 유일한 부분은 헤더와 바닥 글입니다. 다른 모든 것이 다시 벗어날 것입니다. 우리는 기본 20 개의 테마를 사용하고 있으며 날카로운 보이게하기 위해 빠른 변경을 보여줄 것입니다. 요소를 사용할 때 테마가 적을수록 더 좋습니다.

04. 요소를 설치하고 페이지를 만듭니다

You'll find Elementor in the WordPress plugins library — WordPress Plugins 라이브러리의 요소를 찾을 수 있습니다 (이미지 크레딧 : 요소 / 조셉 포드)

WordPress 플러그인 검색을 사용하여 찾습니다 요소 그것을 설치하십시오. 일단 설치 및 활성화되면 새 페이지를 만듭니다. 새 페이지의 '홈'의 이름을 지정하고 데이터베이스에 존재하도록 초안으로 저장하십시오. 'Elementor에서 편집'을 클릭하십시오. Elementor Visual Builder를로드합니다.

05. 전체 너비입니다

페이지를보고, 그것은 우리의 주제의 박스형 레이아웃에 제약이 있습니다. 이를 사용하지 않으려면 Elementor Editor의 왼쪽 하단의 COG를 클릭하고 '페이지 레이아웃'을 '요소 전체 너비'로 변경하십시오. 많은 페이지없이 웹 사이트를 만드는 경우 헤더와 바닥 글을 제거하는 '요소 캔버스'옵션도 고려해 볼 수 있습니다.

06. 일부 콘텐츠를 추가하십시오

Give yourself some content to work with — 함께 일할 수있는 내용을주십시오 (이미지 크레딧 : 요소 / 조셉 포드)

이제 우리는 빈 페이지를 가지고 있기 때문에 우리는 자신과 함께 일할 무언가를 주어야합니다. 편집기의 오른쪽 상단의 Elementor 그리드 아이콘을 클릭하여 사용 가능한 모든 요소를 볼 수 있습니다. 헤더 블록과 텍스트 블록은 이들을 페이지의 중간으로 드래그하여 추가됩니다. 이 두 요소는 우리가 우리의 타이포그래피를 스타일링하는 데 도움이 될 것입니다.

07. 제목을 제거합니다

모든 표제 위에 줄이 렌더링되는 20 개의 19 개의 테마를 사용할 때 알 수 있습니다. WordPress 사용자 정의 도구를 사용하여 해당 제거하십시오. 우리가 여기에있는 동안, 사이트 ID 설정 및 일부 메뉴 항목에 로고를 추가 할 것입니다.

 H1 : 이전, H2 : 이전 {
디스플레이 : 없음;
}

08. 콘텐츠 너비를 수정하십시오

Ensure the content lines up with the header — 콘텐츠가 헤더와 함께 일치하는지 확인하십시오 (이미지 크레딧 : 요소 / 조셉 포드)

우리의 콘텐츠 섹션은 머리글과 줄이 아닙니다. 이는 2010 년이 계산 된 여백을 사용하여 헤더와 바닥 글의 너비를 설정하기 때문입니다. 우리는이 요소 섹션 에서이 CSS와 일관성을 위해이를 복제 할 수 있습니다.

또한 기본 요소 설정 페이지에서 콘텐츠 너비를 늘려야합니다.

 @media 만 화면과 (최소 폭 : 768px) {
.Elementor-top-section.ewentor - 섹션 -
박스형 & gt; .Elementor-container {
마진 : 0 Calc (10 % + 60px);
}
}

09. 열기 섹션을 만드십시오

Drag in the elements you want to include — 포함 할 요소를 드래그하십시오 (이미지 크레딧 : 요소 / 조셉 포드)

우리는 소량의 텍스트와 이미지가 포함 된 페이지의 맨 위 섹션으로 시작합니다. 앞부분부터 섹션을 삭제하고 레드 플러스를 클릭하여 새 두 열 섹션으로 바꿉니다. 머리글, 텍스트 편집기 및 왼쪽 열의 단추를 드래그하십시오. 오른쪽에 우리는 이미지를 드래그합니다.

10. 배경을 추가하십시오

해당 오버링 및 파란색 탭을 클릭하거나 요소 단추의 오른쪽 하단에있는 네비게이터를 사용하여 섹션을 선택하십시오. 3 개의 탭 - 레이아웃, 스타일 및 고급이 표시됩니다.

레이아웃 탭을 사용하여 섹션을 80V의 높이를 지정하십시오. 스타일을 선택하여 옵션을 찾고 배경 옵션을 사용하여 # 0073AA의 배경을 설정하십시오.

11. 텍스트 스타일

You can change the font for your whole document in one go — 한 번에 전체 문서의 글꼴을 변경할 수 있습니다. (이미지 크레딧 : 요소 / 조셉 포드)

전체 문서의 글꼴을 변경하려면 엘레 터 바의 상단의 햄버거 메뉴에서 '기본 글꼴'을 클릭 할 수 있습니다. 개별 텍스트 요소를 클릭하고 스타일 탭을 사용하여 색상 및 기타 옵션을 변경할 수도 있습니다.

12. 배경 오버레이 효과를 사용하십시오

큰 추가는 섹션 스타일 탭에서 배경 오버레이를 빠르게 추가 할 수있는 기능입니다. 섹션을 선택하고 백그라운드 탭으로 이동하십시오. 우리의 배경 이미지를 써서 텍스처를주고 '배경 오버레이', 아래의 드롭 다운, 그라데이션 배경 오버레이를 선택하십시오.

13. 조치에 대한 통화를 만듭니다

우리의 두 번째 섹션은 작업 섹션의 호출이됩니다. 우리는 연락처 양식 7을 삽입 할 것이지만, 단축 코드를 생성 할 수있는 것은 작동합니다. 두 개의 열이있는 새 섹션을 만들거나 마지막 섹션을 마우스 오른쪽 버튼으로 클릭하고 복제하십시오.

연락처 양식 플러그인을 설치하고 양식에 대한 단축 코드를 생성하십시오. 오른쪽 열에서 ShortCode 위젯을 드래그하여 상자에 단축 코드를 붙여 넣습니다.

14. 모바일 친절한

Don't forget to tweak your design for mobile — 모바일을위한 디자인을 조정하는 것을 잊지 마십시오 (이미지 크레딧 : 요소 / 조셉 포드)

Page에 대한 모바일 옵션에 액세스하려면 요소 패널의 맨 아래의 '응답 성 옵션'을 켜야합니다. '모바일'모드를 선택하면 섹션에 몇 가지 패딩이 필요하다는 것을 알 수 있습니다.

각 설정 옆에있는 파란색 아이콘이 있는지 확인하여 확인할 수있는 모바일 옵션을 사용하면 선택 사항이 기본 데스크톱보기에 영향을주지 않습니다. 그러나이 모드에서 이루어진 레이아웃 변경 사항은 데스크톱보기에 영향을 미칩니다.

15. 이미지 최적화

페이지로드 속도 문제를 최소화하려면 이미지 압축을 실행해야합니다. 이것은 플러그인이나 웹 서버를 통해 수행 할 수 있습니다. 지금은 인기있는 플러그인, EWWW 이미지 최적화 도구를 사용하여 이미지의 최대 품질과 너비를 설정 한 다음 최적화를 실행하십시오.

16. 성능을 향상시키기 위해 페이지를 캐시합니다

Make your site lightning-fast with help from a cache plugin — 캐시 플러그인의 도움으로 사이트를 번개로 만드십시오. (이미지 크레딧 : 요소 / 조셉 포드)

마지막으로 우리는 페이지의로드 시간을 최대화하기 위해 캐시 플러그인을 설치합니다. 거기에는 많은 캐시 플러그인이 있습니다. 캐시 에이 블러 낮은 프로파일 이며이 설정에서 잘 작동합니다.

캐시가 활성화 된 상태에서 웹 사이트는 빠르게로드됩니다. 또한 배경에 완전히 기능적인 시각적 인 작성기가 있습니다. 그것은 당신이 디자인 할 수있는 완벽한 빠른 작업 빈 캔버스입니다.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — (이미지 크레디트 : 미래)

9 월 26 일에 우리와 함께하십시오 CSS를 생성합니다 , Creative Bloq, Net 및 Web Designer가 제공 한 웹 디자이너를위한 맞춤 회의 ...에 2019 년 8 월 15 일 이전에 예약 할 때 £ 50을 이른 새 티켓으로 저장하십시오.

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 구매 문제 287. 또는 구독 ...에

자세히보기 :

40 훌륭한 WordPress 자습서
WordPress를 헤드리스 CMS로 사용하십시오
WordPress 5.0의 새로운 기능은 무엇입니까?

WordPress를 Visual Builder로 설정하는 방법

01. WordPress 사본을 설치하십시오

02. 필요없는 부품을 제거하십시오

03. 머리글과 바닥 글으로 테마를 선택하십시오

04. 요소를 설치하고 페이지를 만듭니다

05. 전체 너비입니다

06. 일부 콘텐츠를 추가하십시오

07. 제목을 제거합니다

08. 콘텐츠 너비를 수정하십시오

09. 열기 섹션을 만드십시오

10. 배경을 추가하십시오

11. 텍스트 스타일

12. 배경 오버레이 효과를 사용하십시오

13. 조치에 대한 통화를 만듭니다

14. 모바일 친절한

15. 이미지 최적화

16. 성능을 향상시키기 위해 페이지를 캐시합니다

어떻게 - 가장 인기있는 기사

Krita 자습서 : 디지털 아트 소프트웨어의 기본 사항을 배우십시오

HTML5에 대한 이펙트 애니메이션 내보내기

멋진 인쇄 프로모션 재료를 만들기위한 3 가지 팁

Maya에서 더 나은 캐릭터 애니메이션 만들기

사용자 정의 Maya 인터페이스 만들기

벡터 로고를 2D에서 3D로 가져가는 방법

야생 서쪽 트위스트로 만화를 만드는 방법

정확한 뼈와 근육을 그립니다

카테고리