워드프레스 인기 페이지 빌더 플러그인인 엘리멘터 페이지 빌더(Elementor Page Builder)에서는 다른 워드프레스 페이지 빌더나 기본 편집기 (블록 에디터)와 같이 각 요소나 섹션에 CSS 클래스를 지정할 수 있습니다. 워드프레스 엘리멘터 페이지 빌더: CSS 클래스/CSS ID 지정하기 CSS 클래스란? CSS를 조금 아시면 CSS 클래스가 무엇인지는 알겠지만 정확히 설명하라고 하면 조금 망설여질 것 같습니다. 어떤 글에서는 "class 란 스타일의 내용을 정의해 준다는 뜻이다"라고 설명하고 있네요. 여기에 대해 해외의 어떤 글에서는 다음과 같이 설명하고 있습니다. In CSS, a class is a group of elements that are the same or similar. Yo..

워드프레스 인기 테마 중 하나인 Jupiter는 Jupiter X로 업데이트되면서 기본 페이지 빌더를 비주얼 컴포저(WPBakery Page Builder)에서 엘리멘터 페이지 빌더(Elementor Page Builder)로 바꾸었습니다. 주피터 테마가 Jupiter X로 업그레이드된 적후에는 엘리멘터용 요소와 위젯이 그다지 많지 않아서 사용하는 데 불편했지만, 지금은 다양한 엘리멘터용 플러그인이 번들로 제공되어 엘리멘터용 요소와 블록, 템플릿이 이전보다는 훨씬 풍부해진 것 같습니다. 워드프레스 Jupiter X 테마에 포함된 플러그인 주피터는 테마포레스트 테마 중에서 비교적 속도가 빠른 테마 중 하나로 평가 받고 있습니다. Jupiter X 테마에서는 워드프레스 관리자 페이지 > Jupiter X >..

워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더 (Elementor Page Builder)에서 특정 엘리먼트를 글로벌 위젯으로 저장하여 활용할 수 있는 기능이 있습니다. Global 위젯으로 저장하면 숏코드로도 해당 위젯을 붙여넣기 할 수 있습니다. 예를 들어, 탭 위젯을 함께 사용할 경우 각 탭에 특정 포스트 카테고리나 다른 페이지에서 작성한 컬럼을 숏코드 형식으로 붙여넣기 하는 것이 가능합니다. 글로벌 위젯 기능을 사용하면 요소를 템플릿으로 저장하여 다른 곳에 쉽게 삽입할 수 있고, 한 곳에서만 수정하면 전체적으로 변경되므로 작업 효율성을 높일 수 있습니다. 워드프레스 엘리멘터 페이지 빌더 Global 위젯 사용하기 엘리멘터 페이지 빌더의 Global 위젯을 사용하면 사이트의 여러 곳에 표시하는..

엘리멘터 페이지 빌더 (Elementor Page Builder)는 무료 버전과 유료 버전이 있으며, 무료 버전에서도 다양한 기능을 제공하고 있습니다. 엘리멘터는 현재 500만 개 이상 사이트에 설치되어 사용되고 있습니다. 엘리멘터 페이지 빌더에서 숏코드는 텍스트 에디터 또는 숏코드 위젯을 사용하여 추가할 수 있습니다. 워드프레스 엘리멘터 페이지 빌더에 숏코드 추가하는 방법 워드프레스 버전 2.5부터 숏코드(Shortcode)가 지원되기 시작했습니다. 숏코드는 포스트의 콘텐츠에 사용되는 매크로를 생성하기 위해 도입되었습니다. 예를 들어, 워드프레스 사이트에 문의 폼을 추가하여 방문자로부터 문의를 받고 싶은 경우 Contact Form 7과 같은 플러그인을 사용할 수 있습니다. CF7에서 컨택트 폼을 만들..

워드프레스 엘리멘터 페이지 빌더에서 모바일 및 태블릿 중단점 (Breakpoint) 설정을 변경할 수 있습니다. 원하는 경우 테마의 중단점에 맞추어 엘리멘터에서 모바일 중단점 설정을 변경할 수 있습니다. 보다 정교하게 태블릿, 모바일, PC 중단점(분기점)을 설정하고 싶은 경우 다음 글을 참고해보세요. 엘리멘터 페이지 빌더: 사용자 정의 분기점 설정하기 워드프레스 엘리멘터(Elementor) 페이지 빌더에서는 기기 해상도에 따라 다르게 레이아웃을 설정할 수 있도록 반응형 모드를 지원합니다. 사이트 설정에서 각 기기에 대한 분기점 해상도 범위를 avada.tistory.com 워드프레스 엘리멘터 페이지 빌더에서 모바일 중단점 설정 변경하기 엘리멘터 페이지 빌더를 사용하면 반응형으로 작동하여 PC, 태블릿,..

