워드프레스 텍스트박스 생성기

예쁜 텍스트박스

워드프레스 고수분들이 운영하는 블로그에 방문해 보면 참 예쁘게 잘 꾸며 놓은 블로그가 많습니다.
가끔 텍스트 박스에 강조할 문구를 넣은 볼 수 있는데 너무 예뻐 보여서 따라해 보았습니다.
아래 텍스트 박스 참 예쁘지요. 이번 포스팅에서는 참 좋은 워드프레스 텍스트박스 생성기를 소개 드립니다.

평범한 글도 예쁜 텍스트박스에 써놓으면 특별하게 느껴 집니다.

먼저 텍스트박스 생성기 사이트 아래 링크로 공유 드립니다.
사용법도 쉬우니 먼저 확인하고 싶으시면 아래 링크를 통해서 테스트 해보시고 나머지 글을 읽으셔도 됩니다.

워드프레스 텍스트 박스 생성기 - 펭수의 워드프레스 꾸미기
워드프레스 텍스트 박스 생성기
워드프레스 텍스트 박스를 쉽게 생성할 수 있는 온라인 도구입니다.다양한 스타일을 선택하고 사용자 정의할 수 있습니다.
펭수의 워드프레스 꾸미기

워드프레스 텍스트박스 생성기 사이트 접속하기

위 링크를 클릭하셔서 사이트에 접속하면 아래와 같은 화면을 확인 할 수 있습니다.

텍스트 박스 스타일 CSS 만들기 순서

클래스 이름

클래스 이름은 꼭 기존 클래스와 중복되지 않도록 나만의 클래스명으로 작명하시기 바랍니다.

텍스트

텍스트는 Tip 또는 안내사항과 같이 상단에 표시될 텍스트를 결정 합니다.

테마 색상

전체적인 느낌의 색상을 선택 합니다. 테마색상을 선택하면 그와 어울리는 아이콘 색상이 자동으로 선택 됩니다. 아이콘 색상이 맘에 안들면 다음 단계에서 아이콘 색상을 변경 하시면 됩니다.
우측에 테마색상 프리셋 버튼도 있습니다. 예쁜 테마의 색상 버튼이 미리 준비되어 있으니 고민하기 싫으면 그냥 프리셋 색상 버튼을 클릭하면 쉽게 설정 할 수 있습니다.

아이콘 색상

아이콘 색상은 테마 색상을 선택하면 자동으로 선택 되지만 맘에 들지 않을 경우 수동으로 변경 할 수 있습니다.

아이콘 선택

아이콘은 상단에 표시될 아이콘을 선택하는 메뉴 입니다. 4가지 중 하나를 선택 하시면 됩니다.
만약 다른 아이콘으로 변경하고 싶으시면 CSS 에서 수동 작업을 하셔도 됩니다.

메뉴들을 선택하면 하단에 실시간으로 텍스트 박스의 디자인이 변경되어 보여 집니다.
직접 확인하면서 디자인을 결정 하시면 됩니다.

스타일 복사하기

디자인 결정이 완료 되었으면 이 스타일 복사하기 버튼을 눌러서 CSS 내용을 클립보드로 복사하셔서 사용하시면 됩니다. 클립보드의 내용은 아래와 같은 형태로 자동 생성됩니다.

.myTextBox01 {
    margin: 60px 0 30px;
    background: linear-gradient(#4fc3f7 60px, transparent 0px);
    border-bottom: 3px solid #4fc3f7;
    transition: all 0.3s ease 0s;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

.myTextBox01::before {
    display: block;
    content: "“";
    font-size: 60px;
    font-weight: 700;
    font-family: arial, sans-serif;
    background: #29b6f6;
    border-color: #29b6f6;
    color: rgb(255, 255, 255);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    justify-content: center;
    line-height: undefinedpx;
    position: relative;
    top: -50px;
    left: 1px;
    padding-left: undefinedpx;
    box-shadow: rgba(0, 0, 0, 0.15) 0 4px 4px, #29b6f6 0 0 0 1px;
}
.myTextBox01::after {
    content: "Tip";
    text-align: left;
    position: absolute;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin: 0;
    top: 10px;
    left: 120px;
}

사용자정의 추가 CSS 에 붙여 넣기

복사된 CSS 내용을 사용자정의 추가 CSS 에 붙여 넣으셔서 사용 하시면 됩니다. 아래 이미지는 사용자정의 추가 CSS 에 코드를 붙여 넣은 모습입니다. 테마는 자식 테마를 사용해서 하시는거 이제는 잘 알고 계시죠? 혹시 모르신다면 자식 테마 관련 글 확인하시고 적용하시기 바랍니다.

사용자-정의-추가-CSS-입력-화면
사용자 정의 추가 CSS 입력 화면

이제 내가 생성한 Class 명을 쓰고 있는 글상자 고급 속성 탭에 css 로 지정해주면 됩니다.

이제 아래와 같은 예쁜 텍스트 박스안에 글을 확인 할 수 있습니다.

바다의 푸른 끝에서 희망의 불빛이 비추는 곳, 그곳에서 나는 내 안에 잠들어있던 꿈을 발견했다. 파도 소리가 나의 마음을 녹이며, 바람은 나를 자유롭게 날려줬다. 이 순간, 모든 것이 가능하다는 믿음이 나를 감싸고, 나의 눈앞에는 새로운 세계가 펼쳐졌다. 그리고 나는 그 세계의 주인공으로 살아가기로 다짐했다. 그 해피 엔딩은 나의 노력과 열정으로 이뤄진다는 것을 믿으며, 나는 앞으로를 기대하며 나아간다.

오늘은 내가 쓰기 불편해서 직접 만들어본 텍스트 박스 생성기 사이트 공유 드렸습니다.
사용하시면서 불편하거나 개선사항 있으시면 댓글로 남겨주세요.
감사합니다.

댓글 남기기