그누보드 테마에서 그누보드5] 부트스트랩 컴퍼니2 테마(아리아나벤티님)를 설치해보았습니다.

관리자 이메일을 설정하고 여분필드를 설정하면 아래와 같이 1234 아래에 필드에 해당하는 값이 입력되어 집니다.

필드값이 입력되어 져서 길이가 길어지면 미관상 보기도 싫고 모바일에서도 오류가 있는 것 같아 필드값 내용이 있으면 모형(1~4번)에 링크만 걸고 싶은데 css및 html를 참고해도 잘모르겠습니다.

순서대로 1번은 클릭이나 오버시 주소(여분필드 1번에 입력된 값)만 박스형태로 출력

2번은 여분필드 2번에 입력된 값(연락처)으로 모바일을 경우 누르면 인식

3번은 관리자 이메일 필드로 누르면 아웃룩으로 연결되도록 표시

4번은 여분필드 3번으로 입력된 값(홈페이지 메인)으로 이동할수 있도록 링크를 걸고 싶습니다.

만약 해당 필드값이 값이 없으면 링크는 없이 출력만 하고 값이 있으면 하단에 표시하는 방법이 아닌 이미지모양을 클릭했을때 위와 같이 연결되게 하고 싶습니디ㅏ.

그리고 아래 동그라미 1234부분은 이미지가 아닌것 같은데 css를 봐도 모르겠네요~

index.php

----------------------------------------------------------------------------------------------------------

<!-- 찾아오시는 길 -->
<section id="location">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="feature_header text-center">
                    <h3 class="feature_title">찾아오시는 길</h3>
                    <a class="more_down" href="#comm"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="location_info">
            <ul>
                <li class="col-md-3 col-xs-12 col-sm-6"><i class="fa fa-lg fa-thumb-tack" aria-hidden="true"></i><br /><?php echo get_text($config['cf_1']); ?></li>
                <li class="col-md-3 col-xs-12 col-sm-6"><i class="fa fa-lg fa-phone" aria-hidden="true"></i><br />+<?php echo get_text($config['cf_2']); ?></li>
                <li class="col-md-3 col-xs-12 col-sm-6"><i class="fa fa-lg fa-envelope" aria-hidden="true"></i><br /><?php echo get_text($config['cf_admin_email']); ?></li>
                <li class="col-md-3 col-xs-12 col-sm-6"><i class="fa fa-lg fa-home" aria-hidden="true"></i><br /><?php echo get_text($config['cf_3']); ?></li>
            </ul>
        </div>
    </div>
    <div id="map" style="width:100%;height:400px;overflow:hidden;">
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3236.522192344383!2d127.13498541514154!3d35.78711168016972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357024d9beeed9ef%3A0xceaa8986f3b3931!2z7Iah7KCVIOu5qOuemO2VmOuKlOuCqOyekA!5e0!3m2!1sko!2skr!4v1522382474357" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
</section>
----------------------------------------------------------------------------------------------------------

default.css

----------------------------------------------------------------------------------------------------------
/*찾아오시는 길*/
#location{padding-top:90px;background:#f2f2f2}
.location_info{padding:70px 0;}
.location_info:after{display:block;clear:both;content:"";}
.location_info ul li{float:left;text-align:center !important;width:25%;height:20px;margin-bottom:30px}
.location_info ul li i{display:inline-block;color:red;margin-bottom:20px}
#map{width:100%;height:800px;overflow: hidden;}
#map iframe{width:100% !important;height:600px;}

----------------------------------------------------------------------------------------------------------

고수님들 도와주삼...