Elementor 3.13 소개 – CSS 그리드로 간결하고 유연한 웹사이트 레이아웃 구축

디자인 기능을 향상하고 Elementor 3.13으로 웹 사이트 스타일을 지정하는 새로운 방법을 즐기십시오. 따라서 웹 사이트 방문자의 관심을 끄는 고유한 디자인을 얻을 수 있습니다. 이 버전에는 높은 수준의 일관성을 유지하면서 세련되고 가벼운 웹 사이트 레이아웃을 디자인할 수 있는 훌륭한 방법인 컨테이너 – CSS 그리드의 새로운 레이아웃 옵션이 포함되어 있습니다. 또한 이 업데이트는 메뉴 위젯에 더 많은 스타일 옵션을 도입하고 새로운 상단 표시줄에 새로운 기능을 추가합니다.

신규 - CSS 그리드 컨테이너 - 가볍고 반응이 빠르고 전문적인 레이아웃 디자인

이제 컨테이너를 추가할 때 Flexbox 또는 그리드 컨테이너 중에서 선택할 수 있습니다. 그리드 컨테이너를 사용하는 것은 그리드와 같은 레이아웃에 이상적이며 컨테이너에서 요소의 정렬을 유지하는 데 도움이 되고 섹션-열 레이아웃에서 컨테이너 레이아웃으로의 전환과 관련된 학습 곡선을 줄입니다.

그리드 컨테이너를 사용하면 그리드를 구성할 행과 열의 수를 선택하고, 간격 컨트롤을 사용하여 열과 행 사이의 거리를 결정하고, 열 또는 행을 기준으로 자동 흐름을 실행할지 여부를 선택할 수 있습니다. Flexbox 컨테이너와 유사하게 콘텐츠와 항목을 정렬하고 정렬할 수도 있습니다.

Grid의 각 셀은 평소처럼 스타일을 지정하고 편집할 수 있는 하나의 요소를 허용할 수 있습니다. 더 높은 수준의 정교함을 달성하기 위해 Grid의 셀 내부에 Flexbox 컨테이너를 배치하고 Flexbox 컨테이너 내에 원하는 만큼 많은 요소를 배치할 수 있습니다.

Container Grid를 사용하려면 WordPress Dashboard → Elementor → Settings → Features에서 Flexbox Container와 Grid Container 기능을 활성화해야 합니다.

[프로] 메뉴 위젯의 새로운 스타일링 기능

이전 버전에서 Elementor는 새로운 메뉴 위젯을 도입하여 간단한 단일 레벨 메뉴와 정교한 드롭다운 콘텐츠 메뉴를 중첩 가능한 콘텐츠로 만들 수 있습니다. 이 위젯은 웹사이트 제작을 위한 게임 체인저로, 웹사이트를 위한 아름답고 기능적인 메뉴를 디자인할 수 있도록 합니다.

Elementor Pro 3.13에는 이제 메뉴 위젯에서 사용할 수 있는 두 가지 새로운 기능이 도입되었습니다.

• 메뉴 최상위 수준의 아이콘 – 이 새로운 스타일링 기능을 사용하면 방문자의 관심을 끄는 눈길을 끄는 아이콘을 추가하여 메뉴 디자인을 향상시킬 수 있습니다. 아이콘 라이브러리에서 선택할 수 있는 다양한 아이콘 또는 SVG를 업로드할 수 있는 기능을 사용하여 메뉴를 사용자 지정하여 웹 사이트 스타일에 맞게 만들고 눈에 띄게 만들 수 있습니다.

앵커 링크의 활성 상태 – 메뉴에 앵커 링크가 포함되어 있을 때 스크롤하거나 클릭한 페이지 부분을 웹 사이트 방문자에게 나타냅니다. 이렇게 하면 방문자가 웹 사이트를 탐색하도록 도와줌으로써 방문자 경험을 향상시킬 수 있습니다.

상단 표시줄 개선 – Elementor의 UI 개편 계속

Elementor 3.12에서 우리는 Elementor 인터페이스에 대한 예정된 변경 사항을 점진적으로 출시하기 시작했습니다. 이러한 변경 사항은 성능을 개선하고 향후 제품 성장 및 확장을 허용하는 React로 작성됩니다. 또한 이러한 변경 사항은 Elementor 모범 사례를 촉진하여 더 좋고 간소화된 사용자 경험을 제공합니다.

가장 큰 변화 중 하나는 WordPress의 Elementor 기능 페이지(Elementor → Settings → Features → Editor Top Bar)에서 활성화할 수 있는 실험으로 도입된 새로운 Top Bar입니다. 이 버전에서 상단 표시줄에는 두 가지 업데이트가 포함되어 있습니다.

