Elementor 3.10 소개 – 새로운 중첩 요소 – Elementor 위젯을 사용한 디자인의 미래

Elementor 및 Elementor Pro 3.10에는 Nested Elements로 웹사이트를 디자인할 때 완전히 새로운 창의성의 세계를 열 수 있는 새로운 디자인 기능이 포함되어 있으며 크기 제어에 새로운 사용자 정의 단위를 도입하여 더 높은 수준의 정확도에 도달할 수 있습니다. 그것은 당신의 웹 사이트를 디자인하는 데 온다. 이러한 버전에는 새로운 컨테이너 기반 라이브러리와 성능 향상도 포함됩니다.

웹 사이트 디자인을 향상시키는 새로운 중첩 요소

Nested Elements는 웹 사이트 디자인을 개념화하는 완전히 새로운 방법을 제공합니다. 중첩 요소를 사용하면 Flexbox 컨테이너의 기능을 활용하여 요소를 다른 요소 안에 배치할 수 있습니다. 하나의 컨테이너를 다른 컨테이너 안에 배치하고 무한히 중첩할 수 있는 것과 유사하게 중첩 요소를 사용하면 다른 요소 안에 모든 요소(위젯 또는 컨테이너)를 배치할 수 있습니다.

Flexbox 컨테이너는 공식적으로 안정적이므로 향후 릴리스에서 Carousel, Accordion, Tab 등과 같은 여러 기존 위젯에 중첩 기능을 도입할 예정입니다. Mega Menu와 같은 완전히 새로운 Nested 위젯도 도입할 예정입니다.

Renewed Tabs Widget 소개 – 첫 번째 Elementor 중첩 위젯, 디자인 유연성 잠금 해제

새로운 탭 위젯을 사용하면 디자인 창의성을 발휘하고 높은 수준의 정교함에 도달할 수 있습니다. 새 탭 위젯은 컨테이너 기반이며 원래 탭 위젯과 비교하여 세 가지 주요 개선 사항을 포함합니다.

• 탭 및 제목 – 새 탭 위젯을 사용하면 탭의 레이아웃과 위치를 조정하여 탭의 내용과 관련하여 위치(위, 아래 또는 측면 중 하나)를 결정할 수 있습니다. 또한 탭 제목에 아이콘을 추가하는 기능을 포함하여 더 많은 스타일 옵션이 제공됩니다.
• 새로운 콘텐츠 영역 – Flexbox 컨테이너의 기능을 통해 각 탭의 콘텐츠 영역은 기본 컨테이너가 되어 요소를 배치하고 레이아웃을 조정하고 원하는 콘텐츠를 표시할 수 있습니다. 편집자.
• 새로운 반응형 설정 - 장치 크기별 디자인 및 사용자 경험을 개선하기 위해 탭이 자동으로 아코디언으로 표시되는 중단점을 선택할 수 있습니다. 즉, 각 장치에 대해 서로 다른 콘텐츠를 만들 필요가 없으므로 성능도 향상됩니다.

탭 위젯은 컨테이너 기반이므로 웹 사이트에서 사용하려면 Flexbox 컨테이너 및 중첩 요소 실험이 활성화되어 있는지 확인해야 합니다. 새 탭 위젯이 활성화되면 위젯 패널의 기존 탭 위젯이 자동으로 교체됩니다(웹사이트의 기존 탭 디자인에는 영향을 미치지 않음).

새로운 맞춤 단위 - CSS 수학 함수를 포함하여 원하는 단위를 선택하세요.

Editor의 숫자 컨트롤이 업그레이드되어 이제 원하는 단위를 선택하고 숫자 단위를 혼합하고 그 안에서 CSS 함수 계산을 실행할 수 있습니다. 편집기의 많은 요소에는 패딩 및 여백, 글꼴 크기 등과 같은 크기 조정 옵션이 포함되어 있습니다. 이러한 크기 조정 단위를 현명하게 사용하면 디자인 정확도와 웹사이트 응답성에 긍정적인 영향을 미칠 수 있습니다.