워드프레스에서는 다양한 방법으로 자주하는 질문 (FAQ) 페이지에 사용되는 토글 형식의 요소를 만들 수 있습니다. 질문을 클릭하면 질문에 대한 답변이 표시되는 이러한 토글을 '아코디언'이라고도 합니다. 아바다, 엔폴드와 같은 테마에서 기본적으로 아코디언 또는 토글 요소를 제공합니다. 엘리 멘터 페이지 빌더에서도 '자주 묻는 질문' 페이지에 사용할 수 있는 '토글' 엘리먼트를 사용할 수 있습니다. 워드프레스 엘리멘터 페이지 빌더 자주하는 질문 (FAQ) 만들기 엘리멘터 페이지 빌더에는 '토글' 엘리먼트를 사용하여 FAQ 항목을 추가할 수 있습니다. Elementor에서 제공되는 사전 구성된 템플릿 중에도 FAQ 요소가 포함된 템플릿이 있습니다. FAQ 블록도 있습니다. 다음 영상은 엘리멘터에서 기본적으로 ..

워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더는 무료 버전에서도 제한적이지만 몇 가지 템플릿을 사용할 수 있습니다. Elementor 무료 버전에서 제공되는 첫 번째 템플릿 (Landing Page - Hotel)을 로드하면 다음과 같은 레이아웃이 로드됩니다. 두 번째 섹션(Your Dream Vacation is Here 부분)을 위로 이동시켜 첫 번째 섹션의 자막처럼 보이도록 하는 방법을 살펴보겠습니다. [참고*기본적인 CSS에 대한 이해가 없는 경우 이 글을 이해하는 데 어려움을 겪을 수도 있으리라 생각됩니다. 기본적인 CSS는 배우기에 그렇게 시간이 많이 걸리지도 않고 어렵지도 않습니다. 시중에서 책을 한 권 구입하거나 생활코딩과 같은 무료 강의를 통해 CSS를 익힐 수 있습니다.*] 엘리멘..

워드프레스 엘리멘터 페이지 빌더에서 Font Awesome 아이콘이나 다른 아이콘이 제대로 표시되지 않는 경우가 있습니다. Font Awesome 아이콘이 깨져서 보이는 경우 1) 엘레멘터 플러그인의 설정을 변경했거나 2) 아이콘 라이브러리에서 아이콘이 사라졌을 수 있습니다. 워드프레스 엘리멘터 페이지 빌더에서 Font Awesome 아이콘이 깨지는 경우 워드프레스 Elementor 페이지 빌더를 업데이트한 후에 간혹 아이폰이 엑박으로 표시되면서 깨져 보일 수 있습니다. 그런 경우 다음의 두 가지가 원인일 수 있습니다. 엘리멘터 플러그인의 설정을 변경한 경우 아이콘 라이브러리에서 아이콘이 사라진 경우 엘리멘터 페이지 빌더를 업데이트했거나 새로 설치한 후에 FontAwesome 아이콘이 표시되지 않는 경우..

몇 년 전만 해도 비주얼 컴포저가 많은 테마에 탑재되어 인기를 끌었습니다. 고질적인 속도 문제와 자잘한 버그가 있었지만 이 페이지 빌더만 한 것이 없어 많이 사용되다가 엘리멘터 페이지 빌더가 나오면서 상황이 달라졌습니다. 엘리멘터는 속도가 비교적 가볍고 무료 버전에서도 괜찮은 기능이 탑재되어 현재 500만 개 이상 사이트에서 사용되고 있습니다. Brizy는 비교적 최근에 만들어진 페이지 빌더로 여러 면에서 엘리멘터와 닮은 점이 있습니다. 새로운 워드프레스 페이지 빌더 Brizy, 제2의 엘리멘터가 될 수 있을까? Brizy는 사용 편의성과 경쟁적인 가격으로 엘리멘터를 추격하고 있습니다. 현재 6만 개 이상 사이트에 설치되어 있는 이 페이지 빌더 플러그인은 500만 개 이상 사이트에 설치된 Elemento..