Jimdo-Elemente » Button mit "eigenem Inhalt"

09.12.2020 18:30

sandra.a
#1

sa

Hallo zusammen,
omg, ich weiß nicht, wie ich das im Betreff anders beschreiben soll...
Ich versuche es zu erklären. Ich habe mir vor einiger Zeit eine Homepage zusammengebastelt und bin auch ganz zufrieden damit. Da ich jetzt meine Beratungssoftware ändere, muss ich auch einige Links ändern. Soweit wäre das kein Problem, aber: Mir sind jetzt entsprechende HTML-Elemente zugeschickt worden. Ich könnte zwar auch einfach wieder Links benutzen, das direkte Einbinden ist aber 1000x Mal schicker, da sich nicht irgendeine externe Webseite öffnet. Wenn ich die Beispiele einbinde, die mir geschickt wurden, dann klappt das auch. Aber der Button sieht nicht so aus, wie auf meiner Webseite und im Sinne des Corporate Design hätte ich das gerne im gleichen Look. Da ich mich mit Programmiersprache nicht auskenne weiß ich einfach nicht, wo ich das einfügen soll :-(. Vielleicht kann mir jemand helfen. Ich nutze übrigens das Design 2 für die Button. Das Nachfolgende wurde mir zugeschickt:

1
2
3
4
5
6
7
 
<!-- Die Klasse an ein beliebiges Element innerhalb des <body> Elements anhängen -->
 
  <!-- Beispiel für Link -->
  <a href="javascript:void(0);" class="baufilead_budgetrechner">Zum Budgetrechner (link)</a>
 
  <!-- Beispiel für Button -->
  <button href="javascript:void(0);" class="baufilead_budgetrechner">Zum Budgetrechner (button)</button>
 

Vielleicht kann mir jemand helfen und es ist ja vielleicht auch total einfach. Die Hoffnung stirbt zuletzt...
LG
Sandra

Antworten

Beitrag melden

#2

09.12.2020 20:52

az_
#2

az_

Wenn du gerne Hilfe haben möchtest, wäre eine URL vielleicht nicht schlecht. Mach doch mal eine Testseite und pack da ein paar so Buttons rauf. Und da drunter ein paar Standard Buttons wie sie sein sollen.

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

10.12.2020 11:01 (zuletzt bearbeitet: 10.12.2020 21:25)

sandra.a
#3

sa

sandra.a

Ok, ich habe jetzt eine Testseite angelegt: https://randombuttonsite.jimdofree.com
Man muss ein bisschen runterscrollen, da ich kein Logo eingefügt habe und die Seite so jetzt leer aussieht.
Ich habe auch gleich noch eine weitere Frage auf der Seite mit eingebunden, die mir so beim anlegen kam.
Im voraus schonmal vielen Dank für die Unterstützung!

Antworten

Beitrag melden

#4

11.12.2020 07:35

M�tze
#4

M�tze

Hallo,
ich nehme an, Du hast das Gestalten der Buttons über "Design" -> "Style" mit dem dann erscheinenden Farbroller schon probiert ?
Und zu Deiner Frage auf der Seite: Die Hand beim Mouseover erscheint ja nur, wenn der Text im Button auch verlinkt ist.

FG, Mütze

Antworten

Beitrag melden

#5

11.12.2020 07:52

sandra.a
#5

sa

sandra.a

Die Buttons mit dem falschen Look sind ja nicht mit dem Tool Button eingebunden, sondern mit HTML. Daher kann ich da auch das Design leider nicht über Style ändern.
Mit der Hand das verstehe ich trotzdem nicht so ganz, es ist ja ein Link hinterlegt. Aber das ist auch nur nebensächlich. Wichtiger ist das Design :-)

Antworten

Beitrag melden

#6

11.12.2020 13:02

subcon
#6

subcon

kannst du das nicht über CSS mit "Button.class" auch im html anpassen..?

Also dass du in der eingebundenen html-widget dem Button die class zu weist... mir fehlen leider grad die nötigen Zeilen dazu, aber @az_ hat da sicher was an der Hand... ;)

Antworten

Beitrag melden

