코딩없이 페이지, 홈페이지, 팝업을 만드록 테마를 꾸밀 수 있는 페이지빌더 워드프레스 Elementor Pro 강좌
워드프레스 Elementor – CSS ID와 Classes 항목(CSS 아이디와 클래스)
Wordpress 페이지빌더 Elementor의 섹션, 칼럼, 위젯을 설정할 때 공통항목으로 찾아볼 수 있는 CSS ID와 CSSClasses 항목에대한 설명입니다. Elmentor에서 두 항목을 살펴보고 HTML에서의 CSS 클래스와 아이디가 어떤식으로 쓰이는지 살펴본다음 이것으로 무엇을 할 수 있는지 간단히 설명하겠습니다.
Elementor의 CSS ID와 CSS Classes...
워드프레스 Elementor 하단툴바에서 반응형 디자인 모드 전환과 프리뷰 미리보기 버튼 사용에 대해서
컴퓨터, 태블릿, 핸드폰등 다양한 화면 사이즈에 대응하는 웹페이지 제작 트렌드로써 반응형 웹페이지 디자인은 이미 대세가 된지 오래입니다. 대부분의 워드프레스 테마는 반응형 웹사이트지원을 기본으로 하죠. 페이지 디자인 또한 반응형을 고려해 디자인해야할 게 당연합니다.
워드프레스 페이지 빌더 플러그인 Elementor의 장점 중 하나가...
한 서버에 워드프레스 사이트,블로그 두개 설치하기(서문)
이번 연재작에서는 하나의 아마존 라이트세일 VPS(서버 인스턴스)에 두 번째 워드프레스 사이트(블로그 또는 쇼핑몰)를 추가설치하는 방법을 기술합니다. 약간 개념적인 이해만 따른다면 이런 서버관리가 그리 어려운 일은 아닐 것입니다. 비단 AWS lightsail에서 뿐만 아니라 블루호스트나 디지털오션같은 다른 곳에서도 기본틀은 같습니다.
지난 연재작...
워드프레스 테마 다운로드 및 설치 방법 (WordPress Themes)
안녕하세요. 워드프레스 사용법 기초 시리즈 연재작 이번 글에서는 워드프레스 테마(Wordpress Themes)를 설치하는 방법에 대해 알아보려고 합니다. FTP 프로그램으로 직접 파일을 업로드해서 설치도 가능하지만 이글에서는 다루지 않고 순수 워드프레스 관리자 페이지를 이용해서 설치해보겠습니다.
Wordpress 테마 설치 두 가지 방법
관리자 페이지내 테마샵에서 무료...
워드프레스 블로그,사이트 위젯(WordPress 사용법 기초)
시리즈 연재작 워드프레스 사용법 기초 중 이번 글에서는 위젯에 대해 알아보겠습니다. 스마트폰이 대세인 요즘엔 위젯을 밑으로 내리거나 숨기는 1칼럼의 깔끔한 디자인들이 많습니다. 반응형 디자인에서는 데스크탑에서는 옆에 보이던 사이드바가 모바일에서는 본문 밑으로 가곤하죠.
위젯(Widget)이란?
워드프레스의 위젯은 부가 정보를 보여주는데 사용됩니다. 고정된 위치에...
워드프레스의 새로운 글쓰기 에디터 사용후기- Gutenberg Editor 문제점, 장단점 리뷰
Wordpress 4.9.8 버전으로 판올림을 하고 새로운 에디터가 출시되었습니다. 이름하야 Gutenberg Editor(구텐베르크 에디터. 발음이 '구텐버그' 가 아니라는 것에 실망하지 말자). 이름 번역도 구텐베르그, 그텐베르크 왔다 갔다 하는군요.
현재는 구텐베르크가 플러그인형태로 지원되며 4.9.8 로 설치하거나 업그레이드하면 이 새로운 에디터와 고전편집기 중에, 또는 둘다...
워드프레스 최초 접속화면 및 관리자 비밀번호 설정 방법
이 글은 LEMP 스택에 Wordpress 설치하기 시리즈 연재작의 일환으로 작성되었지만 워드프레스 설정은 공통사항이므로 서버구성은 딱히 상관없습니다. 워드프레스 첫 관리자 만들기와 함께 몇가지 추천하는 초기설정을 해보고 테스트도 해봅시다.
워드프레스 설치화면에서 관리자 ID 만들기
Wordpress 관리자 로그인 하기
워드프레스 관리자(글쓴이) 닉네임 변경 하기
기타 초기...
워드프레스 블로그 사이트언어 바꾸기(WordPress 한국어 설정방법)
이글은 워드프레스 블로그 시작하기 시리즈 연재작의 일환으로 작성되었지만 사이트 언어변경 방법은 워드프레스 공통사항이므로 모든 워드프레스에 적용가능합니다.
워드프레스를 직접 다운로드 받아 설치한다면 설치할 때 처음부터 한글워드프레스를 설치하는 게 좋겠습니다다만 아마존 라이트세일(AWS Lightsail)에 기본으로 설치되는 Bitnami 워드프레스는 영어로 나오는데요. 언어팩이 함께 설치되어있어서...
웹사이트 서버속도 체크하기 – WordPress 블로그등 모든 웹페이지 로딩속도 측정가능
안녕하세요. 꼭 Wordpress 블로그나 쇼핑몰이 아니더라도 어떤 서버든 원하는 웹사이트의 속도(페이지 로딩타임)을 확인해보고 싶을 때가 있죠? 이번 글에서는 순수하게 어느 사이트나, 누구나 해볼 수 있는 사이트 속도측정 방법에대해서 알아볼 거예요. 데스크탑 컴퓨터(윈도우, 맥)에서 체크하는 방법만 알아보겠습니다.
속도 문제해결을 위해서는 먼저 점검해봐야하는...
워드프레스 블로그 운영 기초 및 사용방법(WordPress 초보)
이번 워드프레스 사용법 기초 연재작에서는 워드프레스 블로그 운영 전반에 관한 글입니다. 프로그래머, 코더,서버관리 영역이 아닌 일반적인 사항이므로 어떠한 코드에대한 설명도 없을 것입니다. 말 그대로 Wordpress라는 CMS를 처음 접하시는 분들이 블로그, 사이트, 쇼핑몰 운영을 위해 알고 시작하면 도움이 될 것이라고...
나의 웹사이트, 블로그 SSL 보안 점수는?
요즘들어 HTTPS 는 필수가 되어갑니다. 구글의 크롬웹브라우저나 애플의 사파리 웹브라우저에서는 http 주소로된 사이트의 경우 무조건 보안경고를 하거나 사이트 접속을 막아버리기 시작했거든요. HTTPS를 위한 SSL인증서 발급도 렛츠인크립트로 이제 공짜가 생겼으니 그에 따라 설치형 워드프레스도 HTTPS를 큰 부담없이 설정가능하고 저 또한 여러분께...
Elementor 편집화면: 사이드바 위젯 패널과 글로벌 설정 설명 (워드프레스 페이지빌더 사용법)
이번 글에서는 Elementor 페이지빌더 편집화면에서 왼쪽에 나타나는 사이드바 위젯 패널이 어떤 구조로 이루어져있는지 알아보고, 위젯을 추가하면 기본으로 설정되어있는 글로벌 설정, 디폴트 색상과 폰트에 대해 설명하려고 합니다.
글로벌 디폴트 설정은 엘리먼트 위젯을 추가했을 때 가장 기본적으로 세팅되어있는 것들로써, 글로벌 설정은 기본...
워드프레스 Elementor Pro 라이선스 키 등록하기 (Activate License Key)
워드프레스 페이지빌더, 테마빌더인 Elementor Pro의 라이선스를 등록하려면 사용하려는 워드프레스 사이트에대해서 라이선스 키를 등록하고 활성화해서 사용해야합니다. 프로버전 구매 및 자신의 라이선스 키를 얻는 방법은 아래링크에 상세히 기술되어있으니 참고하시기 바랍니다.
참고 : 워드프레스 Elementor Pro 구매 방법 및 라이센스 정보
Elementor Pro는 모든...
워드프레스 Elementor Pro 동영상 강좌: 메뉴바 아래 배너가 들어간 사이트헤더 만들기 + SNS아이콘
여러 웹사이트를 보다보면 큰 배너사진과 함께 내비게이션 메뉴바가 들어간 사이트헤더들이 있는 웹사이트 디자인을 보신적 있으실텐데요. Wordpress 페이지빌더인 Elementor로도 그런 배너를 넣은 사이트헤더를 만들어 보겠습니다.
완성된 사이트헤더는 Elementor 섹션 템플릿으로써 저장해뒀다가 홈페이지(대문)이나 다른 페이지에 넣거나 Elementor Pro의 기능인 테마빌더기능을 이용해서 자신의...
워드프레스 유료 테마, 플러그인 구매 추천 사이트
Wordpress 유료 테마와 플러그인을 판매하는 곳은 여러곳이 있습니다. 개인이나 특정회사 홈페이지에서 자체 판매하는 것부터, 중간판매 상인 유료 테마 판매 사이트들이 있습니다. 중간판매 상 중에서 눈여겨볼 만한 곳은 테마포레스트(themeforest)입니다.
테마포레스트 뿐만 아니라 상위 메뉴에보면 코드캐년이라는 개발 프레임워크, 코드스니핏뿐만 아니라 비디오클립과 그래픽 디자인...
아마존 라이트세일에 WordPress 설치하기 (AWS Lightsail, 워드프레스 블로그 설치방법 – 홈페이지, 쇼핑몰 제작)
아마존 라이트세일에 워드프레스를 설치하는 것은 매우 쉽습니다. 그 절차와함께 몇가지 중요한 것을 집고 넘어가겠습니다.
먼저 아마존 라이트세일 홈페이지로 이동해서 로그인합니다 https://amazonlightsail.com 홈페이지에 접속하면 화면 오른쪽위에 아래처럼 가입(Sign up), 로그인(Log in) , 일본어로 변경(JA) 버튼을 볼 수 있습니다.
AWS 회원가입이 되어있지 않다면 Sign...
Elementor의 엘리먼트 위젯 목록과 글로벌위젯 (워드프레스 플러그인)
워드프레스 Elementor 페이지 플러그인 에서의 엘리먼트 위젯이란, 칼럼 안에 들어가는 각각의 페이지 디자인 요소들입니다. 이번 글은 시리즈 연재작 지난글에 이어서 Elementor 편집화면에 들어서면 왼쪽에 볼 수 있는 위젯 패널에 나타나는 위젯 종류에대해서 알아봄으로써 Elementor 내에서 특정 위젯이 어떤 연유로...
Elementor Pro 사용법 – HTML 커스텀 속성을 이용해 워드프레스 페이지에 퍼즐게임 넣기 (Custom Attributes)
HTML 속성에 관해 간단히 알아보고 Elementor 페이지빌더 플러그인에서의 Custom Attributes 입력방법과 응용예제, 그리고 Elementor로 디자인한 워드프레스 페이지에 자바스크립트 퍼즐게임(웹게임)을 추가하는 예를 통해 HTML 커스텀 속성이 어떤식으로 이용될 수 있는지 알아보겠습니다.
이 글은 wordpress 페이지빌더인 Elementor Pro 플러그인을 사용하면서 설정할 수 있는 ...
아마존 라이트세일 워드프레스 서버에 IP와 도메인 연결하기 (AWS Lightsail 과 DNS설정)
워드프레스 블로그에 구매한 도메인을 연결하려면 DNS(네임서버)를 설정해줘야합니다. DNS 설정은 자신이 가진 도메인이 어느 서버로 연결되어야하는지를 서버의 IP를 기입함으로써 하게 되는데요. 라이트세일 서버 인스턴스의 Public IP(퍼블릭 아이피)를 바로 연결해도 되지만 저는 Static IP(스태틱 아이피)를 생성해서 연결해주는 것을 선호합니다.
유동아이피 & 고정아이피
아마존 라이트세일의...
워드프레스 Elementor 사용법 – 관리자 메뉴 Role Manager ( AAM 회원등급 기능제한 플러그인 추천)
워드프레스는 혼자서만 사용할 수 있는게 아닌, 관리자, 에디터, 글쓴이, 단순한 사용자회원등 여러 권한별로 나누어진 사용자를 포함할 수 있죠. 제 경우도 팀블로그로 친구와 공동운영을 하고있기도 합니다. 그렇게 자신의 사이트에 사용자가 여럿이라면 워드프레스 사용자 역할(Role)별로 Elementor 편집기를 사용권한을 조정하는 것은 중요한...
한 개의 서버에 두 개의 워드프레스 설치방법 (VPS, mySQL 데이터베이스 추가 및 세팅)
워드프레스 시작하기(설치,세팅) 연재작 글을 따라 첫번째 워드프레스를 설치했다면 두번째 사이트를 추가할 준비가 된 것입니다. 첫번째 워드프레스를 설치하고 운영한 뒤 많은 시간이 지나서도 언제든지 추가할 수 있는 방법입니다. 이번 연재글의 첫번째 단계인 이 글에서는 두 번째 워드프레스를 같은 서버에 추가하기위해 DB를 추가하고...
워드프레스 보안 – 주기적인 인증키와 솔트(Salt) 값 변경을 위한 무료 플러그인 추천
워드프레스 사이트, 블로그 보안강화를 위한 워드프레스 무료 플러그인을 하나 추천하는 김에 워드프레스 로그인 인증키와 솔트 값에 대해 알아보려고 합니다.
워드프레스 설치할 때 필수적으로 세팅했던 Wordpress 설정 파일인 wp-config.php의 값중엔 인증 Key 와 Salt라는 hash(해쉬)값이 있습니다(Authentication Unique Keys and Salts). 이...
Elementor 백그라운드 배경 속성: Style – Background와 Background Overlay (CSS)
이 글은 Elementor를 사용하면서 페이지, 섹션, 칼럼 옵션설정에서 공통적으로 볼 수 있는 Style > Background 설정에 대한 설명입니다.
워드프레스 페이지빌더 Elementor의 배경(백그라운드 - 이미지,색상) 설정은 CSS의 background 속성에 기반하므로 CSS 디자인방식을 벗어날 수 없습니다. Elementor의 상세 옵션 설정은 사실상 CSS...
워드프레스 고유주소 변경과 www서브도메인 링크주소 리다이렉팅 방법(permalink)
워드프레스를 설치하고 나서 곧바로 설정하길 추천하는 것들 중 두 가지는 글의 고유주소(permalink) 변경과 www로 시작하는 서브도메인 리다이렉팅입니다.
워드프레스 블로그 글 고유주소
Wordpresss 고유주소 구조 변경하기
WWW 리다이렉팅
httpd-prefix.conf 파일을 수정해서 리다이렉팅
.htaccess 파일을 수정해서 리다이렉팅
리다이렉팅은 방문자가 특정한 링크주소로 접속해왔을 때 다른 주소로 보내주는 것을...
Elementor 페이지빌더 단축키, 우클릭메뉴, 복사 및 붙이기
컴퓨터 사용에 있어서 마우스 오른쪽 버튼 클릭(우클릭)이나 복사 및 붙이기(Control C, Control V) 그리고 단축키 사용은 압도적인 생산성위한 약방의 감초같은 기능이죠. 워드프레스 플러그인 Elementor의 편집화면에서도 그런 기능을 사용하여 페이지 디자인을 좀더 빠르게 편하게 할 수 있습니다.
페이지빌더에서 같은 엘리먼트, 같은...