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

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

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

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

1. 버튼 블록 스타일

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

2. 버튼 색상 설정

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

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

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

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

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

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

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

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

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

CSS 버튼 링크 생성

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

Similar Posts

  • Cloudways 호스팅 사용 후기(2023)

    fastcomet에서 Cloudways 호스팅으로 이전을 했습니다. Cloudways 호스팅 사용 후기는 기대했던 것 이하였습니다. 이전 이유는 깔끔한 인터페이스와 Memcached/Redis Object 캐시 활용 가능성이었습니다. Varnish 캐시도 사용할 수 있다는 점과 부가 기능들이 마음에 들어 사용하게 되었습니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS 적용하기✅ 워드프레스 버튼 링크 만들기 1️⃣ 서버…

  • Perfmatters 플러그인 리뷰 & 가이드: 3년 동안 사용한 워드프레스 성능 최적화 설정 방법

    Perfmatters 플러그인은 워드프레스 최적화 플러그인 중에서도 가볍고 강력한 퍼포먼스를 제공하는 도구입니다. 불필요한 스크립트와 리소스를 손쉽게 제어해 페이지 로딩 속도를 개선하고, 서버 부하를 최소화할 수 있습니다. 3년 이상 사용하면서 느낀 점은, 단순한 속도 향상을 넘어 사이트 전체의 안정성과 관리 편의성을 높여준다는 점이었습니다. 현재 이 웹사이트는 WP Rocket Cache 플러그인과 Perfmatters를 함께 사용하고 있습니다. 이…

  • WP Rocket 설정 가이드: 직관적 UI, 워드프레스 캐시 플러그인 $59의 가치

    WP Rocket은 워드프레스 캐시 플러그인입니다. 이 콘텐츠는 직관적인 인터페이스와 설정으로 관리하기 쉬운 WP Rocket 기본 설정 방법을 설명합니다. 설정 이후 크롬 개발자 도구와 구글 페이지 스피드의 속도 테스트를 진행합니다. 간편한 설정과 함께 추가 기능의 80% 정도가 자동으로 작동하여 별도의 복잡한 관리 없이도 높은 효과를 발휘합니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2….

  • [WP] 워드프레스 이미지 대체 텍스트와 제목 차이점 & 캡션이란?

    이미지는 글의 의미 전달 or 설명을 하는데 도움이 됩니다. SEO에서도 필수적인 요소로 자리 잡고 있습니다. 워드프레스를 사용할 경우 워드프레스 이미지 대체 텍스트는 무엇이며, Tltle(제목)과 캡션은 무엇인지 알아 보겠습니다. 목차✅ 워드프레스 블록 버튼 만들기1. 버튼 블록 스타일2. 버튼 색상 설정✅ 워드프레스 버튼 CSS 적용하기✅ 워드프레스 버튼 링크 만들기 1. 워드프레스 이미지 대체 텍스트 대체…

  • 워드프레스 관리자 페이지 접속 및 개요

    워드프레스 홈페이지를 만들기 위해 도메인을 구매하고 호스팅 서비스를 결제 후 워드프레스 설치(cPanel 워드프레스 설치)까지 마무리 되었다면 워드프레스 관리자 페이지 메뉴에 접속하게 됩니다. WP 관리자, WP 관리자 패널, WP 관리자 대시보드 등으로 부르는 워드프레스 관리자 대시보드는 워드프레스 웹 사이트의 제어판입니다. 워드프레스를 이용한 전자상거래, 블로그, 회사 소개 사이트 등 다양한 용도로 활용하는 워드프레스 CMS에서 제품을…

  • 워드프레스 호스팅 FastComet 성능 평가(Extra Plan $4.99)

    3년 전에 FastComet 호스팅을 일본 서버에서 1년 넘게 사용한 적이 있었기 때문에 이번에 여러가지 용도로 사용할 워드프레스 사이트를 추가하면서 신규 신청을 하게 되었습니다. 신청한 상품은 FastComet Extra 상품으로 신청 후 PHP 8.3에서 8.4로 업데이트 등 워드프레스 사이트 성능을 올리기 위한 작업을 모두 진행했습니다. 테스트는 워드프레스 최적화 플러그인 Perfmatters와 캐시 플러그인 WP Rocket 설치…

답글 남기기

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

Prove your humanity: 8   +   8   =