scrollsequence / admin / partials / scrollsequence-admin-display-get-started.php

scrollsequence-admin-display-get-started.php in Scrollsequence – Cinematic Scroll Image Animation Plugin 1.6.3, at admin/partials/scrollsequence-admin-display-get-started.php

382 lines 11.7 KB

Raw Download Zip

1
2
3	<?php
4	// FREE START
5	?>
6
7
8	<table class="form-table" >
9	<tbody>
10	<tr>
11	<th scope="row"><labe ></label></th>
12	<td>
13
14	<div style="max-width:640px; border:1px solid #c3c4c7; background-color: #f0f0f1;" ><br>
15	<strong style="text-align: center; display:block">
16	<?php
17	_e( 'Experience the full power of Scrollsequence with a 14-day free trial. Choose between our Pro and Business plans to find the perfect fit for your needs.', 'scrollsequence' );
18	?>
19	<br>
20	</strong>
21	<br/>
22	<ul style="margin-left:1rem;">
23	<li>
24	<strong>
25	<?php
26	_e( 'Business trial' );
27	?>
28	</strong>
29	-
30	<?php
31	_e( 'The best choice for those who want to utilize all features, including Media Tools. Please note, a payment method is required to start this trial.', 'scrollsequence' );
32	?>
33	</li>
34	<br/>
35	<li>
36	<strong><?php
37	_e( 'Pro trial' );
38	?></strong>
39	-
40	<?php
41	_e( 'Ideal if you have your images ready and optimized, and want to create an animation. No payment method required for trial.', 'scrollsequence' );
42	?>
43	</li>
44	</ul>
45	<br>
46	<div style="text-align: center; display:block">
47	<a class="button button-primary button-hero" href="<?php
48	echo admin_url( 'admin.php?page=scrollsequence-pricing&trial=true' );
49	?>">
50	<span class="dashicons dashicons-tickets" style=" margin-top: 0.7rem; margin-right: 0.35rem;"></span>
51
52	<?php
53	_e( 'Choose Your 14-Day Free Trial', 'scrollsequence' );
54	?>
55	</a>
56	<br>
57	<br>
58	<?php
59	_e( 'Please note, only one trial can be started per user.', 'scrollsequence' );
60	?>
61	<br>
62	<br>
63	</div>
64	</div>
65	<p> </p>
66
67	</td>
68	</tr>
69	</tbody>
70	</table>
71	<br>
72
73	<?php
74	// FREE END
75	?>
76
77
78
79
80
81	<p class ="ssq-heading"><?php
82	_e( 'Getting Started is easy, watch the steps below.', 'scrollsequence' );
83	?> </p> <br>
84	<table class="form-table" >
85	<tbody>
86
87	<tr>
88	<th scope="row"><label ><?php
89	_e( 'Getting Started Video', 'scrollsequence' );
90	?></label></th>
91	<td>
92
93	<iframe src="https://player.vimeo.com/video/413362050" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
94	</td>
95	</tr>
96
97	<tr>
98	<th scope="row"><label ><?php
99	_e( 'Prepare Media', 'scrollsequence' );
100	?></label></th>
101	<td>
102	<?php
103	/* translators: After this string there is a link to "Media Tools". If you need help with converting your video to images, optimize the images or increases the number of image frames, use our --Media Tools-- */
104	_e( 'If you need help with converting your video to images, optimize the images or increases the number of image frames, use our', 'scrollsequence' );
105	?>
106	<a href="?page=scrollsequence-dashboard&tab=media-tools" >Media Tools</a>.
107	<br><br>
108
109	</td>
110	</tr>
111
112
113	<tr>
114	<th scope="row"><label ><?php
115	_e( 'Create a new Scene', 'scrollsequence' );
116	?></label></th>
117	<td>
118	<?php
119	_e( 'Click on <i><strong>(1) Add New Scrollsequence</strong></i>, set a <i><strong>(2) title</strong></i> name and <i><strong>(3) Add Scene</strong></i>.', 'scrollsequence' );
120	?>
121	<br><br>
122	<img src="<?php
123	echo plugin_dir_url( __FILE__ ) . '../img/add-new-scrollsequence-images.png';
124	?>" width="640">
125	</td>
126	</tr>
127
128	<tr>
129	<th scope="row"><label for="default_post_format"><?php
130	_e( 'Select Images', 'scrollsequence' );
131	?></label></th>
132	<td>
133	<?php
134	_e( 'Click on <i><strong>(4) Select Images</strong></i> (5) confirm selection that you want to use. Hold down CTRL or SHIFT for multiple selection.<br> Take care about the order you select your images. After you made and confirmed your selection, you can easily drag and drop to reorder.', 'scrollsequence' );
135	?>
136	<?php
137	_e( 'You can also sort by date or file name, or revert current order by using the Bulk Actions dropdown.', 'scrollsequence' );
138	?>
139	<p>
140	<?php
141	_e( 'If you do not have your own images available, you can use one of our <b>Image Packs</b>', 'scrollsequence' );
142	?>
143	(<a href="https://scrollsequence.com/scrollsequence-image-pack-1-watch.zip?utm_source=plugin&utm_medium=<?php
144	echo getenv( 'HTTP_HOST' );
145	?>&utm_campaign=dashboard">Pack 1</a>,
146	<a href="https://scrollsequence.com/scrollsequence-image-pack-2-headphones.zip?utm_source=plugin&utm_medium=<?php
147	echo getenv( 'HTTP_HOST' );
148	?>&utm_campaign=dashboard">Pack2</a>).
149	</p>
150	<br>
151	<img src="<?php
152	echo plugin_dir_url( __FILE__ ) . '../img/select-images.png';
153	?>" width="640">
154	<br><br>
155	<img src="<?php
156	echo plugin_dir_url( __FILE__ ) . '../img/add-content.png';
157	?>" width="640">
158
159	</td>
160	</tr>
161
162	<th scope="row"><label for="default_post_format"><?php
163	_e( 'Create Scene Content', 'scrollsequence' );
164	?></label></th>
165	<td>
166	<?php
167	_e( 'Standard TinyMCE editor is being used for writing the content. Supports shortcodes, oEmbed and many other features.', 'scrollsequence' );
168	?>
169	<br>
170	<?php
171	_e( 'HTML content is made up of elements. Each element can have one unique <b>ID</b> and multiple <b>class</b>es.', 'scrollsequence' );
172	?>
173	<br><br>
174	<img src="<?php
175	echo plugin_dir_url( __FILE__ ) . '../img/add-page-content.png';
176	?>" width="640">
177	<br>
178	<?php
179	_e( '<b>Class</b>es and <b>ID</b>s are used as selectors for on scroll animation, details are described in paragraphs below.', 'scrollsequence' );
180	?>
181	<br><br>
182	</td>
183	</tr>
184
185	<th scope="row"><label for="default_post_format"><?php
186	_e( 'Animate', 'scrollsequence' );
187	?></label></th>
188	<td>
189	<?php
190	_e( 'Click on <i><strong>(6) Add Animation</strong></i>. The most basic is In/Out Animation.<br>Three basic parameters are required for each animated element. You can add more element animations with the little plus sign.', 'scrollsequence' );
191	?>
192	<br><br>
193	<img src="<?php
194	echo plugin_dir_url( __FILE__ ) . '../img/add-animation-new.png';
195	?>" width="640">
196	<br><br><br>
197	<img src="<?php
198	echo plugin_dir_url( __FILE__ ) . '../img/animation.png';
199	?>" width="480">
200	<br>
201	<p><?php
202	_e( 'Selector example use', 'scrollsequence' );
203	?>: </p>
204
205
206
207
208
209	<table class="widefat" style="width:640px;">
210	<thead>
211	<tr>
212	<th style="padding-left:5px"> <?php
213	_e( 'Selector', 'scrollsequence' );
214	?></th>
215	<th style="padding-left:5px"> <?php
216	_e( 'Description', 'scrollsequence' );
217	?></th>
218
219	</tr>
220	</thead>
221	<tbody>
222	<tr>
223	<td>#my-id</td>
224	<td>
225	<?php
226	printf(
227	/* translators: 1: Note */
228	__( 'Select a HTML element with id="%1$s". IDs should be unique. This means that only one HTML element can have the same id.', 'scrollsequence' ),
229	'my-id'
230	);
231	?>
232	</td>
233	</tr>
234	</tbody>
235	<tbody>
236	<tr>
237	<td>.my-class</td>
238	<td>
239	<?php
240	printf(
241	/* translators: 1: Note */
242	__( 'Select each HTML element with class="%1$s". Multiple elements can have same class attribute.', 'scrollsequence' ),
243	'my-class'
244	);
245	?>
246	</td>
247	</tr>
248	</tbody>
249	</table>
250	<br>
251	<?php
252	_e( 'Start and End example use', 'scrollsequence' );
253	?>:
254	<table class="widefat" style="width:640px;">
255	<thead>
256	<tr>
257	<th>
258	<div style="width:70%"><p style="text-align:left;padding-left:5px"> <?php
259	_e( 'Start', 'scrollsequence' );
260	?><span style="float:right;"><?php
261	_e( 'End', 'scrollsequence' );
262	?></span></p><div>
263	</th>
264	<th style="padding-left:5px"><?php
265	_e( 'Description', 'scrollsequence' );
266	?></th>
267	</tr>
268	</thead>
269	<tbody>
270	<tr>
271	<td>
272	<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div>
273	</td>
274	<td>
275	<?php
276	_e( 'Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fifteenth image.', 'scrollsequence' );
277	?>
278	</td>
279	</tr>
280	</tbody>
281	<tbody>
282	<tr>
283	<td>
284	<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div>
285	</td>
286	<td>
287	<?php
288	_e( 'Element is hidden when page is loaded. Once user starts scrolling down, element is displayed from 5th to 30th image in the sequence.', 'scrollsequence' );
289	?>
290	</td>
291	</tr>
292	</tbody>
293	</table>
294
295
296
297
298	</td>
299	</tr>
300	</tbody></table>
301
302
303	<table class="form-table" >
304	<tbody>
305	<tr>
306	<th scope="row"><label ><?php
307	_e( 'Full Tutorial Video', 'scrollsequence' );
308	?></label></th>
309	<td>
310
311	<iframe width="640" height="336" src="https://www.youtube.com/embed/Rbsw2Nwn4VY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
312
313	</td>
314	</tr>
315	</tbody>
316	</table>
317
318
319	<p style="padding-top: 45px;" class ="ssq-heading"><?php
320	_e( 'Tips and Tricks', 'scrollsequence' );
321	?></p> <br>
322
323	<table class="form-table" >
324	<tbody>
325	<tr>
326	<th scope="row"><label ><?php
327	_e( 'Basic Use', 'scrollsequence' );
328	?></label></th>
329	<td>
330	<ul style=" list-style-type: circle; padding-left: 50px">
331	<li>
332	<?php
333	_e( 'Add another Scene to the sequence. Each Scene contains image sequence, content and setting like duration, alignment and scale. Scenes can be re-ordered by drag and drop. If you wish you can make a copy of a similar Scene.', 'scrollsequence' );
334	?>
335	</li>
336	<li>
337	<?php
338	printf(
339	/* translators: 1: %1$s:[scrollsequence] %2$s:[scrollsequence id="####" margintop="-200px"] */
340	__( 'Add %1$s shortcode to control position of the image animation in the content. Margintop, marginbottom shortcode options give you control of the margins. Use negative margin to overlap with classic content before or after the animation. Example %2$s.', 'scrollsequence' ),
341	'[scrollsequence]',
342	'[scrollsequence id="####" margintop="-200px"]'
343	);
344	?>
345
346	</li>
347
348	</ul>
349	</td>
350	</tr>
351	<tr>
352	<th scope="row"><label ><?php
353	_e( 'Advanced Use', 'scrollsequence' );
354	?></label></th>
355	<td>
356	<ul style=" list-style-type: circle; padding-left: 50px">
357	<li>
358	<?php
359	_e( 'Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.', 'scrollsequence' );
360	?>
361	</li>
362	<li>
363	<?php
364	printf( __( 'Read our <a href="%1$s" target="_blank">documentation</a>, learn the basics, have a look at some examples and get inspiration for your project.', 'scrollsequence' ), 'https://scrollsequence.com/documentation/' );
365	?>
366	</li>
367	<li>
368	<?php
369	_e( 'Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don not hesitate and ', 'scrollsequence' );
370	?>
371	<a href="<?php
372	echo admin_url( 'admin.php?page=scrollsequence-contact' );
373	?>">
374	<?php
375	_e( 'contact us', 'scrollsequence' );
376	?>
377	</a>.
378	</li>
379	</ul>
380	</td>
381	</tr>
382