워드프레스 일기의 Elementor Pro 11

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

엘리멘터 프로를 사용하는 경우 자체 컨택트 폼(Form) 위젯을 사용하여 사용자들로부터 문의를 받을 수 있습니다. 문의 폼에 이용 약관 또는 개인정보 보호정책 동의 필드를 추가하고 자세한 약관 내용을 팝업 형식으로 표시하는 경우가 많습니다. 이 글에서는 자바스크립트를 사용하여 이용약관 팝업을 표시하는 방법에 대하여 살펴보겠습니다.엘리멘터 컨택트 폼에서 이용약관 전문을 팝업으로 표시하는 방법엘리멘터 컨택트 폼에서 다음과 같이 이용약관을 텍스트 상자로 표시하려는 경우에는 이전 글을 참고할 수 있습니다.이용약관 내용을 텍스트 상자로 표시하는 대신, 클릭 시 라이트박스 팝업으로 표시하는 것도 가능합니다.간단하게는 HTML/CSS로 라이트박스를 표시할 수 있습니다. 다음 글에서 소개하는 코드를 사용할 수 있습니다..

엘리멘터 프로에서는 Portfolio 위젯을 사용하여 블로그 글이나 커스텀 포스트 타입 글들을 포트폴리오 형식으로 나열할 수 있습니다. 포트폴리오 위젯에 카테고리 필터를 표시하고 CSS를 사용하여 스타일을 조정할 수 있습니다. 엘리멘터 포트폴리오: 카테고리 필터 표시하기 그림과 같이 포트폴리오 위젯에 카테고리 필터 바(Filter Bar)를 표시하고 싶은 경우 Portfolio 편집 패널의 Filter Bar 섹션에서 필터 표시줄을 Show를 On으로 설정하면 Taxonomy에서 필터 표시줄에 표시할 항목을 선택할 수 있도록 표시됩니다. 카테고리나, 태그, 사품 카테고리, 상품 태그 등을 선택할 수 있습니다. 위의 그림에서는 카테고리를 선택할 때의 화면을 보여줍니다. CSS를 사용하여 필터바의 스타일을 ..

워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더의 유료 버전에서는 템플릿을 숏코드로 원하는 곳에 추가할 수 있습니다. 이 방법을 이용하면 엘리멘터 탭 안에 아코디언이나 토글, FAQ, 가격표(Pricing Table) 등을 표시할 수 있습니다. 엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시) 엘리멘터 페이지 빌더에서는 탭 기능을 사용하여 각 탭에 여러 가지 콘텐츠를 표시할 수 있습니다. 각 탭 내에 다른 엘리멘터 요소나 섹션을 추가하고 싶은 경우가 있습니다. 예를 들어, 다음 그 avada.tistory.com 엘리멘터 템플릿에 숏코드가 표시되지 않는 경우가 있을 수 있습니다. 이 경우 아래의 내용을 참고해보세요. 엘리멘터 페이지 빌더 템플릿 숏코드가 표시되지 않는 경우..

워드프레스 엘리멘터 페이지 빌더로 사이트를 제작할 때 모바일에서 메뉴는 보통 햄버거 메뉴로 표시됩니다. 모바일에서도 PC 메뉴와 같이 수평 내비게이션 레이아웃을 원하는 경우 모바일 드롭다운에 대한 분기점(Breakpoint) 설정을 조정할 수 있습니다. 엘리멘터 모바일 메뉴 레이아웃 변경 Elementor Pro를 사용하는 경우 테마 빌더를 통해 헤더 레이아웃을 만들 수 있습니다. 여러 개의 헤더 템플릿을 만들어서 페이지에 따라 다른 헤더를 사용하도록 지정할 수 있습니다. 헤더 템플릿을 새로 만들거나 기존 템플릿을 수정하려면 워드프레스 알림판 » 템플릿 » Theme Builder를 클릭하고 Header를 선택합니다. Add New를 클릭하여 새 템플릿을 만들거나 기존 템플릿을 편집할 수 있습니다. 헤더..

