Editor Grundläggande - Bemästra Mediaweb Webbplatsbyggaren
Lär dig grunderna i Mediaweb visuella editor, inklusive gränssnittslayout, navigering och viktiga byggverktyg.
Editor Grundläggande
Mediaweb editorn är en visuell webbplatsbyggare som låter dig skapa och anpassa webbplatser genom ett dra-och-släpp gränssnitt. Den här guiden täcker de viktigaste gränssnittselementen och grundläggande funktionalitet.
Sidhuvud
Placerat längst upp i editorn innehåller sidhuvudet viktiga kontroller för projekthantering och enhetsförhandsvisning.
Vänster Sida Kontroller:
- Ångra-knapp - Återställer den senaste åtgärden med fullständig historik
- Gör om-knapp - Återställer en tidigare ångrad åtgärd
- Zoom-kontroller - Justera canvasens zoomnivå (25% till 400%)
- Anpassa till skärm - Auto-justera zoom för att passa canvas
Enhetsförhandsvisningslägen
Mitten av sidhuvudet har enhetsförhandsvisningsfunktioner för responsiv designtestning.
Brytpunkt-flikar:
- Mobil - 375px bredd, porträttorientering, touchsimulering
- Surfplatta - 768px bredd, båda orienteringar tillgängliga
- Desktop - 1200px+ bredd, fullständigt responsivt beteende
Publiceringskontroller
Höger sida av sidhuvudet ger projekthantering och publiceringskontroller.
Tillgängliga Åtgärder:
- Förhandsgranska-knapp - Se din webbplats som besökare kommer att se den
- Spara-knapp - Manuellt spara dina framsteg
- Publicera-knapp - Gör din webbplats live
Sidopanel
Sidopanelen innehåller flera flikar för olika funktioner:
Komponenter-flik (+ ikon)
Få tillgång till alla tillgängliga element att lägga till på din webbsida inklusive text, bilder, knappar och layoutkomponenter.
Nyckelfunktioner:
- Dra-och-släpp gränssnitt för enkel elementplacering
- Organiserade kategorier för snabb navigering
- Realtidsförhandsvisning av element före placering
- Responsiva element som anpassar sig till alla skärmstorlekar
Typsnitt-flik (T ikon)
Bläddra och lägg till olika typsnitt till din webbplats. Hantera typografiinställningar och typsnittsfamiljer.
Nyckelfunktioner:
- Omfattande typsnittsbibliotek med Google Fonts-integration
- Anpassade typsnittsuppladdningsfunktioner
- Typografiförinställningar för konsekvent styling
- Realtids typsnittsförhandsvisning och testning
CSS-variabler-flik (färgpalett ikon)
Anpassa globala designvariabler inklusive färger, avstånd och andra designtokens.
Nyckelfunktioner:
- Global färgpaletthantering
- Avstånd och storleksvariabelkontroller
- Designsystem konsistensverktyg
- Realtids variabelförhandsvisning och uppdateringar
Lager-flik (lager ikon)
Se den hierarkiska strukturen av din webbsida. Omorganisera element genom att dra dem inom lagerträdet.
Nyckelfunktioner:
- Hierarkisk elementorganisation och struktur
- Dra-och-släpp lageromorganiseringsfunktioner
- Element synlighetsväxlingskontroller
- Snabb elementval och navigering
Filer-flik (mapp ikon)
Hantera uppladdade tillgångar inklusive bilder, videor och andra mediefiler.
Nyckelfunktioner:
- Dra-och-släpp filuppladdningsfunktionalitet
- Organiserat tillgångsbibliotek med sökfunktioner
- Bildoptimering och komprimeringsverktyg
- Filformatstöd för webboptimerade medier
Ikoner-flik (ikonbibliotek)
Få tillgång till det inbyggda ikonbiblioteket för att lägga till visuella element till din webbplats.
Nyckelfunktioner:
- Omfattande samling av professionella ikoner
- Kategoriserade ikonuppsättningar för enkel bläddring
- Anpassningsbara ikonfärger och storlekar
- Sökfunktionalitet för snabb ikonupptäckt
AI-flik (AI ikon)
Interagera med AI-assistenten för automatiserade designförslag och innehållsgenerering.
Nyckelfunktioner:
- Intelligenta designrekommendationer och förslag
- Automatiserad innehållsgenerering och copywriting
- Layoutoptimering och förbättringstips
- Realtids designassistans och vägledning
Huvudcanvas
Mittområdet visar din webbplats medan du bygger den. Det är här du:
- Ser din webbplats i realtid
- Väljer och manipulerar element
- Ser ändringar medan du gör dem
Verktygsfält och Egenskaper
När du väljer ett element visas en blå kontur och ett kontextverktygsfält ger redigeringsalternativ. Egenskapspanelen till höger visar anpassningskontroller.
Nyckelfunktioner:
- Design & Styling - Färger, typsnitt, avstånd och visuellt utseende
- Händelser & Interaktioner - Klickåtgärder, hover-effekter och animationer
- Data & Innehåll - Dynamiskt innehåll, formulär och databindning
- Responsiv Design - Enhetsspecifika layouter och brytpunkter
- Selektorer & Målriktning - CSS-selektorer och elementmålriktning
Tangentbordsgenvägar
Viktiga genvägar för effektiv redigering:
- Ctrl+Z / Cmd+Z: Ångra
- Ctrl+Y / Cmd+Y: Gör om
- Ctrl+S / Cmd+S: Spara
- Ctrl+C / Cmd+C: Kopiera
- Ctrl+V / Cmd+V: Klistra in
- Delete: Ta bort valt element
- Ctrl+D / Cmd+D: Duplicera element
Nästa Steg
Bemästra avancerade editorfunktioner med dessa specialiserade guider:
- Design & Styling - Färger, typsnitt, avstånd och visuellt utseende
- Händelser & Interaktioner - Klickåtgärder, hover-effekter och animationer
- Data & Innehåll - Dynamiskt innehåll, formulär och databindning
- Responsiv Design - Enhetsspecifika layouter och brytpunkter
- Selektorer & Målriktning - CSS-selektorer och elementmålriktning