Page Builder Doorlopen, deel 1: eenvoudige pagina

Download het simple-page-assets -bestand en sla het bestand op uw lokale systeem op.

Navigeer naar het gedownloade bestand en extraheer de gecomprimeerde bestanden.

Klik op een Windows-systeem met de rechtermuisknop en kies Extract All bestanden. Kies vervolgens de doelmap en klik op Extract .

Op een Mac-systeem kunt u gewoon dubbelklikken op het ZIP-bestand en de geëxtraheerde bestanden verplaatsen naar de doelmap.

De map bevat de volgende afbeeldingsbestanden:

{width="500"}

Voor Admin sidebar, ga Content > Elements>Pages.

Klik in de rechterbovenhoek op Add New Page en voer de volgende handelingen uit:

• Stel Enable Page in op No om te voorkomen dat deze pagina in uw winkel wordt gepubliceerd.

• Voer bij Page Title Simple Page in.

{width="600" modal="regular"}

Breid de Design sectie uit.

Layout is standaard ingesteld op Page -- Full Width . Naast de vijf standaard lay-outopties, Page Builder voegt lay-outs van volledige breedte voor pagina's, categorieën, en producten toe.

Als de voorbeeldgegevens beschikbaar zijn, stelt u New Theme in op Magento Luma . Anders kunt u een ander beschikbaar thema kiezen of dit leeg laten om het standaardthema te gebruiken.

Met de instelling New Theme ​kunt u het standaardthema overschrijven en een ander thema op de pagina toepassen.

{width="600" modal="regular"}

Klik in de rechterbovenhoek op Save .

Wanneer de pagina wordt bewaard, verschijnt de naam Eenvoudige Pagina in de upper-left hoek van de pagina.

Breid de Content sectie uit.

Met deze actie wordt de voorvertoning van Page Builder weergegeven met een lege rij.

{width="600" modal="regular"}

Klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud.

In de uitgebreide Page Builder werkruimte, verstrekt het paneel op de linkerzijde de inhoudshulpmiddelen u kunt gebruiken om uw inhoud in het stadium te bouwen.

Houd de muisaanwijzer boven de lege rij om de gereedschapset weer te geven.

Elke inhoudscontainer heeft een gereedschapset met vergelijkbare opties.

{width="600" modal="regular"}

