Elementor Flexbox 컨테이너를 간단한 6단계로 사용하는 방법

새로운 것을 시도해 보셨나요?  Elementor Flexbox 컨테이너 특징?

글쎄요, 웹사이트를 모든 기기에 더욱 최적화하고 사이트 로드 속도를 높이는 것은 훌륭한 추가 기능이라는 점에서 화제가 되고 있습니다.

어떻게? 

음, 새로운 플렉스 컨테이너는 이전 섹션/내부 섹션과 약간 다른 방식(프론트 엔드 및 백엔드 모두)으로 작동합니다. 그리고 이러한 새롭고 다양한 작업 방식이 마법을 부립니다.

이 블로그에서는 Elementor flexbox 컨테이너가 웹 사이트를 구축하고 단계별 가이드에서 Elementor Flexbox 컨테이너를 사용하는 방법.

그러니 계속 읽어보세요…

Elementor Flexbox 컨테이너란 무엇입니까?

Elementor Flexbox 컨테이너는 모든 CSS Flexbox 기능을 Elementor 편집기에 제공합니다. 새로운 기능을 추가하면 고급 레이아웃을 쉽게 생성하여 웹 페이지가 크기에 관계없이 모든 장치에서 멋지게 보이도록 할 수 있습니다.

메모: 이름에서 알 수 있듯이 CSS Flexbox 컨테이너는 장치 반응형 디자인을 생성할 수 있는 고급 유연성을 제공합니다. Flexbox가 도입되기 전에는 블록, 인라인, 테이블, 위치와 같은 여러 레이아웃 모드를 사용하여 반응형 디자인을 만드는 것이 다소 복잡했습니다. 그러나 Flexbox 컨테이너를 사용하면 더 이상 여러 레이아웃 모드가 필요하지 않습니다.

그리고 Elementor flexbox 컨테이너의 경우 더 이상 섹션을 사용할 필요가 없습니다. 섹션 없이 컨테이너 내에 위젯을 추가할 수 있습니다. 컨테이너 내에 컨테이너를 무한대로 추가할 수도 있습니다.

위젯과 컨테이너를 추가하면 각 장치의 레이아웃과 함께 컨테이너 내 위젯 배포를 제어할 수 있습니다. 게다가 각 컨테이너(컨테이너 내의 컨테이너 포함)에 대해 별도의 사용자 정의 설정을 얻을 수 있습니다. 이를 통해 디자인 장치를 반응형으로 만들 수 있는 최고의 유연성을 얻을 수 있습니다. 

새로운 Elementor Flex 컨테이너와 섹션의 차이점

컨테이너와 섹션의 차이점이 무엇인지 궁금할 것입니다. 글쎄요, 꽤 많은 차이점이 있습니다. 다음은 몇 가지 주요 차이점입니다.

• 당신은 할 수 있습니다 Flexbox를 사용하여 컨테이너에 위젯 추가 섹션의 경우 열을 추가한 다음 위젯을 추가해야 합니다.
• 에서 플렉스 컨테이너, 위젯 너비는 기본적으로 인라인입니다. 반면 열 섹션 구조에서는 위젯 너비가 기본적으로 전체 너비입니다.
• 이전에는 섹션 안에 내부 섹션을 하나만 추가할 수 있었지만 최신 Flex 컨테이너를 사용하면 원하는 만큼 컨테이너를 추가할 수 있습니다.
• 열-섹션 구조를 사용하면 열 또는 인라인 위치 지정을 사용하여 위젯 방향을 변경할 수 있습니다. 이제 최신 Flex 컨테이너를 사용하면 열, 행, 열 역방향 또는 행 역방향을 사용하여 위젯 방향을 변경할 수 있습니다.
• 컬럼 섹션 구조에서는 웹 페이지를 반응형으로 만들기 위해 Reverse Column 또는 Duplicate 섹션을 사용했습니다. 최신 플렉스 컨테이너 방식에서는 각 장치에 대한 위젯 또는 컨테이너의 사용자 정의 순서.
• 섹션/열 구조의 정렬 옵션은 왼쪽, 가운데 및 오른쪽입니다. 반면에 Flex 컨테이너를 사용하면 flex-start, flex-center 및 flex-End와 같은 정렬 옵션이 제공됩니다.

