u003c!DOCTYPE htmlu003enu003chtml lang=u0022enu0022u003enu003cheadu003en u003cmeta charset=u0022UTF-8u0022u003en u003cmeta name=u0022viewportu0022 content=u0022width=device-width, initial-scale=1.0u0022u003en u003ctitleu003eInteractive Guide to Divi Editsu003c/titleu003en u003cscript src=u0022https://cdn.tailwindcss.comu0022u003eu003c/scriptu003en u003clink rel=u0022preconnectu0022 href=u0022https://fonts.googleapis.comu0022u003en u003clink rel=u0022preconnectu0022 href=u0022https://fonts.gstatic.comu0022 crossoriginu003en u003clink href=u0022https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700u0026display=swapu0022 rel=u0022stylesheetu0022u003en u003c!u002du002d Chosen Palette: Far Side Colors (#FBFFF1, #FF8811, #001D3D, #45B0AE, #04728B) u002du002du003en u003c!u002du002d Application Structure Plan: A task-oriented SPA designed for clients. The structure prioritizes user goals over the report's linear format. It starts with fundamentals (u0022Before You Startu0022), moves to a core interactive grid of common tasks (u0022What do you want to do?u0022), and displays instructions dynamically. This is followed by u0022Pro Tipsu0022 and a u0022Resource Library.u0022 This structure was chosen to be a functional tool, allowing users to quickly find solutions to specific problems, rather than reading a manual, thus enhancing usability and reducing frustration. The addition of u0022Edit Flash Modulesu0022 expands the task-oriented approach to cover common third-party module interactions. u002du002du003en u003c!u002du002d Visualization u0026 Content Choices: n - Report Info: Divi's core structure (Section, Row, Module). Goal: Organize/Inform. Viz: Interactive HTML/CSS diagram with hover tooltips. Justification: More engaging and visually reinforcing than a table. Method: HTML/Tailwind + JS.n - Report Info: Step-by-step edit instructions. Goal: Inform. Viz: Dynamic content area updated on-click. Justification: Prevents information overload by focusing the user on a single task. Method: JS content swapping.n - Report Info: The Save Process. Goal: Inform (Process Flow). Viz: Visual flowchart with icons. Justification: Easier to follow for a multi-step process than a list. Method: HTML/Tailwind.n - Report Info: Resource List. Goal: Organize. Viz: Categorized, clickable cards. Justification: More scannable and user-friendly than a large table. Method: HTML/Tailwind + JS for potential filtering.n - Report Info: Divi Flash Modules. Goal: Inform. Viz: Dynamic content area updated on-click. Justification: Provides specific guidance for common third-party modules, integrating seamlessly into the task-oriented flow. Method: JS content swapping.n - CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. u002du002du003en u003c!u002du002d CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. u002du002du003en u003cstyleu003en body {n font-family: 'Inter', sans-serif;n background-color: #f8f7f4; /* A light neutral background */n color: #3d3d3d;n }n .task-card {n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;n }n .task-card:hover {n transform: translateY(-5px);n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);n }n .active-task {n background-color: #FF8811 !important; /* Orange accent */n color: white !important;n }n .content-fade-in {n animation: fadeIn 0.5s ease-in-out;n }n @keyframes fadeIn {n from { opacity: 0; transform: translateY(10px); }n to { opacity: 1; transform: translateY(0); }n }n .resource-link {n transition: background-color 0.2s ease;n }n .resource-link:hover {n background-color: #FBFFF1; /* Off-white from palette for hover */n }n u003c/styleu003enu003c/headu003enu003cbody class=u0022antialiasedu0022u003enn u003cdiv class=u0022max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12u0022u003en n u003cheader class=u0022text-center mb-16u0022u003en u003ch1 class=u0022text-4xl md:text-5xl font-bold text-[#001D3D] mb-4u0022u003eYour Interactive Guide to Diviu003c/h1u003en u003cp class=u0022text-lg text-gray-600 max-w-3xl mx-autou0022u003eWelcome! This guide is designed to help you make common, minor edits to your website with confidence. Select a task below to get started.u003c/pu003en u003c/headeru003enn u003cmainu003en u003csection id=u0022before-you-startu0022 class=u0022mb-16u0022u003en u003ch2 class=u0022text-3xl font-bold text-center mb-10 text-[#001D3D]u0022u003eBefore You Start: The Fundamentalsu003c/h2u003en u003cdiv class=u0022grid md:grid-cols-1 lg:grid-cols-3 gap-8u0022u003en n u003cdiv class=u0022bg-white p-6 rounded-lg shadow-smu0022u003en u003ch3 class=u0022font-bold text-xl mb-3 text-[#04728B]u0022u003e1. Access u0026 Enableu003c/h3u003en u003cp class=u0022mb-4u0022u003eEvery edit starts here. You need to log in to your site and turn on the Divi Visual Builder to see the editing tools.u003c/pu003en u003col class=u0022list-decimal list-inside space-y-2 text-gray-700u0022u003en u003cliu003eGo to u003cstrongu003eyoursite.com/wp-adminu003c/strongu003e to log in.u003c/liu003en u003cliu003eNavigate to the page you want to edit.u003c/liu003en u003cliu003eClick u0022u003cstrongu003eEnable Visual Builderu003c/strongu003eu0022 in the top bar.u003c/liu003en u003c/olu003en u003c/divu003enn u003cdiv class=u0022bg-white p-6 rounded-lg shadow-smu0022u003en u003ch3 class=u0022font-bold text-xl mb-3 text-[#04728B]u0022u003e2. Divi's Structureu003c/h3u003en u003cp class=u0022mb-4u0022u003eDivi uses a color-coded structure to organize content. Understanding this is key to editing the right thing.u003c/pu003en u003cdiv class=u0022space-y-2u0022u003en u003cdiv class=u0022p-3 border-2 border-[#04728B] bg-[#F1FCFD] rounded-mdu0022u003en u003cstrong class=u0022text-[#001D3D]u0022u003eSections (Dark Teal)u003c/strongu003e: The largest containers. They hold everything else.n u003c/divu003en u003cdiv class=u0022ml-4 p-3 border-2 border-[#45B0AE] bg-[#F3FCFC] rounded-mdu0022u003en u003cstrong class=u0022text-[#001D3D]u0022u003eRows (Teal)u003c/strongu003e: Sit inside Sections and create columns for your content.n u003c/divu003en u003cdiv class=u0022ml-8 p-3 border-2 border-gray-400 bg-gray-50 rounded-mdu0022u003en u003cstrong class=u0022text-gray-800u0022u003eModules (Grey)u003c/strongu003e: The actual content, like text, images, or buttons.n u003c/divu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022bg-white p-6 rounded-lg shadow-smu0022u003en u003ch3 class=u0022font-bold text-xl mb-3 text-[#04728B]u0022u003e3. The Critical Save Processu003c/h3u003en u003cp class=u0022mb-4u0022u003eYour changes aren't live until you save them correctly. Follow these steps every time.u003c/pu003en u003cdiv class=u0022flex items-center space-x-4u0022u003en u003cdiv class=u0022text-centeru0022u003en u003cdiv class=u0022w-12 h-12 bg-green-500 text-white flex items-center justify-center rounded-full font-bold text-lgu0022u003e✓u003c/divu003en u003cp class=u0022text-xs mt-1u0022u003eConfirmu003cbru003eElementu003c/pu003en u003c/divu003en u003cdiv class=u0022text-gray-400 font-bold text-2xlu0022u003e→u003c/divu003en u003cdiv class=u0022text-centeru0022u003en u003cdiv class=u0022w-12 h-12 bg-purple-500 text-white flex items-center justify-center rounded-full font-bold text-lgu0022u003e…u003c/divu003en u003cp class=u0022text-xs mt-1u0022u003eExpandu003cbru003eMenuu003c/pu003en u003c/divu003en u003cdiv class=u0022text-gray-400 font-bold text-2xlu0022u003e→u003c/divu003en u003cdiv class=u0022text-centeru0022u003en u003cdiv class=u0022w-12 h-12 bg-[#001D3D] text-white flex items-center justify-center rounded-lg font-boldu0022u003eSaveu003c/divu003en u003cp class=u0022text-xs mt-1u0022u003eSaveu003cbru003ePageu003c/pu003en u003c/divu003en u003c/divu003en u003c/divu003enn u003c/divu003en u003c/sectionu003enn u003csection id=u0022tasksu0022 class=u0022mb-16u0022u003en u003ch2 class=u0022text-3xl font-bold text-center mb-10 text-[#001D3D]u0022u003eWhat do you want to do today?u003c/h2u003en u003cdiv id=u0022task-gridu0022 class=u0022grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6u0022u003en u003cbutton data-task=u0022textu0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e✍️ Edit Textu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eChange headlines, paragraphs, and other written content.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022imageu0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e🖼️ Replace an Imageu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eSwap out existing photos and graphics with new ones.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022linku0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e🔗 Manage Linksu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eUpdate URLs for buttons or text links.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022coloru0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e🎨 Adjust Colorsu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eChange the color of text, backgrounds, or buttons.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022structureu0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e🏗️ Add or Remove Contentu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eAdd, delete, or duplicate sections and modules.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022flash-modulesu0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e⚡ Edit Flash Modulesu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eModify content within specialized third-party modules.u003c/pu003en u003c/buttonu003en u003cbutton data-task=u0022safetyu0022 class=u0022task-card bg-white p-6 rounded-lg shadow-sm text-left cursor-pointeru0022u003en u003ch3 class=u0022font-bold text-xl mb-2u0022u003e🛡️ Pro Tips u0026 Safetyu003c/h3u003en u003cp class=u0022text-gray-600u0022u003eLearn best practices and when to call for help.u003c/pu003en u003c/buttonu003en u003c/divu003en u003c/sectionu003enn u003csection id=u0022instructionsu0022 class=u0022bg-white p-8 rounded-lg shadow-lg min-h-[300px]u0022u003en u003cdiv id=u0022instruction-contentu0022 class=u0022prose max-w-noneu0022u003en u003cdiv class=u0022text-center py-20u0022u003en u003ch3 class=u0022text-2xl font-semibold text-gray-700u0022u003eSelect a task above to see the instructions.u003c/h3u003en u003cp class=u0022text-gray-500 mt-2u0022u003eYour step-by-step guide will appear right here.u003c/pu003en u003c/divu003en u003c/divu003en u003c/sectionu003en n u003csection id=u0022resourcesu0022 class=u0022mt-16u0022u003en u003ch2 class=u0022text-3xl font-bold text-center mb-10 text-[#001D3D]u0022u003eCurated Resource Libraryu003c/h2u003en u003cp class=u0022text-lg text-gray-600 max-w-3xl mx-auto text-center mb-12u0022u003eFor deeper learning, explore these hand-picked guides and tutorials from the experts at Elegant Themes and the Divi community. These are great for when you want to learn more, but remember to contact us for any complex changes.u003c/pu003en u003cdiv class=u0022grid md:grid-cols-1 lg:grid-cols-3 gap-8u0022u003en u003cdivu003en u003ch3 class=u0022font-semibold text-xl mb-4 text-[#04728B]u0022u003eOfficial Documentationu003c/h3u003en u003cdiv class=u0022bg-white rounded-lg shadow-sm divide-y divide-gray-200u0022u003en u003ca href=u0022https://www.elegantthemes.com/documentation/divi/text/u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eThe Divi Text Moduleu003c/au003en u003ca href=u0022https://help.elegantthemes.com/en/articles/8661797-the-divi-color-management-systemu0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eThe Divi Color Management Systemu003c/au003en u003ca href=u0022https://www.elegantthemes.com/documentation/divi/theme-options/u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eUsing The Divi Theme Optionsu003c/au003en u003c/divu003en u003c/divu003en u003cdivu003en u003ch3 class=u0022font-semibold text-xl mb-4 text-[#04728B]u0022u003eRecommended Videosu003c/h3u003en u003cdiv class=u0022bg-white rounded-lg shadow-sm divide-y divide-gray-200u0022u003en u003ca href=u0022https://www.youtube.com/watch?v=jXsB0uRMhDMu0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eChange Text Content u0026 Coloru003c/au003en u003ca href=u0022https://www.youtube.com/watch?v=_bYoBz5WaJgu0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eReplace an Imageu003c/au003en u003ca href=u0022https://www.youtube.com/playlist?list=PL1wFSWLYg_IYisPz338MLUANJtu7xQRK_u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eJosh Hall's Divi Tutorialsu003c/au003en u003c/divu003en u003c/divu003en u003cdivu003en u003ch3 class=u0022font-semibold text-xl mb-4 text-[#04728B]u0022u003eHelpful Articlesu003c/h3u003en u003cdiv class=u0022bg-white rounded-lg shadow-sm divide-y divide-gray-200u0022u003en u003ca href=u0022https://www.wppagebuilders.com/divi-builder-section/u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eHow to Work with a Sectionu003c/au003en u003ca href=u0022https://www.markhendriksen.com/ultimate-guide-for-divi-fonts/u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eUltimate Guide For Divi Fontsu003c/au003en u003ca href=u0022https://www.elegantthemes.com/documentation/divi/builder/u0022 target=u0022_blanku0022 class=u0022resource-link block p-4 text-[#001D3D]u0022u003eHow to Delete and Move Modulesu003c/au003en u003c/divu003en u003c/divu003en u003c/divu003en u003c/sectionu003enn u003c/mainu003enn u003cfooter class=u0022text-center mt-20 pt-8 border-t border-gray-200u0022u003en u003cp class=u0022text-gray-500u0022u003eu0026copy; 2025 Your Web Agency. Need help with something more complex? u003ca href=u0022#u0022 class=u0022text-[#001D3D] hover:underlineu0022u003eContact usu003c/au003e.u003c/pu003en u003c/footeru003enn u003c/divu003enn u003cscriptu003en const instructionData = {n text: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Edit Text Contentu003c/h3u003en u003cp class=u0022mb-6u0022u003eUpdating text is one of the most common edits. Divi makes it easy to change what the text says and how it looks.u003c/pu003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eLocate the Text Module:u003c/strongu003e Hover your mouse over the text you want to edit. A grey box will appear. Click the u003cstrongu003egear icon (⚙️)u003c/strongu003e to open the settings.u003c/liu003en u003cliu003eu003cstrongu003eEdit the Content:u003c/strongu003e In the pop-up window, you'll see a u0022Contentu0022 tab with a text editor. You can type your new text here. Use the toolbar for basic formatting like u003cstrongu003eboldu003c/strongu003e or u003cemu003eitalicsu003c/emu003e.u003c/liu003en u003cliu003eu003cstrongu003eChange the Design (Optional):u003c/strongu003e Click the u0022Designu0022 tab to change fonts, colors, sizes, and spacing. Expand the u0022Textu0022 or u0022Heading Textu0022 sections to see all options.u003c/liu003en u003cliu003eu003cstrongu003eSave Your Changes:u003c/strongu003e Remember the 3-step save! Click the u003cstrongu003egreen checkmark (✓)u003c/strongu003e to close the module settings, then click the u003cstrongu003epurple circle (...)u003c/strongu003e to expand the main menu, and finally click the green u003cstrongu003eu0022Saveu0022u003c/strongu003e button.u003c/liu003en u003c/olu003en `,n image: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Replace an Imageu003c/h3u003en u003cp class=u0022mb-6u0022u003eSwapping out photos is a great way to keep your site fresh. Here’s how to do it.u003c/pu003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eLocate the Image Module:u003c/strongu003e Hover over the image you want to replace. Click the u003cstrongu003egear icon (⚙️)u003c/strongu003e that appears in the grey module controls.u003c/liu003en u003cliu003eu003cstrongu003eOpen Image Settings:u003c/strongu003e A settings pop-up will appear. Click on the image preview to open the Media Library.u003c/liu003en u003cliu003eu003cstrongu003eSelect a New Image:u003c/strongu003e You can either choose an existing image from the u0022Media Libraryu0022 tab or upload a new one from your computer using the u0022Upload Filesu0022 tab.u003c/liu003en u003cliu003eu003cstrongu003eInsert the Image:u003c/strongu003e After selecting or uploading your image, click the blue u0022Upload an Imageu0022 button in the bottom right.u003c/liu003en u003cliu003eu003cstrongu003eSave Your Changes:u003c/strongu003e Click the u003cstrongu003egreen checkmark (✓)u003c/strongu003e, then the u003cstrongu003epurple circle (...)u003c/strongu003e, and finally the green u003cstrongu003eu0022Saveu0022u003c/strongu003e button.u003c/liu003en u003c/olu003en u003cp class=u0022mt-6 p-4 bg-[#FFF9F1] border-l-4 border-[#FF8811] text-[#FF8811] rounded-r-lgu0022u003eu003cstrongu003eTip:u003c/strongu003e For best results, make sure your images are optimized for the web before uploading. Large images can slow down your site!u003c/pu003en `,n link: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Manage Linksu003c/h3u003en u003cp class=u0022mb-6u0022u003eWhether it's a link in a paragraph or a call-to-action button, keeping your links up-to-date is crucial.u003c/pu003en u003ch4 class=u0022font-bold text-lg mb-2 mt-4u0022u003eFor Text Links:u003c/h4u003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eHighlight the Text:u003c/strongu003e In the text module, highlight the words you want to turn into a link.u003c/liu003en u003cliu003eu003cstrongu003eClick the Link Icon:u003c/strongu003e A small toolbar will appear. Click the u003cstrongu003elink icon (🔗)u003c/strongu003e.u003c/liu003en u003cliu003eu003cstrongu003eEnter the URL:u003c/strongu003e Type or paste the full web address (e.g., https://example.com) into the field and press Enter or the apply button.u003c/liu003en u003c/olu003en u003ch4 class=u0022font-bold text-lg mb-2 mt-6u0022u003eFor Button Links:u003c/h4u003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eOpen Button Settings:u003c/strongu003e Hover over the button and click the u003cstrongu003egear icon (⚙️)u003c/strongu003e.u003c/liu003en u003cliu003eu003cstrongu003eAdd the URL:u003c/strongu003e In the u0022Contentu0022 tab, find the u0022Linku0022 section and enter your URL in the u0022Button URLu0022 field.u003c/liu003en u003cliu003eu003cstrongu003eSave Your Changes:u003c/strongu003e As always, click the u003cstrongu003egreen checkmark (✓)u003c/strongu003e, then the u003cstrongu003epurple circle (...)u003c/strongu003e, and finally the green u003cstrongu003eu0022Saveu0022u003c/strongu003e button.u003c/liu003en u003c/olu003en `,n color: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Adjust Colorsu003c/h3u003en u003cp class=u0022mb-6u0022u003eDivi's color management system is powerful. You can change a single element's color or update a color across your entire site.u003c/pu003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eOpen Element Settings:u003c/strongu003e Hover over the element (like a button or text module) and click the u003cstrongu003egear icon (⚙️)u003c/strongu003e.u003c/liu003en u003cliu003eu003cstrongu003eGo to the Design Tab:u003c/strongu003e Navigate to the u0022Designu0022 tab and find the relevant color setting (e.g., u0022Text Coloru0022, u0022Buttonu0022 u003e u0022Background Coloru0022).u003c/liu003en u003cliu003eu003cstrongu003ePick a New Color:u003c/strongu003e Use the color picker to select a new hue. You can use your pre-saved brand colors, or enter a specific hex code.u003c/liu003en u003cliu003eu003cstrongu003eSave Your Changes:u003c/strongu003e Click the u003cstrongu003egreen checkmark (✓)u003c/strongu003e, then the u003cstrongu003epurple circle (...)u003c/strongu003e to expand the main menu, and finally click the green u003cstrongu003eu0022Saveu0022u003c/strongu003e button.u003c/liu003en u003c/olu003en u003cp class=u0022mt-6 p-4 bg-[#F1FCFD] border-l-4 border-[#04728B] text-[#04728B] rounded-r-lgu0022u003eu003cstrongu003ePro Tip:u003c/strongu003e Use u0022Global Colorsu0022 for your brand colors. If you update a Global Color, it will change everywhere on your site automatically! This is a huge time-saver.u003c/pu003en `,n structure: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Add, Remove, u0026 Manage Content Blocksu003c/h3u003en u003cp class=u0022mb-6u0022u003eYou have full control over the layout. You can easily add, delete, duplicate, and move any part of your page.u003c/pu003en u003cul class=u0022list-disc list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eTo Add:u003c/strongu003e Click the u003cstrongu003eplus (+) iconu003c/strongu003e to add a new element. Blue is for Sections, Green for Rows, and Grey for Modules. A library of options will appear for you to choose from.u003c/liu003en u003cliu003eu003cstrongu003eTo Delete:u003c/strongu003e Hover over any element and click the u003cstrongu003etrash can icon (🗑️)u003c/strongu003e to remove it.u003c/liu003en u003cliu003eu003cstrongu003eTo Duplicate:u003c/strongu003e Hover and click the u003cstrongu003eduplicate iconu003c/strongu003e (two overlapping squares) to make an exact copy of any section, row, or module. This is great for keeping styling consistent.u003c/liu003en u003cliu003eu003cstrongu003eTo Move:u003c/strongu003e Hover, then click and hold the u003cstrongu003emove icon (✥)u003c/strongu003e. Drag the element to a new position on the page and release.u003c/liu003en u003c/ulu003en `,n 'flash-modules': `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003eHow to Edit Divi Flash Modules (Third-Party)u003c/h3u003en u003cp class=u0022mb-6u0022u003eDivi Flash modules, or any other third-party modules, extend Divi's functionality. Editing them is very similar to standard Divi modules.u003c/pu003en u003col class=u0022list-decimal list-inside space-y-4u0022u003en u003cliu003eu003cstrongu003eLocate the Flash Module:u003c/strongu003e Hover your mouse over the Flash module you want to edit. Just like standard Divi modules, a grey box will appear. Click the u003cstrongu003egear icon (⚙️)u003c/strongu003e to open its settings.u003c/liu003en u003cliu003eu003cstrongu003eExplore Settings Tabs:u003c/strongu003e Inside the pop-up window, you'll typically find u0022Content,u0022 u0022Design,u0022 and u0022Advancedu0022 tabs.u003c/liu003en u003cliu003eu003cstrongu003eEdit Content:u003c/strongu003e Look for fields related to text, images, links, or other data specific to that Flash module's function within the u0022Contentu0022 tab. These will vary based on the module (e.g., a u0022Team Memberu0022 Flash module might have fields for name, photo, and social links).u003c/liu003en u003cliu003eu003cstrongu003eAdjust Design:u003c/strongu003e Use the u0022Designu0022 tab to change visual aspects like colors, fonts, spacing, and borders, just as you would with a standard Divi module.u003c/liu003en u003cliu003eu003cstrongu003eSave Your Changes:u003c/strongu003e Always remember the 3-step save! Click the u003cstrongu003egreen checkmark (✓)u003c/strongu003e to close the module settings, then click the u003cstrongu003epurple circle (...)u003c/strongu003e to expand the main menu, and finally click the green u003cstrongu003eu0022Saveu0022u003c/strongu003e button.u003c/liu003en u003c/olu003en u003cp class=u0022mt-6 p-4 bg-[#F1FCFD] border-l-4 border-[#04728B] text-[#04728B] rounded-r-lgu0022u003eu003cstrongu003eNote:u003c/strongu003e While the editing process is similar, each third-party module will have unique content fields and design options. Don't hesitate to contact us if you're unsure about a specific Flash module's settings!u003c/pu003en `,n safety: `n u003ch3 class=u0022text-2xl font-bold mb-4u0022u003ePro Tips u0026 When to Call for Helpu003c/h3u003en u003cp class=u0022mb-6u0022u003eEmpowerment is great, but it's also important to know your limits to keep the site safe and functional. Here are some best practices and a guide on when to contact us.u003c/pu003en u003ch4 class=u0022font-bold text-lg mb-2 mt-4u0022u003eAgency Best Practices (We've set this up for you!)u003c/h4u003en u003cul class=u0022list-disc list-inside space-y-2u0022u003en u003cliu003eu003cstrongu003eGlobal Colors:u003c/strongu003e Your brand colors are set up as u0022Globalu0022 for site-wide consistency.u003c/liu003en u003cliu003eu003cstrongu003eLocked Sections:u003c/strongu003e Critical parts of your site may be locked to prevent accidental deletion. You'll see a padlock icon. Click it to unlock if you need to edit, but be careful!u003c/liu003en u003c/ulu003en u003ch4 class=u0022font-bold text-lg mb-2 mt-6u0022u003ePlease Contact Us For:u003c/h4u003en u003cp class=u0022mb-4u0022u003eWhile you can handle the basics, please reach out for more complex tasks to avoid breaking your site. Contact us if you need:u003c/pu003en u003cul class=u0022list-disc list-inside space-y-2 text-red-700u0022u003en u003cliu003eMajor layout changes or creating complex new pages.u003c/liu003en u003cliu003eAnything related to the site's header, footer, or blog post templates.u003c/liu003en u003cliu003eFixing anything that looks broken or isn't working as expected.u003c/liu003en u003cliu003eWebsite performance issues (slowness), security concerns, or error messages.u003c/liu003en u003cliu003eAdding new features or integrating third-party tools.u003c/liu003en u003c/ulu003en `,n };nn const taskGrid = document.getElementById('task-grid');n const instructionContent = document.getElementById('instruction-content');n let currentTaskButton = null;nn taskGrid.addEventListener('click', (e) =u003e {n const taskButton = e.target.closest('.task-card');n if (!taskButton) return;nn const task = taskButton.dataset.task;n if (instructionData[task]) {n n if (currentTaskButton) {n currentTaskButton.classList.remove('active-task', 'bg-[#FF8811]', 'text-white');n }n n taskButton.classList.add('active-task', 'bg-[#FF8811]', 'text-white');n currentTaskButton = taskButton;nn instructionContent.innerHTML = instructionData[task];n instructionContent.classList.remove('content-fade-in');n void instructionContent.offsetWidth; n instructionContent.classList.add('content-fade-in');n n instructionContent.scrollIntoView({ behavior: 'smooth', block: 'start' });n }n });n u003c/scriptu003ennu003c/bodyu003enu003c/htmlu003en