워드프레스 일기의 엘리멘토 16

워드프레스 인기 페이지 빌더인 엘리멘터의 유료 버전인 Elementor Pro에서는 방문자로부터 문의를 받을 수 있는 Form 위젯을 사용하여 문의 폼을 만들 수 있습니다. 기본적인 문의 폼에서는 라벨이 입력 필드 위에 위치하고 있습니다.라벨을 입력 필드 왼쪽에 표시하기를 원할 수 있습니다.이 글에서는 엘리멘터 프로의 Form 요소를 사용하여 문의 양식을 만들 때 라벨을 입력 필드 왼쪽에 위치시키는 방법에 대하여 살펴보겠습니다.엘리멘터 프로 Form (문의 폼) 위젯: 라벨을 입력 필드 왼쪽으로 이동시키는 방법워드프레스에는 다양한 컨택트 폼 플러그인을 사용하여 사용자로부터 문의를 받을 수 있습니다. 무료 컨택트 폼 플러그인으로 Contact Form 7과 WPForms Lite 등이 있습니다. 하지만 이..

엘리멘터(Elmentor)는 1,000만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더 플러그인입니다. 엘리멘터는 무료 버전과 프로 버전으로 제공됩니다. Elementor 프로 버전에서는 프로 템플릿과 프로 위젯, 그리고 컨택트 폼 등의 기능이 제공되고, 무엇보다 테마 빌더(Theme Builder)가 탑재되어 헤더부터 푸터까지 사이트의 모든 섹션을 워드프레스 알림판에서 커스텀하는 것이 가능합니다. 예를 들어, 블로그 포스트 템플릿이나 상품 상세 페이지 템플릿을 만들어 블로그 포스트나 상품 페이지를 원하는 대로 꾸밀 수 있습니다. 워드프레스 엘리멘터 테마 빌더로 포스트 템플릿 만들기엘리멘터는 현재 500만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더입니..

WPML은 워드프레스에서 다국어 사이트를 만들 때 많이 사용되는 인기 워드프레스 다국어 번역 플러그인입니다. WPML에는 메뉴에 언어 선택기를 표시하는 옵션이 제공됩니다. 언어 전환기는 테마의 메뉴 위치(Theme Location)에 지정될 수 있습니다. 엘리멘터의 테마 빌더를 사용하여 헤더 템플릿을 만드는 경우에는 WPML 언어 선택기를 메뉴에 지정하는 방식으로는 추가할 수 없고 숏코드를 사용하여 추가해야 합니다. 엘리멘터 헤더 메뉴에 WPML 언어 선택기를 표시하는 방법 WPML 플러그인을 사용하여 다국어 사이트를 구성하면 언어 간 연동이 용이하고 새 페이지나 글을 작성 시에 쉽게 다른 언어로 번역할 수 있습니다. WPML에는 워드프레스 관리자 페이지 » WPML » 언어 » 메뉴 언어 변환기에서 "..

엘리멘터에서 토글이나 아코디언 위젯을 사용하여 자주 묻는 질문(FAQ) 등을 표시할 수 있습니다. 토글은 개별 항목이 독립적으로 작동하고 아코디언은 한 번에 하나 항목만 열립니다. 이 글에서는 모든 엘리멘터 토글 위젯 항목들이 열린 상태로 표시되도록 설정하는 방법에 대하여 살펴보겠습니다. 모든 엘리멘터 토글 아코디언 위젯 항목이 항상 열린 상태로 표시되도록 설정하는 방법 엘리멘터 페이지 빌더의 모든 토글 위젯 항목들이 열린 상태로 표시하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다. .elementor-toggle .elementor-tab-content { display: block !important; } 위의 코드를 사용하면 토글 항목들은 모두 열린 상태가 됩니다. 반면에 아코디언은 ..

네이버 카페에 워드프레스 Salient 테마에 엘리멘터 페이지 빌더를 사용하는 방법에 대한 질문이 올라왔었는데요. 비슷한 질문이 반복적으로 올라와서 페이지 빌더 사용 시 주의할 점에 대하여 살펴보겠습니다. 워드프레스 Salient 테마에서 엘리멘터 페이지 빌더를 사용할 수 있을까? Elementor와 같은 페이지 빌더를 사용하면 코딩 지식이 부족해도 쉽게 사이트를 만들 수 있다는 장점이 있습니다. 얼마 전에 네이버 카페에 워드프레스 Salient 테마에 엘리멘터 프로를 설치하여 사용하는 것에 대한 질문이 올라왔습니다. Salient 테마에는 WPBakery 페이지 빌더(이전 명칭 "비주얼 컴포저")가 설치되어 있습니다. WPBakery 페이지 빌더는 엘리멘터 이전에 인기를 끌었던 유료 페이지 빌더입니다...