1. 게시 버튼의 저장 옵션 – 새로운 기능은 아니지만 이 기능은 상단 표시줄의 첫 번째 버전에서 사용할 수 없었습니다. 이제 편집기에서 사용할 수 있는 모든 저장 옵션(초안으로 저장, 템플릿으로 저장 및 표시 조건(해당되는 경우))에 액세스할 수 있습니다. 이는 또한 이전에 에디터의 레거시 UI에서 사용할 수 있었던 모든 기능이 이제 상단 표시줄에 포함됨을 의미합니다.
2. 페이지 탐색 – 작업 흐름을 간소화하고 다른 페이지와 테마 부분 사이를 더 매끄럽게 전환하는 새로운 기능입니다. 상단 표시줄 중앙에 있는 페이지 표시를 클릭하면 최근에 작업한 5개의 페이지/게시물/테마 부분이 포함된 드롭다운이 열리며 뒤로 탐색할 필요 없이 클릭 한 번으로 어느 페이지로든 리디렉션할 수 있습니다. 워드프레스 대시보드에.

[Pro] 게시물 내용으로 게시물 발췌를 동적으로 채웁니다.

이전에는 WordPress에서 Post Excerpt 위젯 또는 동적 태그를 사용하면 WordPress에서 수동으로 삽입한 Custom Excerpt에서 콘텐츠가 자동으로 채워집니다. 그러나 Elementor 3.13에서는 콘텐츠를 게시물의 처음 몇 글자에서 자동으로 채울지 아니면 WordPress의 사용자 지정 발췌 부분에서 자동으로 채울지 선택할 수 있는 옵션이 있습니다. 이 업데이트는 Loop Builder 도입 이후, 특히 루프 항목 내에 Post Excerpt 위젯을 추가할 수 있게 된 이후 가장 많이 요청된 요청 중 하나를 해결합니다.

신규: Elementor에 완벽하게 맞춰진 Elementor AI 활용

Elementor 3.13에는 Editor 내에 기본적으로 통합되어 웹 사이트를 만드는 방식을 변환하는 Elementor AI도 포함되어 있습니다. 이 버전은 AI의 힘으로 텍스트와 코드를 생성할 수 있는 Elementor AI의 첫 번째 단계를 소개합니다. 이를 사용하여 처음부터 콘텐츠를 만들고, 웹사이트의 기존 콘텐츠를 향상하고, 모든 웹사이트로 번역하는 등의 작업을 수행할 수 있습니다. 또한 Elementor AI를 사용하여 사용자 정의 CSS 또는 사용자 정의 코드(Elementor Pro 또는 호스팅 필요) 또는 HTML 스니펫용 코드를 작성할 수 있습니다. 여기에서 Elementor AI로 수행할 수 있는 작업에 대해 자세히 알아볼 수 있습니다.

성능 개선

이전 버전에서 성능 향상은 기본 페이지에서 가장 일반적인 위젯에 중점을 두었습니다. Elementor 3.13에서는 사이트 방문자가 대부분의 시간을 보내는 내부 페이지에서 주로 사용되는 위젯으로 초점이 옮겨졌습니다.

Author Box, Post Info 및 Price List 위젯은 이미지와 사용자 프로필 사진을 표시하며, 이러한 이미지에는 이제 지연 로드가 적용됩니다. 이 변경으로 내부 페이지의 초기 페이지 로드가 개선됩니다.

또한 Header는 접힌 부분 위에 나타나므로 페이지 로드 시 항상 즉시 로드되어야 합니다. 따라서 지연 로드 배경 이미지 실험을 사용할 때 방문자 경험을 개선하기 위해 헤더에서 지연 로드가 제거되었습니다.

접근성 개선

Elementor 3.13은 웹사이트의 접근성과 에디터를 개선하는 개조 및 수정으로 가득합니다. 이 버전에서는 키보드 탐색, 추가 ARIA 태그 구현, 기존 ARIA 규정 준수 문제 수정 및 시맨틱 마크업 적용에 중점을 두었습니다.

개발자 블로그에서 이러한 접근성 개선 사항에 대해 자세히 알아볼 수 있습니다.

높은 브랜드와 매력적인 웹 사이트 경험을 위한 더 많은 스타일 및 디자인 옵션을 즐기십시오.

웹사이트 디자인을 향상시키고 Elementor 3.13을 사용하여 웹사이트를 맞춤화하기 위한 새로운 스타일링 가능성을 열어보세요. CSS 그리드 컨테이너를 사용하면 가볍고 유연하며 그리드와 같은 레이아웃을 매끄럽게 만들 수 있으며 메뉴 위젯의 새로운 스타일 지정 기능을 사용하면 웹 사이트 방문자를 사로잡고 참여를 유도하는 독특한 디자인을 만들 수 있습니다.

이 버전에는 상단 표시줄 기능의 새로운 기능도 포함되어 있습니다. 즉, 이전에 편집기에서 사용할 수 있었던 모든 기능을 이제 상단 표시줄 실험을 사용할 때 사용할 수 있습니다.

Elementor 3.13에는 Elementor AI의 무료 평가판도 포함되어 있습니다. 이 평가판은 원본 텍스트를 즉시 생성하고, 기존 텍스트를 개선하고, 코드를 작성하여 웹사이트와 디자인을 개선함으로써 웹사이트 구축 방식을 혁신합니다.

Elementor 3.13의 새로운 기능을 사용해 보고 아래 의견에 의견을 보내주십시오.