엘리멘터 페이지 빌더에서는 탭 기능을 사용하여 각 탭에 여러 가지 콘텐츠를 표시할 수 있습니다. 각 탭 내에 다른 엘리멘터 요소나 섹션을 추가하고 싶은 경우가 있습니다. 예를 들어, 다음 그림과 같이 FAQ 페이지에서 주제별로 다른 탭에 FAQ 항목을 추가하고 싶을 수 있습니다. (아래 그림은 인기 워드프레스 테마인 Divi 테마의 탭 기능을 사용하여 FAQ 항목들을 탭으로 표시하는 방법에 대한 글에서 인용한 것입니다. Elementor에서도 비슷하게 구현이 가능합니다.) 엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시) 엘리멘터 프로에서는 템플릿을 숏코드로 원하는 곳에 자유롭게 추가할 수 있습니다. 예를 들어, FAQ 페이지에 탭 위젯을 추가한 다음, 개별 FAQ 항목들을 ..

워드프레스 검색 시 Search Results for: 문구는 보통 테마의 search.php 파일을 커스텀하거나 Loco Translate와 같은 플러그인을 사용하여 번역할 수 있습니다. 엘리멘터 프로에서 아카이브 페이지 또는 검색 결과 페이지 템플릿을 만든 경우 "Search Results for:" 문구를 Loco Translate 플러그인을 사용하여 번역할 수 없습니다. 엘리멘터 프로를 사용하는 경우 다음과 같은 방법으로 Search Results for: 텍스트를 한글로 바꾸고 검색 결과 아카이브 템플릿을 커스텀할 수 있습니다. 참고로 엘리멘터의 Theme Builder를 통해 Archive(아카이브) 템플릿을 만들면, 검색 시 "검색 결과 아카이브" 템플릿이 없을 경우 "아카이브" 템플릿을 통..

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

엘리멘터 페이지 빌더(Elementor Website Builder)는 현재 500만 개가 넘는 워드프레스 사이트에 설치되어 사용되고 있는 인기 플러그인입니다. 페이지 빌더에서는 보통 HTML/자바스크립트 코드를 추가할 수 있는 요소를 제공합니다. 엘리멘터(엘레멘토) 페이지 빌더에서도 HTML 코드를 추가할 수 있는 위젯이 제공됩니다. HTTML 코드 추가하기 HTML 코드를 추가하려면 엘리멘츠 탭에서 html로 검색합니다. 그러면 HTML 위젯이 검색 결과에 표시됩니다. HTML 위젯을 끌어다가 원하는 곳에 놓습니다. 그러면 HTML 코드를 추가할 수 있는 상자가 왼쪽에 표시됩니다. 원하는 코드를 추가하도록 합니다. JS/CSS 코드 추가하기 페이지 빌더에서 직접 CSS 코드를 추가하는 기능은 엘리멘터..

워드프레스 인기 페이지 빌더인 엘리멘터 플러그인의 유료 버전인 Elementor Pro에서는 포트폴리오 위젯을 사용하여 글이나 페이지, 커스텀 포트 타입을 포트폴리오 형식으로 표시할 수 있습니다. 이 글에서는 엘리멘터 페이지 빌더의 포트폴리오 위젯에 대해 간략하게 살펴보겠습니다. 워드프레스 Elementor Pro 라이선스 활성화하기 (엘리멘터 프로 설치 및 템플릿 로드) 워드프레스 엘리멘터 페이지 빌더(Elementor Page Builder)는 무료로 사용할 수 있지만 프로 기능과 더 많은 템플릿을 사용하려면 엘리멘터 프로 라이선스를 활성화해야 합니다. 이 글에서는 엘리멘터 avada.tistory.com 워드프레스 엘리멘터 포트폴리오 위젯 워드프레스 테마에서 제공하는 포트폴리오 기능과 엘리멘터의 포..