html 产品新闻模板片段

Posted 2021-05-11

<div style="border-top: 1px solid #cccccc; padding: 50px 15px 40px 15px;">
<!--Classy for Salesforce Title--> <img src="http://cdn2.hubspot.net/hubfs/190333/product/email/classy-salesforce.png" style="text-align: left; display: block; width: 100%; max-width: 253px; height: auto; margin-bottom: 40px;" alt="Classy for Salesforce"> 
<!--Headline-->
<p style="margin-bottom: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #444b55; font-weight: 400; line-height: 36px; font-size: 20px;">Tie your donations directly to your organization's impact</p>
<!--Body Copy-->
<p style="margin-bottom: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: 400; line-height: 32px; font-size: 16px;">Make muffins meowzer! caticus cuteicus. Lick butt chase laser hunt by meowing loudly at 5am next to human slave food dispenser yet russian blue. Purr for no reason lick plastic bags chirp at birds lick the other. Don’t miss out! <a href="LINK_URL" target="_blank" style="color: #26abe2; text-decoration: underline; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">Check out the support article</a> to get started.</p>
</div>

###How To Use Product News Template

Each html block on this page contains default code snippets associated with a certain "Module" in the Product News Template. To navigate in Hubspot, simply click on the cube icon on the left panel when editing your email.

1. ***IMPORTANT!*** Before making any changes, clone the Product News TEMPLATE email in the 2015 Templates folder.
2. Update each module with your desired content, making sure to update images using the image url and not Hubspot's native image uploader.
3. Images can be found and should be uploaded to the File Manager: Product > Emails (This is where you'll find headshots for the Product Tips section).
4. **Header Image Module** This is the 600x275 image at the top of the email. Please upload exact sized image to Images Folder (see #3).
5. **Main Email Body** This refers to the Feature Updates copy in the white box. Please be sure to use the "<!--Feature Update Text Link ONLY-->" located in the html block below for any inline text links.
6. **Product Tips Header** This is the header for the Product Tips section. In the html block below, you'll find options for two different titles.
7. **Product Tips Body** This is the body copy included in the Product Tips section. Please ensure that you use the appropriate styling for quote vs. name vs. title. Sections are commented out in the html block below.
8. **Staff Photo** This refers to the staff profile photo located next to the Product Tips body copy. You'll find headshots in the File Manager: Product > Emails
9. **Salesforce** This section can be left blank (as it is in the template) if this email is not for a Salesforce user. However, should you need to upload content, please use html block entitled salesforce.html below.
10. __A Note on text links.__ Each section utilizes its own color for hyperlinked text, so please follow the prescribed text link styling for each Module.

<img src="http://cdn2.hubspot.net/hubfs/190333/product/email/moya-jo.png" style="padding-top: 25px; outline: 0; display: block;" alt="Jo Moya">

<!--Headshots can be found here: -->

<a href="LINK_URL" target="_blank" style="color: #74d8c9; text-decoration: underline; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">LINK COPY</a>

<!--Start of Quote--><p style="margin-bottom: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: 400; line-height: 32px; font-size: 16px;">“Before you start building your Classy campaign page, use our design guide to prepare any creative assets. You'll save time and your page will look much cleaner!”</p><!--End of Quote-->

<!--Speaker's Name--><p style="margin-bottom: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: bold; line-height: 32px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px;">Jo Moya, <!--Speaker's Title--><em style="text-transform: none; letter-spacing: 0; font-weight: normal;">Customer Success</em></p>

<!--Product Tips from Classy Staff-->
<img src="http://cdn2.hubspot.net/hubfs/190333/product/email/product-tips.png" style="text-align: left; display: block; width: 100%; max-width: 600px;" alt="Product Tips from Classy Staff">

<!--Help from the Team-->
<img src="http://cdn2.hubspot.net/hubfs/190333/product/email/help-from-team.png" style="text-align: left; display: block; width:100%; max-width: 600px;" alt="Help from the Team">

<!--Feature Update Start Block-->
<p style="margin: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif!important; color: #828b94; font-weight: 400; line-height: 32px; font-size: 16px; margin-bottom: 15px;"><strong>Feature Update Name. </strong>Now your cats can really communicate with their feline friends at all hours of the night. From screeches to grumblin howls, consider them well-equipped. <a href="LINK_URL" target="_blank" style="color: #36bff7; text-decoration: underline; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">Text Link Copy.</a></p>
<!--End of Feature Update Block-->


<!--Feature Update Text Link ONLY-->
<a href="LINK_URL" target="_blank" style="color: #36bff7; text-decoration: underline; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;">Text Link Copy.</a>

<img src="http://cdn2.hubspot.net/hubfs/190333/product/email/image-placeholder.jpg" alt="" style="max-width: 600px; border-width: 0; width: 100%; height: auto; margin-bottom: 0; display: block;">