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

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

334 lines 10.0 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	<p class ="ssq-heading" style="max-width:640px; text-align: center; border:1px solid #c3c4c7; background-color: #f0f0f1;" ><br>
15	<strong>
16	<?php
17	_e( 'For limited time only we offer a trial period of PRO version.', 'scrollsequence' );
18	?>
19	<br>
20	<?php
21	_e( 'No credit card, no risk. Grab your trial while they last!', 'scrollsequence' );
22	?>
23	</strong><br><br>
24	<a class="button button-primary button-hero" href="<?php
25	echo admin_url( 'admin.php?page=scrollsequence-pricing&trial=true' ) ;
26	?>">
27	<?php
28	_e( '14 DAYS FREE TRIAL', 'scrollsequence' );
29	?>
30	</a>
31	<br><br><br>
32	</p>
33	<p> </p>
34
35	</td>
36	</tr>
37	</tbody>
38	</table>
39	<br><br><br>
40
41	<?php
42	// FREE END
43	?>
44
45
46
47
48
49	<p class ="ssq-heading"><?php
50	_e( 'Getting Started is easy, watch the steps below.', 'scrollsequence' );
51	?> </p> <br>
52	<table class="form-table" >
53	<tbody>
54
55	<tr>
56	<th scope="row"><label ><?php
57	_e( 'Getting Started Video', 'scrollsequence' );
58	?></label></th>
59	<td>
60
61	<iframe src="https://player.vimeo.com/video/413362050" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
62	</td>
63	</tr>
64
65	<tr>
66	<th scope="row"><label ><?php
67	_e( 'Create a new Scene', 'scrollsequence' );
68	?></label></th>
69	<td>
70	<?php
71	_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' );
72	?>
73	<br><br>
74	<img src="<?php
75	echo plugin_dir_url( __FILE__ ) . '../img/add-new-scrollsequence-images.png' ;
76	?>" width="640">
77	</td>
78	</tr>
79
80	<tr>
81	<th scope="row"><label for="default_post_format"><?php
82	_e( 'Select Images', 'scrollsequence' );
83	?></label></th>
84	<td>
85	<?php
86	_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' );
87	?>
88	<?php
89	_e( 'You can also sort by date or file name, or revert current order by using the Bulk Actions dropdown.', 'scrollsequence' );
90	?>
91	<p>
92	<?php
93	_e( 'If you do not have your own images available, you can use one of our <b>Image Packs</b>', 'scrollsequence' );
94	?>
95	(<a href="https://scrollsequence.com/scrollsequence-image-pack-1-watch.zip?utm_source=plugin&utm_medium=<?php
96	echo getenv( 'HTTP_HOST' ) ;
97	?>&utm_campaign=dashboard">Pack 1</a>,
98	<a href="https://scrollsequence.com/scrollsequence-image-pack-2-headphones.zip?utm_source=plugin&utm_medium=<?php
99	echo getenv( 'HTTP_HOST' ) ;
100	?>&utm_campaign=dashboard">Pack2</a>).
101	</p>
102	<br>
103	<img src="<?php
104	echo plugin_dir_url( __FILE__ ) . '../img/select-images.png' ;
105	?>" width="640">
106	<br><br>
107	<img src="<?php
108	echo plugin_dir_url( __FILE__ ) . '../img/add-content.png' ;
109	?>" width="640">
110
111	</td>
112	</tr>
113
114	<th scope="row"><label for="default_post_format"><?php
115	_e( 'Create Scene Content', 'scrollsequence' );
116	?></label></th>
117	<td>
118	<?php
119	_e( 'Standard TinyMCE editor is being used for writing the content. Supports shortcodes, oEmbed and many other features.', 'scrollsequence' );
120	?>
121	<br>
122	<?php
123	_e( 'HTML content is made up of elements. Each element can have one unique <b>ID</b> and multiple <b>class</b>es.', 'scrollsequence' );
124	?>
125	<br><br>
126	<img src="<?php
127	echo plugin_dir_url( __FILE__ ) . '../img/add-page-content.png' ;
128	?>" width="640">
129	<br>
130	<?php
131	_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' );
132	?>
133	<br><br>
134	</td>
135	</tr>
136
137	<th scope="row"><label for="default_post_format"><?php
138	_e( 'Animate', 'scrollsequence' );
139	?></label></th>
140	<td>
141	<?php
142	_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' );
143	?>
144	<br><br>
145	<img src="<?php
146	echo plugin_dir_url( __FILE__ ) . '../img/add-animation-new.png' ;
147	?>" width="640">
148	<br><br><br>
149	<img src="<?php
150	echo plugin_dir_url( __FILE__ ) . '../img/animation.png' ;
151	?>" width="480">
152	<br>
153	<p><?php
154	_e( 'Selector example use', 'scrollsequence' );
155	?>: </p>
156
157
158
159
160
161	<table class="widefat" style="width:640px;">
162	<thead>
163	<tr>
164	<th style="padding-left:5px"> <?php
165	_e( 'Selector', 'scrollsequence' );
166	?></th>
167	<th style="padding-left:5px"> <?php
168	_e( 'Description', 'scrollsequence' );
169	?></th>
170
171	</tr>
172	</thead>
173	<tbody>
174	<tr>
175	<td>#my-id</td>
176	<td>
177	<?php
178	printf(
179	/* translators: 1: Note */
180	__( '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' ),
181	'my-id'
182	);
183	?>
184	</td>
185	</tr>
186	</tbody>
187	<tbody>
188	<tr>
189	<td>.my-class</td>
190	<td>
191	<?php
192	printf(
193	/* translators: 1: Note */
194	__( 'Select each HTML element with class="%1$s". Multiple elements can have same class attribute.', 'scrollsequence' ),
195	'my-class'
196	);
197	?>
198	</td>
199	</tr>
200	</tbody>
201	</table>
202	<br>
203	<?php
204	_e( 'Start and End example use', 'scrollsequence' );
205	?>:
206	<table class="widefat" style="width:640px;">
207	<thead>
208	<tr>
209	<th>
210	<div style="width:70%"><p style="text-align:left;padding-left:5px"> <?php
211	_e( 'Start', 'scrollsequence' );
212	?><span style="float:right;"><?php
213	_e( 'End', 'scrollsequence' );
214	?></span></p><div>
215	</th>
216	<th style="padding-left:5px"><?php
217	_e( 'Description', 'scrollsequence' );
218	?></th>
219	</tr>
220	</thead>
221	<tbody>
222	<tr>
223	<td>
224	<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div>
225	</td>
226	<td>
227	<?php
228	_e( 'Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fifteenth image.', 'scrollsequence' );
229	?>
230	</td>
231	</tr>
232	</tbody>
233	<tbody>
234	<tr>
235	<td>
236	<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div>
237	</td>
238	<td>
239	<?php
240	_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' );
241	?>
242	</td>
243	</tr>
244	</tbody>
245	</table>
246
247
248
249
250	</td>
251	</tr>
252	</tbody></table>
253
254
255	<table class="form-table" >
256	<tbody>
257	<tr>
258	<th scope="row"><label ><?php
259	_e( 'Full Tutorial Video', 'scrollsequence' );
260	?></label></th>
261	<td>
262
263	<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>
264
265	</td>
266	</tr>
267	</tbody>
268	</table>
269
270
271	<p style="padding-top: 45px;" class ="ssq-heading"><?php
272	_e( 'Tips and Tricks', 'scrollsequence' );
273	?></p> <br>
274
275	<table class="form-table" >
276	<tbody>
277	<tr>
278	<th scope="row"><label ><?php
279	_e( 'Basic Use', 'scrollsequence' );
280	?></label></th>
281	<td>
282	<ul style=" list-style-type: circle; padding-left: 50px">
283	<li>
284	<?php
285	_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' );
286	?>
287	</li>
288	<li>
289	<?php
290	printf(
291	/* translators: 1: %1$s:[scrollsequence] %2$s:[scrollsequence id="####" margintop="-200px"] */
292	__( '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' ),
293	'[scrollsequence]',
294	'[scrollsequence id="####" margintop="-200px"]'
295	);
296	?>
297
298	</li>
299
300	</ul>
301	</td>
302	</tr>
303	<tr>
304	<th scope="row"><label ><?php
305	_e( 'Advanced Use', 'scrollsequence' );
306	?></label></th>
307	<td>
308	<ul style=" list-style-type: circle; padding-left: 50px">
309	<li>
310	<?php
311	_e( 'Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.', 'scrollsequence' );
312	?>
313	</li>
314	<li>
315	<?php
316	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/' );
317	?>
318	</li>
319	<li>
320	<?php
321	_e( 'Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don not hesitate and ', 'scrollsequence' );
322	?>
323	<a href="<?php
324	echo admin_url( 'admin.php?page=scrollsequence-contact' ) ;
325	?>">
326	<?php
327	_e( 'contact us', 'scrollsequence' );
328	?>
329	</a>.
330	</li>
331	</ul>
332	</td>
333	</tr>
334