> ## Documentation Index
> Fetch the complete documentation index at: https://docs.t3planet.de/en/latest/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor Guide

> Editor guide for T3 Avatar

After Setup of your Lovely Site follow below steps for making it standalone & versatile.

<Steps>
  <Step title="Step 1">
    Create a standard Page on your TYPO3 setup.
  </Step>

  <Step title="Step 2">
    Make it Root page from TYPO3 page property > Behavior Tab.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Use_as_root.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=0b6adb9f52db0c08624b3fa2ba98c825" alt="ns-theme-t3avatar-editor-guide-makearootpage" width="1907" height="679" data-path="en/latest/EXTAvatar/EditorGuide/images/Use_as_root.webp" />
  </Step>

  <Step title="Step 3">
    Go to TYPO3 Typoscript module & Create a template of your page.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Roottyposcript.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=b3a3589afcf889b65d132db7b6240ac7" alt="ns-theme-t3avatar-editor-guide-CreateTemplate" width="1918" height="654" data-path="en/latest/EXTAvatar/EditorGuide/images/Roottyposcript.webp" />
  </Step>

  <Step title="Step 4">
    Now include all required Extension for that Go to Info/Modify from Template module. Make sure the order of the included extension. First it should be a EXT:Fluid Content Element & atlast EXT:Parent Theme & EXT:Child Theme respectively.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/include_typoscript.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=a3099774e876bfe2177f54d8a314be07" alt="ns-theme-t3avatar-editor-guide-IncludeOrder" width="1600" height="690" data-path="en/latest/EXTAvatar/EditorGuide/images/include_typoscript.webp" />
  </Step>

  <Step title="Step 5">
    Its important to setup home page & main menu id so for that Go to Theme Options > General Tab - here you have to define root page id on the Home Page id & Main menu ID. Next, Its optional to configure all other settings.!

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Theme_main_menu_id.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=66a7d5b6ca7888d789b5a927d77e2d5f" alt="ns-theme-t3avatar-editor-guide-SetupPageID" width="1905" height="490" data-path="en/latest/EXTAvatar/EditorGuide/images/Theme_main_menu_id.webp" />
  </Step>

  <Step title="Step 6">
    Site Configuration > Setup youe website title, identifier and entry point.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Editor_Site_configuration.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=61c029a14d795ddd01e9fdd5a415545a" alt="ns-theme-t3avatar-editor-guide-Site-Configuration" width="1898" height="822" data-path="en/latest/EXTAvatar/EditorGuide/images/Editor_Site_configuration.webp" />
  </Step>

  <Step title="Step 7">
    If you want to your website with multilanguage than Goto Site Configuration > Language Tab > Create New Language. After this, Insert each required details.!

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/editor_language.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=7d7236425be41f387da515a540994c58" alt="ns-theme-t3avatar-editor-guide-MultiLanguage" width="1600" height="708" data-path="en/latest/EXTAvatar/EditorGuide/images/editor_language.webp" />
  </Step>

  <Step title="Step 8">
    Now Go to Page Module > TYPO3 Standard/Root Page > Page Property > Appearance Tab. Select the Backend & frontend Page layout accordingly your webpage layout.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/BE_layout.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=a07a038723210d632975357d67206ff8" alt="ns-theme-t3avatar-editor-guide-PageLayout" width="1600" height="609" data-path="en/latest/EXTAvatar/EditorGuide/images/BE_layout.webp" />
  </Step>

  <Step title="Step 9">
    Heart feature of the Website is a Style. To apply it on your website - Goto Theme Options > Style Tab.

    Here you can configure the Header/Footer Setting, Color Schema, Navigation styles, Hover effect, Menu style, Font style etc.

    Into the General Tab you can Enable & Disable Breadcrumb, Searchbar, Multilanguage Menu, Maintenance Mode, Speed Performance setting & much more.

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Editor_style.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=a55cef302ab1ec708cf3097ddd9d11af" alt="ns-theme-t3avatar-editor-guide-WebsiteStyle" width="1278" height="654" data-path="en/latest/EXTAvatar/EditorGuide/images/Editor_style.webp" />
  </Step>
</Steps>

<Note>
  **How To enable Mega menu on my Website?**

  Answer is, Enable the option from the Styles Tab of Page Property. that's it Now your page having the mega menu.

  <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Enable_Megamenu.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=6f45e1635c1e573509c0c5efacfbc946" alt="ns-theme-t3avatar-editor-guide-MegaMenu" width="1911" height="484" data-path="en/latest/EXTAvatar/EditorGuide/images/Enable_Megamenu.webp" />
</Note>

<Steps>
  <Step title="Step 10">
    Inserting the Container Element & Mask Elements on your webpage.
    You can use the Custom & TYPO3 Default element within the container to provide more flexibility in content area.!

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Container.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=f899c1356a9dd22847cd1dcbacf469fe" alt="ns-theme-t3avatar-editor-guide-ContainerGrid" width="1475" height="593" data-path="en/latest/EXTAvatar/EditorGuide/images/Container.webp" />

    <img src="https://mintcdn.com/t3planet/NWcnd_VcDjGMa-Ri/en/latest/EXTAvatar/EditorGuide/images/Editor_mask.webp?fit=max&auto=format&n=NWcnd_VcDjGMa-Ri&q=85&s=aafa0ac71e0a449b2506b504953da02c" alt="ns-theme-t3avatar-editor-guide-CustomElement" width="1484" height="799" data-path="en/latest/EXTAvatar/EditorGuide/images/Editor_mask.webp" />
  </Step>
</Steps>

<Tip>
  How to easy start; It’s all about we highly recommend to go with our demo-pages [https://demo.t3planet.de/t3-avatar/](https://demo.t3planet.de/t3-avatar/)
</Tip>