← All changes | admin/pages/tuto.php +216 -9 2.1.12 → 2.7.10 View file →

		@@ -1,4 +1,6 @@
	1	+<?php if (function_exists('aibui_render_onboarding_blocks')) { aibui_render_onboarding_blocks(); } ?>
	2	+
1	3	<div class="ai-tutorial-container ai-fade-in">
2	4	<!-- Header -->
3	5	<div class="ai-tutorial-header">
4	6	<h1>AI Builder Tutorial</h1>
		@@ -8,9 +10,9 @@
8	10	<!-- Video Section -->
9	11	<div class="ai-video-section">
10	12	<div class="ai-video-container">
11	13	<div class="ai-video-wrapper">
12		- <iframe width="100%" height="100%" src="https://www.youtube.com/embed/xgaVHXNn3bQ" frameborder="0"
	14	+ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/cn03BDUmhjo" frameborder="0"
13	15	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
14	16	allowfullscreen>
15	17	</iframe>
16	18	</div>
		@@ -20,8 +22,29 @@
20	22	<p>Watch this comprehensive tutorial to master all AI Builder features</p>
21	23	</div>
22	24	</div>
23	25
	26	+ <!-- AI Design Gallery -->
	27	+ <div class="ai-instruction-card" style="margin-top: 24px;">
	28	+ <div class="ai-instruction-header">
	29	+ <div class="ai-instruction-title">
	30	+ <h3>Explore Real AI-Generated WordPress Page Examples</h3>
	31	+ <p>Browse concrete page screenshots created with AI Builder, with the exact prompts used for each style.
	32	+ </p>
	33	+ </div>
	34	+ </div>
	35	+ <div class="ai-instruction-content">
	36	+ <p>
	37	+ Looking for inspiration before generating your next page? Visit our AI Design Gallery to discover 9
	38	+ editable style showcases and copy-ready prompts you can reuse in your own projects.
	39	+ </p>
	40	+ <p style="margin-top: 14px;">
	41	+ <a href="https://website-ai-builder.com/ai-design-gallery-10-editable-style-showcases/" target="_blank"
	42	+ rel="noopener noreferrer">Open the AI Design Gallery</a>
	43	+ </p>
	44	+ </div>
	45	+ </div>
	46	+
24	47	<!-- Features Overview -->
25	48	<div class="ai-features-overview">
26	49	<div class="ai-section-header">
27	50	<h2>Key Features</h2>
		@@ -86,8 +109,34 @@
86	109	</div>
87	110	<h3>AI Text Generation</h3>
88	111	<p>Create compelling text content with AI assistance</p>
89	112	</div>
	113	+
	114	+ <div class="ai-feature-card">
	115	+ <div class="ai-feature-icon">
	116	+ <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	117	+ <path d="M5 8L12 3L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	118	+ <path d="M9 21V12H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	119	+ <path d="M3 10L12 15L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	120	+ <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	121	+ <path d="M8 7L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	122	+ </svg>
	123	+ </div>
	124	+ <h3>AI Translation</h3>
	125	+ <p>Translate your pages and posts into multiple languages with AI</p>
	126	+ </div>
	127	+
	128	+ <!-- <div class="ai-feature-card">
	129	+ <div class="ai-feature-icon">
	130	+ <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	131	+ <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	132	+ <path d="M8 9H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	133	+ <path d="M8 13H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	134	+ </svg>
	135	+ </div>
	136	+ <h3>Site Copilot</h3>
	137	+ <p>AI-powered assistant to manage and operate your WordPress site</p>
	138	+ </div> -->
90	139	</div>
91	140	</div>
92	141
93	142	<!-- Detailed Instructions -->
		@@ -140,10 +189,9 @@
140	189	</div>
141	190	<div class="ai-tip">
142	191	<div class="ai-tip-icon">💡</div>
143	192	<div class="ai-tip-content">
144		- <strong>Pro Tip:</strong> The more detailed your prompt, the better the AI-generated content
145		- will be. Include information about your target audience, tone, and specific sections you want.
	193	+ <strong>Pro Tip:</strong> If you don’t like how a block looks, you can reset it to the default style by removing the text in the right-hand sidebar under Block → Advanced → Additional CSS class(es).
146	194	</div>
147	195	</div>
148	196	</div>
149	197	</div>
		@@ -188,15 +236,67 @@
188	236	</div>
189	237	<div class="ai-tip">
190	238	<div class="ai-tip-icon">💡</div>
191	239	<div class="ai-tip-content">
192		- <strong>Pro Tip:</strong> AI Blocks are perfect for creating testimonials, product descriptions,
193		- FAQ sections, and any other content that needs to be generated dynamically.
	240	+ <strong>Pro Tip:</strong>AI blocks are perfect for adding content in a specific spot while keeping the rest of the page intact.