#7

11.12.2020 13:13 (zuletzt bearbeitet: 11.12.2020 14:09)

az_
#7

az_

Du kannst das CSS der vorhandenen Buttons über das html der neuen Buttons legen:

Der Code für den Budgetrechner wäre dann:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

<div class="j-module n j-callToAction ">
    <div class="j-calltoaction-wrapper j-calltoaction-align-1">
        <button class="j-calltoaction-link j-calltoaction-link-style-2" href="javascript:void(0);" 
          class="baufilead_budgetrechner" bl-initialized="true">Zum Budgetrechner</button>
 
    </div>
</div>
 
<style type="text/css">
    .content-options .j-calltoaction-link-style-2,
    .content-options .j-calltoaction-link-style-2:active,
    .content-options .j-calltoaction-link-style-2:focus,
    .content-options .j-calltoaction-link-style-2.active {
        background-color: #122861 !important;
        border-color: #122861 !important;
        color: #fff !important;
        font-size: 24px !important;
    }
 
    .j-calltoaction-link-style-2:hover {
        background-color: white !important;
        color: #122861 !important;
 
    }
 
</style>
 

 

...die Styles bitte in den head-Bereich eintragen.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#8

11.12.2020 14:11

az_
#8

az_

...das Lead-Formular direkt einbinden geht nur per iframe, wenn der Anbieter keinen embed-code zur Verfügung stellt.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#9

11.12.2020 17:00

sandra.a
#9

sa

sandra.a

Vielen Dank für die Hilfe. Es klappt bei mir leider nicht. :-( Mittlerweile funktionieren die links garnicht mehr, auch wenn ich sie neu einbinde. Tja, besser die Finger weglassen, wenn man keine Ahnung hat. Ich werde mir dann wohl jemanden engagieren, der das für mich macht. Bin grad ein bisschen frustriert.

Antworten

Beitrag melden

#10

11.12.2020 18:38 (zuletzt bearbeitet: 11.12.2020 18:40)

az_
#10

az_

...Du hast bestimmt nur vergessen, Dein Skript auch noch in das html-Widget hineinzuschreiben. Aber Du kannst mich gern mal per e-mail kontaktieren.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#11

11.12.2020 19:08 (zuletzt bearbeitet: 11.12.2020 19:12)

az_
#11

az_

...so, hier einmal "sauber" und komplett:
html-widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
 

<div class="j-module n j-callToAction ">
 
    <div class="j-calltoaction-wrapper j-calltoaction-align-1">
        <button class="j-calltoaction-link j-calltoaction-link-style-2" 
           href="javascript:void(0);" bl-initialized="true">Zum Budgetrechner
        </button>
 
    </div>
</div>
 
<script type="text/javascript" src="https://www.baufi-lead.de/baufilead/partner/uhLMf0U5hUdeii5cxNq8/imports.js"></script>
 
 

CSS im head:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 

<style type="text/css">
    .content-options .j-calltoaction-link-style-2,
    .content-options .j-calltoaction-link-style-2:active,
    .content-options .j-calltoaction-link-style-2:focus,
    .content-options .j-calltoaction-link-style-2.active {
        background-color: #122861 !important;
        border-color: #122861 !important;
        color: #fff !important;
        font-size: 24px !important;
    }
 
    .j-calltoaction-link-style-2:hover {
        background-color: white !important;
        color: #122861 !important;
 
    }
 
</style>
 
 

...probier mal, jetzt sollte das klappen.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#12

12.12.2020 07:22

sandra.a
#12

sa

sandra.a

Ich habe das jetzt so versucht. Das Design ist jetzt so wie es sein soll, aber die Verlinkung funktioniert nicht. Den Style habe ich im Head-Bereich der Unterseite angegeben und den oberen Code in einem Widget/HTML- Element. War das falsch so?

Antworten

Beitrag melden

#13

13.12.2020 16:21 (zuletzt bearbeitet: 13.12.2020 16:23)

az_
#13

az_

...wo denn ? auf https://randombuttonsite.jimdofree.com/ jedenfalls nicht? Wie soll ich da helfen?
LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html