Voorbeeldmodus

Hoewel Blocs levert een zeer nauwkeurige weergave van uw uiteindelijke site terwijl u deze bouwt. Soms moet u snel een voorbeeld van uw site bekijken om andere ontwerpaspecten te controleren en testen, zoals interacties, scroll FX en en animaties. Blocs heeft verschillende ingebouwde preview-opties die zijn ontworpen om u te helpen uw site op een natuurlijkere en uitgebreidere manier te testen.

Tip voor beginners

Voorbeeldmodus in Blocs laat je niet alleen lokaal HTML previews zien, maar het ondersteunt ook previews van PHP. Zolang een pagina de bestandstype ingesteld op PHP in het pagina-instellingen, zal het voorbeeld elke PHP-code weergeven die is toegevoegd via de Code-widget in real time.

In app-voorbeeld

Met de in-app preview kunt u uw website bekijken op meerdere schermformaten binnen één werkruimte. Om de preview-modus te openen, hoeft u alleen maar links klikken de afspeelknop bevindt zich aan de rechterkant van het breekpuntbesturingselement of gebruik als alternatief de sneltoets V.

Voorbeeldwerkbalk

In de preview-modus is de preview-werkbalk te vinden boven aan het hoofdvenster van de applicatie. Deze werkbalk bevat verschillende functies die u helpen bij het testen en previewen van uw website.

Viewport toevoegen

De plusknop + Met de knop helemaal links op de werkbalk kunt u snel en eenvoudig extra viewports toevoegen op basis van de afmetingen van gangbare computer-, monitor-, tablet- en telefoonschermen.

Tip voor beginners

Zichtvensters geen simuleren de kenmerken van het besturingssysteem van het relevante apparaat. Het zijn slechts browservensters die zijn geschaald om overeen te komen met de schermgrootte van het apparaat.

Viewport tekenen

De knop met de potlood pictogram zal wisselen tekenmodus, waarmee u handmatig aangepaste viewports kunt tekenen. Deze functie kan ook worden ingeschakeld door de D sleutel.

Bewerkingsmodus

De derde knop vanaf de linkerkant van de werkbalk schakelt bewerkingsmodus. Wanneer ingeschakeld, kunt u met de bewerkingsmodus de viewports verplaatsen en rangschikken rond het voorbeeldcanvas. Als een viewport is ontgrendeld, dan is het ook mogelijk om de breedte- en hoogte-afmetingen van de weergaven te wijzigen tijdens de bewerkingsmodus. Deze functie kan ook worden ingeschakeld door de shift-toets ingedrukt te houden sleutel.

Pagina Selectie

Met het besturingselement in het midden van de werkbalk kunt u de huidige pagina selecteren die in alle voorbeeldviewports is geladen.

Reload

De knop met de icoon is de herlaadknop. Deze knop kan worden gebruikt om alle preview-viewports opnieuw te laden.

Uitzendbedieningen

De Blocs De preview-server is toegankelijk vanaf elk ander apparaat in hetzelfde netwerk. Met de tweede knop aan het einde van de werkbalk krijgt u toegang tot de uitzendopties van het lokale netwerk.

AirDrop-voorbeeld

Met deze optie kunt u de preview-URL snel en eenvoudig delen met andere apparaten op hetzelfde lokale netwerk via AirDrop. URL's die worden gedeeld via AirDrop, worden automatisch geopend in de webbrowser van het ontvangende apparaat, zodat u uw site kunt bekijken en testen op het daadwerkelijke apparaat.

Problemen hebben?

Als u merkt dat de AirDrop-opties niet beschikbaar zijn of dat uw apparaat niet als beschikbaar wordt weergegeven, hebben we deze speciale gids voor probleemoplossing die u kunnen helpen het probleem op te lossen.

Kopieer de voorbeeld-URL

De optie Preview kopiëren kopieert de lokale netwerk-URL naar het klembord van uw apparaat. Als u deze URL invoert in een webbrowser op een apparaat dat is verbonden met hetzelfde netwerk, kunt u een preview van uw site bekijken en deze testen op het apparaat.

