| 1 |
<?php if (function_exists('aibui_render_onboarding_blocks')) { aibui_render_onboarding_blocks(); } ?> |
| 2 |
|
| 3 |
<div class="ai-tutorial-container ai-fade-in"> |
| 4 |
<!-- Header --> |
| 5 |
<div class="ai-tutorial-header"> |
| 6 |
<h1>AI Builder Tutorial</h1> |
| 7 |
<p>Learn how to create amazing content with AI-powered WordPress blocks</p> |
| 8 |
</div> |
| 9 |
|
| 10 |
<!-- Video Section --> |
| 11 |
<div class="ai-video-section"> |
| 12 |
<div class="ai-video-container"> |
| 13 |
<div class="ai-video-wrapper"> |
| 14 |
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/cn03BDUmhjo" frameborder="0" |
| 15 |
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| 16 |
allowfullscreen> |
| 17 |
</iframe> |
| 18 |
</div> |
| 19 |
</div> |
| 20 |
<div class="ai-video-info"> |
| 21 |
<h3>Complete AI Builder Walkthrough</h3> |
| 22 |
<p>Watch this comprehensive tutorial to master all AI Builder features</p> |
| 23 |
</div> |
| 24 |
</div> |
| 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 |
|
| 47 |
<!-- Features Overview --> |
| 48 |
<div class="ai-features-overview"> |
| 49 |
<div class="ai-section-header"> |
| 50 |
<h2>Key Features</h2> |
| 51 |
<p>Discover the powerful AI capabilities integrated into WordPress</p> |
| 52 |
</div> |
| 53 |
|
| 54 |
<div class="ai-features-grid"> |
| 55 |
<div class="ai-feature-card"> |
| 56 |
<div class="ai-feature-icon"> |
| 57 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 58 |
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" |
| 59 |
stroke-linejoin="round" /> |
| 60 |
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 61 |
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 62 |
</svg> |
| 63 |
</div> |
| 64 |
<h3>AI-Powered Pages</h3> |
| 65 |
<p>Generate complete WordPress pages with AI using simple prompts</p> |
| 66 |
</div> |
| 67 |
|
| 68 |
<div class="ai-feature-card"> |
| 69 |
<div class="ai-feature-icon"> |
| 70 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 71 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 72 |
<line x1="9" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" /> |
| 73 |
<line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" /> |
| 74 |
<line x1="9" y1="15" x2="13" y2="15" stroke="currentColor" stroke-width="2" /> |
| 75 |
</svg> |
| 76 |
</div> |
| 77 |
<h3>Smart Blocks</h3> |
| 78 |
<p>Create custom Gutenberg blocks with AI-generated content</p> |
| 79 |
</div> |
| 80 |
|
| 81 |
<div class="ai-feature-card"> |
| 82 |
<div class="ai-feature-icon"> |
| 83 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 84 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 85 |
<circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2" /> |
| 86 |
<path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 87 |
stroke-linejoin="round" /> |
| 88 |
</svg> |
| 89 |
</div> |
| 90 |
<h3>AI Image Generation</h3> |
| 91 |
<p>Generate stunning images from text descriptions</p> |
| 92 |
</div> |
| 93 |
|
| 94 |
<div class="ai-feature-card"> |
| 95 |
<div class="ai-feature-icon"> |
| 96 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 97 |
<path |
| 98 |
d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" |
| 99 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 100 |
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 101 |
stroke-linejoin="round" /> |
| 102 |
<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 103 |
stroke-linejoin="round" /> |
| 104 |
<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 105 |
stroke-linejoin="round" /> |
| 106 |
<path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 107 |
stroke-linejoin="round" /> |
| 108 |
</svg> |
| 109 |
</div> |
| 110 |
<h3>AI Text Generation</h3> |
| 111 |
<p>Create compelling text content with AI assistance</p> |
| 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> --> |
| 139 |
</div> |
| 140 |
</div> |
| 141 |
|
| 142 |
<!-- Detailed Instructions --> |
| 143 |
<div class="ai-instructions-section"> |
| 144 |
<div class="ai-section-header"> |
| 145 |
<h2>How to Use AI Builder</h2> |
| 146 |
<p>Step-by-step guide to master each feature</p> |
| 147 |
</div> |
| 148 |
|
| 149 |
<!-- AI Pages --> |
| 150 |
<div class="ai-instruction-card"> |
| 151 |
<div class="ai-instruction-header"> |
| 152 |
<div class="ai-instruction-icon"> |
| 153 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 154 |
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" |
| 155 |
stroke-linejoin="round" /> |
| 156 |
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 157 |
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 158 |
</svg> |
| 159 |
</div> |
| 160 |
<div class="ai-instruction-title"> |
| 161 |
<h3>1. Creating AI-Powered Pages</h3> |
| 162 |
<p>Generate complete WordPress pages with AI</p> |
| 163 |
</div> |
| 164 |
</div> |
| 165 |
<div class="ai-instruction-content"> |
| 166 |
<div class="ai-step"> |
| 167 |
<div class="ai-step-number">1</div> |
| 168 |
<div class="ai-step-content"> |
| 169 |
<h4>Access the Chat Widget</h4> |
| 170 |
<p>Look for the chat widget in the bottom-left corner of your WordPress editor</p> |
| 171 |
</div> |
| 172 |
</div> |
| 173 |
<div class="ai-step"> |
| 174 |
<div class="ai-step-number">2</div> |
| 175 |
<div class="ai-step-content"> |
| 176 |
<h4>Describe Your Page</h4> |
| 177 |
<p>Enter a detailed prompt describing the page you want to create. Be specific about the |
| 178 |
content, style, and purpose</p> |
| 179 |
</div> |
| 180 |
</div> |
| 181 |
<div class="ai-step"> |
| 182 |
<div class="ai-step-number">3</div> |
| 183 |
<div class="ai-step-content"> |
| 184 |
<h4>Generate Content</h4> |
| 185 |
<p>Click generate and watch as AI generates complete page content with appropriate Gutenberg |
| 186 |
blocks |
| 187 |
</p> |
| 188 |
</div> |
| 189 |
</div> |
| 190 |
<div class="ai-tip"> |
| 191 |
<div class="ai-tip-icon">💡</div> |
| 192 |
<div class="ai-tip-content"> |
| 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). |
| 194 |
</div> |
| 195 |
</div> |
| 196 |
</div> |
| 197 |
</div> |
| 198 |
|
| 199 |
<!-- AI Blocks --> |
| 200 |
<div class="ai-instruction-card"> |
| 201 |
<div class="ai-instruction-header"> |
| 202 |
<div class="ai-instruction-icon"> |
| 203 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 204 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 205 |
<line x1="9" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" /> |
| 206 |
<line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" /> |
| 207 |
<line x1="9" y1="15" x2="13" y2="15" stroke="currentColor" stroke-width="2" /> |
| 208 |
</svg> |
| 209 |
</div> |
| 210 |
<div class="ai-instruction-title"> |
| 211 |
<h3>2. Creating AI Blocks</h3> |
| 212 |
<p>Generate custom Gutenberg blocks with AI</p> |
| 213 |
</div> |
| 214 |
</div> |
| 215 |
<div class="ai-instruction-content"> |
| 216 |
<div class="ai-step"> |
| 217 |
<div class="ai-step-number">1</div> |
| 218 |
<div class="ai-step-content"> |
| 219 |
<h4>Add AI Block</h4> |
| 220 |
<p>In the Gutenberg editor, click the "+" button and search for "AI Block"</p> |
| 221 |
</div> |
| 222 |
</div> |
| 223 |
<div class="ai-step"> |
| 224 |
<div class="ai-step-number">2</div> |
| 225 |
<div class="ai-step-content"> |
| 226 |
<h4>Configure the Block</h4> |
| 227 |
<p>In the block settings panel, find the "AI Description" field</p> |
| 228 |
</div> |
| 229 |
</div> |
| 230 |
<div class="ai-step"> |
| 231 |
<div class="ai-step-number">3</div> |
| 232 |
<div class="ai-step-content"> |
| 233 |
<h4>Describe Your Content</h4> |
| 234 |
<p>Enter a detailed description of the content you want the AI to generate for this block</p> |
| 235 |
</div> |
| 236 |
</div> |
| 237 |
<div class="ai-tip"> |
| 238 |
<div class="ai-tip-icon">💡</div> |
| 239 |
<div class="ai-tip-content"> |
| 240 |
<strong>Pro Tip:</strong>AI blocks are perfect for adding content in a specific spot while keeping the rest of the page intact. |
| 241 |
</div> |
| 242 |
</div> |
| 243 |
</div> |
| 244 |
</div> |
| 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 |
|
| 299 |
<!-- AI Images --> |
| 300 |
<div class="ai-instruction-card"> |
| 301 |
<div class="ai-instruction-header"> |
| 302 |
<div class="ai-instruction-icon"> |
| 303 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 304 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 305 |
<circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2" /> |
| 306 |
<path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 307 |
stroke-linejoin="round" /> |
| 308 |
</svg> |
| 309 |
</div> |
| 310 |
<div class="ai-instruction-title"> |
| 311 |
<h3>3. Generating AI Images</h3> |
| 312 |
<p>Create stunning visuals from text descriptions</p> |
| 313 |
</div> |
| 314 |
</div> |
| 315 |
<div class="ai-instruction-content"> |
| 316 |
<div class="ai-step"> |
| 317 |
<div class="ai-step-number">1</div> |
| 318 |
<div class="ai-step-content"> |
| 319 |
<h4>Add AI Image Block</h4> |
| 320 |
<p>Search for "AI Image" in the Gutenberg block library</p> |
| 321 |
</div> |
| 322 |
</div> |
| 323 |
<div class="ai-step"> |
| 324 |
<div class="ai-step-number">2</div> |
| 325 |
<div class="ai-step-content"> |
| 326 |
<h4>Describe Your Image</h4> |
| 327 |
<p>In the block settings, enter a detailed description of the image you want to generate</p> |
| 328 |
</div> |
| 329 |
</div> |
| 330 |
<div class="ai-tip"> |
| 331 |
<div class="ai-tip-icon">💡</div> |
| 332 |
<div class="ai-tip-content"> |
| 333 |
<strong>Pro Tip:</strong> You can select the aspect ratio when generating the image. |
| 334 |
</div> |
| 335 |
</div> |
| 336 |
</div> |
| 337 |
</div> |
| 338 |
|
| 339 |
<!-- AI Text --> |
| 340 |
<div class="ai-instruction-card"> |
| 341 |
<div class="ai-instruction-header"> |
| 342 |
<div class="ai-instruction-icon"> |
| 343 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 344 |
<path |
| 345 |
d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" |
| 346 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 347 |
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 348 |
stroke-linejoin="round" /> |
| 349 |
<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 350 |
stroke-linejoin="round" /> |
| 351 |
<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 352 |
stroke-linejoin="round" /> |
| 353 |
<path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 354 |
stroke-linejoin="round" /> |
| 355 |
</svg> |
| 356 |
</div> |
| 357 |
<div class="ai-instruction-title"> |
| 358 |
<h3>4. Creating AI Text Content</h3> |
| 359 |
<p>Generate compelling text with AI assistance</p> |
| 360 |
</div> |
| 361 |
</div> |
| 362 |
<div class="ai-instruction-content"> |
| 363 |
<div class="ai-step"> |
| 364 |
<div class="ai-step-number">1</div> |
| 365 |
<div class="ai-step-content"> |
| 366 |
<h4>Add AI Text Block</h4> |
| 367 |
<p>Search for "AI Text" in the Gutenberg block library</p> |
| 368 |
</div> |
| 369 |
</div> |
| 370 |
<div class="ai-step"> |
| 371 |
<div class="ai-step-number">2</div> |
| 372 |
<div class="ai-step-content"> |
| 373 |
<h4>Define Your Text</h4> |
| 374 |
<p>In the block settings, describe the type of text you want to generate (blog post, product |
| 375 |
description, etc.)</p> |
| 376 |
</div> |
| 377 |
</div> |
| 378 |
<div class="ai-step"> |
| 379 |
<div class="ai-step-number">3</div> |
| 380 |
<div class="ai-step-content"> |
| 381 |
<h4>Generate and Edit</h4> |
| 382 |
<p>Click generate and edit the AI-created text to match your exact needs</p> |
| 383 |
</div> |
| 384 |
</div> |
| 385 |
<div class="ai-tip"> |
| 386 |
<div class="ai-tip-icon">💡</div> |
| 387 |
<div class="ai-tip-content"> |
| 388 |
<strong>Pro Tip:</strong> Specify the tone (professional, casual, friendly), length, and target |
| 389 |
audience in your description for better results. |
| 390 |
</div> |
| 391 |
</div> |
| 392 |
</div> |
| 393 |
</div> |
| 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 |
|
| 504 |
<!-- Getting Started CTA --> |
| 505 |
<div class="ai-cta-section"> |
| 506 |
<div class="ai-cta-content"> |
| 507 |
<h2 style="color: #fff;">Ready to Get Started?</h2> |
| 508 |
<p>Start creating amazing content with AI Builder today</p> |
| 509 |
<div class="ai-cta-buttons"> |
| 510 |
<button type="button" class="ai-primary-btn" |
| 511 |
onclick="window.location.href='<?php echo esc_url(admin_url('post-new.php')); ?>'"> |
| 512 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 513 |
<path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 514 |
stroke-linejoin="round" /> |
| 515 |
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 516 |
stroke-linejoin="round" /> |
| 517 |
</svg> |
| 518 |
Create New Page |
| 519 |
</button> |
| 520 |
<button type="button" class="ai-secondary-btn" |
| 521 |
onclick="window.location.href='<?php echo esc_url(admin_url('admin.php?page=aibui-credits')); ?>'"> |
| 522 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 523 |
<path |
| 524 |
d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" |
| 525 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 526 |
<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 527 |
stroke-linejoin="round" /> |
| 528 |
</svg> |
| 529 |
Manage Credits |
| 530 |
</button> |
| 531 |
</div> |
| 532 |
</div> |
| 533 |
</div> |
| 534 |
</div> |
