Marketing treści

Jak zbudować regiony znaczników kotwicy na obrazie tła za pomocą CSS

W czasach Web 1.0 zbiór takich linków można było zbudować, łącząc obraz z linkami na każdej grafice, a następnie próbując zszyć to wszystko razem ze stołem. Można to również osiągnąć za pomocą mapa obrazu ale zwykle wymaga to narzędzia do zbudowania układu współrzędnych.

Korzystanie z kaskadowych arkuszy stylów (CSS) sprawia, że ​​jest to o wiele łatwiejsze… bez łączenia obrazów i szukania narzędzia do zbudowania układu współrzędnych! Wystarczy dodać obraz tła do elementu div, a następnie użyć pozycjonowania bezwzględnego, aby określić szerokość i wysokość każdego regionu, który ma być połączony.

  1. Stwórz obraz, którego chcesz użyć. Możesz wykorzystać tę grafikę poniżej (kliknij prawym przyciskiem myszy i zapisz jako do pobrania)
Opcje

  1. Prześlij swój obraz do katalogu, który jest powiązany z Twoim CSS. W WordPress można to zrobić najłatwiej, umieszczając go w folderze obrazów w katalogu motywów.
  2. Dodaj swój kod HTML. To ładne i proste… div z trzema linkami:
<div id="subscribe">
    <a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
    <a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
    <a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>
  1. Edytuj swój kaskadowy arkusz stylów (CSS). Będziesz dodawać 6 różnych stylów. 1 styl dla całego div, 1 dla tagu kotwicy, aby nie wyświetlał żadnej dekoracji tekstowej, 1 styl do ukrywania tekstu (używany do ułatwień dostępu) i 1 specyfikacja stylu dla każdego z linków:
#subscribe { /* background image block */
    display: block;
    width: 215px;
    height: 60px;
    background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat; 
    margin-top: 0px; }
#subscribe a { text-decoration:none; } 
.hide { visibility:hidden; } 
#rss { /* RSS Link */ 
    float: left;
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 20px;
    margin-top: 5px; } 
#email { /* Email Link */ 
    float: left; 
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 80px; 
    margin-top: 5px; } 
#mobile {  /* Mobile Link */ 
    float: left; 
    position:absolute; 
    width : 50px; 
    height: 50px; 
    margin-left: 150px; 
    margin-top: 5px; }

Pozycjonowanie jest przyjemne i proste… dodaj wysokość i szerokość, a następnie ustaw lewy margines od lewej strony obrazu i górny margines od górnej strony obrazu!

ZAKTUALIZOWANO 10 dla lepszej dostępności dzięki poradom Phil!

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.