Stoppen/afsluiten

De knop met de stop symbool helemaal rechts op de werkbalk, wordt gebruikt om de voorbeeldmodus te verlaten.

Viewport hernoemen

Elke preview viewport heeft een label in de linkerbovenhoek. De inhoud van dit label kan eenvoudig worden bewerkt door erop te klikken en de tekst aan te passen.

Viewport-opties

In de rechterbovenhoek van elk venster op het voorbeeldcanvas bevindt zich een menuknop Met dit menu krijgt u toegang tot functies die specifiek zijn voor de betreffende viewport.

Inspecteren

Deze optie opent de WebKit-ontwikkelaarsinspectietools voor de relevante viewport. De inspectietools zijn een geweldige manier om de code van uw site te inspecteren en eventuele problemen die u tegenkomt te debuggen. We hebben dit handige gids die u helpen uw website op fouten te controleren.

Focus wisselen

Deze optie schakelt de focusmodus in/uit. U kunt meer lezen over de focusmodus in het onderstaande gedeelte.

Reload

Met deze optie wordt het relevante venster opnieuw geladen.

Schermafbeelding delen

Met deze optie krijgt u toegang tot de verschillende opties voor het delen van schermafbeeldingen voor de betreffende viewport. Blocs heeft ondersteuning om een ​​screenshot van de huidige viewport te delen lokale opslag, email, berichten en over AirDrop.

Verwijder

Met deze optie verwijdert u het relevante viewport.

Focus Mode

Als u dubbelklikt op een viewport op het voorbeeldcanvas, wordt dit ingeschakeld focusmodus. Wanneer de focusmodus is ingeschakeld, worden alle andere viewports verborgen en wordt het voorbeeldcanvas ingezoomd om de geselecteerde viewport in de beschikbare vensterruimte te laten passen. Dubbelklik nogmaals op de gefocuste weergave of druk op de ontsnappen toets, verlaat de focusmodus en toont alle andere viewports.

Pannendoek

Met een Apple Magic Mouse of Trackpad is het mogelijk om het hoofdvoorbeeldcanvas te pannen door uw vinger in elke richting te scrollen in de lege ruimte op het voorbeeldcanvas. Als alternatief kan het voorbeeldcanvas ook worden gepand door de spatiebalk op uw toetsenbord en sleep in de lege ruimte van het canvas, in welke richting dan ook.

Canvasopties

Er is ook een reeks opties die toegankelijk zijn via rechts klikken ergens in de lege ruimte op het voorbeeldcanvas.

Alle viewports opnieuw laden

Met deze optie worden alle viewports opnieuw geladen.

Werkruimte centreren

Met deze optie wordt de huidige werkruimte gecentreerd. De werkruimte is het gebied dat wordt bedekt door alle viewports op het ontwerpcanvas.

Fit-werkruimte

Met deze optie past u het zoomniveau van het voorvertoningsvenster aan, zodat alle viewports binnen het voorvertoningsvensterframe passen.

Voorvertoningscache wissen

Met deze optie wist u de cache van alle viewports op het voorbeeldcanvas en laadt u ze opnieuw.

Verwijder alle viewports

Met deze optie worden alle viewports op het voorvertoningscanvas verwijderd.

Voorbeeld in browser

Naast de in-app preview, Blocs laat je ook snel een voorbeeld van je site bekijken met een van de browsers die je op je Mac hebt geïnstalleerd. Om eenvoudig een voorbeeld van uw site in een browser te bekijken klik met de rechtermuisknop de voorbeeldknop en selecteer een browser in het pop-upmenu.

U kunt meer lezen over voorbeeldweergave in browsers hier.

Problemen hebben?

Als u problemen heeft met de voorbeeldmodus, of het werkt gewoon niet, dan raden we u aan dit te lezen gids voor probleemoplossing.

Bijgewerkt op 3 februari 2025

Was dit artikel behulpzaam?

Gerelateerde artikelen