이제 여러분은 이러한 변화가 여러분에게 어떤 이점을 줄 수 있는지 생각해 보아야 합니다. 이에 대해 자세히 알아보려면 다음 섹션으로 이동하세요.

Elementor Flexbox 컨테이너 사용의 장점

새로운 기능이 플러그인에 추가되기 전에 해당 기능이 고객에게 유용한지 확인하기 위해 많은 연구가 수행됩니다. Elementor flex 컨테이너도 마찬가지입니다. 이것 엘레멘터 이 기능은 사용자에게 큰 도움이 될 것이기 때문에 추가되었습니다.

Elementor flexbox 컨테이너를 사용하면 누릴 수 있는 몇 가지 이점은 다음과 같습니다.

• 섹션과 내부 섹션이 플렉스 컨테이너로 대체되므로 빌드할 수 있습니다. 더욱 최적화된 웹사이트.
• Flexbox는 Elementor Flexbox 열과 내부 섹션의 수를 줄입니다. 결과적으로 백엔드에서 더 적은 코드가 생성됩니다. 그리고 나ess DOM을 사용하면 속도가 향상됩니다. 당신의 WordPress 사이트를 위해.
• Flexbox 컨테이너 설정을 통해 다음을 수행할 수 있습니다. 장치 반응형 웹사이트 구축 이전보다 더 유연해졌습니다.
• 이제 할 수 있습니다 전체 섹션을 하이퍼링크로 연결합니다. 이전에는 위젯만 하이퍼링크할 수 있었습니다.
• 섹션에 내부 섹션을 하나만 추가할 수 있어 이전에 불만이 있었다면 Flex 컨테이너가 적합합니다. 플렉스 컨테이너를 사용하면 다음을 수행할 수 있습니다. 컨테이너 내에 컨테이너를 무기한 추가합니다.

Elementor Flexbox 컨테이너를 6단계로 사용하는 방법

아래 단계에 따라 웹사이트에서 Elementor Flexbox 컨테이너를 사용하여 더욱 최적화된 모양을 얻는 방법을 알아보세요. 이 프로세스는 6가지 쉬운 단계로 구성됩니다.

1단계: Elementor 실험에서 Flexbox 컨테이너 활성화

먼저 Elementor에서 Flexbox 컨테이너를 활용하려면 Flexbox 컨테이너 기능이 필요합니다. 그에 대한, Elementor ⇒ 설정으로 이동 WordPress 대시보드에서. 이제 실험 탭으로 이동하여 아래로 스크롤하여 'Flexbox Container' 옵션을 찾으세요.

옵션을 찾은 후 Elementor Flexbox Container를 활성화하려면 드롭다운 메뉴에서 활성을 선택하세요. 마지막으로 스크롤을 맨 아래로 내려서 '변경사항 저장'을 클릭하세요.” 상태를 저장합니다.

2단계: 새 페이지 만들기

Flex 컨테이너를 활성화한 후에는 이 기능을 사용할 수 있도록 새 페이지를 만들어야 합니다. 이를 위해 다음으로 이동하십시오. 페이지 ⇒ 모든 페이지 그런 다음 새로 추가를 클릭하세요. 이제 제목을 입력하고 Elementor로 편집을 클릭하세요

3단계: 컨테이너 추가

이제 섹션 대신 컨테이너를 추가해야 합니다. 그에 대한,  + 아이콘을 클릭한 다음 원하는 구조를 선택하세요.

메모: 탐색기에서 구조를 보면 구조가 실제로 열이 아닌 다른 컨테이너를 포함하는 컨테이너라는 것을 알 수 있습니다. 당신은 또한 수 왼쪽 메뉴에서 단일 컨테이너를 끌어다 놓습니다. 

다음과 같이 컨테이너에 대한 다양한 옵션을 사용자 정의할 수 있습니다.

• 컨테이너 너비: 컨테이너 너비를 박스형 또는 전체 너비로 선택할 수 있습니다.
• 너비: Boxed를 컨테이너 너비로 선택하면 너비는 928Px가 됩니다. 반면에 전체 너비를 선택하면 컨테이너 너비는 뷰포트 너비의 100%가 됩니다. 그러나 너비 값을 모두 변경할 수 있습니다.
• 과다: 오버플로 값을 기본값, 숨김 또는 자동으로 선택할 수 있습니다.
• HTML 태그: 컨테이너의 HTML 태그를 변경할 수도 있습니다. div, 머리글, 바닥글, 기본, 기사, 섹션 등과 같은 옵션이 제공됩니다. 태그가 새로 추가되었습니다. 이렇게 하면 e를 돌릴 수 있습니다.컨테이너 전체를 태그가 있는 링크로 묶습니다.

