WebSite X5Help Center

 
Martin N.
Martin N.
User

Ganze Zelle als Link  de

Autore: Martin N.
Visite 1171, Followers 2, Condiviso 0  

Hallo!

Ich habe ein Text-Objekt welches sich über die ganze Browser-Breite zieht. In den Stil-Eigenschaften habe ich ein Hintergrund-Bild gesetzt. Ich will nun die komplette Zelle klickbar (Link) machen. Dass ich den Text ohne weiteres als Link definieren kann ist mir klar, aber ich will eben die ganze Zelle klickbar haben, sodass der Anwender nicht immer genau den Text treffen muss.

Wie mach ich das am geschicktesten?

Vielen Dank für die Hilfe!

Postato il
12 RISPOSTE - 2 UTILI
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Am besten einen Screenshot machen von der Vorschau und dieses Bild dann als Bildobjekt einbinden.  Man kann kein DIV wo Text enthalten ist als ganzes Klickbar machen.

Vielleicht wäre es noch möglich dies als Hoverbutton zu machen. Kommt darauf an wieviel Text du hast.

Leggi di più
Postato il da Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Martin N.
... ... ... ich will eben die ganze Zelle klickbar haben, sodass der Anwender nicht immer genau den Text treffen muss. Wie mach ich das am geschicktesten? ... ... ...

(It > De) ... wenn du interessiert bist, poste den Seitenlink, um den zusätzlichen Code zu studieren ...

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Andreas L.
Andreas L.
User

ich würde ein .png nehmen

und dann die Zelle mit dem Symbol Erweitern

auf die ganze breite bringen. Dann Ist es zwar kein Text Link aber der User muss dann auch nicht genau den Text anklicken. Der verloren gegangene Content/Text kann als Alternativ Beschreibung/Text genutzt werden.

Gruß

Andreas

Leggi di più
Postato il da Andreas L.
Andreas L.
Andreas L.
User

Fahr mal mit der Maus darüber wink

Beispiel hat 1200x100 px

Leggi di più
Postato il da Andreas L.
Martin N.
Martin N.
User
Autore

Hi!

Danke für die Antworten.
Die Seite ist noch nicht online, deswegen hab ich auch keinen Link.

Ich weiß dass ich daraus ein Bild machen könnte (das ist auch zurzeit meine Lösung), aber so ändert sich je nach Auflösung auch die Schriftgröße. Bei Stil-Hintergrundbild ist halt der Vorteil, dass das Bild nicht skaliert wird sondern immer 100% bleibt und nur an den Seiten entsprechend gecroppt wird. Der Text wäre dann natürlich auch immer gleich groß, weil er nicht im Bild integriert ist.

Es ist nicht viel Text, sind eher nur 3-4 Wörter die auf diesem (ich nenns mal) "Ribbon" stehen, darunter hab ich noch einen "Trenntstrich" bestehend aus "_" - der Oktik halber laughing.

Eventuell muss ich mir einfach selber das CSS zusammenschustern. Dachte es geht vl einfacher ein ganzes Objekt als Link zu definieren. Immerhin ist das Hintergrundbild auch nur in einem DIV drinnen welches eben auf die ganze Breite aufgespannt ist und entsprechend sollte es kein Problem sein dieses als Link zu definieren. Wenn aber Website x5 das out of the Box nicht anbietet, muss man wohl selber basteln :/
Ich will halt nur so wenig wie möglich selbst anlegen, meine CSS Kenntnisse sind schon etwas eingetrocknet und ich will möglichst Brwoser-Kompatibel bleiben und da hab ich immer Angst, dass durch mein "reinpfuschen" eventuell manche Kompatibilität leidet.

Leggi di più
Postato il da Martin N.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Es gibt mehrere Widget die auch in Frage kommen.  Jedenfalls mit einem Text-Objekt wo nur Text enthalten ist, geht es nicht.

Leggi di più
Postato il da Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Martin N.
... ...  Die Seite ist noch nicht online, deswegen hab ich auch keinen Link. ... ... ... ... 

(It > De) ... ... es ist einfach, Sie können in ein Unterverzeichnis exportieren [/test], ein Klick ...wink...
... Sie werden in wenigen Worten lösen   und ein Kopieren / Einfügen   über das EXPERT-Panel ...

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Martin N.
Martin N.
User
Autore

Du hast was von Hover-Button gesprochen.
Würde das wirklich in Frage kommen? Ich brauch im Endeffekt ein Textobjekt (idealerweise Zweizeilig) auf einem Stil-Hintergrundbild und das ganze Hintergurndbild soll klickbar sein (dh. wahrscheinlich dass der "Button" transparent und auf die ganze größe der Zelle aufgespannt sein müsste).

Leggi di più
Postato il da Martin N.
Martin N.
Martin N.
User
Autore

Anyways, hab jetzt selber was mit html und css gebastelt. Funktioniert soweit. Vielleicht aber als Anregung für zukünftige Updates: Alles verlinkbar machen ist sicher eine schönes Feature welches nicht schwer umzusetzen ist. Hab jetzt auch nur das "a href" vor ein neues DIV gesetzt welches die ganze Zelle abdeckt....fertig.

Leggi di più
Postato il da Martin N.
Incomedia
Elisa B.
Incomedia

Guten Tag Martin,

da es zurzeit nicht möglich ist, diese Funktion in WebSite automatisch zu haben, schlage ich Ihnen vor, einen Anregung-Beitrag aufzumachen, wo Sie uns beschreiben, was Sie in den zukünftigen Aktualisierungen von WebSite X5 haben möchten. So können wir die Idee weiterleiten. 

Danke! Mit freundlichen Grüßen.

Leggi di più
Postato il da Elisa B.
Klaus G.
Klaus G.
User

Hallo Martin,

die IDEE auch ganze Zellen verlinken zu können ist nicht ganz so unkomot.

So muss man nicht in einer Zelle mehrer Links anlegen (wenn sie denn benötigt werden).

Könntest du hier mal deine Vorgehensweise beschreiben wie du das hin bekommen hast.

Gruß

MCMACMASTER

Leggi di più
Postato il da Klaus G.
Martin N.
Martin N.
User
Autore

Hi Klaus!

Ich hab ein HTML Element verwendet (da kann man schön die Höhe einstellen).

In den Stil-Einstellungen kannst du dann ein Hintergrund Bild setzen welches letztendlich komplett klickbar geworden ist und in der Mitte einen Text hat der weiß ist und einen leichten Glow-Effekt hat (damit er sich vom Bild etwas abhebt).

HTML Inhalt:

<a href="link.html"><div id="text"><p>Dein Text</p></div></a>

CSS: 

#text{
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
color: #fff;
text-decoration: none;
text-shadow: 0 0 5px #000, 0 0 8px #000;
width: 100%;
height: 100%;
}

#text p{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
margin: auto
}


a{
color: #fff;
text-decoration: none;
}

Leggi di più
Postato il da Martin N.