Newsletter auf Startseite einrichten

Thema wurde von Anonymous, 14. Juli 2021 erstellt.

  1. Anonymous

    Anonymous Mitglied

    Registriert seit:
    20. November 2017
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    4
    Hi Ihr,
    das Kunden im persönlichen Bereich den Newsletter abonnieren können, habe ich gefunden uns auch installiert.

    Aber wie zur Hölle bekomme ich das auch auf die Startseite, damit mehr Menschen den Newsletter abonnieren? Im Stylesheet habe ich diverse Häkchen gesetzt, komme aber mit diesen Boxen nicht klar.

    Vielen Dank.

    Dani :)
     
  2. joachimhintersberger

    Registriert seit:
    8. April 2015
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    1
    das frage ich mich auch... :-/
     
  3. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Schau mal hier:
    (Link nur für registrierte Nutzer sichtbar.)
    da steht der Code, der in den Footer oder Footer-Header eingesetzt werden kann
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. Juli 2019
    Beiträge:
    553
    Danke erhalten:
    113
    Danke vergeben:
    32
    Du kannst im Content Manager unter "Footer Kopfzeile folgendes eingeben:

    Code:
    <form action="newsletter.php" class="form-horizontal container newsletter1" method="post">
        <div class="row">
            <div class="col-xs-12 col-md-6 col-lg-6">
                <a href="newsletter.php"><img alt="Newsletter" src="images/newsletter.png" style="max-height: 83px; max-width: 120px; float: left; margin-top: -40px; margin-right: 15px;" title="Jetzt anmelden" /></a>
                <p style="margin-top: -8px;">
                    <span style="font-size:22px; color:#FFFFFF; font-weight: bolder;"><a href="newsletter.php" style="color: #FFF">Newsletter bestellen</a></span><br />
                    <span style="font-size:14px; color:#FFFFFF; font-weight: bolder;">...und Angebote, Gutscheine und Infos zu Produkten erhalten.</span>
                </p>
            </div>
    
            <div class="col-xs-12 col-md-6 col-lg-6">
                <div class="form-group">
                    <div class="col-xs-12 col-sm-6 col-md-7">
                        <input class="form-control validate" data-validator-validate="required email" name="email" placeholder="Deine E-Mail-Adresse" type="text" />
                    </div>
    
                    <div class="col-xs-12 col-sm-6 col-md-5">
                        <input class="btn btn-primary btn-block" type="submit" value="Jetzt anmelden" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    

    Passendes CSS dazu muss man im Styleditor hinzufügen:

    Code:
    
    /* Newsletter spalte breiter machen in Mobilansicht */
    .newsletter1 {
        max-width: 100%;
        padding-left: 120px;
        padding-right: 120px;
        border-bottom: 1px solid #bbb;
    }
    
    @media screen and (max-width: 800px){
    .newsletter1 {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom: 1px solid #bbb;
    }
    }
    
    Das passt für Mobilansicht die Abstände an damit es besser aussieht.


    Das Bild unter images/newsletter.png ist ein kleines Icon deiner Wahl, ca. 83x83 pixel groß, kannst Du auch anpassen.



    Oder Möglichkeit 2:
    Ihr fügt im Styleedit ein "HTML-Widget" auf die Hauptseite, und verpasst ihm diesen Code:

    Code:
    <div class="footer-header">
       <form action="newsletter.php" class="form-horizontal container newsletter2" method="post">
          <div class="row">
             <div class="col-xs-12 col-md-6 col-lg-6">
                <a href="newsletter.php"><img alt="Newsletter" src="images/newsletter.png" style="max-height: 83px; max-width: 120px; float: left; margin-top: -11px; margin-right: 10px;" title="Jetzt anmelden"></a>
                <p style="margin-top: 9px;"> <span style="font-size:22px; color:#FFF; font-weight: bolder;">Newsletter bestellen!</span><br>
                <span style="font-size:14px; color:#FFF; font-weight: bolder;">Erhalte Angebote, Gutscheine und Infos zu neuen Produkten!</span> </p>
             </div>
             <div class="col-xs-12 col-md-6 col-lg-6" style="margin-top: 20px">
                <div class="form-group">
                   <div class="col-xs-12 col-sm-6 col-md-7"> <input class="form-control validate" data-validator-validate="required email" name="email" placeholder="Deine E-Mail-Adresse" type="text"> </div>
                   <div class="col-xs-12 col-sm-6 col-md-5"> <input class="btn btn-primary btn-block" type="submit" value="Jetzt anmelden"> </div>
                </div>
             </div>
          </div>
       </form>
    </div>
    Css dazu:

    Code:
    .newsletter2 {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 30px;
        background-color: #428bca;
    }
    
    Muss man natürlich seine Farben anpassen.
     
  5. joachimhintersberger

    Registriert seit:
    8. April 2015
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    1
    danke, hat super geklappt und schaut auch noch gut aus :)