拉薩企業網站制作：如何使用FoundationforEmail框架創建響應式電子郵件設計

拉薩企業網站制作有大量的營銷工具，使您能夠輕松地創建響應電子郵件設計。問題是，你可能更喜歡對你的電子郵件的外觀有更多的控制，而最好的方法就是從頭開始設計它們。使用框架，例如電子郵件基金會為你提供了極好的妥協。您不需要從頭開始設計每個組件，但是做完全控制它們的使用方式、時間和地點。

在本文中，我們將首先解釋什么是電子郵件框架以及它們如何幫助您。然后，我們將繼續討論電子郵件基金會，以及如何使用它創建您自己的定制，響應電子郵件運動。我們開始工作吧!

什么電子郵件框架(以及它們如何幫助您創建更好的電子郵件)

框架仍然需要您做一些編碼，但是對于電子郵件來說，這個過程非常簡單。

總體而言,框架是用于幫助開發特定類型產品的實踐、文件和代碼的匯編。把它們看作是代碼的構建塊，可以幫助您更快地創建復雜的項目，使您不必每次都重新發明輪子。

確實有電子郵件框架這也是我們在這篇文章中要討論的。讓我們探討一下其中的一些好處：

• 預先構建的元素可以幫助您更快地設計電子郵件。

  如今，大多數電子郵件都包含圖像和文本以外的元素，比如按鈕和菜單。包含這些元素可能很費時，但框架使您能夠立即插入和自定義它們。

• 從盒子里反應出來。

  隨著越來越多的人轉向移動設備，你需要確保你的電子郵件在他們的屏幕上顯示得很好。大多數現代框架在默認情況下都是響應的，這意味著您需要擔心的事情少了一件事。

• 模板可以幫助您啟動您的設計。

  許多現代電子郵件框架包括各種模板，以幫助您快速創建活動。

正如您所看到的，這里的共同主題是框架使您能夠節省時間。有很多情況下，您會希望從零開始編寫項目代碼，但是一個能夠使您以更高的質量更快地完成任務的框架是值得使用的。

介紹電子郵件基金會框架

在更進一步之前，重要的是要注意二基礎網上提供的框架-遺址基金會和電子郵件基金會-我們將在整篇文章中關注后者。其主要賣點是其響應網格。這種類型的系統并不是革命性的，但是基金會的流行是基于它的易用性。

獲取框架相當簡單(即使您沒有任何編碼經驗)，您可以在兩個版本之間進行選擇-一個基于級聯樣式表(CSS)另一個Sass。自然，Sass版本通過消除重復CSS樣式的需要，可以節省更多的時間，但是是嗎？需要熟悉一些Node.js.

最后，FoundationforEmail還為您提供了大量的“模式”，如按鈕和菜單，從而使您的工作更加簡單。為了節省更多的時間，你甚至可以使用模板而不是從頭設計布局。

主要特點：

• 使用響應網格創建現代電子郵件運動。
• 提供框架的CSS或Sass版本。
• 讓您利用模式，以添加共同的元素到您的電子郵件快速。
• 使用布局來進一步簡化電子郵件創建過程。

價格：自由更多信息

如何使用電子郵件基金會創建現代設計(分4步)

正如我們提到的，有兩個版本的電子郵件基金會。對于本節，我們將使用CSS變體，因為設置它所需的工作量較少。另外，最終的結果應該是一樣的-所有的變化都是如何實現的。

如果您想要查看Sass版本的實際使用情況或了解更多有關如何使用它的知識，可以從這個偉大的教程.

步驟1：下載電子郵件文件基礎

首先，去基金會發電子郵件開始頁，然后單擊下載初學者工具包按鈕下的按鈕。CSS版本副標題：

獲得文件后，將其解壓縮并解壓縮到新文件夾中。在此階段，您的文件夾應該包含index.html文件和兩個子文件夾-一個用于CSS，另一個用于模板。

現在，拉薩企業網站制作運行您的最喜歡的文本編輯器并打開index.html用它歸檔。應該是光禿禿的，但我們一會兒就會解決的。

步驟2：熟悉網格系統

