워드프레스 버튼 생성기 소개
워드프레스에서 사용할 수 있는 워드프레스 버튼 생성기를 소개 드립니다.
이번에 제작한 버튼 생성기는 최대한 버튼의 모양을 다양하게 꾸밀 수 있도록 만들었습니다.
버튼 모서리 모양이나 테두리, 패딩, 그림자, 색상, 호버효과, 아이콘 등 CSS 를 몰라도 마우스 클릭만으로 원하는 버튼의 모양이 생성 될 수 있도록 제작 되었습니다.
이 버튼 생성기는 워드프레스 뿐만 아니라 티스토리나 다른 웹페이지에서도 사용 할 수 있습니다.
그럼 순서대로 하나씩 사용법에 대해서 설명 드리도록 하겠습니다.
버튼 글씨 설정
버튼 글씨 부분에는 버튼에 표시될 텍스트를 입력 합니다.
글씨 색상은 이 글씨의 색상을 선택 합니다.
글씨 사이즈는 글씨의 크기를 입력 합니다.
글씨 굵기는 글씨의 굵기를 설정 합니다.
각 메뉴에서 설정을 하면 최종 결과 창에 아래와 같이 실시간으로 버튼의 모습을 확인 할 수 있습니다.
버튼 모서리 설정
버튼 모서리는 전체 모서리를 설정하면 네 모퉁이의 모든 모서리가 한꺼번에 설정 됩니다.
각 모서리를 모두 다르게 설정 해서 개성있는 버튼으로 설정도 가능 합니다.
최종 결과창을 확인하면서 설정 하시면 됩니다.
버튼 패딩 & 테두리 설정
패딩은 버튼의 수평 크기와 수직 크기를 설정하는 메뉴 입니다.
테두리 색상과 테두리 굵기도 함께 설정 할 수 있습니다.
버튼 그림자 설정
버튼 그림자는 설정하지 않으면 기본적으로 없음으로 설정 되어 있습니다.
그림자 색상과 위치, 흐리기등을 설정하면 예쁜 버튼으로 설정 할 수 있습니다.
버튼 색상 설정
버튼 색상은 단색과 그라디언트 둘 중 하나를 선택 하면 됩니다.
기본적으로 그라디언트로 설정 되어있습니다.
시작 색깔, 종료 색깔, 각 위치와 방향을 설정하면 그라디언트 색상이 반영 됩니다.
단색 버튼의 경우에는 버튼 색상 하나만 설정하면 됩니다.
버튼 호버효과 설정
호버효과는 버튼 위로 마우스를 올렸을 때 변하는 효과를 말합니다.
빠르게, 부드럽게 메뉴는 이 효과의 속도를 말하며 호버 폭은 마우스를 올렸을 때 버튼이 커지거나 작아지는 폭을 의미 합니다.
위로 움직임은 마우스가 호버 되었을 때 버튼이 위로 움직이는 효과를 주어서 버튼에 다이나믹한 효과를 줄 수 있습니다.
호버시 버튼의 테두리 색깔도 변하게 할 수 있습니다.
아이콘 설정
아이콘 선택 버튼을 클릭하면 위와 같은 아이콘 설정 화면을 볼 수 있습니다.
아이콘 종류와 위치, 크기, 좌/우 마진을 설정하면 아이콘이 적용된 버튼을 확인 할 수 있습니다.
클릭시 페이지 이동 설정
클릭시 페이지 이동 설정 화면은 버튼을 클릭했을 때 페이지 이동에 관한 메뉴 입니다.
페이지 이동사용을 활성화 하면 버튼을 클릭시 새페이지로 이동 하게 됩니다.
이 때 새창에서 열기를 활성화 하면 새로운 페이지에서 열리게 됩니다.
아래 이동 주소에 이동을 원하는 주소를 정확히 입력하면 버튼에 페이지 이동 기능이 설정 됩니다.
최종 결과 확인 및 코드 가져오기
이제 모든 설정은 완료 되었습니다.
최종 결과 창에서 원하는데로 버튼이 생성 되었는지 확인 한 후에 코드 가져오기 버튼을 클릭하면 생성코드 창에 코드가 생성 됩니다.
생성코드 확인 및 클립보드로 복사하기
코드를 확인 하고 클립보드로 복사한 후에 워드프레스에 붙여 넣어서 사용 하시면 됩니다.
워드프레스에 생성 코드 적용하기
워드프레스에 적용할 때에는 사용자 정의 HTML 에 위에서 복사한 코드를 입력하면 됩니다.
오늘은 내가 쓰기 불편해서 직접 만들어본 워드프레스 버튼만들기 사이트 공유 드렸습니다.
사용하시면서 불편하거나 개선사항 있으시면 댓글로 남겨주세요.
감사합니다.