Edit section content

On-page editing


The Ptah Builder makes editing pretty intuitive. You can change content and its properties right on the page in Preview Area and everything will be automatically saved.

Clicking a block or element in Preview Area, you can view icons to adjust properties and other functionality.
All of the elements in Preview Area are draggable. If you need to rearrange elements inside of the block, click and hold at the element, then drag and drop the element to the preferred position.

Adjust block properties


Learn more about how to set up the size and indents.

Add an element to the section


To add an element to the section, hover over a block in Preview Area where you want to add the new element and click the Add element icon.

Adjust element properties


  • To view and customise an element properties, click to select the element in Preview Area.
  • Click the Edit icon at the element’s menu or just double click the element.

Text


To adjust a page fonts, use Page Style.

Text properties:

  • Size - the font size
  • Line - the line height (the vertical distance between lines of text)
  • Color - the text color
  • Link Color - the color of the link
  • Link Hover Color - the color of the link on hover
  • Underline - apply a word underline
  • Underline Hover - show a word underline on hover
  • Open new window - use a new browser tab to open a link

Learn about spacing and how to edit indents for the element

To adjust a page fonts, use Page Style.

Text and icon properties:

  • Size - the font size
  • Line - the line height (the vertical distance between lines of text)
  • Color - the text color
  • Visible - use icon image
  • Icon - the icons list
  • Icons width - the icon size
  • Icons color - the icon color

Learn about spacing and how to edit indents for the element

Buttons


Call-to-action buttons are some of the most significant elements on your landing page.

A call-to-action button is a piece of text or an image, that tells your audience what you want them to do next. For instance, after clicking the call-to-action button it scroll down to the sign up form section.

  • To add an action to the button, first of all.
  • Select the button in Preview Area.
  • Click the Link icon at the element’s menu.

In the opened tooltip select one of the actions:

  • Open URL - while clicking the button, user is redirected to the specified web page.
    • Enter the link in the URL field.
    • Enable the Open in new window, to use a new browser tab to open a link.
    • Click Done.
  • Open video popup - while clicking the button, the video popup is displayed.
    • Enter the link to the YouTube video resource in the Video field.
    • Click Done.
  • Scroll into section - while clicking the button, the landing page is scrolled to the particular section.
    • Choose which section to scroll to.
    • Select a scroll behaviour: Auto, Instant, Smooth.
    • Click Done.

Button properties:

  • Placeholder text - the placeholder text
  • Size - the text size
  • Line - the line height (the vertical distance between lines of text)
  • Text - the text color
  • Hover - the text color on hover
  • Button color - the button color
  • Hover color - the button color on hover
  • Border radius - the border radius
  • Border style - the border color and style: solid, dashed, dotted
  • Border hover - the border color and style on hover: solid, dashed, dotted
  • Button image - the button background image
  • Hover image - the button image on hover
  • Stretch to fit - display the image at the full height of the button
  • Corner radius - the button’s corners radius
  • Hover animation - the animation on hover: none, tada, shake, bounce

Learn about spacing and how to edit indents for the element

Social networks


Social icons are links to your social accounts. Use the Ptah integration with Open Graph to set up displaying in social posts.

Social networks properties:

  • Icons width - the social network icon size
  • Icons color - the social network icon color
  • Background color - the background color of the icons’ element
  • Open links in new window - use a new browser tab to open a link

The list of social networks’ names and links:

  • Facebook
  • Instagram
  • Vk
  • Twitter
  • YouTube
  • Discord
  • Kickstarter
  • Wechat
  • To add a social link, click the Link icon to the right of the network name.
  • Enter the network link in the displayed field.

Learn about spacing and how to edit indents for the element

Images and Videos


To upload or replace an image, drag and drop the image to the Image upload button or to the specific position on the page in Preview Area.
  • Image URL - the image file or the link to the image resource

    To upload an image from your computer: drag and drop an image to the Image upload area in Setting Panel or to the specific position on the page in Preview Area.

    To use an external link to the image: enter the link to the image file

  • Stretch to fit - display the image at the full height of the element

Learn about spacing and how to edit indents for the element

  • Video URL - the video file or the link to the video resource
  • Loop - put a video on loop
  • Autoplay - play video on page load
  • Show/hide controls - display video controls
  • Show/hide related videos - display related videos at the end

Learn about spacing and how to edit indents for the element

Game parameters


  • Icons width - the platform icon size
  • Icons color - the social icon color

The list of platforms’ names:

  • Windows
  • Apple
  • Linux
  • Steam
  • GOG Galaxy

Learn about spacing and how to edit indents for the element

  • Icons width - the platform icon size

The list of content age ratings:

  • Age
  • PEGI
  • USK
  • Steam

Learn about spacing and how to edit indents for the element

HTML elements


You can edit a spacer size using the transformation tool.
  • Set timer - the ending date
  • Time zone - the UTC time zone
  • Labels - display the labels: Days, Hours, Minutes, Seconds
  • Position - the labels position
  • Labels language - the labels language
  • Size - the font size
  • Line - the line height (the vertical distance between lines of text)
  • Color - the text color
  • Background Color - the background color of the element
  • Tile Color - the background color of every parts

Learn about spacing and how to edit indents for the element

  • URL - the link to the external resource

Learn about spacing and how to edit indents for the element

Duplicate an element


You can easily duplicate any element on your page and drag it to a desired position.

  • To clone an element, click to select the element in Preview Area.
  • Click the Clone icon at the element’s menu to duplicate it.

Copy element styles


If you’ve perfectly styled some element you can copy its properties to another element with the same type.

  • To copy element’s styles, click to select the element in Preview Area.
  • Click on the Copy icon at the element’s menu.
  • To paste just copied styles, click to select the specific element in Preview Area.
  • Click on the Paste icon at the element’s menu.

Next steps

Questions?

Support

We are always happy to help with a code, improve a guide or consider a feature.

GitHub

Ptah is the easy-to-use open-source landing page builder without any coding designed for video games.