fbpx

모바일 웹 화면의 상담 예약 Sticky Button

기존의 상담 안내 메뉴와 상담 예약 메뉴를 하나의 메뉴로 통일하면서 ES 법률사무소 모바일 웹의 상담 예약 페이지에 클릭하면 바로 상담 예약 화면으로 넘어갈 수 있게 하는 버튼을 추가할 필요가 생겼습니다.

이 버튼은 화면의 스크롤에 상관 없이 같은 위치에 있는 것이 바람직하겠죠.

이러한 버튼을 sticky button 또는 sticky widget 이라고 합니다.

아래의 스마트폰 카카오톡 화면의 오른쪽 아래의 붉은 색으로 표시된 동그란 + 아이콘 같은 것이 바로 sticky button입니다.

 Sticky button을 위한 CSS를 구글(google)에서 검색하여 아래와 같은 참고자료를 찾았습니다.

.mobileShow {
  display: none;
}
/* full width of parent */
.mobileShow img{
    width: 100%;
}
/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .mobileShow {
    display: block;
    width: 40%;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -20%;
  }
}

워드프레스(WordPress)에서 적절한 서클 아이콘을 찾아 ES 법률사무소 웹에 넣은 후 위 CSS를 조금 변형한 후 서클 아이콘에 적용시켜서

아래와 같은 연보라색의 상담 예약 sticky button을 만들었습니다.

                                                 

모바일 화면을 스크롤해도 같은 위치에 잘 나오고 있음을 확인하였습니다.

ES 법률사무소 모바일 웹에서 ‘메뉴 -> 상담 예약’을 클릭하시거나, 메인 화면에서 ‘상담 예약’ 서클 아이콘을 누르면 연보라색 sticky button을 직접 보실 수 있습니다 🙂


태그: , ,

워드프레스(WordPress)와 웹

워드프레스는 현재 가장 인기 있는 웹 CMS라 할 수 있습니다.

CMS는 Content Management System의 약자로, 콘텐츠 생성, 변경, 삭제 등의 관리를 도와주는 시스템을 말합니다.

블로그를 만드는 도구 정도로 이해해도 아주 큰 무리는 없겠습니다.

 

이 ES 법률사무소 비즈니스 웹도 워드프레스를 이용하여 만들어진 것입니다.

워드프레스는 일종의 platform으로서, 다양한 기능의 수 많은 plug-in이 존재합니다.

즉, 원하는 기능의 plug-in을 찾아 설치하면 그 원하는 기능을 쓸 수 있게 됩니다.

Plug-in 마켓 생태계가 꽤 잘 되어 있기 때문에 개발자들은 열심히 다양한 기능의 plug-in을 만들고 있고, 사용자들은 그러한 plug-in을 사용하기만 하면 됩니다.

물론, 유료 plug-in도 있고 그런 plug-in은 구매해서 사용하여야 합니다.

 

서버-클라이언트 구조와 html, php, css, javascript 등을 어느 정도 알고 있으면 워드프레스를 더 잘 활용할 수 있으나 그렇지 않아도 어느 정도 수준 이상으로 워드프레스를 사용할 수 있습니다.

위에서도 언급하였지만 워드프레스가 기본적으로 웹사이트를 만드는 ‘도구’이기 때문입니다.

 

앞으로 워드프레스로 만들어진 ES 법률사무소의 비즈니스 웹을 개선하며 그와 관련된 글을 계속 올리겠습니다.


태그: , , , , ,