워드프레스 버튼 만들기&링크 추가 방법

워드프레스에서 콘텐츠를 작성하다 보면 추가 설명이 필요하여 내부 및 외부 링크를 만들어야 하는 경우가 있습니다. 웹사이트의 좋은 사용자 인터페이스(UI)는 좋은 사용자 경험(UX)로 연결되기 때문입니다. 워드프레스 버튼은 구텐베르크 에디터에서 빼 놓을 수 없는 매우 주요한 기능으로 자리 잡았습니다.

✅ 워드프레스 블록 버튼 만들기

워드프레스 블록으로 버튼을 만들 수 있습니다. 블록 삽입기 토글에서 버튼 블록을 찾아 줍니다. 한글로 [버튼]이라고 검색해도 나오니 블록을 굳이 내려서 찾을 필요는 없습니다. 더 간단한 방법은 [/버튼]을 입력 후 엔터로 바로 사용할 수도 있습니다.

1. 버튼 블록 스타일

생성된 버튼 블록은 워드프레스 우측 설정에서 다른 블록처럼 디자인 설정을 할 수 있습니다. 글씨 크기와 크기 위에 [햄버거] 버튼을 눌러서 다양한 설정을 추가할 수 있습니다.

2. 버튼 색상 설정

스타일의 채우기와 아웃라인 중 하나를 선택할 수 있고 일반 색상 설정인 [단색] 및 그래디언트 설정으로 좀 더 다채롭게 버튼을 꾸밀 수 있습니다.

▼ 완성된 워드프레스 버튼 블록 예시입니다.

✅ 워드프레스 버튼 CSS 적용하기

다른 방법으로는 html 코드를 이용해서 CSS 버튼을 만드는 방법이 있습니다. 워드프레스 [블록 삽입기 토글]에서 블록을 추가 해 줍니다. ▼

▼ CSS 코드를 입력해서 작성할 수있습니다.

워드프레스 사용자 정의 HTML에 CSS 넣기

CSS 작성이 귀찮거나 직접 하기 어려운 경우 CSS 버튼 생성 웹사이트(해외)로 이동해서 설정할 수 있습니다.

✅ 워드프레스 버튼 링크 만들기

만들어진 버튼에 링크를 넣는 방법입니다.

CSS 버튼 링크 생성

워드프레스가 구텐베르크 편집기가 나온 이후 최근 몇 년 동안 빠른 발전을 하고 있습니다. 개인적인 생각으로 워드프레스의 페이지빌더가 더 이상 필요하지 않을 시기가 올 정도로 구텐베르크 블록편집기의 편리함과 기능이 나날이 발전하고 있는 것을 체감되기도 하네요.

Similar Posts

  • 워드프레스 임베드 기능: 활용 및 장·단점

    워드프레스 임베드 기능은 웹사이트에서 외부 콘텐츠(다른 워드프레스 사이트, 유튜브 영상, 트윗, 인스타그램 게시물 등)를 별도의 코드 입력 없이 손쉽게 게시글에 삽입할 수 있도록 돕는 기능입니다. 임베드 기능은 2015년 12월 8일WordPress 4.4 때 출시 되었으며, oEmbed 기능이 핵심 기능에 통합되었습니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS 적용하기✅…

  • [WP] 워드프레스 단점과 장점

    W3태그 통계에 따르면 전 세계 CMS 점유율 중에 워드프레스의 점유율 43%를 확인할 수 있습니다. 워드프레스는 장점만 있고 워드프레스 단점에 대해 생각할 필요가 없는 것일까요? 워드프레스 장점과 단점에 대해 생각해 보겠습니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS 적용하기✅ 워드프레스 버튼 링크 만들기 1. 대표적인 워드프레스 장점…

  • [WP] 워드프레스 드롭인 플러그인이란?

    워드프레스 드롭인 플러그인Drop-In Plugin은 제한된 Wordpress 기능을 대체하거나 향상 시키는 기능을 가진 플러그인입니다. 추가 기능을 제공하기도 하며 워드프레스 관리자 페이지 플러그인 카테고리에서 확인할 수 있습니다. 하나의 파일로 서버 디렉토리 내의 루트 폴더/wp-content/Drop-In-Plugin명 워드프레스 /wp-content/ 폴더 내에 위치하며, 워드프레스 관리자 페이지 > 플러그인 > 드롭인 플러그인(활성화 된 경우)을 활인할 수 있습니다. 목차✅ 워드프레스 블록…

  • [WP] 워드프레스 관리자 페이지 설정(Settings)-일반, 쓰기, 읽기.. 7가지 설정

    워드프레스를 처음 설치하면 관리자 페이지 대시보드에 접속하게 됩니다. 워드프레스 관리자 페이지 설정 탭에서 기본 설정 방법에 대해 알아 보겠습니다. 설치 후 필수로 설정해야 할 요소는 워드프레스 페이지 주소(URL)와 사이트 설정 고유주소인 워드프레스 Permalink입니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS 적용하기✅ 워드프레스 버튼 링크 만들기 1….

  • WP OPcache 플러그인

    PHP 5.5 이상 버전의 서버에서는 OPcache가 기본적으로 설치되어 있으며, 활성화되어 있는 경우가 많습니다. 플러그인이 많지 않은 간단한 워드프레스 사이트에서는 큰 차이를 느끼기 어려울 수도 있지만, OPcache는 전체적인 사이트 속도를 평균 3배 이상 향상시키며, 특히 중대형 사이트일수록 그 효과가 더욱 뚜렷하게 나타납니다. 서버에 설치만 되어 있다면 기본적으로 작동하지만, OPcache를 직접 관리하고 통제하고 싶다면 ‘WP…

  • [WP] 2023년 빠른 워드프레스 테마 5개

    워드프레스 사이트를 운영 중인데 구글 페이지 스피드 및 지티메트릭스와 같은 사이트에서 원하는 속도가 나오지 않아 테마를 바꿀 것을 고려할 수 있습니다. 가볍고 빠른 2023년 빠른 워드프레스 테마는 무엇이 있을까요? 많은 워드프레스 테마의 총 페이지 크기가 300kb 이상인 경우가 많습니다. 워드프레스가 느리다는 인식이 몇 년 전까지 일반적이었지만 빠른 워드프레스 테마가 새로 나오고 지속적인 기존…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Prove your humanity: 1   +   5   =