메모:  또한 "항목" 아래에 많은 옵션이 있습니다(나중에 자세히 설명). 게다가, 당신은 할 수 있습니다 각 내부 컨테이너에 대해 위의 모든 설정을 사용자 정의하십시오. 또한.

4단계: 위젯 추가

위젯을 추가하는 과정은 열 섹션 구조와 동일합니다. 당신은 위젯을 검색한 다음 각 컨테이너의 + 아이콘을 끌어서 놓습니다.. 예를 들어 제목 하나, 동영상 하나, 소셜 공유 아이콘 하나를 추가하겠습니다.

5단계: 컨테이너 콘텐츠 맞춤설정 

이제 컨테이너 위젯을 사용자 정의할 차례입니다. 이를 위해 컨테이너를 편집하십시오. 그런 다음 왼쪽 패널의 레이아웃으로 이동하여 항목 옵션을 확장합니다. 플레이할 수 있는 옵션은 다음과 같습니다.

• 지도: 기본 방향은 행입니다. 그러나 행, 열, 역방향 행 및 역방향 열과 같은 네 가지 옵션이 제공됩니다. 열이나 역방향 열을 선택하면 기본 컨테이너 내의 모든 컨테이너가 다른 Elementor Flexbox 열로 표시됩니다.

참고: 열을 선택한 경우 내부 컨테이너의 너비를 조정해야 합니다.

• 컨테이너 정렬: 정렬을 Flex Start, center, flex-end, Scratch로 설정할 수 있습니다. Flex 시작은 시작 지점에서 컨테이너 요소를 배치합니다.t, Flex 센터 값을 사용하면 항목을 중앙에 배치할 수 있습니다. 반면에, Flex end를 사용하면 내부 컨테이너를 모두 하단에 표시할 수 있습니다. 그리고 확장 옵션을 사용하면 내부 컨테이너가 할당된 경우 추가 공간을 차지하게 됩니다. 방향을 행으로 선택하면 이 모든 것이 적용됩니다.

반면에 다음을 선택하면 기둥 방향, flex-start 및 center 값은 행과 동일하게 작동합니다. 그러나 flex-end를 사용하면 컨테이너가 스크래치와 함께 오른쪽으로 이동됩니다., 왼쪽의 모든 공간을 차지합니다.

• 콘텐츠 정당화:  콘텐츠를 정당화하는 6가지 옵션이 있습니다. 플렉스 시작, 중심, 플렉스 끝, 사이 공간, 주위 공간, 균등한 공간입니다. 사이 공간은 각 항목 사이에 동일한 공간을 추가합니다. 그러나 항목의 상단이나 하단에 공간이 추가되지는 않습니다.

space around 옵션은 각 컨테이너의 상단과 하단 모두에 공간을 추가합니다. 그리고 space evenly 옵션은 모든 위젯과 내부 컨테이너 주위에 동일한 공간을 추가합니다.

• 요소 격차:  이 옵션을 사용하여 요소(위젯 및 내부 섹션) 사이에 공간을 추가할 수 있습니다.

• 포장하다: 선택하다 랩 없음 놓다 한 줄에 있는 모든 항목 그리고 내용이 여러 줄로 흐르도록 줄 바꿈합니다.

6단계: 게시 및 미리보기

4단계를 반복하여 모든 컨테이너 설정을 맞춤설정할 수 있습니다. 사용자 정의가 완료되면 게시 버튼을 클릭하여 페이지를 게시하세요. 그런 다음 미리보기 버튼을 클릭하면 새로운 Flex 컨테이너 구조가 포함된 페이지를 볼 수 있습니다.

섹션 기반 Elementor 페이지를 Flexbox 컨테이너로 변환하는 방법

섹션/열 기반 구조를 새로운 Elementor Flex 컨테이너로 변환하는 것은 매우 쉽습니다. 아래에 표시된 4가지 간단한 단계를 따르면 이 작업을 수행할 수 있습니다.