In toolbox van de Rij, kies het pictogram van Montages ( {width="20"}.

Onder Appearance, kies Volledig afloopgebied.

Met de weergave Volledig afloopgebied worden de linker- en rechterranden van het inhoudsgebied van de rij en de achtergrond uitgebreid tot de volledige breedte van de pagina.

{width="600" modal="regular"}

Blader omlaag naar de sectie Advanced ​en stel alle Margins and Padding-instellingen in op 0 .

Deze instelling zorgt ervoor dat de banner de volledige breedte van de rij uitbreidt.

{width="600" modal="regular"}

Als u de instellingen wilt opslaan en wilt terugkeren naar de werkruimte van Page Builder , schuift u omhoog naar de bovenkant van de pagina en klikt u op Save in de rechterbovenhoek.

In het Page Builder paneel, breid Media uit en sleep placeholder van de a Banner aan het stadium.

{width="600" modal="regular"}

Houd de cursor boven de bannercontainer om de gereedschapset weer te geven.

Naast toolbox, uploadt Beeld en Uitgezocht van de knopen van de Galerij zijn inbegrepen zodat kunt u snelle veranderingen in de banner direct van het stadium aanbrengen.

{width="600" modal="regular"}

In de toolbox van de Banner, kies het pictogram van Montages ( {width="20"}).

Kies onder Appearance ​de optie Collage Right.

Met de instelling Kollage rechts plaatst u de inhoud aan de rechterkant van de banner.

{width="600" modal="regular"}

Schuif omlaag naar de sectie Background ​en stel de achtergrondafbeelding voor de banner in:

• Voor Background Image, klik uploaden.

  {width="600" modal="regular"}

  Navigeer naar de map waarin u de geëxtraheerde elementen voor eenvoudige pagina's hebt opgeslagen en kies het bestand wide-banner-background.jpg .

  De afbeelding wordt geüpload en er wordt een miniatuur van de geüploade afbeelding weergegeven. De bestandsnaam, de afmetingen van de afbeelding en de bestandsgrootte worden hieronder vermeld.

  {width="600" modal="regular"}

• Voor Background Mobile Image, klik uploaden.

  Kies het bestand wide-banner-background-mobile.jpg in dezelfde bestandsmap.

  De mobiele achtergrondafbeelding wordt gebruikt voor mobiele apparaten en ook wanneer het formaat van een browservenster wordt aangepast aan de breedte van een mobiel apparaat.

  {width="600" modal="regular"}

• Blader terug naar de bovenkant van de pagina en klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

  De achtergrond wordt in het werkgebied weergegeven en breidt de volledige breedte van de rij uit.

  {width="600" modal="regular"}

U ziet de plaatsaanduidingstekst die rechts van de rij wordt weergegeven. De positie van deze tekst wijst op het Recht van de Collage verschijning plaatsen.

Klik op de tekst van de tijdelijke aanduiding en voer het volgende bericht in als twee regels:

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

De editor-werkbalk wordt boven het tekstvak weergegeven. De tekst kan of direct van het stadium worden ingegaan en worden geformatteerd, of door Montages in bannertoolbox te kiezen.

{width="600" modal="regular"}

Opmaak toepassen op de tekst:

• Selecteer de eerste tekstregel. Dan, op de redacteurstoolbar onder Formaten, kies Heading 2.

  {width="600" modal="regular"}

• Selecteer de tweede tekstregel. Dan, op de redacteurstoolbar onder Formaten, kies Paragraph.

Met de indelingsinstellingen worden de stijlen toegepast van het stijlblad dat aan het huidige thema is gekoppeld.

{width="600" modal="regular"}

Hover om toolbox van de Banner te tonen, verkies opnieuw het pictogram van Montages ( {width="20"}), dan rol aan de Content ​sectie.

Bericht dat uw tekst in het vakje van de Tekst van het Bericht wordt getoond. U kunt tekst invoeren en bewerken vanuit het werkgebied of vanuit het gedeelte Content ​van de bannerinstellingen.

{width="600" modal="regular"}

Stel in de sectie Content ​de bannerkoppeling en -knop in:

• Plaats Verbinding aan Category, en klik dan Select om de categorieboom te tonen.

• Kies What's New als de gekoppelde categorie.

  {width="600" modal="regular"}

• Stel Show Button in op Always .

• Voer bij Button Text Shop Now in als de tekst die op de knop wordt weergegeven.

• Accepteer de standaardwaarde Primary voor Button Type .

  De knopstijl van het huidige thema bepaalt de knopindeling.

Stel de bannerbedekking in:

Met een bedekking kunt u een achtergrondkleur toepassen op het actieve inhoudsgebied dat wordt gedefinieerd door de instelling Weergave. De bannerachtergrondafbeelding blijft zichtbaar voor de volledige breedte van de banner.

• Stel Show Overlay in op Always .

• Voer bij Overlay Color een van de volgende handelingen uit:

  • Klik op het gekleurde vierkant en kies het witte staal.
  • Klik in Geen de tekstvakje van de Kleur en ga White of de hexadecimale waarde #ffffff in.

  Klik vervolgens op Apply .

  {width="600" modal="regular"}

• Blader terug naar de bovenkant van de pagina en klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

  De knop wordt onder het bannerbericht in het werkgebied weergegeven.

  {width="600" modal="regular"}

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( ) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

U kunt op elk gewenst moment schakelen tussen de twee werkruimtemodi.

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Indien ertoe aangezet, klik de verbinding van het Beheer van het Geheime voorgeheugenin het bericht bij de bovenkant van de pagina en vernieuw om het even welk ongeldig geheime voorgeheugen.

In het net van Pagina's, vind de Eenvoudige Pagina die u in het eerste deel van deze oefening creeerde en Edit in de Action ​kolom selecteert.

Breid de Content sectie uit.

Klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud.

Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding voor Row ​naar het werkgebied en plaats deze boven de banner.

De rode hulplijn markeert de grens tussen de twee rijen.

{width="600" modal="regular"}

Beweeg over de nieuwe rij om toolbox te tonen en de pictogram van Montages te kiezen ( {width="20"}).

{width="600" modal="regular"}

Onder Appearance, keur het Bebevatte ​gebrek het plaatsen goed.

Met deze instelling beperkt u het inhoudsgebied van de rij tot de breedte van de pagina zoals gedefinieerd door het thema.

{width="600" modal="regular"}

Klik in de rechterbovenhoek op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding voor Column ​naar de nieuwe rij.

{width="600" modal="regular"}

De rij is nu verdeeld in twee kolommen van gelijke breedte. Elke kolom is een aparte container voor inhoud met eigen specifieke gereedschapset met opties.

{width="600" modal="regular"}

In de upper-left hoek van de eerste kolom, klik de cirkelvormige controle van het Net ( ) om de netrichtlijnen te tonen.

Het raster zorgt ervoor dat de inhoud consistent wordt uitgelijnd en correct wordt weergegeven op zowel mobiele als desktopapparaten. Voor informatie over het vormen van de netgrootte, zie Page Builder sectie in het Page Builder onderwerp van de Opstelling vormen.

De getallen tussen haakjes (6/12) op de bovenrand van elke kolomcontainer geven het aantal rasterdivisies in elke kolom aan en het totale aantal divisies in de rij.

{width="600" modal="regular"}

Vouw in het deelvenster Page Builder de sectie Media uit en sleep een tijdelijke aanduiding Image naar de eerste kolom.

{width="600" modal="regular"}

Voeg de voorbeeldafbeelding in de plaatsaanduiding.

{width="600" modal="regular"}

Voor een afbeelding die zich op uw systeem bevindt, kunt u een van de volgende methoden kiezen:

• upload het beelddossier: In de eerste kolom, klik Upload Image. Navigeer vervolgens naar de map waarin u de geëxtraheerde eenvoudige pagina-elementen hebt opgeslagen en kies het small-banner-1.jpg -bestand.

  {width="600" modal="regular"} wordt toegevoegd

  Herhaal deze handeling om het small-banner-2.jpg -bestand toe te voegen aan de tweede kolom.

• Belemmering het beelddossier: Op uw Desktop, open de eenvoudige omslag van paginamiddelen en plaats het naast het browser venster Admin waar u met het Page Builder stadium werkt. Vervolgens sleept u het bestand small-banner-1.jpg uit de map met eenvoudige pagina-elementen en zet u het neer in de eerste kolom.

  {width="600" modal="regular"}

  Herhaal deze handeling om het small-banner-2.jpg -bestand toe te voegen aan de tweede kolom.

Bepaal welke pagina in de catalogus u aan elke afbeelding wilt koppelen.

Beweeg over het beeld in de eerste kolom om toolbox te tonen en de Montages te kiezen ( {width="20"}).

{width="600" modal="regular"}

De afbeelding aan een categorie koppelen:

• De rol neer en plaatst Verbinding aan Category.

• Blader in de categoriestructuur omlaag en kies de categorie Men's Hoodies & Sweatshirt .

• Klik in de rechterbovenhoek op Save de instellingen en ga terug naar de werkruimte van Page Builder .

Herhaal de vorige stap om het beeld in de tweede kolom aan de categorie van het Gear te verbinden.

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( ) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Wanneer ertoe aangezet, klik de verbinding van het Beheer van het Geheime voorgeheugenin het bericht bij de bovenkant van de pagina en vernieuw om het even welk ongeldig geheime voorgeheugen.

In het net van Pagina's, vind de Eenvoudige Pagina die u in het eerste deel van deze oefening creeerde en Edit in de Action ​kolom selecteert.

Breid de Content sectie uit.

Klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud.

Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding voor Row ​naar het werkgebied en plaats deze boven de rij die in het tweede deel van deze bewerking is gemaakt.

Een rode hulplijn markeert de grens tussen de twee rijen.

{width="600" modal="regular"}

Beweeg over de nieuwe rij om toolbox te tonen en de Montages te kiezen ( {width="20"}) pictogram.

{width="600" modal="regular"}

Kies Full Width op de pagina Rij bewerken onder Appearance.

Met deze instelling beperkt u het inhoudsgebied tot de maximale paginabreedte die door het thema wordt gedefinieerd. De achtergrondkleur en/of -afbeelding zijn niet beperkt en breiden de volledige breedte van de rij uit.

{width="600" modal="regular"}

Typ #f1f1f1 als Background Color in de sectie Background.

{width="600" modal="regular"}

De rol neer aan de Advanced ​sectie en plaatst alle Marges & het Opvullen ​waarden aan 0.

{width="600" modal="regular"}

Blader terug naar de bovenkant van de pagina en klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

De achtergrondkleur van de rij is nu lichtbeige.

{width="600" modal="regular"}

Sleep in het deelvenster Page Builder onder Layout ​een tijdelijke aanduiding voor Column ​naar de bovenste rij in het werkgebied.

{width="600" modal="regular"}

Sleep de rechterrand van de eerste kolom naar de vier van de 12 (4/12) positie op het raster.

De grootte van de tweede kolom wordt aangepast aan acht van 12 (8/12).

{width="600" modal="regular"}

Beweeg over de eerste kolomcontainer om toolbox te tonen en de pictogram van Montages te kiezen ( {width="20"}).

De rol neer aan de Advanced ​sectie en plaatst alle Marges & het Opvullen ​waarden aan 0.

{width="600" modal="regular"}

Blader terug naar de bovenkant van de pagina en klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

Vouw in het deelvenster Page Builder Media uit en sleep een inhoudstype Image naar de eerste kolom.

{width="600" modal="regular"}

Klik op Upload Image in de voorlopige afbeelding.

{width="600" modal="regular"}

Navigeer naar de map waarin u de geëxtraheerde elementen voor eenvoudige pagina's hebt opgeslagen en kies het bestand review-image.jpg .

De geüploade afbeelding wordt weergegeven in de eerste kolom en vloeit naadloos over met de achtergrondkleur van de rij.

{width="600" modal="regular"} wordt toegevoegd

Vouw in het deelvenster Page Builder de sectie Elements uit en sleep het inhoudstype Text naar de tweede kolom.

{width="600" modal="regular"}

Klik in het tekstelement om de editor-werkbalk weer te geven.

In de toolbar, klik het Beeld van het Tussenvoegsel ( ) pictogram en doe het volgende:

{width="600" modal="regular"}

• In de Insert/edit image ​dialoog, klik het_ Vondst _( ) pictogram naast het​ Source gebied.

  {width="600" modal="regular"}

• Klik op de pagina Select Images ​op Choose Files.

• Kies rating.png in de map waarin u de elementen van de eenvoudige pagina hebt opgeslagen.

• Dubbelklik op de pagina weer op de afbeeldingstegel om deze te selecteren en voeg de URL ervan in het Source-veld in.

  {width="600" modal="regular"}

• Voer bij Image Description 5-Star Rating in en klik OK om de afbeelding in de kolom in te voegen.

• In de redacteurstoolbar, klik centreert ( ) om het beeld in de kolom te centreren.

  {width="600" modal="regular"}

Plaats de invoegpositie net na de afbeelding met vijf sterren, druk op Enter/Return om een nieuwe regel te beginnen en voer de volgende tekst in:

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

De tekst wordt gecentreerd terwijl u typt.

{width="600" modal="regular"} wordt gecentreerd

Maak de tekst op:

• Klik overal in de eerste lijn van tekst en op de redacteurstoolbar onder Formaten, kies Heading 2.

• Selecteer de resterende tekst en op de redacteurstoolbar onder Formaten, kies Paragraph.

De tekst wordt opgemaakt op basis van de stijlpagina die aan het thema is gekoppeld.

Haal de afmetingen van de afbeelding op, zodat u de inhoud verticaal in de kolom kunt centreren:

• Beweeg over het beeld in de eerste kolom om toolbox te tonen en de Montages te kiezen ( {width="20"}).

• Houd rekening met de afmetingen van de afbeelding onder de miniatuur van de afbeelding.

  {width="600" modal="regular"} worden getoond

• In de hoger-juiste hoek, klik dicht.

De inhoud verticaal centreren in de tweede kolom:

• Beweeg over de tweede kolom om toolbox te tonen en de Montages te kiezen ( {width="20"}) pictogram.

• Voer bij Minimum Height 450 in als de hoogte in pixels voor de afbeelding in de eerste kolom.

• Stel Vertical Alignment in op Center .

{width="600" modal="regular"}

Schuif omlaag naar de sectie Advanced ​en stel alle Margins and Padding-waarden in op nul ( 0 ).

{width="600" modal="regular"}

Blader terug naar de bovenkant van de pagina en in de rechterbovenhoek en klik op Save om de instellingen op te slaan en terug te keren naar de werkruimte van Page Builder .

{width="600" modal="regular"}

Selecteer de Antonia Racer Tank tekst en klik het Verbinding van het Tussenvoegsel ( ) pictogram in de redacteurstoolbar.

In de verbinding van het Tussenvoegsel dialoog, specificeer de verbinding aan het catalogusproduct:

• Voer het product URL in.

  U kunt een relatieve of volledig gekwalificeerde URL invoeren. De volgende relatieve koppeling wordt ingevoerd voor dit voorbeeld:

  ../antonia-racer-tank.html

• (Optioneel) Voer voor Titel de productnaam in.

  Het kenmerk Title link wordt door sommige browsers gebruikt als knopinfo.

  {width="600" modal="regular"}

• Klik wanneer u klaar bent op OK om de koppeling op te slaan.

  De gekoppelde tekst wordt nu gemarkeerd in de banner.

  {width="600" modal="regular"}

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( ) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

Klik in de rechterbovenhoek op Save .

Indien noodzakelijk, breid de Content sectie uit.

Klik op Edit with Page Builder of in het voorvertoningsgebied van de inhoud.

Beweeg over de eerste rij op het stadium om toolbox te tonen en de Beweging te kiezen ( ) pictogram.

{width="600" modal="regular"}

Houd de muisknop ingedrukt terwijl u controleert of alle inhoud van de rij is geselecteerd en sleep de rij naar de positie onder de rode hulplijn onder aan de pagina.

{width="600" modal="regular"}

Herhaal dit proces om de eerste rij naar de tweede positie te verplaatsen.

De volgorde van de rijen op de pagina komt nu overeen met het voorbeeld Eenvoudige pagina.

In de hoger-juiste hoek van het stadium, klik het Dichte Volledige Scherm ( ) pictogram.

Wanneer u op dit pictogram klikt, keert u terug naar de sectie Content ​voor de pagina waarop de voorvertoning wordt weergegeven.

Klik in de rechterbovenhoek op de pijl Save en kies Save & Close .

Indien ertoe aangezet, klik de verbinding van het Beheer van het Geheime voorgeheugenin het bericht bij de bovenkant van de pagina en vernieuw om het even welk ongeldig geheime voorgeheugen.