예를 들어 이전에는 패딩이나 여백을 조정하는 경우 PX, EM, REM, % 또는 VW와 같은 단위 유형 중 하나를 선택해야 했습니다. 이 업데이트를 통해 사용자 지정 옵션을 선택하여 더 구체적으로 유닛을 선택할 수 있습니다. 예를 들어 측면에는 PX를, 상단과 하단에는 %를 선택할 수 있습니다. 또한 이 업데이트에서는 새 사용자 지정 옵션을 수용하기 위해 단위 레이블이 드롭다운 목록으로 이동되었습니다.

사용자 지정 옵션을 선택하면 값 입력 필드 내에서 값 측정을 위한 계산을 실행할 수도 있으므로 더 나은 설계 정확도와 응답 지원을 얻을 수 있습니다.

예를 들어, 타이포그래피 크기 컨트롤에서 사용자 지정 옵션을 선택할 때 `clamp()` CSS 함수를 사용하여 타이포그래피 크기를 다른 장치 크기에 맞게 조정하거나 `calc()` CSS 함수를 사용하여 계산 및 단위 등을 혼합하는 값을 설정합니다.

이 버전의 일부로 다음 크기 조정 컨트롤에 사용자 지정 옵션이 제공됩니다.

• 컨테이너, 섹션 및 열 – 사용자 정의 너비, 테두리 등을 포함하여 가능한 모든 곳.
• 타이포그래피 컨트롤 – 줄 높이, 문자 간격 및 단어 간격.

추가 영역도 향후 업데이트될 예정입니다.

컨테이너 기반 전체 웹 사이트 키트, 템플릿 및 블록

베타로 표시된 Flexbox 컨테이너를 사용하여 안정적이고 사용할 준비가 되었기 때문에 컨테이너 기반 전체 웹 사이트 키트 및 템플릿을 제공하는 것이 중요했습니다. 지난 몇 주 동안 라이브러리 팀은 완전한 컨테이너 기반 라이브러리를 만들기 위해 노력했습니다. 따라서 Flexbox 컨테이너 실험을 활성화할 때 최신 디자인 트렌드를 사용하여 웹 사이트 생성 및 디자인 프로세스를 시작할 수 있습니다. .

이제 웹사이트에서 Flexbox 컨테이너 실험을 활성화하면 완전히 새로운 키트와 템플릿 라이브러리를 갖게 됩니다. 업데이트에는 섹션 기반 레이아웃에서 Flexbox 컨테이너로 변환된 수십 개의 가장 인기 있는 전체 웹 사이트 키트 및 페이지 템플릿과 새로운 웹 사이트 키트 및 페이지 템플릿도 포함됩니다.

새 라이브러리에는 주목할만한 두 가지 추가 업데이트가 있습니다. 첫 번째는 PayPal 및 지불 수집을 위한 Stripe 버튼을 포함하여 전자 상거래 웹 사이트를 위한 한 페이지 전체 웹 사이트 키트인 몇 개의 미니 상점을 도입한 것입니다. 두 번째는 이전의 모든 블록(예: Contact, 404 등)이 완전히 새로운 디자인으로 교체되었다는 것입니다.

[프로] 카운트다운 위젯의 동적 기한

FOMO를 생성하고 전환을 촉진하기 위한 훌륭한 도구인 카운트다운 위젯은 이제 마감일에 다이내믹 태그 컨트롤을 제공합니다. 이 업데이트를 통해 기본 WordPress 사용자 정의 필드와 ACF 및 PODS의 사용자 정의 필드를 사용하여 각 페이지에서 기한을 동적으로 채울 수 있습니다.

새로운 다이내믹 태그 컨트롤을 사용하면 예를 들어 단일 게시물 템플릿에서 카운트다운 위젯을 사용할 수 있고 각 게시물에 포함하려는 기한이 포함된 각 게시물에 WordPress의 사용자 정의 필드를 추가할 수 있습니다. 이렇게 하면 고객에게 웹사이트를 제공할 수 있으며 동시에 고객이 디자인을 변경할 수 있는 편집기로 보내지 않고도 WordPress에서 기한을 업데이트할 수 있습니다.

신규: Google 글꼴을 완전히 비활성화

