Oxygen 빌더에서 부드럽게 흐르는 무한 Carousel을 구현하고 싶을때, OxyExtras 플러그인의 Carousel Builder를 활용하여 구현할 수 있습니다.
아래에서 설정법을 그대로 따라하면 끊김 없이 부드럽게 흐르는 캐러셀을 만들 수 있습니다.
Carousel Builder 위젯 추가 후 Behaviour/Interaction 클릭 후 위와 같은 설정을 해줍니다. 여기서 중요한 것은 Ticker Speed를 조절해 자연스러운 흐름 줄 수 있습니다.
Oxygen Builder는 고급 사용자와 개발자를 위한 페이지 빌더로, 성능 최적화와 자유로운 디자인 커스터마이징이 강점이지만 기본적으로 폰트를 직접 추가하거나 관리하는 기능이 제공되지 않습니다. 따라서 원하는 폰트를 적용하려면 외부 플러그인이나 커스텀 CSS를 활용해야 합니다.
이 글에서는 외부 Json 파일을 import하여 쉽게 커스텀 폰트를 업로드 하는 방법을 안내하겠습니다.
플러그인 > 새로 추가에서 Code Snippet 플러그인을 검색하여 설치, 활성화합니다.
https://www.altmann.de/en/blog-en/code-snippet-custom-fonts 해당 블로그를 방문하여 아래에 Download 섹션에서 Json 파일을 다운로드 한 후 관리자페이지 Snippets > Import 에서 Json 파일을 업로드 합니다.
파일 매니저 플러그인을 통해 별도의 FTP 접속 없이 플러그인으로 폰트를 업로드합니다.
관리자 페이지 WP 파일 관리자 화면에서 wp-content > uploads > fonts 폴더에 로컬에 저장된 폰트를 드래그앤드롭으로 업로드 하면 사이트 페이지에서 글로벌 폰트로 불러올 수 있습니다.
페이지 생성 후 Settings > Global Styles > Text font 옵션창에서 설치한 폰트를 적용할 수 있습니다.
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('파일 위치 경로') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}폰트 파일을 업로드하여 Oxygen Setting에 기본 폰트로 적용 하면 내 화면에만 보이고, 다른 방문자의 화면은 위와 같이 CSS에 font-face를 설정해주어야 폰트 적용이 마무리 됩니다.
워드프레스에서 차일드 테마(Child Theme) 즉, 자식테마를 사용하는 것은 테마 업데이트 시 커스터마이징한 내용이 유지되도록 하는 가장 안전한 방법입니다. 특히 Hello Elementor 테마는 매우 가볍고 커스터마이징이 많은 테마이기 때문에, 차일드 테마 사용이 거의 필수적입니다.
지금부터 Hello 테마의 차일드 테마를 만드는 간단하고 확실한 방법을 알려드리겠습니다.
파일매니저 플러그인을 설치하여 폴더, 파일을 만드는 것이 가능하나 서버 에러가 났을 경우, 관리자 페이지 및 사이트가 먹통이 되므로 FTP에 들어가 오류 해결 작업이 필요합니다. 그래서 파일매니저를 통해 작업을 하여도 FTP 계정이 사전에 준비되어 있어 오류시 바로 접속하도록 사전 준비가 필요합니다.
파일 매니저 플러그인 사용시 플러그인에서 아래 폴더 및 파일을 만들고, 코드 편집기는 관리자 페이지 모양 > 파일 편집기에서 코드를 저장하는 방법이 간편합니다.
워드프레스 설치 경로의 wp-content/themes 디렉토리 안에 아래와 같이 새 폴더를 만듭니다.
/wp-content/themes/hello-child/
폴더 이름은 자유지만, 일반적으로 hello-child로 많이 씁니다.
style.css 파일 생성hello-child 폴더 안에 style.css 파일을 만들고 다음 내용을 입력합니다.:
/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: A child theme of Hello Elementor
Author: [당신의 이름 또는 회사명]
Author URI: [당신의 사이트]
Template: hello-elementor
Version: 1.0.0
*/
/* 차일드 테마에서 커스터마이징 CSS는 여기에 작성합니다 */Template: hello-elementor 는 부모 테마 폴더명과 정확히 일치해야 합니다. 보통 hello-elementor가 맞지만, FTP나 파일 관리자에서 실제 폴더명을 한 번 확인해보세요.
functions.php 파일 생성
같은 폴더(hello-child) 안에 functions.php 파일을 만들고 다음 코드를 넣습니다.:
<?php
add_action( 'wp_enqueue_scripts', 'hello_child_enqueue_styles' );
function hello_child_enqueue_styles() {
wp_enqueue_style( 'hello-elementor-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'hello-child-style', get_stylesheet_directory_uri() . '/style.css', array('hello-elementor-style') );
}이는 부모 테마의 스타일을 그대로 불러오기 위한 코드입니다.
💡 여기서 중요한 점: 기존에 functions.php 파일에 추가한 코드를 삭제 후 hello-child의 functions.php 파일 내에 붙여넣기 합니다. 반드시 기존 것을 삭제해야 하고, 삭제하지 않으면 코드 중복으로 에러가 나 사이트 진입이 불가합니다.
이제 워드프레스 관리자 화면으로 가서외모 > 테마 에 들어가면 "Hello Elementor Child" 테마가 보입니다. 이를 활성화하면 차일드 테마가 적용됩니다.
이 작업 후 오류가 날 경우가 있으므로 반드시 FTP 계정을 사전에 준비하여 접속하도록 합니다.
Elementor의 페이지 빌더 설정이나 페이지 자체에는 영향을 주지 않으므로, 차일드 테마 적용 후에도 기존 디자인은 그대로 유지되지만 기존에 사용자 정의 css에 정의한 코드가 있다면 이 부분은 없어지기 때문에 복사하여 다시 관리자 페이지 사용자 정의에 가서 붙여넣기 해야 합니다.
WP-PostViews 플러그인을 설치합니다. 설치방법은 관리자 페이지 > 플러그인 > 새로추가를 검색 후 설치 > 활성화 합니다. 이후 포스트 뷰수는 관리자 페이지 > 글 목록에서 확인할 수 있습니다.
필터링과 관련된 여러가지 플러그인 있는데요. 저는 Unlimited Elementor의 Sorting Filter 위젯을 사용하였습니다. 편집기에서 Sorting Filter 위젯을 추가한 후 편집기에서 Fields > Filed Type : Meta Field, Meta Field Name을 views로 지정하면 WP-PostViews에 지정된 views로 연결됩니다.
하단에 Unlimited Elementor의 Post Grid 위젯과 Filter를 연결하면 포스트를 인기순으로 정렬할 수 있습니다. Unlimited Elementor 멀티 필터링 포스트를 통해 포스트와 필터 연결방법을 참고할 수 있습니다.
views 수치를 관리자가 임의대로 조작하여 필터링 순위 조작이 가능합니다.이를 진행하기 위해서는 ACF 플러그인 설치가 필요합니다.
설치 후 ACF > 필드 그룹 > 새로 추가하기를 눌러 아래 사항에 맞추어 입력합니다.
이제 글 또는 포트폴리오 편집기의 하단에 ACF에서 저장한 views 필드 그룹이 나옵니다. Default 값인 1에서 원하는 숫자로 자유롭게 변경이 가능합니다. 숫자 변경 후 저장을 한 후 페이지 필터링을 통해 조작한 view 수에 맞게 정렬이 되는지 테스트합니다.
포트폴리오 관리를 위해 카테고리를 상위, 하위로 나뉘고, 페이지에서 보다 편리하게 결과값을 보기 위해 멀티 필터링을 구현하였습니다. 이 글에서 제가 구현한 방법을 차례대로 안내하도록 하겠습니다.
ACF 플러그인을 설치, 활성화 한 후 관리자 페이지의 ACF > 게시물 유형 > 새로 추가하기를 통해 포트폴리오라는 post type을 새로 생성합니다.
일반적으로는 ACF의 택소노미 탭에서 포트폴리오용 카테고리를 생성하지만, 해당 카테고리가 포트폴리오 페이지 빠른 편집에서 카테고리 첫 업데이트 후 빠른 편집 클릭시마다 리스트에서 사라지는 오류가 발생하여 다른 방법을 사용하였습니다. 위의 이미지에서 언급한 바와 같이 여러가지 방법을 시도한 결과 마지막으로 선택한 방법은 택소노미를 카테고리(elementor_library_category)로 등록하였습니다. 이를 통해 빠른 편집 오류가 사라졌고, Unlimited Elementor의 Post Grid 위젯에서도 문제 없이 카테고리를 가져와 필터링이 작동되습니다.
고급 설정 > URL > 공개적으로 쿼리 가능을 활성화합니다.
일반적인 ACF 사용법은 다음 게시물을 참고하세요. ACF에서 게시물 생성하기
관리자 페이지 > 포트폴리오 > 카테고리에서 상위 카테고리, 하위 카테고리를 입력합니다. 상위 카테고리를 먼저 생성한 후 하위 카테고리는 부모 카테고리에 해당 상위 카테고리를 지정하여 추가하면 됩니다.
멀티 필터링을 사용하기 위하여 Unlimited Elemntor 플러그인의 Checkboxes Filter 위젯과 Post Grid 위젯을 함께 사용하였습니다.
Checkboxes Filter의 Filter Settings에서 Logic을 Or, Filter Role을 Single로 설정합니다.
Terms Selection은 아래와 같이 설정합니다.
레이아웃은 Accordion, 버튼명을 지정합니다.
Post Grids에서는 위의 Filter와 연결을 할 수 있습니다. 아래와 같이 설정합니다.
나머지 부분은 디자인 시안에 맞게 설정한 후 업데이트하여 체크박스 필터링 설정에 맞추어 포스트가 동적으로 바뀌어 제대로 작동하는지 확인합니다.
Oxygen 빌더를 사용 중인데 사이트 복제를 위해 all in one wp migration을 통해 가져오기한 후 이미지가 출력이 안되는 오류가 발생하였습니다. 개발자 도구 소스를 확인해보니 이미지의 주소가 이전 사이트 주소를 가르키고 있었습니다. 해당 페이지 편집기를 들어가보니 편집기 내에서는 현재 주소로 되어있고, 이미지 출력에 문제는 없었지만 실제 사이트 화면은 출력이 되지 않았습니다.
해결한 방법은 Oxygen에서 제공하는 CSS 캐시 재생성 작업입니다. 이를 통해 CSS 캐시문제를 해결하여 미디어에서 이미지의 주소가 현재의 주소로 정상적으로 변경되었습니다.
Oxygen > Settings > CSS Cache 페이지에서 Go to regeneration page 버튼 클릭합니다. Regenerate CSS 페이지에서 Start regeneration 버튼을 클릭하여 CSS 캐시를 재생성 합니다. 이후 이미지가 출력이 정상적으로 되는 것을 확인할 수 있습니다.
워드프레스 백업은 사이트를 안전하게 유지하기 위한 필수 작업입니다. 이 글에서는 백업 방법 중 FTP를 통한 파일 백업, phpMyAdmin을 을 통한 데이터 백업, 플러그인을 활용한 방법을 안내하겠습니다.
워드프레스 사이트 이전을 위해 가장 추천하는 백업 방법은 FTP를 사용하여 wp-content 폴더를 다운로드하는 것입니다. 이 폴더에는 테마, 플러그인, 이미지 파일이 포함되어 있습니다. 또한, 게시글과 데이터베이스 정보를 백업하려면 호스팅 업체의 phpMyAdmin에 접속해 데이터베이스를 내보내기 하면 됩니다.
워드프레스의 테마, 플러그인, 업로드된 이미지를 포함하는 wp-content 폴더를 다운로드하면, 사이트에 필요한 대부분의 파일이 백업됩니다.
워드프레스 사이트의 모든 게시글, 페이지, 댓글, 사용자 정보 등은 데이터베이스에 저장되어 있습니다. 따라서 사이트 이전을 위해 데이터베이스 백업도 필수입니다.
UpdraftPlus와 같은 플러그인을 통해 무료로 간편하게 백업을 진행할 수 있습니다.
워드프레스 사이트 이전을 위해 가장 추천하는 백업 방법은 FTP를 통해 wp-content 폴더를 다운로드하고, phpMyAdmin을 이용해 데이터베이스를 내보내기 하는 것입니다. 이 방법은 워드프레스의 모든 중요한 데이터와 파일을 안전하게 백업할 수 있도록 도와줍니다. 정기적인 백업 습관을 들여 사이트 관리와 이전 작업을 더욱 쉽게 만들어보세요! 😊
ACF(Advanced Custom Fields) 플러그인은 사용자 정의 필드를 보다 쉽게 추가하고 관리할 수 있게 도와주는 강력한 플러그인입니다. ACF를 활용하면 웹사이트의 다양한 요소를 사용자 정의하여 동적 콘텐츠를 효과적으로 생성할 수 있습니다. 아래에 ACF 사용 방법을 단계별로 정리하였습니다.
ACF > 게시물 유형 > 새로 추가하기로 이동합니다. 예시로 템플릿이라는 게시물을 생성합니다.
고급 설정 > 가시성 탭으로 이동 후 게시물 숫자로 게시물 위치를 지정하고 아이콘을 설정하여 커스텀 할 수 있습니다.
필드에 맞는 필드 유형을 선택합니다.
필드 그룹이 표시될 특정 게시물을 선택하여 저장합니다. 위에서 생성한 템플릿을 넣으면 앞으로 템플릿 게시물을 편집할 때마다 하단에 사용자 정의 필드가 자동 생성되게 됩니다.
ACF는 사용자가 원하는 대로 WordPress 콘텐츠를 확장할 수 있는 무궁무진한 가능성을 제공합니다. 특히 커스텀 템플릿을 제작하거나 동적 콘텐츠를 처리하는 데 매우 유용합니다. 예전에는 게시물을 다른 플러그인을 통해 생성하고, ACF 플러그인에서 만든 필드 그룹을 매칭시켰다면 이제는 이 플러그인 하나로 모든 동작을 제어할 수 있으니 잘 활용해보시길 바랍니다.
최근에 제가 워드프레스 플러그인 설치시 가장 첫번째로 설치하는 강력한 기능의 무료 플러그인이 있습니다. 바로 Admin and Site Enhancements(ACE) 플러그인 입니다. 여러가지 강력한 기능을 한 번에 제공하여 사용자 경험을 크게 향상시킵니다. 이 플러그인 하나로 인하여 여러 다른 플러그인을 설치할 필요가 없어 가장 추천하는 플러그인입니다. 이번 글에서는 ASE 플러그인의 추천 기능을 설명하겠습니다.
플러그인명은 Admin and Site Enhancements 이고, 한국어로는 관리자 및 사이트 개선 사항입니다. 관리자 페이지에서 플러그인 > 새로 추가를 통해 플러그인을 검색하여 지금 설치 > 활성화를 합니다.
<head>, <body>, <footer>에 코드 삽입 기능입니다. 이전에는 코드 스니펫 플러그인 또는 사용하는 테마를 이용해 코드 삽입을 하였다면 이제는 이 기능 활성화 후 아래에서 직접 코드를 입력할 수 있습니다.
워드프레스에서 불필요한 기본 기능인 댓글을 비활성화하여 관련 화면을 제거할 수 있고, 코어, 테마, 플러그인의 자동 업데이트를 비활성화하여 수동으로 업데이트를 관리하여 보다 안전하게 사이트를 운영할 수 있습니다.
Admin and Site Enhancements(ASE) 플러그인은 무료로 하나의 플러그인에 사이트 제작과 운영에 필요한 강력한 도구를 제공하여 콘텐츠 제작, 관리부터 보안 강화, 코드 삽입에 이르기까지 사이트의 효율성을 높이는데 탁월한 선택입니다. 효율적인 제작, 운영이 필요하다면 ASE 플러그인을 적극적으로 활용해보세요.
Elementor는 다양한 기본 폰트를 제공하지만 국내 한글 폰트가 거의 없기 때문에 커스텀 폰트를 추가하고자 할 때가 있습니다. 이 글에서는 Elementor에서 커스텀 폰트를 추가하는 방법을 단계별로 안내하겠습니다.
커스텀 폰트를 활성화하기 위해서는 Elementor Pro가 필요합니다. Free 기본 버전에는 추가 기능이 제공되지 않기 때문에 아래 링크를 통해 Pro 요금제에 가입할 수 있습니다.
커스텀 폰트를 추가하기위해서는 TTF, OTF, WOFF, WOFF2 등의 파일 형식이 필요합니다. 먼저 사용할 폰트 라이센스가 웹사이트에 사용될 수 있는지 확인 후 폰트 파일을 다운로드 합니다.
워드프레스 대시보드에서 Elementor > Custom Fonts로 이동하여 ADD NEW 버튼으로 폰트를 등록합니다.
준비된 폰트 파일을 각 형식별로 업로드합니다. WOFF와 WOFF2 파일은 특히 웹 최적화된 형식입니다. 각 파일에 대해 굵기(font-weight)와 스타일(italic 등)을 설정할 수 있습니다. 모든 파일을 업로드 하고 속성을 설정한 후 Publish 버튼을 눌러 저장합니다. 이제 커스텀 폰트를 Elementor Typography 설정에서 사용 가능합니다.
커스텀 폰트를 적용하려면 개별 페이지나 템플릿 편집창에서 Typography 설정에서 폰트를 선택하면 됩니다. 이보다 더 편리한 방법은 전역 글꼴을 통해 사이트 전체적으로 기본 폰트를 설정할 수 있습니다. 대시보드에서 Elementor > 사이트 설정 > 전역 글꼴로 이동하여 기본의 타이포그래피에서 커스텀 폰트명을 찾은 후 저장 합니다. 여기서 주의할 것은 폰트 외에 굵기, 선 높이와 같은 다른 속성은 기본 값으로 놔두어야 나중에 H태그 등 추가로 지정한 값이 페이지에 제대로 적용이 됩니다.
Elementor는 워드프레스 현재 가장 대중적으로 사용되는 강력한 페이지 빌더입니다. 때로는 기존 사이트의 Elementor 콘텐츠를 다른 사이트로 옮겨야 할 때가 있습니다. 이를 위해 섹션과 템플릿을 옮기는 가장 효과적인 두 가지 방법을 소개하겠습니다. 첫 번째 방법은 간단한 섹션 복사 및 붙여넣기이며, 두 번째 방법은 템플릿 내보내기 및 가져오기 키트를 사용하는 방법입니다.
Elementor 편집 모드에서 복사하려는 섹션에 마우스를 올리고 오른쪽 클릭하여 복사합니다. 정확한 지정을 위해. 구조창에서 해당 컨테이너를 클릭 복사합니다.
대상 사이트에서 원하는 페이지의 Elementor 편집 모드에서 원하는 위치에 마우스를 올리고 오른쪽 클릭 후 붙여넣기를 하면 되는데요. 같은 사이트 내 이동은 붙이기를, 다른 사이트로 이동은 다른 사이트에서 붙여넣기를 하면 됩니다.
옮길 수 있는 대상은 아래와 같습니다.
실사이트에서 라이브로 Elementor의 작업을 할 때 시스템 오류, 플러그인 충돌로 인하여 갑자기 전역 글꼴, 색상, 스타일을 포함한 기본 키트가 사라질 경우 종종 있습니다. 이럴 경우, 백업이 안되어 있거나, 백업을 해도 이 부분을 되돌릴 수 없다면 기존에 로컬에서 작업물이 있다면 이런식으로 빠르게 복구가 가능합니다.
Elementor 섹션과 템플릿을 다른 사이트로 옮기는 작업은 사이트 관리에서 자주 필요한 절차입니다. 섹션 복사 및 붙여넣기는 빠르고 간단한 이동에 적합하며, 템플릿 내보내기 및 가져오기 키트는 더 많은 콘텐츠와 전역 설정이 필요할 때 유용합니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴, 색상 바꾸기
Elementor 팝업 만들기
컨테이너에 링크를 추가하기 위해서는 일반적으로 추가 옵션에서 a 링크 태그를 적용합니다. 하지만 적용 후 Elementor css로 인하여 디자인이 틀어질 수가 있습니다. 이럴 때 래퍼링크를 통해 디자인 변경 없이 링크를 달 수 있습니다. 이 페이지에서는 래퍼 링크 적용하는 방법을 살펴보겠습니다.
엘레멘터 편집기에서 링크를 걸 컨테이너 요소를 선택한 후 편집창의 고급 탭에서 래퍼 링크를 찾아 활성화 후 URL을 입력합니다.
해당 기능을 사용하기 위해서는 별도의 플러그인이 필요합니다. 관리자 페이지에서 플러그인 > 새로추가 페이지에서 Essential Addons for Elementor를 검색하여 플러그인을 설치 및 활성화 하면 래퍼링크를 찾을 수 있습니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴 색상바꾸기
엘레멘터에서는 세로선 위젯이 제공하고 있지 않지만 다른 위젯으로 비슷한 효과를 낼 수 있습니다. 이 포스팅에서는 엘레멘터 빌더 사용시 세로선 만드는 법을 살펴보도록 하겠습니다.
Elementor 편집기의 왼쪽 메뉴에서 분리자 위젯을 사용하여 세로선 효과를 낼 수 있습니다.
분리자 편집창에서 콘텐츠 탭에서 실선, 폭은 높이로 입력합니다. 80px일 경우, 높이 80px을 뜻합니다. 두번째 스타일 탭에서는 적절한 색상, 무게 입력 후 간격에서 바의 숫자를 충분히 증가시킵니다.
마지막으로 고급탭에서 변환 > 회전 > 90도로 설정을 통해 가로를 세로로 만듭니다.
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴 색상바꾸기
워드프레스에 채널톡(Channeltalk)을 추가하는 방법을 단계별로 살펴보겠습니다. 채널톡에 가입한 후 워드프레스에 플러그인을 설치하여 채널톡에서 제공한 키를 입력해주면 되는 간단한 작업입니다.
채널톡 공식 사이트에 접속하여 회원가입 후 로그인 한 후 대시보드 왼쪽 메뉴바 하단의 세팅 아이콘 > 버튼 설치 및 설정 한 후 Plugin Key와 Access Secret 코드를 복사합니다.
워드프레스 관리자 페이지에 로그인 후 플러그인 > 새로 추가로 이동한 뒤 Channel.io를 검색하여 설치하고 활성화합니다. 채널톡 또는 channeltalk으로 안나올 수 있기 때문에 Channel.io로 검색하는 것이 좋습니다.
설정 메뉴에서 채널톡 페이지로 이동하여 상단에서 복사한 Plugin, Secret key를 붙여넣기 한 후 변경사항 저장을 클릭합니다.
웹사이트에 접속하여 채널톡 위젯이 정상적으로 표시되는 확인하고, 채널톡 대시보드에서 연동상태를 확인하고 프로필과 운영시간 등 상세한 설정을 완료하고, 테스트 메시지를 보냅니다.
지금까지 채널톡 적용 방법을 안내하였습니다. 필요에 따라 위젯의 위치 또는 디자인을 수정할 수 있습니다.
워드프레스 필수 플러그인 추천
Elementor Pro 버전과 무료 버전의 비교
Elementor 글꼴, 색상 바꾸기
SNS를 통한 공유시 들어가는 이미지가 비어있을 경우, 관리자페이지에서 오픈그래프 이미지를 업로드 하면 됩니다. 이 글에서는 Rank Math SEO 플러그인을 통해 이미지를 업로드하는 방법을 살펴보겠습니다.
워드프레스의 대표 SEO 플러그인인 Rank Math SEO를 설치합니다. 설치하는 방법은 관리자 페이지에서 플러그인 > 새로 추가를 통해 검색하여 설치 후 활성화 합니다.
Rank Math SEO > 제목 및 메타로 이동하여 페이지 하단의 OpenGraph 섬네일 섹션에서 이미지를 업로드 후 변경사항 저장을 누릅니다. 이 후 SNS로 공유를 하면 해당 이미지가 함께 전달되는 것을 확인할 수 있습니다.
Popup Maker 플러그인은 무료로 다양한 유형의 팝업을 쉽게 생성하고 관리할 수 있는 강력한 도구로 워드프레스에서 인기 있는 팝업 플러그인입니다. 단, 일부 슬라이드 플러그인과 충돌될 수 있다는 점 참고하시기 바랍니다. 이 글에서는 해당 플러그인을 설치하여 팝업을 사이트에 적용하는 방법을 살펴 보겠습니다.
관리자 페이지에서 플러그인 > 새로 추가를 통해 Popup Maker 플러그인을 설치 후 활성화 합니다.
설치 후 왼쪽 사이드 바 메뉴에서 Popup Maker > Create Popup를 클릭합니다.
편집기에서 제목을 입력합니다. 제목은 내부에서 관리할 때 사용되며 방문자를 보지 못합니다. 팝업의 내용은 텍스트, 이미지, 버튼 등을 추가할 수 있습니다. 간단한 방법은 배너를 제작하여 이미지로 업로드하는 것이 간편합니다.
이미지를 업로드 한 후 기본으로 해상도가 낮게 설정되어 있어 이미지 클릭 후 편집 아이콘을 눌러 해상도 크기를 높여줍니다. PC에서는 너비 사이즈는 600 - 800사이를 추천합니다.
트리거는 팝업이 언제 열릴지를 설정하는 것으로 페이지가 로드 될때 자동으로 열리게 하려면 첫번째 옵션인 Time Delay/Auto Open으로 선택하고, 클릭시 오픈될 경우, 두번째 옵션 Click Open을 선택합니다. 하단의 On Popup Close는 팝업이 한번 닫히면 Prevent popup from showing to visitor again using a cookie가 활성화 되어있어 일정시간동안 팝업이 뜨는 것을 자동으로 방지해 줍니다.
위 트리거 설정은 페이지 로드 팝업이 자동으로 열리고, 팝업 닫기시 한달 동안 팝업이 나오지 않는 쿠키가 적용되었습니다.
트리거 Time Delay 설정에서 팝업이 오픈되는 지연 시간과 따로 생성된 쿠키를 연결할 수 있습니다.
그 외 Display, Close, Advanced 등 다양한 세부 조건들을 커스텀 할 수 있습니다. 이 글에서는 자주 쓰이는 부분만 설명하도록 하겠습니다. Display의 Preset 탭에서는 Center Popup으로 가운데로 위치를 고정합니다.
Display의 Size 탭에서는 위에서 지정한 이미지 사이즈와 동일하게 맞춰줍니다. 위에서 가로, 세로 크기가 600이므로 동일하게 입력합니다.
Close에서는 기본 텍스트명이 Close라고 되어있는데요. 이를 닫기 또는 X 표시자로 바꿀 수 있습니다.
Display의 Appearance 탭에서 Popup 테마를 선택할 수 있는데요. 기본으로 Default Theme로 적용되어 있습니다. Theme에서는 팝업의 디자인을 커스텀하여 만들 수 있습니다.
팝업에서 자주 사용할 디자인을 Default Theme에 저장해두고 앞으로 편하게 팝업 콘텐츠만 업로드하여 사용하면 됩니다. 오른쪽 메뉴 Popup Maker > Popup Theme > Default Theme에서 편집으로 들어갑니다.
현재 Default Theme에서 아래의 조건으로 변경하는 것을 추천합니다.
그 외의 다른 요소들도 적절한 것으로 커스텀하여 디자인할 수 있습니다.
Salient 테마 다른 사이트로 섹션 복제
Elementor 팝업 만들기
Salient 테마로 제작할 때 부분 섹션만 복사하여 다른 사이트에 붙여넣기를 해야할 경우가 있습니다. 같은 사이트 내에서는 클립보드 기능을 이용하여 복사, 붙여넣기를 쉽게 할 수 있지만 다른 사이트로의 이동은 플러그인 추가가 필요한데요. 플러그인을 통해 Salient 테마에서 템플릿을 내보내고 가져오기를 쉽게 작업할 수 있습니다. 아래에서 단계별로 섹션을 다른 사이트로 복제하는 방법을 알아보겠습니다.
내보내기와 가져오기할 사이트 2곳 모두에서 관리자에서 플러그인 > 새 플러그인 추가에서 Export & Import WPBakery Page Builder를 검색하여 설치, 활성화를 합니다.
Export할 섹션 row의 오른쪽 상단에 연필 아이콘을 클릭하면 Row Settings 팝업이 뜹니다. 팝업에서 세팅 아이콘 > Save as template 클릭 후 템플릿명을 입력 후 저장합니다. 이 후 My Template에 해당 템플릿이 저장됩니다.
WPBakery Page Builder > Templates Import & Export를 선택하여 Template Manager 페이지로 이동합니다. 해당 페이지에서 템플릿을 Json format 내보내고, 가져오기 할 수 있습니다. Export 탭에서 내보내려는 템플릿을 선택하고 Donwload Export File을 클릭합니다. 이 후 템플릿이 Json 파일 형식으로 다운로드 됩니다.
가져올 사이트로 이동하여 WPBakery Page Builder > Templates Import & Export를 클릭합니다. Import 탭에서 파일선택으로 다운로드한 Json 파일을 선택하여 Import Templates 클릭합니다. 이 후 가템플릿 목록에 템플릿이 추가 됩니다. 이제 이 템플릿을 원하는 페이지에서 불러와 사용하거나 편집할 수 있습니다.
페이지에서 Edit with WPBakery Page Builder를 통해 편집모드로 들어갑니다. 페이지 상단의 My Templates을 선택하면 Templates 팝업에서 플러스 아이콘으로 템플릿을 추가하여 바로 적용하고, 필요한 경우 커스터마이징을 할 수 있습니다.
페이지 복제, 글 복제 플러그인 Duplicate
마이그레이션 플러그인 All-in-One WP Migration 사용법
워드프레스에서 엘레멘터 빌더를 사용하여 팝업을 만들고 불러오는 방법을 단계별로 살펴보겠습니다. 참고로 이 기능을 위해서는 Elementor Pro 버전에서만 사용할 수 있습니다. 무료 버전에서는 기본적인 페이지 빌딩 기능만 사용할 수 있기 때문에 프로로 업그레이드 하여 사용하시는 것을 추천드립니다.
알림판에서 템플릿 > 새 템플릿을 추가를 클릭합니다.
템플릿 유형은 옵션에서 Popup으로 선택, 적당한 이름을 작성 후 템플릿 만들기
여러가지 템플릿이 나와 선택하거나 새롭게 디자인할 수 있습니다. 보통 지정된 디자인이 있기 때문에 엘레멘터 편집기를 사용하여 팝업의 내용을 제작할 수 있습니다. 텍스트, 이미지, 버튼 등을 추가할 수 있고, 편집기 상단 가운데의 세팅 아이콘을 선택하여 왼쪽 패널에서 Popup 설정을 변경합니다.
게시 후에 조건 탭에서 팝업을 표시할 특정 페이지나 섹션을 선택하거나 다양한 트리거 옵션을 설정할 수도 있습니다. 예를 들어 페이지 로드 시 트리거를 설정하면 해당 페이지 접근하면 팝업이 자동으로 표시 됩니다. 별도의 옵션 없이 저장 후에는 아래처럼 수동으로 팝업 불러오기를 할 수 있습니다.
팝업 표시를 위해 클릭할 버튼 또는 섹션을 선택 > 왼쪽 패널에서 링크 오른쪽 아이콘 선택 > Popup 선택
Popup을 클릭한 후 아래 설정 섹션에서 팝업 템플릿 이름을 검색하여 선택합니다. 이렇게 하면 엘레멘터 빌더로 팝업을 만들고 원하는 방식으로 불러올 수 있습니다.
