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

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

380 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	Please note, only one trial can be started per user.
59	<br>
60	<br>
61	</div>
62	</div>
63	<p> </p>
64
65	</td>
66	</tr>
67	</tbody>
68	</table>
69	<br>
70
71	<?php
72	// FREE END
73	?>
74
75
76
77
78
79	<p class ="ssq-heading"><?php
80	_e( 'Getting Started is easy, watch the steps below.', 'scrollsequence' );
81	?> </p> <br>
82	<table class="form-table" >
83	<tbody>
84
85	<tr>
86	<th scope="row"><label ><?php
87	_e( 'Getting Started Video', 'scrollsequence' );
88	?></label></th>
89	<td>
90
91	<iframe src="https://player.vimeo.com/video/413362050" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
92	</td>
93	</tr>
94
95	<tr>
96	<th scope="row"><label ><?php
97	_e( 'Prepare Media', 'scrollsequence' );
98	?></label></th>
99	<td>
100	<?php
101	/* 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-- */
102	_e( 'If you need help with converting your video to images, optimize the images or increases the number of image frames, use our ', 'scrollsequence' );
103	?>
104	<a href="?page=scrollsequence-dashboard&tab=media-tools" >Media Tools</a>.
105	<br><br>
106
107	</td>
108	</tr>
109
110
111	<tr>
112	<th scope="row"><label ><?php
113	_e( 'Create a new Scene', 'scrollsequence' );
114	?></label></th>
115	<td>
116	<?php
117	_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' );
118	?>
119	<br><br>
120	<img src="<?php
121	echo plugin_dir_url( __FILE__ ) . '../img/add-new-scrollsequence-images.png' ;
122	?>" width="640">
123	</td>
124	</tr>
125
126	<tr>
127	<th scope="row"><label for="default_post_format"><?php
128	_e( 'Select Images', 'scrollsequence' );
129	?></label></th>
130	<td>
131	<?php
132	_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' );
133	?>
134	<?php
135	_e( 'You can also sort by date or file name, or revert current order by using the Bulk Actions dropdown.', 'scrollsequence' );
136	?>
137	<p>
138	<?php
139	_e( 'If you do not have your own images available, you can use one of our <b>Image Packs</b>', 'scrollsequence' );
140	?>
141	(<a href="https://scrollsequence.com/scrollsequence-image-pack-1-watch.zip?utm_source=plugin&utm_medium=<?php
142	echo getenv( 'HTTP_HOST' ) ;
143	?>&utm_campaign=dashboard">Pack 1</a>,
144	<a href="https://scrollsequence.com/scrollsequence-image-pack-2-headphones.zip?utm_source=plugin&utm_medium=<?php
145	echo getenv( 'HTTP_HOST' ) ;
146	?>&utm_campaign=dashboard">Pack2</a>).
147	</p>
148	<br>
149	<img src="<?php
150	echo plugin_dir_url( __FILE__ ) . '../img/select-images.png' ;
151	?>" width="640">
152	<br><br>
153	<img src="<?php
154	echo plugin_dir_url( __FILE__ ) . '../img/add-content.png' ;
155	?>" width="640">
156
157	</td>
158	</tr>
159
160	<th scope="row"><label for="default_post_format"><?php
161	_e( 'Create Scene Content', 'scrollsequence' );
162	?></label></th>
163	<td>
164	<?php
165	_e( 'Standard TinyMCE editor is being used for writing the content. Supports shortcodes, oEmbed and many other features.', 'scrollsequence' );
166	?>
167	<br>
168	<?php
169	_e( 'HTML content is made up of elements. Each element can have one unique <b>ID</b> and multiple <b>class</b>es.', 'scrollsequence' );
170	?>
171	<br><br>
172	<img src="<?php
173	echo plugin_dir_url( __FILE__ ) . '../img/add-page-content.png' ;
174	?>" width="640">
175	<br>
176	<?php
177	_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' );
178	?>
179	<br><br>
180	</td>
181	</tr>
182
183	<th scope="row"><label for="default_post_format"><?php
184	_e( 'Animate', 'scrollsequence' );
185	?></label></th>
186	<td>
187	<?php
188	_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' );
189	?>
190	<br><br>
191	<img src="<?php
192	echo plugin_dir_url( __FILE__ ) . '../img/add-animation-new.png' ;
193	?>" width="640">
194	<br><br><br>
195	<img src="<?php
196	echo plugin_dir_url( __FILE__ ) . '../img/animation.png' ;
197	?>" width="480">
198	<br>
199	<p><?php
200	_e( 'Selector example use', 'scrollsequence' );
201	?>: </p>
202
203
204
205
206
207	<table class="widefat" style="width:640px;">
208	<thead>
209	<tr>
210	<th style="padding-left:5px"> <?php
211	_e( 'Selector', 'scrollsequence' );
212	?></th>
213	<th style="padding-left:5px"> <?php
214	_e( 'Description', 'scrollsequence' );
215	?></th>
216
217	</tr>
218	</thead>
219	<tbody>
220	<tr>
221	<td>#my-id</td>
222	<td>
223	<?php
224	printf(
225	/* translators: 1: Note */
226	__( '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' ),
227	'my-id'
228	);
229	?>
230	</td>
231	</tr>
232	</tbody>
233	<tbody>
234	<tr>
235	<td>.my-class</td>
236	<td>
237	<?php
238	printf(
239	/* translators: 1: Note */
240	__( 'Select each HTML element with class="%1$s". Multiple elements can have same class attribute.', 'scrollsequence' ),
241	'my-class'
242	);
243	?>
244	</td>
245	</tr>
246	</tbody>
247	</table>
248	<br>
249	<?php
250	_e( 'Start and End example use', 'scrollsequence' );
251	?>:
252	<table class="widefat" style="width:640px;">
253	<thead>
254	<tr>
255	<th>
256	<div style="width:70%"><p style="text-align:left;padding-left:5px"> <?php
257	_e( 'Start', 'scrollsequence' );
258	?><span style="float:right;"><?php
259	_e( 'End', 'scrollsequence' );
260	?></span></p><div>
261	</th>
262	<th style="padding-left:5px"><?php
263	_e( 'Description', 'scrollsequence' );
264	?></th>
265	</tr>
266	</thead>
267	<tbody>
268	<tr>
269	<td>
270	<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div>
271	</td>
272	<td>
273	<?php
274	_e( 'Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fifteenth image.', 'scrollsequence' );
275	?>
276	</td>
277	</tr>
278	</tbody>
279	<tbody>
280	<tr>
281	<td>
282	<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div>
283	</td>
284	<td>
285	<?php
286	_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' );
287	?>
288	</td>
289	</tr>
290	</tbody>
291	</table>
292
293
294
295
296	</td>
297	</tr>
298	</tbody></table>
299
300
301	<table class="form-table" >
302	<tbody>
303	<tr>
304	<th scope="row"><label ><?php
305	_e( 'Full Tutorial Video', 'scrollsequence' );
306	?></label></th>
307	<td>
308
309	<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>
310
311	</td>
312	</tr>
313	</tbody>
314	</table>
315
316
317	<p style="padding-top: 45px;" class ="ssq-heading"><?php
318	_e( 'Tips and Tricks', 'scrollsequence' );
319	?></p> <br>
320
321	<table class="form-table" >
322	<tbody>
323	<tr>
324	<th scope="row"><label ><?php
325	_e( 'Basic Use', 'scrollsequence' );
326	?></label></th>
327	<td>
328	<ul style=" list-style-type: circle; padding-left: 50px">
329	<li>
330	<?php
331	_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' );
332	?>
333	</li>
334	<li>
335	<?php
336	printf(
337	/* translators: 1: %1$s:[scrollsequence] %2$s:[scrollsequence id="####" margintop="-200px"] */
338	__( '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' ),
339	'[scrollsequence]',
340	'[scrollsequence id="####" margintop="-200px"]'
341	);
342	?>
343
344	</li>
345
346	</ul>
347	</td>
348	</tr>
349	<tr>
350	<th scope="row"><label ><?php
351	_e( 'Advanced Use', 'scrollsequence' );
352	?></label></th>
353	<td>
354	<ul style=" list-style-type: circle; padding-left: 50px">
355	<li>
356	<?php
357	_e( 'Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.', 'scrollsequence' );
358	?>
359	</li>
360	<li>
361	<?php
362	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/' );
363	?>
364	</li>
365	<li>
366	<?php
367	_e( 'Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don not hesitate and ', 'scrollsequence' );
368	?>
369	<a href="<?php
370	echo admin_url( 'admin.php?page=scrollsequence-contact' ) ;
371	?>">
372	<?php
373	_e( 'contact us', 'scrollsequence' );
374	?>
375	</a>.
376	</li>
377	</ul>
378	</td>
379	</tr>
380