인기 있는 온라인 글꼴 라이브러리인 Google 글꼴을 사용하면 웹사이트에서 다양한 글꼴을 사용할 수 있습니다. 그러나 최근 사건에서 Google Fonts는 경우에 따라 GDPR 및 개인 정보 보호 규정을 위반하는 것으로 밝혀졌습니다.

이러한 위험을 제거하기 위해 Elementor를 사용하면 웹 사이트에서 모든 Google 글꼴을 제거할 수 있습니다. Google 글꼴을 비활성화하면 더 이상 에디터에서 온라인 Google 글꼴 라이브러리를 사용할 수 없으므로 에디터에서 사용할 수 있는 글꼴 수가 7개로 줄어듭니다. 웹사이트에서 이미 Google 글꼴을 사용했지만 이 업데이트에서 Google 글꼴을 비활성화하도록 선택한 경우 웹사이트의 모든 글꼴은 웹사이트에서 사용 가능한 글꼴 중 하나로 기본 설정됩니다. 좋아하는 글꼴을 계속 사용하려면 Elementor Pro 사용자가 사용할 수 있는 사용자 정의 글꼴 기능을 사용하여 로컬로 호스팅된 글꼴을 Elementor에 업로드할 수 있습니다.

성능 및 접근성 개선

Elementor 3.10에서는 계속해서 성능 및 접근성 개선 사항을 소개합니다. 이 업데이트에는 세 가지 새로운 성능 개선 업데이트와 두 가지 접근성 개선 업데이트가 포함되어 있습니다.

지연 로드 Google 지도

Elementor의 Google 지도 위젯을 사용하면 웹사이트 어디에나 지도를 배치할 수 있으며 웹사이트 방문자와 특정 위치를 공유하고 싶을 때 사용할 수 있는 완벽한 위젯입니다. 이 업데이트를 사용하면 초기 페이지 로드 속도를 높이는 Google 지도 iframe을 지연 로드할 수 있습니다.

사용자 지정 크기로 이미지 지연 로드

사용하는 이미지의 크기는 웹사이트 성능에 상당한 영향을 미칠 수 있습니다. 이전 업데이트에서는 미디어 라이브러리에 업로드된 거의 모든 이미지를 지연 로드하는 기능을 추가했습니다. Elementor 3.10을 사용하면 사용자 지정 크기 이미지를 지연 로드할 수도 있습니다.

자체 호스팅 비디오 사전 로드 제어

이미지와 유사하게 동영상도 웹사이트의 속도와 성능에 영향을 미치며 자체 호스팅 동영상은 일반적으로 최적화 기술을 적용하는 YouTube에서 호스팅되는 동영상보다 더 큰 영향을 미칩니다. 이 업데이트를 사용하면 초기 페이지 로드 중에 자체 호스팅된 비디오를 로드하는 대신 비디오, 비디오의 메타데이터를 미리 로드할지 또는 방문자가 재생을 누르기 전에 콘텐츠를 미리 로드하지 않을지 여부를 선택할 수 있습니다.

페이지 탐색을 위한 접근성 향상

Block Quote 위젯과 Post Comments 위젯, 2개의 Elementor Pro 위젯은 보조 기술을 사용하여 페이지를 탐색하는 장애가 있는 사람들이 더욱 쉽게 액세스할 수 있도록 마크업 업데이트를 받았습니다.

더 많은 디자인 옵션, 응답성 및 성능 향상

Elementor 3.10은 웹 사이트에서 사용할 수 있는 다양한 새로운 디자인 기회를 제공합니다. 중첩 요소 기능을 활용하는 첫 번째 업데이트인 새로운 탭 위젯의 도입으로 Elementor의 모든 위젯을 익숙한 드래그 앤 드롭 방식으로 사용하여 고도로 발전되고 창의적인 레이아웃을 만들 수 있습니다. Flexbox 컨테이너가 이 새로운 위젯을 사용하도록 설정하면 완전히 새로운 컨테이너 기반 키트 및 템플릿 라이브러리에 노출되어 창작 과정을 바로 시작할 수 있습니다.

Elementor 3.10을 사용해 보고 아래 의견에 의견을 보내주십시오.