오랜만에 디비로 작업을 하게 됐다
동그란 버튼을 float 시킬까 싶어서 일단 동그란 버튼부터 만드는데
한글 상으로 버<< 라고 되어 있는 모듈을 쓰니 이래저래 설정이 불편하다
그냥 아싸리 html에 css로 만들까 하다가
텍스트 모듈을 이용해보자 싶어서 텍스트 모듈로 동그란 버튼을 만들어봤다
1. 텍스트 모듈 선택 후 버튼 텍스트, 링크 입력하기
텍스트 모듈-컨텐츠 탭-텍스트 탭에서 버튼 텍스트를 입력해준다
텍스트 입력이 끝나면 바로 하단에 링크 탭을 클릭해 텍스트를 눌렀을 때 이동할 링크 url을 설정해준다
링크탭 바로 아래에 배경탭이 있다 여기에서 배경색상을 선택해준다
여기에서 선택한 배경색이 버튼 색깔이 된다
2. 디자인 설정으로 동그란 버튼 만들기
상단에 디자인 탭으로 이동하면 버튼 텍스트 색상을 조정할 수 있다
배경색상을 짙은 녹색으로 넣어놨더니 회색 글씨가 잘 보이지 않아 흰색으로 변경해줬다
텍스트 색상 설정 후 하단으로 쭈욱 내리면 테두리 탭이 나온다 영문표기는 아마도 border 라고 되어있을 것 같다
둥근사각형: radius에서 상하좌우 일괄 100px을 때린다
모서리가 둥근 직사각형이 만들어졌다
이제 마지막으로 내부여백만(padding) 조정해주면 된다
간격은 테두리 바로 위에 있다
간격 - 내부여백에서 상단과 아래에 30px을 넣어줬다
예쁜 동그라미 버튼이 완성됐다
내부여백 수치는 글씨크기나 글줄 간격에 따라 다를 수 있어서 버튼 모양을 봐가면서 원이 될 때까지조금씩 조정해 주면 된다
'Divi빌더' 카테고리의 다른 글
| 디비 divi 빌더 모바일 레이아웃 5열 배열하기 (0) | 2022.11.16 |
|---|---|
| 디비 divi 빌더 버튼 두개 나란히 배열하기 float (0) | 2022.07.13 |