電子郵件響應性的基礎是其靈活的網格系統。如果你從零開始整理一封電子郵件，你會想要創建你自己的網格來分割你的電子郵件的部分。為此，我們將使用三個不同的組件：容器、行和列。

打開你的基金會index.html文件在文本編輯器中，然后向下滾動到體體部分：

正如您所看到的，您的電子郵件正文包含一個預設的桌子，我們是不會接觸的。相反，我們只是將我們自己的網格元素添加到<!–  Your grid goes here  –>。讓我們從您需要用于容器的代碼開始：

現在，讓我們在其中添加一行：

最后，我們可以將該行劃分為列：

請記住，每一行最多由12列組成。上面的代碼告訴您的電子郵件客戶端，它應該使用完整的12列顯示您的內容。小的屏幕，如移動設備(小-12)，但在臺式機上只占6臺(大-6).

問題是，如果您的電子郵件顯示在一個大屏幕上，有六個空列，所以我們需要添加第二個表來修復它：

正如您所看到的，這兩列基本上是相同的。但是，他們有兩個不同的班，第一列和最后一欄。這些信息告訴您的電子郵件客戶端，哪些列是行中的第一列和最后一列，而其中的任何列都不需要使用它們。

如果你現在打開你的index.html文件在瀏覽器中，如下所示：

是的，這是很簡單的，但是這個階段的機制應該是顯而易見的。每封電子郵件都可以有任意多行，每一行最多可以有12列?，F在，繼續使用網格系統，直到找到您喜歡的布局，并使用文本占位符幫助您識別它們，直到您開始添加元素。

步驟3：在電子郵件中添加組件

電子郵件包的基礎有很多組件，最常用的是按鈕、背景圖像和副標題。它們很簡單，所以讓我們按順序看一遍。要添加按鈕，需要在一個或多個列中使用以下代碼：

這段代碼為你的電子郵件添加了一個簡單的綠色背景的小按鈕。這里的關鍵元素是微乎其微和成功上課。第一個控制按鈕的大小，第二個控制按鈕的顏色。我們不需要在這里添加所有可用的類，而是將您鏈接到Foundation的關于按鈕的官方資源在那里你可以在空閑的時候仔細閱讀它們。

現在讓我們繼續討論背景圖像。這些更棘手，因為你需要使用包裝器班級，等級使它們占用行的整個寬度，并為其指定特定的背景。使用CSS:

最后但并非最不重要的是，讓我們談談副標題。這些都是最簡單的-您所需要做的就是將您的文本包裝在所需的標記中：

就這么簡單！使用這三個元素就足以創建一些好看的電子郵件。當然，秘訣是用CSS對它們進行樣式設置為你的心所滿足，這使我們走到了最后一步。

步驟4：使用CSS設計電子郵件的樣式

一些電子郵件客戶端(如MicrosoftOutlook)從HTML文件中刪除一些樣式標記。這樣做是為了使電子郵件呈現沒有任何問題，以及消除潛在的安全威脅。然而，結果是除非您將CSS直接添加到HTML中，否則您的電子郵件將看起來非常無聊(或內聯)。

這樣，您的內容和樣式都將作為一個文件加載，并且它們應該在大多數現代電子郵件客戶端上都能很好地工作。下面是帶有內聯CSS的HTML元素的外觀：

這可能會變得有點混亂，因此我們建議分別處理HTML和CSS文件，然后使用類似于基礎襯砌為你把它們結合起來。只需粘貼您的代碼，單擊一個按鈕，它將為您處理其余的。

一旦您有了內聯的HTML文件，就可以繼續測試它了。使用電子郵件營銷工具，這總是一個好主意，然后再發送給你的訂閱者。

結語

拉薩企業網站制作有很多方法創建功能性和響應性電子郵件。但是，使用諸如電子郵件基金會如果你在尋找靈活性的話，這是一個很好的選擇。它使您可以使用預先構建的組件從頭開始設計電子郵件，或者通過使用模板。不管你選擇什么，它都會大大減少你花在創建電子郵件上的時間。

綜上所述，這里有四個步驟，您需要創建與電子郵件基金會現代電子郵件：

1. 下載框架的文件。
2. 熟悉網格系統。
3. 使用電子郵件組件。

4.