194	241	</div>
195	242	</div>
196	243	</div>
197	244	</div>
198	245
	246	+ <!-- Editing & Refining Existing Blocks -->
	247	+ <div class="ai-instruction-card">
	248	+ <div class="ai-instruction-header">
	249	+ <div class="ai-instruction-icon">
	250	+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	251	+ <path d="M12 20H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
	252	+ <path d="M16.5 3.5C17.3284 2.67157 18.6716 2.67157 19.5 3.5C20.3284 4.32843 20.3284 5.67157 19.5 6.5L7 19L3 20L4 16L16.5 3.5Z"
	253	+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	254	+ </svg>
	255	+ </div>
	256	+ <div class="ai-instruction-title">
	257	+ <h3>Editing Existing Blocks (Fast Workflow)</h3>
	258	+ <p>Iterate on your layout, content, and styles without starting from scratch</p>
	259	+ </div>
	260	+ </div>
	261	+ <div class="ai-instruction-content">
	262	+ <div class="ai-step">
	263	+ <div class="ai-step-number">1</div>
	264	+ <div class="ai-step-content">
	265	+ <h4>Add a New Block (Chat Widget)</h4>
	266	+ <p>Open the AI chat widget and click <strong>Generate block</strong>. AI will create a new block and append it to the bottom of the page without replacing your existing content.</p>
	267	+ </div>
	268	+ </div>
	269	+ <div class="ai-step">
	270	+ <div class="ai-step-number">2</div>
	271	+ <div class="ai-step-content">
	272	+ <h4>Modify a Selected Block with AI</h4>
	273	+ <p>Click any block in the editor and use the small <strong>Modify with AI</strong> button. Describe what you want to change (for example: “Add a CTA button and make the section background light blue”).</p>
	274	+ </div>
	275	+ </div>
	276	+ <div class="ai-step">
	277	+ <div class="ai-step-number">3</div>
	278	+ <div class="ai-step-content">
	279	+ <h4>Edit Block CSS (AI Builder CSS)</h4>
	280	+ <p>Select a block, open the block settings sidebar, and edit the <strong>AI Builder CSS</strong> field to customize styles for that block. This is the fastest way to fine-tune spacing, colors, typography, and effects.</p>
	281	+ </div>
	282	+ </div>
	283	+ <div class="ai-step">
	284	+ <div class="ai-step-number">4</div>
	285	+ <div class="ai-step-content">
	286	+ <h4>Edit Global CSS</h4>
	287	+ <p>Use the widget’s <strong>CSS</strong> editor to manage your combined CSS (page + blocks) in one place when you need broader styling changes.</p>
	288	+ </div>
	289	+ </div>
	290	+ <div class="ai-tip">
	291	+ <div class="ai-tip-icon">💡</div>
	292	+ <div class="ai-tip-content">
	293	+ <strong>Pro Tip:</strong> For better results, keep instructions specific.
	294	+ </div>
	295	+ </div>
	296	+ </div>
	297	+ </div>
	298	+
199	299	<!-- AI Images -->
200	300	<div class="ai-instruction-card">
201	301	<div class="ai-instruction-header">
202	302	<div class="ai-instruction-icon">
		@@ -229,10 +329,9 @@
229	329	</div>
230	330	<div class="ai-tip">
231	331	<div class="ai-tip-icon">💡</div>
232	332	<div class="ai-tip-content">
233		- <strong>Pro Tip:</strong> Be specific about style, mood, colors, and composition. Include
234		- details like "professional", "vintage", "minimalist", or "colorful" to get better results.
	333	+ <strong>Pro Tip:</strong> You can select the aspect ratio when generating the image.
235	334	</div>
236	335	</div>
237	336	</div>
238	337	</div>
		@@ -291,14 +390,122 @@