워드프레스 인기 페이지 빌더인 엘리멘터를 사용하면 코딩 지식이 없어도 쉽게 사이트를 만들 수 있습니다. Elementor Pro에서는 더 많은 프로 위젯과 프로 템플릿을 이용할 수 있고, 특히 Theme Builder를 사용하여 사이트의 모든 요소(예: 헤더, 푸터, 싱글 포스트, 페이지, 카테고리 페이지 등)를 알림판 내에서 커스텀할 수 있습니다. 엘리멘터 프로 활성화를 시도할 때 Cannot get Token: Bad Request 에러가 발생하면서 라이선스 등록이 안 되는 문제가 발생하는 경우가 드물지만 있습니다. 워드프레스 엘리멘터 프로 활성화 문제: Cannot get Token:Bad Request 에러 발생 시 대처 방법 엘리멘터 프로를 구입했다면 사이트를 연결하고 활성화(Connect & ..

엘리멘터 페이지 빌더의 우커머스 상품(Woocommerce Products) 위젯을 사용하여 우커머스 상품들을 컬럼 형식으로 나열할 수 있습니다. 전체 상품 또는 특정 카테고리 내의 상품들을 표시하거나 세일 중인 상품들이나 추천 상품들을 표시하는 등 다양한 옵션이 제공됩니다. 엘리멘터 프로의 테마 빌더를 사용하면 우커머스 아카이브 페이지와 우커머스 상품 페이지 템플릿을 만들어 커스텀할 수 있습니다. 자세한 정보는 엘리멘터 공식 문서를 참조해보세요. 워드프레스 엘리멘터 우커머스 상품 (Woocomerce Products) 위젯 WooCommerce Products 위젯은 Elementor Pro에서 제공되는 기능 중 하나로 특정 카테고리의 상품들이나 할인 중인 상품들을 상품들을 원하는 곳에 나열..

엘리멘터 페이지 빌더에서 컬럼 구조를 추가하는 경우 반응형으로 작동합니다. 즉, 기기 해상도에 따라 컬럼 개수가 자동으로 조정됩니다. 가령, 2개 컬럼 구조를 추가하면 PC에서는 2개 열로 표시되지만 모바일에서는 한 행에 1개 열로 표시됩니다. 모바일에서도 한 행에 2개 컬럼으로 표시되도록 컬럼 너비를 지정하여 모바일 컬럼 개수를 변경할 수 있습니다. 워드프레스 엘리멘터 모바일 컬럼 개수 변경하기(+컬럼 너비 설정) 워드프레스 Elementor 페이지 빌더에서는 새 섹션 추가 버튼을 클릭하여 컬럼 구조를 추가할 수 있습니다. 위의 그림에서 더하기 아이콘(새 섹션 추가)을 클릭하면 다음과 같이 컬럼 구조를 선택할 수 있는 섹션이 표시됩니다. 다양한 섹션 구조를 선택할 수 있습니다. 예를 들어, 2개 열로 ..

자주 묻는 질문(FAQ) 페이지나 Q&A 페이지를 만들 때 토글이나 아코디언이 많이 사용됩니다. 워드프레스 엘리멘터 페이지 빌더에는 토글 위젯과 아코디언 위젯이 제공됩니다. 이 두 위젯의 차이점에 대해 간략히 살펴보겠습니다. 엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점 워드프레스 엘리멘토 페이지 빌더 편집 페이지에서 'accordion'으로 검색하면 Tabs, 아코디언, 토글 등 3가지 위젯이 표시됩니다. 이 세 요소는 쓰임새가 비슷합니다. 그래서 'accordion'으로 검색했을 때 이 세 개가 표시되는 것 같습니다. Tabs에 대해서는 이 블로그에 소개한 적이 있습니다. 엘리멘터 페이지 빌더의 탭 (Tabs) 기능 아래 영상과 같이 탭 형식으로 콘텐츠를 표시하고 싶은 경우 페이지 빌..

인기 워드프레스 페이지 빌더인 엘리멘터(Elementor)를 사용하면 코딩 지식이 없어도 드래그 앤 드롭 방식으로 쉽게 사이트를 만들 수 있습니다. 엘리멘토에서 컬럼을 추가한 후에 컬럼 개수를 늘리거나 줄이고 싶은 경우가 있습니다. 그런 경우에도 쉽게 열 개수를 추가하거나 삭제할 수 있습니다. 엘리멘터 (Elementor) 컬럼 추가하기/삭제하기 워드프레스 엘리멘터 페이지 빌더에서 구조를 추가한 후에 컬럼(열)을 늘리거나 줄이고 싶은 경우 오른쪽 마우스 버튼을 클릭하여 추가하거나 삭제하는 것이 가능합니다. Elementor에서 새 섹션 추가 버튼을 클릭하면 먼저 열 구조를 선택하는 화면이 표시됩니다. 위의 그림에서 더하기 모양의 아이콘을 클릭하면 아래에 선택 가능한 구조가 표시됩니다. 다음과 같은 열 구..