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

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

326 lines 9.8 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	<p>
89	<?php
90	_e( 'If you do not have your own images available, you can use one of our <b>Image Packs</b>', 'scrollsequence' );
91	?>
92	(<a href="https://scrollsequence.com/scrollsequence-image-pack-1-watch.zip?utm_source=plugin&utm_medium=<?php
93	echo getenv( 'HTTP_HOST' ) ;
94	?>&utm_campaign=dashboard">Pack 1</a>,
95	<a href="https://scrollsequence.com/scrollsequence-image-pack-2-headphones.zip?utm_source=plugin&utm_medium=<?php
96	echo getenv( 'HTTP_HOST' ) ;
97	?>&utm_campaign=dashboard">Pack2</a>).
98	</p>
99	<br>
100	<img src="<?php
101	echo plugin_dir_url( __FILE__ ) . '../img/select-images.png' ;
102	?>" width="640">
103	<br><br>
104	<img src="<?php
105	echo plugin_dir_url( __FILE__ ) . '../img/add-content.png' ;
106	?>" width="640">
107	</td>
108	</tr>
109
110	<th scope="row"><label for="default_post_format"><?php
111	_e( 'Create Scene Content', 'scrollsequence' );
112	?></label></th>
113	<td>
114	<?php
115	_e( 'Standard TinyMCE editor is being used for writing the content. TinyMCE is the most advanced editor on the market. Supports shortcodes, oEmbed and many other features.', 'scrollsequence' );
116	?>
117	<br>
118	<?php
119	_e( 'HTML content is made up of elements. Each element can have one unique <b>ID</b> and multiple <b>class</b>es.', 'scrollsequence' );
120	?>
121	<br><br>
122	<img src="<?php
123	echo plugin_dir_url( __FILE__ ) . '../img/add-page-content.png' ;
124	?>" width="640">
125	<br>
126	<?php
127	_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' );
128	?>
129	<br><br>
130	</td>
131	</tr>
132
133	<th scope="row"><label for="default_post_format"><?php
134	_e( 'Animate', 'scrollsequence' );
135	?></label></th>
136	<td>
137	<?php
138	_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' );
139	?>
140	<br>
141	<img src="<?php
142	echo plugin_dir_url( __FILE__ ) . '../img/animation.png' ;
143	?>" width="640">
144	<br>
145	<p><?php
146	_e( 'Selector example use', 'scrollsequence' );
147	?>: </p>
148
149
150
151
152
153	<table class="widefat" style="width:640px;">
154	<thead>
155	<tr>
156	<th style="padding-left:5px"> <?php
157	_e( 'Selector', 'scrollsequence' );
158	?></th>
159	<th style="padding-left:5px"> <?php
160	_e( 'Description', 'scrollsequence' );
161	?></th>
162
163	</tr>
164	</thead>
165	<tbody>
166	<tr>
167	<td>#my-id</td>
168	<td>
169	<?php
170	printf(
171	/* translators: 1: Note */
172	__( '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' ),
173	'my-id'
174	);
175	?>
176	</td>
177	</tr>
178	</tbody>
179	<tbody>
180	<tr>
181	<td>.my-class</td>
182	<td>
183	<?php
184	printf(
185	/* translators: 1: Note */
186	__( 'Select each HTML element with class="%1$s". Multiple elements can have same class attribute.', 'scrollsequence' ),
187	'my-class'
188	);
189	?>
190	</td>
191	</tr>
192	</tbody>
193	</table>
194	<br>
195	<?php
196	_e( 'Start and End example use', 'scrollsequence' );
197	?>:
198	<table class="widefat" style="width:640px;">
199	<thead>
200	<tr>
201	<th>
202	<div style="width:70%"><p style="text-align:left;padding-left:5px"> <?php
203	_e( 'Start', 'scrollsequence' );
204	?><span style="float:right;"><?php
205	_e( 'End', 'scrollsequence' );
206	?></span></p><div>
207	</th>
208	<th style="padding-left:5px"><?php
209	_e( 'Description', 'scrollsequence' );
210	?></th>
211	</tr>
212	</thead>
213	<tbody>
214	<tr>
215	<td>
216	<div style="width:70%"><p style="text-align:left;">0<span style="float:right;">15</span></p><div>
217	</td>
218	<td>
219	<?php
220	_e( 'Element is visible when page is loaded. Once user starts scrolling down, element is hidden once user reaches the fifteenth image.', 'scrollsequence' );
221	?>
222	</td>
223	</tr>
224	</tbody>
225	<tbody>
226	<tr>
227	<td>
228	<div style="width:70%"><p style="text-align:left;">5<span style="float:right;">30</span></p><div>
229	</td>
230	<td>
231	<?php
232	_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' );
233	?>
234	</td>
235	</tr>
236	</tbody>
237	</table>
238
239
240
241
242	</td>
243	</tr>
244	</tbody></table>
245
246
247	<table class="form-table" >
248	<tbody>
249	<tr>
250	<th scope="row"><label ><?php
251	_e( 'Full Tutorial Video', 'scrollsequence' );
252	?></label></th>
253	<td>
254
255	<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>
256
257	</td>
258	</tr>
259	</tbody>
260	</table>
261
262
263	<p style="padding-top: 45px;" class ="ssq-heading"><?php
264	_e( 'Tips and Tricks', 'scrollsequence' );
265	?></p> <br>
266
267	<table class="form-table" >
268	<tbody>
269	<tr>
270	<th scope="row"><label ><?php
271	_e( 'Basic Use', 'scrollsequence' );
272	?></label></th>
273	<td>
274	<ul style=" list-style-type: circle; padding-left: 50px">
275	<li>
276	<?php
277	_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' );
278	?>
279	</li>
280	<li>
281	<?php
282	printf(
283	/* translators: 1: %1$s:[scrollsequence] %2$s:[scrollsequence id="####" margintop="-200px"] */
284	__( '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' ),
285	'[scrollsequence]',
286	'[scrollsequence id="####" margintop="-200px"]'
287	);
288	?>
289
290	</li>
291
292	</ul>
293	</td>
294	</tr>
295	<tr>
296	<th scope="row"><label ><?php
297	_e( 'Advanced Use', 'scrollsequence' );
298	?></label></th>
299	<td>
300	<ul style=" list-style-type: circle; padding-left: 50px">
301	<li>
302	<?php
303	_e( 'Custom CSS is a great way how to add a magic touch to your design. Simply write or paste CSS code.', 'scrollsequence' );
304	?>
305	</li>
306	<li>
307	<?php
308	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/' );
309	?>
310	</li>
311	<li>
312	<?php
313	_e( 'Debug mode gives you information when you fall into trouble. If you stumble upon an issue, don not hesitate and ', 'scrollsequence' );
314	?>
315	<a href="<?php
316	echo admin_url( 'admin.php?page=scrollsequence-contact' ) ;
317	?>">
318	<?php
319	_e( 'contact us', 'scrollsequence' );
320	?>
321	</a>.
322	</li>
323	</ul>
324	</td>
325	</tr>
326