291	390	</div>
292	391	</div>
293	392	</div>
294	393	</div>
295		- </div>
296	394
	395	+ <!-- AI Translation -->
	396	+ <div class="ai-instruction-card">
	397	+ <div class="ai-instruction-header">
	398	+ <div class="ai-instruction-icon">
	399	+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	400	+ <path d="M5 8L12 3L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	401	+ <path d="M9 21V12H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	402	+ <path d="M3 10L12 15L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	403	+ <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	404	+ <path d="M8 7L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	405	+ </svg>
	406	+ </div>
	407	+ <div class="ai-instruction-title">
	408	+ <h3>5. Translating Pages with AI</h3>
	409	+ <p>Automatically translate your content into multiple languages</p>
	410	+ </div>
	411	+ </div>
	412	+ <div class="ai-instruction-content">
	413	+ <div class="ai-step">
	414	+ <div class="ai-step-number">1</div>
	415	+ <div class="ai-step-content">
	416	+ <h4>Access Translation Feature</h4>
	417	+ <p>In the WordPress admin, go to your posts or pages list. You'll find a "✨ Translate with AI" link in the row actions for each post or page</p>
	418	+ </div>
	419	+ </div>
	420	+ <div class="ai-step">
	421	+ <div class="ai-step-number">2</div>
	422	+ <div class="ai-step-content">
	423	+ <h4>Select Target Language</h4>
	424	+ <p>Click "Translate with AI" and a modal will appear. Choose the target language from the dropdown (English, French, Spanish, German, Italian, and more)</p>
	425	+ </div>
	426	+ </div>
	427	+ <div class="ai-step">
	428	+ <div class="ai-step-number">3</div>
	429	+ <div class="ai-step-content">
	430	+ <h4>AI Translation Process</h4>
	431	+ <p>Click "Translate" and AI will automatically translate the page title, meta description, and all content blocks while preserving the structure and formatting</p>
	432	+ </div>
	433	+ </div>
	434	+ <div class="ai-step">
	435	+ <div class="ai-step-number">4</div>
	436	+ <div class="ai-step-content">
	437	+ <h4>Review and Publish</h4>
	438	+ <p>A new draft page will be created with the translated content. Review it, make any necessary edits, and publish when ready</p>
	439	+ </div>
	440	+ </div>
	441	+ <div class="ai-tip">
	442	+ <div class="ai-tip-icon">💡</div>
	443	+ <div class="ai-tip-content">
	444	+ <strong>Pro Tip:</strong> Translated pages are automatically linked together. Use the Language Switcher block on your frontend to let visitors switch between languages. You can also translate headers and footers from the Site Editor by clicking the "Translate with AI" button in the bottom-right corner.
	445	+ </div>
	446	+ </div>
	447	+ </div>
	448	+ </div>
	449	+
	450	+ <!-- Site Copilot -->
	451	+ <!-- <div class="ai-instruction-card">
	452	+ <div class="ai-instruction-header">
	453	+ <div class="ai-instruction-icon">
	454	+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	455	+ <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	456	+ <path d="M8 9H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	457	+ <path d="M8 13H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
	458	+ </svg>
	459	+ </div>
	460	+ <div class="ai-instruction-title">
	461	+ <h3>6. Site Copilot - AI Assistant for WordPress</h3>
	462	+ <p>Manage your WordPress site through natural language conversations</p>
	463	+ </div>
	464	+ </div>
	465	+ <div class="ai-instruction-content">
	466	+ <div class="ai-step">
	467	+ <div class="ai-step-number">1</div>
	468	+ <div class="ai-step-content">
	469	+ <h4>Access Site Copilot</h4>
	470	+ <p>Navigate to <strong>AI Builder → Site Copilot</strong> in your WordPress admin menu. This opens a ChatGPT-like interface where you can interact with your WordPress site</p>
	471	+ </div>
	472	+ </div>
	473	+ <div class="ai-step">
	474	+ <div class="ai-step-number">2</div>
	475	+ <div class="ai-step-content">
	476	+ <h4>Ask Questions or Give Commands</h4>
	477	+ <p>Type natural language requests like "List my recent posts", "Show all pages", "List categories", "Update post #123 title to 'New Title'", or "Show pending comments". Site Copilot understands context and can perform complex operations</p>
	478	+ </div>
	479	+ </div>
	480	+ <div class="ai-step">
	481	+ <div class="ai-step-number">3</div>
	482	+ <div class="ai-step-content">
	483	+ <h4>Watch Real-Time Execution</h4>
	484	+ <p>When Site Copilot needs to use WordPress tools, you'll see "Executing: [tool name]" messages appear in real-time. Once complete, they change to "Executed: [tool name]" with a checkmark</p>
	485	+ </div>
	486	+ </div>
	487	+ <div class="ai-step">
	488	+ <div class="ai-step-number">4</div>
	489	+ <div class="ai-step-content">
	490	+ <h4>Manage API Access (Settings Tab)</h4>
	491	+ <p>Click the "Settings" tab to control which WordPress REST API routes Site Copilot can access. Search for routes, enable/disable them by namespace, and ensure only safe operations are allowed. This gives you fine-grained control over what the AI can do</p>
	492	+ </div>
	493	+ </div>
	494	+ <div class="ai-tip">
	495	+ <div class="ai-tip-icon">💡</div>
	496	+ <div class="ai-tip-content">
	497	+ <strong>Pro Tip:</strong> Site Copilot is perfect for content management tasks, but for creating beautifully designed pages, use the AI Page Creator chat widget (bottom-left corner when editing a page). Ask "what can you do?" to see all available capabilities.
	498	+ </div>
	499	+ </div>
	500	+ </div>
	501	+ </div>
	502	+ </div> -->
	503	+
297	504	<!-- Getting Started CTA -->
298	505	<div class="ai-cta-section">
299	506	<div class="ai-cta-content">
300		- <h2>Ready to Get Started?</h2>
	507	+ <h2 style="color: #fff;">Ready to Get Started?</h2>
301	508	<p>Start creating amazing content with AI Builder today</p>
302	509	<div class="ai-cta-buttons">
303	510	<button type="button" class="ai-primary-btn"
304	511	onclick="window.location.href='<?php echo esc_url(admin_url('post-new.php')); ?>'">