INFO: Version 19.xZusatzmodul bis Core Prof. 3 Projekte

Newsletter Layout - Darstellung anpassen

Weblication® CMS Newsletter nutzen zur Erstellung die gleichen Techniken, welche auch für die Webseiten verwendet wird. Für die Newsletter-Darstellung besteht ein eigenes HTML Seiten-Template und eingebettete CSS-Definitionen.

Die Darstellung des Weblication® CMS Newsletter kann somit individuell über Templates, Elemente und CSS angepasst werden.

Das Newsletter HTML Seiten-Template

Die BASE bzw. das Newsletter-Formular Weblic® liefert die für das Newsletter-Modul erforderlichen Dateien standardmäßig mit einem vordefinierten Seiten-Template und eingebettetem CSS aus. Einen Auszug aus diesem Seiten-Template finden Sie nachfolgend bezogen auf die BASE (Mobile First) und BASE Classic Projektbasis. Den aktuellen Source entnehmen Sie bitte immer der aktuell verüfbaren Projektbasis.

BASE (Mobile First)
BASE Classic
BASE (Mobile First)

Auszug aus dem Newsletter Seiten-Template /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/newsletter/standard.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">

<!-- Source: base.standard, 002.002.132.000 (2015-11-18 16:14:05)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>

  <!-- System-Parameter einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Global-Templates dynamisch einbinden -->
  <wslPre:includeXsltGlobals project="/[IHR-GLOBALES-PROJEKT]"/>

  <!-- Objekte-Templates dynamisch einbinden - Eine Seite ist von einem bestimmten Objekttyp -->
  <wslPre:includeXsltObject project="/[IHR-GLOBALES-PROJEKT]" _object="onlinedocu"/>

  <!-- Elemente-Templates dynamisch einbinden - Eine Seite beinhaltet beliebig viele, vom Redakteur eingefügte, Elemente -->
  <wslPre:includeXsltItems path="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/items/newsletter" useIndex="1"/>

  <!-- Meta-Maske einbinden - Falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php" wd:pathTemplate="editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="c4222750eca4307c0031582e7cf599a9">
  
    <!-- Breite des Inhaltsbereichs -->
    <xsl:variable name="blockMainWidth">920</xsl:variable>  
    
    <!-- Setzt den Ansichtsmodus auf Newsletter-->
    <wslPre:php>wEnv::setGlobalValue('wViewMode', 'newsletter');</wslPre:php>
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
      <head>             
        <title>Newsletter</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Generator" content="Weblication CMS"/>
        <meta name="Keywords" content="{wd:extension/wd:meta/wd:keywords/text()}"/>
        <meta name="Description" content="{wd:extension/wd:meta/wd:description/text()}"/>
        <meta name="Robots" content="{/wd:document/wd:extension/wd:meta/wd:robots/@value}"/>  
        
        <xsl:if test="$wIsLoggedIn">
          <link rel="stylesheet" href="/weblication/grid5/gui/styles/wgl.css"/>
        </xsl:if>
        
        <xsl:if test="$wIsInEditor">
          <link rel="stylesheet" href="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/editor.css"/>
        </xsl:if>   
                 
        <!-- Setzt die Breite des Inhaltsbereichs (blockMainWidth - seitliches Padding) -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', format-number(number($blockMainWidth) - 40, '####'))"/>                
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'colsSpace', number(12))"/>                

        <!-- Definiert die auswählbaren Levels für Überschriften -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableHeadlineLevelValues', 'h1|h2|h3')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableHeadlineLevelTexts', 'Überschrift 1|Überschrift 2|Überschrift 3')"/>                   
        
        <!-- Definiert die auswählbaren Linktypen -->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableLinkClassValues', '|button|ghostbutton')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableLinkClassTexts', 'Textlink|Schaltfläche|Transparente Schaltfläche')"/>                   

        <!-- Definiert die auswählbaren Inhaltsboxen-->
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableBoxVariantValues', '0|10')"/>     
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableBoxVariantTexts', 'Neutral|Farbig hinterlegt')"/>                   
        
        <!-- Definiert die auswählbaren Spalten z.B. '2' für nur zweispaltig, '2|3' für zwei- und dreispaltig, '2|3|4' für zwei-, drei- und vierspaltig -->        
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'selectableColumnValues', '2')"/>

        <style>
          body                   {background-color:#f0f0f0;margin:0;}
          body, tr, td           {font-size:13px;font-family:Verdana, Arial, sans-serif;font-weight:normal;color:#666666;line-height:19px;}
          td                     {vertical-align:top}
          
          /* ... */

                   
                             
        </style>               
        <wsl:includeJsRessources/>
        <xsl:comment>[if gte mso 9]<![CDATA[><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><!]]>[endif]</xsl:comment>        
      </head> 
      <body>


        <!--
          ... Hier wird der HTML-Body des Newsletters definiert (siehe Standard-Auslieferung) ...
        -->


      </body>
    </html>
  </xsl:template>
  
  <!-- Hier werden die Inhaltselemente eingebunden -->
  <xsl:template match="wd:group[@id='content1']" wChecksum="e55897c556b81d11920f89a99545b88d">
    <!-- web:group:start name="newsletter" caption="" display="user" itemsExclude="" itemsInclude=""-->
    <xsl:apply-templates select="wd:item[php:functionString('wOutput::isViewableItem', ., $wViewMode)]"/>
    <!-- web:group:stop -->
  </xsl:template>   
  
</xsl:stylesheet>

Individuelle Anpassungen können Sie direkt in diesem Newsletter HTML Seiten-Template vornehmen.

Für die Newsletter HTML E-Mail nutzt das Template im Standard eine HTML-Tabelle innerhalb des Body. In diese wird in der ersten Tabellenzeile das Logo eingelesen und darunter die für den Newsletter definierten Elemente (Text, Bild, etc.).

BASE Classic

Auszug aus dem Newsletter Seiten-Template /[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/newsletter/standard.wDocument.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/TransformIfIsInEditor" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="xslIfIsInEditor wd wslPre wsl php" version="1.0">
<!-- Source: base.standard, 002.003.137.000 (2019-12-02 09:49:39)-->
  <xsl:output method="xml" indent="yes" omit-xml-declaration="no" encoding="UTF-8"/>

  <!-- System-Parameter einbinden -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Zentrale Funktionen, Templates und Skripte einbinden - -->
  <xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php" wd:pathTemplate="misc/includes.global.php"/>

  <!-- Objekte-Templates dynamisch einbinden - Eine Seite ist von einem bestimmten Objekttyp -->
  <wslPre:includeXsltObjectsProject project="/[IHR-GLOBALES-PROJEKT]" useIndex="0"/>

  <!-- Elemente-Templates dynamisch einbinden - Eine Seite beinhaltet beliebig viele, vom Redakteur eingefügte, Elemente -->
  <wslPre:includeXsltItemsProject project="/[IHR-GLOBALES-PROJEKT]" useIndex="0"/>

  <!-- Meta-Maske einbinden - Falls die Seite im Editor aufgerufen wird -->
  <xslIfIsInEditor:include href="$XSLTPRE[wDocumentRoot]/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php" wd:pathTemplate="editmasks/standard.metadata.php"/>

  <!-- Definition der Darstellung -->
  <xsl:template match="/wd:document" wChecksum="8e95a013f1811f039735c5261133f7a4">
  
    <!-- Breite des Inhaltsbereichs -->
    <xsl:variable name="blockMainWidth">520</xsl:variable>  
    
    <!-- Setzt den Ansichtsmodus auf Newsletter-->
    <wslPre:php>wEnv::setGlobalValue('wViewMode', 'newsletter');</wslPre:php>
    
    <!-- Setzt die Breite des Inhaltsbereichs (blockMainWidth - seitliches Padding) -->
    <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', format-number(number($blockMainWidth) - 40, '####'))"/>    
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
      <head>             
        <title>Newsletter</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="Generator" content="Weblication CMS"/>
        <meta name="Keywords" content="{wd:extension/wd:meta/wd:keywords/text()}"/>
        <meta name="Description" content="{wd:extension/wd:meta/wd:description/text()}"/>
        <meta name="Robots" content="{/wd:document/wd:extension/wd:meta/wd:robots/@value}"/>  
        
        <xsl:if test="$wIsLoggedIn">
          <link rel="stylesheet" href="/weblication/grid5/gui/styles/wgl.css"/>
        </xsl:if>
        
        <xsl:if test="$wIsInEditor">
          <link rel="stylesheet" href="/[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/editor.css"/>
        </xsl:if>

        <style>
          body                  {background-color:#f0f0f0;}
          /* ... Hier werden die CSS-Definitionen für den Newsletter angegeben ... */
                             
        </style>
        <xsl:if test="$wIsInEditor">
          <wsl:includeJsRessources/>
        </xsl:if>

        <xsl:comment>[if gte mso 9]<![CDATA[><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><!]]>[endif]</xsl:comment>
      </head> 
      <body>                   
        <!--
          ... Hier wird der HTML-Body des Newsletters definiert (siehe Standard-Auslieferung) ...
        -->
      </body>
    </html>
  </xsl:template>
  
  <!-- Hier werden die Inhaltselemente eingebunden -->
  <xsl:template match="wd:group[@id='content1']" wChecksum="e55897c556b81d11920f89a99545b88d">
    <!-- web:group:start name="newsletter" caption="" display="user" itemsExclude="" itemsInclude=""-->
    <xsl:apply-templates select="wd:item[php:functionString('wOutput::isViewableItem', ., $wViewMode)]"/>
    <!-- web:group:stop -->
  </xsl:template>   
  
</xsl:stylesheet>

Individuelle Anpassungen können Sie direkt in diesem Newsletter HTML Seiten-Template vornehmen.

Für die Newsletter HTML E-Mail nutzt das Template im Standard eine HTML-Tabelle innerhalb des Body. In diese wird in der ersten Tabellenzeile das Logo eingelesen und darunter die für den Newsletter definierten Elemente (Text, Bild, etc.).

Auswahl der Strukturelemente für Newsletter festlegen

Welche Strukturelemente für die Newsletterbearbeitung zur Verfügung stehen, wird in der Projektbasis festgelegt.

BASE (Mobile First)
BASE Classic
BASE (Mobile First)

In der Mobile First entscheidet sich die Verfügbarkeit der Strukturelemente über die Ablage der Mastertemplate-Elemente im Unterverzeichnis für den Newsletter und die contentGroup-Angabe in den jeweiligen Mastertemplate-Elementen .

Als Beispiel wird nachfolgend ein Auszug aus dem Mastertemplate-Element des Bild-Weblics®/Elementes angeführt, bei dem die Gruppe für den Newsletter ("newsletter") gesetzt ist (Pfad des Mastertemplate-Elementes: /[IHR-GLOBALES-PROJEKT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php).

Auszug aus dem Mastertemplate-Element "Bild"

...
    <wd:mastertemplate hasToAddElement="0">
      <wd:contentGroup name="content1"/>
      <wd:contentGroup name="content2"/>
      <wd:contentGroup name="content3"/>
      <wd:contentGroup name="content4"/>
      <wd:contentGroup name="content5"/>
      <wd:contentGroup name="content6"/>
      <wd:contentGroup name="content7"/>
      <wd:contentGroup name="container"/>
      <wd:contentGroup name="formContainer"/>
      <wd:contentGroup name="newsletter"/>            
    </wd:mastertemplate>
...

Erweitern Sie die für den Newsletter verfügbaren Strukturelemente mit Bedacht! Die unterschiedlichen Mail-Programme definieren HTML E-Mails teilweise sehr unterschiedlich (siehe auch Artikel in den weiterführenden Informationen "Tipps zum Versenden ..."). Testen Sie eine Newsletter HTML E-Mail vor richtigem Versand an die gewünschten Empfänger daher am besten immer im Vorfeld über eine Test-Empfängerliste und unterschiedliche E-Mail Clients!

BASE Classic

In der BASE Classic entscheidet sich die Verfügbarkeit der Strukturelemente über die contentGroup-Angabe in den jeweiligen Mastertemplate-Elementen .

Als Beispiel wird nachfolgend ein Auszug aus dem Mastertemplate-Element des Bild-Weblics®/Elementes angeführt, bei dem die Gruppe für den Newsletter ("newsletter") gesetzt ist (Pfad des Mastertemplate-Elementes: /[IHR-GLOBALES-PROJEKT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php).

Auszug aus dem Mastertemplate-Element "Bild"

...
    <wd:mastertemplate>
      <wd:contentGroup name="content1"/>
      <wd:contentGroup name="content2"/>
      <wd:contentGroup name="content3"/>
      <wd:contentGroup name="content4"/>
      <wd:contentGroup name="content5"/>
      <wd:contentGroup name="content6"/>
      <wd:contentGroup name="content7"/>
      <wd:contentGroup name="container"/>
      <wd:contentGroup name="formContainer"/>
      <wd:contentGroup name="newsletter"/>
    </wd:mastertemplate>
...

Erweitern Sie die für den Newsletter verfügbaren Strukturelemente mit Bedacht! Die unterschiedlichen Mail-Programme definieren HTML E-Mails teilweise sehr unterschiedlich (siehe auch Artikel in den weiterführenden Informationen "Tipps zum Versenden ..."). Testen Sie eine Newsletter HTML E-Mail vor richtigem Versand an die gewünschten Empfänger daher am besten immer im Vorfeld über eine Test-Empfängerliste und unterschiedliche E-Mail Clients!

HTML-Struktur einer Newsletter E-Mail beeinflussen

Sie können auf die HTML-Struktur der zu versendenden Newsletter HTML E-Mail unmittelbar Einfluß nehmen. Hierzu passen Sie innerhalb des oben genannten Newsletter HTML Seiten-Templates das HTML für die Ausgabe an. Standardmäßig liefern wir dies als HTML-Tabelle aus, da diverse Mail-Programme mit Tabellen derzeit noch am besten umgehen.

CSS einer Newsletter E-Mail beeinflussen

Sie können auf die Formatierung  der zu versendenden Newsletter HTML E-Mail unmittelbar Einfluß nehmen. Hierzu passen Sie innerhalb des oben genannten Newsletter HTML Seiten-Templates die CSS-Definitionen für die Ausgabe an. Standardmäßig liefern wir diese für die wichtigsten Strukturelemente vordefiniert aus. Sie können diese nach Belieben anpassen und erweitern.

In der aktuellen Umsetzung des Newsletter-Modules setzen wir im HTML Seiten-Template für die Newsletter HTML E-Mail eine maximale Breite von 520 Pixel. Durch die max-width Angabe ist somit auch der Newsletter nach Responsive Webdesign (RWD) Gesichtspunkten umgesetzt. Sorgen Sie dafür, daß auch die Strukturelement (z.B. Bild, Container, etc.) in aktueller Weblic® Version installiert sind.