← All changes | admin/pages/tuto.php +146 -8 2.2.3 → trunk 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/5lsACR1LdV0" 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>
		@@ -100,8 +123,20 @@
100	123	</div>
101	124	<h3>AI Translation</h3>
102	125	<p>Translate your pages and posts into multiple languages with AI</p>
103	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> -->
104	139	</div>
105	140	</div>
106	141
107	142	<!-- Detailed Instructions -->
		@@ -154,10 +189,9 @@
154	189	</div>
155	190	<div class="ai-tip">
156	191	<div class="ai-tip-icon">💡</div>
157	192	<div class="ai-tip-content">
158		- <strong>Pro Tip:</strong> The more detailed your prompt, the better the AI-generated content
159		- 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).
160	194	</div>
161	195	</div>
162	196	</div>
163	197	</div>
		@@ -202,15 +236,67 @@
202	236	</div>
203	237	<div class="ai-tip">
204	238	<div class="ai-tip-icon">💡</div>
205	239	<div class="ai-tip-content">
206		- <strong>Pro Tip:</strong> AI Blocks are perfect for creating testimonials, product descriptions,
207		- 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.
208	241	</div>
209	242	</div>
210	243	</div>
211	244	</div>
212	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	+
213	299	<!-- AI Images -->
214	300	<div class="ai-instruction-card">
215	301	<div class="ai-instruction-header">
216	302	<div class="ai-instruction-icon">
		@@ -243,10 +329,9 @@
243	329	</div>
244	330	<div class="ai-tip">
245	331	<div class="ai-tip-icon">💡</div>
246	332	<div class="ai-tip-content">
247		- <strong>Pro Tip:</strong> Be specific about style, mood, colors, and composition. Include
248		- 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.
249	334	</div>
250	335	</div>
251	336	</div>
252	337	</div>
		@@ -360,9 +445,62 @@
360	445	</div>
361	446	</div>
362	447	</div>
363	448	</div>
364		- </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> -->
365	503
366	504	<!-- Getting Started CTA -->
367	505	<div class="ai-cta-section">
368	506	<div class="ai-cta-content">