1단계: 변환하려는 섹션을 선택하세요.

각 섹션을 별도로 변환해야 합니다. 먼저 변환하려는 섹션을 선택하십시오. 당신은 할 수 있습니다 여섯 개의 점을 클릭하세요 섹션을 선택하거나 네비게이터에서 섹션을 선택하세요 (왼쪽 하단에서 옵션을 찾을 수 있습니다).

2단계: 변환을 클릭하여 변환합니다.

이제 변환하려면 왼쪽 패널에서 레이아웃 아래의 컨테이너로 변환 옵션입니다. 딸깍 하는 소리 에 전환하다 단추.

3단계: 이전 섹션 삭제

변환 프로세스가 완료되면 다음을 찾을 수 있습니다. 동일한 섹션의 두 가지 버전. 하나는 섹션 기반이고 다른 하나는 컨테이너 기반입니다. 상단의 버전은 섹션 기반 버전입니다. 이전/원본 버전을 삭제하세요.

4단계: 업데이트 및 미리보기

페이지의 모든 섹션에 대해 1단계부터 3단계까지 반복할 수 있습니다. 모든 섹션을 Flexbox 컨테이너 레이아웃으로 변환한 후 저장하려면 업데이트 버튼. 이제 미리보기 버튼을 클릭하면 동일한 페이지를 컨테이너 레이아웃으로 볼 수 있습니다.

Elementor에서 수평 및 수직 Flexbox 컨테이너를 만들 수 있습니까?

예, Elementor는 몇 초 이내에 수평 및 수직 Flexbox 컨테이너 생성을 지원합니다. Elementor 컨테이너의 점 6개를 선택하고 레이아웃 탭에서 가로 또는 세로 방향을 선택하기만 하면 됩니다. 따라서 문제 없이 Flexbox 컨테이너를 만들 수 있습니다.

새로운 Flexbox 컨테이너와 함께 Elementor 추가 기능을 사용할 수 있습니까?

예. 당신은 절대적으로 할 수 있습니다. 

당신이 사용할 수있는 ElementsKit - Elementor를 위한 최고의 애드온 Elementor 페이지 빌더에 추가 위젯 및 기타 기능을 추가합니다. 이 요소 애드온 ~이다 100%는 Elementor의 새로운 Flexbox 컨테이너와 호환됩니다.

Elementor 섹션을 컨테이너 레이아웃으로 변환하는 동일한 프로세스(위 섹션 참조)를 사용하여 ElementsKit 섹션/페이지를 변환할 수 있습니다. 

ElementsKit에는 다음이 포함되어 있습니다. 500개 이상의 준비된 섹션, 35개 이상의 준비된 페이지 및 85개 이상의 맞춤형 애드온 당신의 삶을 편리하게 만들어주는 기능. 당신은 쉽게 할 수 있습니다 완전한 웹 사이트 만들기 단 몇 분 만에 ElementsKit Premade 템플릿을 사용할 수 있습니다.

다음은 ElementsKit 사전 제작 페이지가 Elementor Flexbox 컨테이너로 얼마나 원활하게 변환되는지 확인할 수 있는 예입니다.

마무리

이제 Elementor의 새로 추가된 내용에 대해 왜 그토록 많은 내용이 있는지 아시게 되리라 확신합니다. Elementor Flex 컨테이너는 웹 사이트를 만드는 방법을 찾고 있던 모든 WordPress 웹 사이트 빌더에게 진정한 축복입니다. 더욱 최적화되고, 더 빠르게 그리고 반응이 좋다 장치 크기에 관계없이.

그리고 가장 좋은 점은 이전에 만든 웹사이트를 컨테이너 기반의 최적화된 웹사이트로 즉시 전환할 수 있다는 것입니다. 그러나 Flex 컨테이너는 아직 실험 모드에 있습니다. 따라서 활성 기능으로 게시될 때까지는 라이브 웹사이트에서 사용하지 않는 것이 좋습니다.

그때까지는 스테이징 사이트에서 Elementor flex 컨테이너를 자유롭게 사용해 보세요. 그리고 시험해 보세요 ElementsKit 고객의 관심을 끌고 웹사이트의 성공을 높이는 멋진 웹사이트를 디자인할 수 있는 유연성을 높이세요.