testing-email-with-core-blocks.html — MailPoet – Newsletters, Email Marketing, and Automation 5.36.0

mailpoet / lib / EmailEditor / Integrations / MailPoet / Templates / testing-email-with-core-blocks.html

mailpoet / lib / EmailEditor / Integrations / MailPoet / Templates Last commit date

Library 3 days ago TemplatesController.php 3 months ago index.php 2 years ago testing-email-with-core-blocks.html 2 years ago

testing-email-with-core-blocks.html

356 lines

1	<!-- wp:heading {"textAlign":"center","level":1,"align":"full","textColor":"luminous-vivid-orange","style":{"elements":{"link":{"color":{"text":"var:preset\|color\|luminous-vivid-orange"}}},"color":{"background":"#f0f0f0"}}} -->
2	<h1
3	class="wp-block-heading alignfull has-text-align-center has-luminous-vivid-orange-color has-text-color has-background has-link-color"
4	style="background-color: #f0f0f0"
5	>
6	Sample Newsletter
7	</h1>
8	<!-- /wp:heading -->
9
10	<!-- wp:columns -->
11	<div class="wp-block-columns">
12	<!-- wp:column {"style":{"spacing":{"padding":{"right":"10px","left":"10px"}}}} -->
13	<div class="wp-block-column" style="padding-right: 10px; padding-left: 10px">
14	<!-- wp:heading {"backgroundColor":"pale-cyan-blue","style":{"spacing":{"padding":{"right":"var:preset\|spacing\|20","left":"var:preset\|spacing\|20"}}}} -->
15	<h2
16	class="wp-block-heading has-pale-cyan-blue-background-color has-background"
17	style="
18	padding-right: var(--wp--preset--spacing--20);
19	padding-left: var(--wp--preset--spacing--20);
20	"
21	>
22	1 Column Part
23	</h2>
24	<!-- /wp:heading -->
25
26	<!-- wp:paragraph -->
27	<p>
28	A one-column layout is great for simplified and concise content, like
29	announcements or newsletters with brief updates. Drag blocks to add
30	content and customize your styles from the styles panel on the top right.
31	</p>
32	<!-- /wp:paragraph -->
33
34	<!-- wp:image {"sizeSlug":"large"} -->
35	<figure class="wp-block-image size-large">
36	<img src="https://picsum.photos/id/133/600/300" alt="" />
37	</figure>
38	<!-- /wp:image -->
39
40	<!-- wp:buttons {"layout":{"justifyContent":"center"}} -->
41	<div class="wp-block-buttons">
42	<!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"black","width":100,"style":{"elements":{"link":{"color":{"text":"var:preset\|color\|black"}}}}} -->
43	<div class="wp-block-button has-custom-width wp-block-button__width-100">
44	<a
45	class="wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color wp-element-button"
46	>Button</a
47	>
48	</div>
49	<!-- /wp:button -->
50	</div>
51	<!-- /wp:buttons -->
52	</div>
53	<!-- /wp:column -->
54	</div>
55	<!-- /wp:columns -->
56
57	<!-- wp:heading {"textAlign":"center","align":"full","style":{"color":{"background":"#f0f0f0"},"spacing":{"padding":{"top":"var:preset\|spacing\|20","bottom":"var:preset\|spacing\|20","left":"0","right":"0"}}}} -->
58	<h2
59	class="wp-block-heading alignfull has-text-align-center has-background"
60	style="
61	background-color: #f0f0f0;
62	padding-top: var(--wp--preset--spacing--20);
63	padding-right: 0;
64	padding-bottom: var(--wp--preset--spacing--20);
65	padding-left: 0;
66	"
67	>
68	2 Columns Part
69	</h2>
70	<!-- /wp:heading -->
71
72	<!-- wp:paragraph {"fontFamily":"comic-sans-ms"} -->
73	<p class="has-comic-sans-ms-font-family">
74	A two-column layout organizes information into sections, making it easier for
75	users to navigate content. Try other layouts by adding or removing columns,
76	drag blocks into them to add content and customize your email styles from the
77	styles panel.
78	</p>
79	<!-- /wp:paragraph -->
80
81	<!-- wp:columns -->
82	<div class="wp-block-columns">
83	<!-- wp:column -->
84	<div class="wp-block-column">
85	<!-- wp:image {"width":"280px","sizeSlug":"large","align":"left"} -->
86	<figure class="wp-block-image alignleft size-large is-resized">
87	<img
88	src="https://picsum.photos/id/133/300/200"
89	alt=""
90	style="width: 280px"
91	/>
92	</figure>
93	<!-- /wp:image -->
94	</div>
95	<!-- /wp:column -->
96
97	<!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
98	<div
99	class="wp-block-column"
100	style="padding-right: 0; padding-left: 0; flex-basis: 300px"
101	>
102	<!-- wp:image {"width":"280px","sizeSlug":"large","align":"right"} -->
103	<figure class="wp-block-image alignright size-large is-resized">
104	<img
105	src="https://picsum.photos/id/133/300/200"
106	alt=""
107	style="width: 280px"
108	/>
109	</figure>
110	<!-- /wp:image -->
111	</div>
112	<!-- /wp:column -->
113	</div>
114	<!-- /wp:columns -->
115
116	<!-- wp:columns -->
117	<div class="wp-block-columns">
118	<!-- wp:column -->
119	<div class="wp-block-column">
120	<!-- wp:heading {"level":3,"textColor":"vivid-red","style":{"elements":{"link":{"color":{"text":"var:preset\|color\|vivid-red"}}}}} -->
121	<h3
122	class="wp-block-heading has-vivid-red-color has-text-color has-link-color"
123	>
124	Heading 2
125	</h3>
126	<!-- /wp:heading -->
127
128	<!-- wp:paragraph {"style":{"typography":{"fontStyle":"italic","fontWeight":"700"}}} -->
129	<p style="font-style: italic; font-weight: 700">
130	You can also add text blocks into a column next to
131	<mark
132	style="background-color: #dc2d2d"
133	class="has-inline-color has-white-color"
134	>an image block</mark
135	>
136	to create unique layouts.
137	</p>
138	<!-- /wp:paragraph -->
139
140	<!-- wp:buttons {"layout":{"justifyContent":"right"}} -->
141	<div class="wp-block-buttons">
142	<!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"contrast","width":50,"style":{"elements":{"link":{"color":{"text":"var:preset\|color\|contrast"}}}}} -->
143	<div class="wp-block-button has-custom-width wp-block-button__width-50">
144	<a
145	class="wp-block-button__link has-contrast-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color wp-element-button"
146	>Button</a
147	>
148	</div>
149	<!-- /wp:button -->
150	</div>
151	<!-- /wp:buttons -->
152	</div>
153	<!-- /wp:column -->
154
155	<!-- wp:column {"width":"300px","style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
156	<div
157	class="wp-block-column"
158	style="padding-right: 0; padding-left: 0; flex-basis: 300px"
159	>
160	<!-- wp:image {"width":"280px","height":"auto","sizeSlug":"large","align":"right"} -->
161	<figure class="wp-block-image alignright size-large is-resized">
162	<img
163	src="https://picsum.photos/id/133/300/200"
164	alt=""
165	style="width: 280px; height: auto"
166	/>
167	</figure>
168	<!-- /wp:image -->
169	</div>
170	<!-- /wp:column -->
171	</div>
172	<!-- /wp:columns -->
173
174	<!-- wp:columns {"style":{"spacing":{"padding":{"right":"var:preset\|spacing\|10","left":"var:preset\|spacing\|10"}}}} -->
175	<div
176	class="wp-block-columns"
177	style="
178	padding-right: var(--wp--preset--spacing--10);
179	padding-left: var(--wp--preset--spacing--10);
180	"
181	>
182	<!-- wp:column -->
183	<div class="wp-block-column">
184	<!-- wp:heading {"textAlign":"center","level":4} -->
185	<h4 class="wp-block-heading has-text-align-center">Product 1</h4>
186	<!-- /wp:heading -->
187
188	<!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
189	<figure class="wp-block-image aligncenter size-large is-resized">
190	<img
191	src="https://picsum.photos/id/36/180/200"
192	alt=""
193	style="width: 150px"
194	/>
195	</figure>
196	<!-- /wp:image -->
197
198	<!-- wp:list -->
199	<ul>
200	<!-- wp:list-item -->
201	<li>Item 1</li>
202	<!-- /wp:list-item -->
203
204	<!-- wp:list-item -->
205	<li>
206	Item 2
207	<!-- wp:list {"textColor":"vivid-red","style":{"elements":{"link":{"color":{"text":"var:preset\|color\|vivid-red"}}},"typography":{"fontStyle":"italic","fontWeight":"400"}}} -->
208	<ul
209	style="font-style: italic; font-weight: 400"
210	class="has-vivid-red-color has-text-color has-link-color"
211	>
212	<!-- wp:list-item -->
213	<li>Item A</li>
214	<!-- /wp:list-item -->
215
216	<!-- wp:list-item -->
217	<li>Item B</li>
218	<!-- /wp:list-item -->
219	</ul>
220	<!-- /wp:list -->
221	</li>
222	<!-- /wp:list-item -->
223	</ul>
224	<!-- /wp:list -->
225	</div>
226	<!-- /wp:column -->
227
228	<!-- wp:column -->
229	<div class="wp-block-column">
230	<!-- wp:heading {"textAlign":"center","level":4} -->
231	<h4 class="wp-block-heading has-text-align-center">Product 2</h4>
232	<!-- /wp:heading -->
233
234	<!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
235	<figure class="wp-block-image aligncenter size-large is-resized">
236	<img
237	src="https://picsum.photos/id/36/180/200"
238	alt=""
239	style="width: 150px"
240	/>
241	</figure>
242	<!-- /wp:image -->
243
244	<!-- wp:list {"style":{"typography":{"textDecoration":"none"}}} -->
245	<ul style="text-decoration: none">
246	<!-- wp:list-item -->
247	<li>Item 1</li>
248	<!-- /wp:list-item -->
249
250	<!-- wp:list-item -->
251	<li>
252	Item 2
253	<!-- wp:list {"textColor":"vivid-cyan-blue","style":{"elements":{"link":{"color":{"text":"var:preset\|color\|vivid-cyan-blue"}}},"typography":{"textDecoration":"underline"}}} -->
254	<ul
255	style="text-decoration: underline"
256	class="has-vivid-cyan-blue-color has-text-color has-link-color"
257	>
258	<!-- wp:list-item -->
259	<li>Item A</li>
260	<!-- /wp:list-item -->
261
262	<!-- wp:list-item -->
263	<li>Item B</li>
264	<!-- /wp:list-item -->
265	</ul>
266	<!-- /wp:list -->
267	</li>
268	<!-- /wp:list-item -->
269	</ul>
270	<!-- /wp:list -->
271	</div>
272	<!-- /wp:column -->
273
274	<!-- wp:column -->
275	<div class="wp-block-column">
276	<!-- wp:heading {"textAlign":"center","level":4} -->
277	<h4 class="wp-block-heading has-text-align-center">Product 3</h4>
278	<!-- /wp:heading -->
279
280	<!-- wp:image {"width":"150px","sizeSlug":"large","align":"center"} -->
281	<figure class="wp-block-image aligncenter size-large is-resized">
282	<img
283	src="https://picsum.photos/id/36/180/200"
284	alt=""
285	style="width: 150px"
286	/>
287	</figure>
288	<!-- /wp:image -->
289
290	<!-- wp:list {"ordered":true} -->
291	<ol>
292	<!-- wp:list-item -->
293	<li>Item 1</li>
294	<!-- /wp:list-item -->
295
296	<!-- wp:list-item -->
297	<li>
298	Item 2
299	<!-- wp:list {"textColor":"vivid-green-cyan","style":{"elements":{"link":{"color":{"text":"var:preset\|color\|vivid-green-cyan"}}},"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
300	<ul
301	style="font-style: normal; font-weight: 700"
302	class="has-vivid-green-cyan-color has-text-color has-link-color"
303	>
304	<!-- wp:list-item -->
305	<li>Item A</li>
306	<!-- /wp:list-item -->
307
308	<!-- wp:list-item -->
309	<li>Item B</li>
310	<!-- /wp:list-item -->
311	</ul>
312	<!-- /wp:list -->
313	</li>
314	<!-- /wp:list-item -->
315	</ol>
316	<!-- /wp:list -->
317	</div>
318	<!-- /wp:column -->
319	</div>
320	<!-- /wp:columns -->
321
322	<!-- wp:buttons {"align":"full","style":{"spacing":{"blockGap":"var:preset\|spacing\|30"}},"layout":{"justifyContent":"center"}} -->
323	<div class="wp-block-buttons alignfull">
324	<!-- wp:button {"width":25} -->
325	<div class="wp-block-button has-custom-width wp-block-button__width-25">
326	<a class="wp-block-button__link wp-element-button">Button 1</a>
327	</div>
328	<!-- /wp:button -->
329
330	<!-- wp:button {"width":25} -->
331	<div class="wp-block-button has-custom-width wp-block-button__width-25">
332	<a class="wp-block-button__link wp-element-button">Button 2</a>
333	</div>
334	<!-- /wp:button -->
335
336	<!-- wp:button {"width":25} -->
337	<div class="wp-block-button has-custom-width wp-block-button__width-25">
338	<a class="wp-block-button__link wp-element-button">Button 3</a>
339	</div>
340	<!-- /wp:button -->
341	</div>
342	<!-- /wp:buttons -->
343
344	<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
345	<p class="has-text-align-center has-small-font-size">
346	You received this email because you are subscribed to the [site:title]
347	</p>
348	<!-- /wp:paragraph -->
349
350	<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
351	<p class="has-text-align-center has-small-font-size">
352	<a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> \|
353	<a href="[link:subscription_manage_url]">Manage subscription</a>
354	</p>
355	<!-- /wp:paragraph -->
356