Home → WordPress →

Modul "Teaser Boxes Text" (Theme 80/20)

• Edit

Ferdi

19 May, 2013 03:15 PM

Hallo, bei dem Theme "80/20" würde ich gerne innerhalb des Moduls "Teaser Boxes Text" statt einem Button "Weiter" das "Data-Icon" Symbol verlinken:

<section class="box" data-icon="">
<h1>Text</h1>
<p>Text</p>
<a class="button button-secondary" href="URL.htm">weiter</a>
</section>

D.h. das "Data-Icon" befindet sich innerhalb des tags "section". "a href" befindet sich im Code dazwischen.
Müsste man da den Code insgesamt (kompliziert) umschreiben, oder gibt es evtl. eine elegante Lösung?

1. Support Staff 1 Posted by RockSolid Theme... on 21 May, 2013 06:53 AM

   

   Vielen Dank für Ihre Frage.

   Sie können den section-Tag in einen a-Tag umwandeln und damit das gesamte Element verlinken. Um den Weiter-Link bequem stylen zu können verwandeln Sie ihn am besten in einen span.

   • Edit

2. 2 Posted by Ferdi on 21 May, 2013 06:47 PM

   

   Danke für die Antwort. Allerdings bin ich jetzt nicht wirklich schlauer.
   Wenn ich den section-Tag in einen a-Tag umwandle, kommt doch der ganzer Code durcheinander...?
   Mir scheint, dass es doch komplizierter würde und ich auch im CSS verschiedene Änderungen vornehmen müsste.

   Den Weiter-Link möchte ich mir auf jeden Fall sparen. Den benötige ich nicht, wenn das "Data-Icon" verlinkt ist.

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 22 May, 2013 12:16 PM

   

   Wenn Sie den <section>-Tag in einen <a>-Tag umwandeln und den Weiter-Link entfernen, sollte das HTML folgendermaßen aussehen:

   <a class="box" data-icon="&#xe001;" href="#">
       <h1>Direkter Kontakt</h1>
       <p>Lorem ipsum dolor...</p>
   </a>
   

   Im CSS ist folgende Änderung ausreichend:

   .teaser-boxes-text .box,
   #content .teaser-boxes-text .box {
       color: inherit;
       text-decoration: none;
   }
   

   • Edit

4. 4 Posted by Ferdi on 31 May, 2013 09:12 AM

   

   Vielen Dank!
   So hat es nun wunderbar geklappt.

   • Edit