search-data.min.bfebd7b100253aa61dde4b50a9ed344d5ffe35a3eb12829c32042cd929550517.js

(function(){const pages=[{"idx":0,"href":"/docs/glossary/","title":"Glossary","content":" Terms:  Ptah Landing Page Builder = Ptah Builder = Ptah - the landing page builder for video games Sections Library Elements Library  Ptah Editor:  Navigation Panel - a sidebar on the left with the settings menu Settings Panel - a sidebar on the left with the Sections list and the elements properties Preview Area - a preview area for content the Resizing tool rectangle the Settings icon  Ptah Dashboard:  the landing pages list the Create new landing button  "},{"idx":1,"href":"/docs/preview-and-publish/","title":"Preview and Publish","content":""},{"idx":2,"href":"/docs/release/","title":"Release","content":""},{"idx":3,"href":"/docs/","title":"Add a section","content":" Create a page using ready-made sections Ptah Builder allows you to create and adjust the content of your web-page and automatically saves all changes.\nThe sidebar on the left gives you access to all web-elements of your landing page. We call this the Settings Panel. The Settings Panel allows you to view and adjust Properties of any object you have already added. You can learn more about objects properties.\nAfter you make a change on Settings Panel the content on the right on Preview Area will be updated.\nAdd a new section Click the Add section button in Settings Panel and select a desired section from the preview thumbs list.\nNow you can change the entire content of the selected section in Preview Area.\n     Adjust section properties You can build your page from a wide range of pre-designed sections. Each section is designed to emphasize a different aspect of your video game.\nTo edit a section, click the Settings icon at the end of the section\u0026rsquo;s title in Section Menu.\nSet up the size and spacing.\nLearn about background properties.\n Apply some custom properties to sections:\nHEADER  Sticky position - creates a fixed (sticky) header on scroll      FORMS  Form integrations - settings for the integration to Mailchimp.      PRODUCTS Types of the game products:\n Standart Full Deluxe Ultimate      SLIDER  Number of slides in the banner - from 2 to 6 slides available Show/hide pagination - shows the pagination bullets (if enabled) Pagination color - the pagination bullets color (if pagination enabled) Nav bullets size - the pagination bullets size (if pagination enabled) Show/hide navigation arrows - shows the navigation arrows (if enabled) Navigation color - the navigation arrows color (if navigation enabled) Autoplay - makes a slideshow Transition delay - if Autoplay is enabled, it\u0026rsquo;s a slides\u0026rsquo; delay      GALLERIES (Carousel) Settings - Show/hide pagination - shows the pagination bullets (if enabled) - Pagination color - the pagination bullets color (if pagination enabled) - Nav bullets size - the pagination bullets size (if pagination enabled) - Show/hide navigation arrows - shows the navigation arrows (if enabled) - Navigation color - the navigation arrows color (if navigation enabled) - Autoplay - makes a slideshow - Transition delay - if Autoplay is enabled, it\u0026rsquo;s a slides\u0026rsquo; delay\nImages\nYou can upload up to 12 images to the gallery.\n    Change sections order To change the sections order, drag and drop a section in Section Menu up or down and view the moving result in Preview Area.      Remove a section  To remove a section, click to select the section. Click the Delete section button at the end of the sections list.       Remove an element  To remove an element from a section, click to select the element in Preview Area. Click the Delete icon at the element\u0026rsquo;s menu.       Next steps   Edit section content and properties Preview and publish  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":4,"href":"/docs/background/","title":"Background Properties","content":" Background properties There are several ways to fill a background:\n Color fill Gradient Background image Fullscreen video background Color overlay Fixed and parallax background image Repeat an image for all sections Remove a background image  You can apply custom settings for the background of a block, section or page.\nHow to edit a section background properties\nTo edit a section background, you can click the Background icon in Settings Panel at the end of the section\u0026rsquo;s title.      How to edit a background of multiple sections\nGrouping sections helps you to make the same background for all child sections.\nTo make a group, select some sections while holding the key: Command for macOS or Control for Windows, and click the Group selected button.\nNow you can set a background of the group clicking the Image icon at the end of the group\u0026rsquo;s name. The group background replaces their child sections\u0026rsquo; backgrounds.\n     How to edit a page background\nTo adjust a page background, open the panel Page Style and upload an image.      Color fill and opacity To add a solid color, open background settings of the section (or block) and click the Color in Settings Panel. Now you can pick the color in the Color Picker.   Checking the opacity in the Color Picker changes your background color from transparent to solid. To get a solid color, check the opacity at 100%. To view the color background, examine that there is no image or video background and the overlay color set at 0%.       Gradient Increase the visual appeal with the use of gradients.\nTo add a color gradient, open the section (or block) properties in Settings Panel and press the Plus icon to add new color.       It\u0026rsquo;s possible to add up to 4 colors to the linear gradient. Adjust the colors opacity to make a solid or transparent gradient background.   Background image Add a background to a section or block To insert a background image to the section, click the Background icon in Settings Panel at the end of the section\u0026rsquo;s title.  To upload an image to the block\u0026rsquo;s background, hover over the block in Preview Area and click the Background icon.      Now you can upload an image in two ways:\n using the Upload Image button, entering a link to the image resource file in the Image field.       Set the position of the background image:\n Left - moves an image horizontally. Top - moves an image vertically.  To center an image, click the round icon at the center of the preview image area in Settings Panel.  Configure the display of the image:\n Normal - displays the original image. Tile vertically - uses an image and repeat it vertically. Tile horizontally - uses an image and repeat it horizontally. Tile both - uses an image and repeats it multiple times both vertically and horizontally. Cover - displays the image at the full width of the section. This mode increases or decrease the width of the picture to fit the width of the browser window. To set the image vertical position, adjust the Top parameter value. Stretch - displays the image at the full height of the section. This mode may affect image quality because this mode increases or decrease the height of the picture to fit the height of the section. To set the image horizontal position, adjust the Left parameter value.  Add a background to the page You can use an image as a background for the whole page.\nOpen the panel Page Style.\nNow you can upload an image in three ways:\n using the Upload Image button, entering a link to the image resource file in the Image field, drag and drop an image to the Image upload button or to the specific position on the page in Preview Area.   Set the position of the background image:\n X - moves an image horizontally. Y - moves an image vertically.  Full-screen video background You can use a video background instead of image to a section or page.\n Open the section\u0026rsquo;s background properties clicking the Background icon at the end of the section\u0026rsquo;s title. Choose Video tab and upload a video file or enter the link to the resource file.        To add a video background to the page, open the panel Page Style. Upload a video file or enter the link to the resource file.       Add a color overlay to the background Apply a color over an image or video to make a background more contrast for foreground elements. It also helps to make a text more readable on the image or video.\nTo add a color filter over the image or video for the section, you can adjust the Overlay Color in Settings Panel and increase or decrease its opacity level.      Fixed and parallax background image Fixed and parallax effects are design techniques:\n when using a fixed background image, the image will remain static, while the content will move over the image as your scroll down the page. To add a fixed background to the page:\n Add a background to the page. Open Page Style \u0026gt; Background. Enable the Fixed while scrolling option.    when using a parallax background image, both the image and the content will move as your scroll down the page, but at different speeds. To add a parallax to the section background:\n Add a background to the section. Enable the Parallax on background in Settings Panel for this section. Open your landing page in the Preview mode to see the parallax effect clicking the Preview icon at the top menu.     Repeat an image for all sections You can upload a background image and repeat it for all sections on the page.\n Add a background to the page. Open Page Style \u0026gt; Background. Enable the Background fill option.   Remove a background image To remove a background image from a section, block or page open Settings Panel and click the Delete button.      Next steps   Adjust size and spacing on the page Customise the alignment of elements Edit a background image and video  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":5,"href":"/docs/integrations-ga/","title":"Connect with Google Analytics","content":" How to use Google Analytics on your landing page Ptah has a Google Analytics integration for your landing pages.\nTo start, you need a Google Analytics account and your tracking ID.\n Click the Settings icon on the top menu. Choose the Integrations tab and click the Google Analytics icon. In the Google site tag field, enter your Google Analytics tracking ID. Click Apply.  You may start getting data in your Google Analytics account in up to 24 hours.      Next steps   Connect to Mailchimp Integrate Google Tag Manager and Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":6,"href":"/docs/integrations-mailchimp/","title":"Connect with Mailchimp","content":" How to use Mailchimp on your landing page Ptah offers a seamless integration to Mailchimp for you to easily create an email subscription form on your landing page.\nTo start, you need to authorize Mailchimp to connect to your landing page in Ptah Builder.\nOpen Integrations \u0026gt; Mailchimp.\n Enter your Mailchimp login and password to log into Mailchimp. Approve Mailchimp to connect your landing page.       Select a Mailchimp audience Once you\u0026rsquo;ve synced with Mailchimp, you can select one of the audiences to store the emails you collect on your landing page.\nOpen Integrations \u0026gt; Mailchimp. Select your Mailchimp audience from the drop-down menu.      Add an email subscription form Now you can add a section with an email subscription form to your landing page.\n    Next steps   Connect to Google Analytics Integrate Google Tag Manager and Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":7,"href":"/docs/align/","title":"Content alignment","content":" Content alignment Ptah Sections are designed for responsive landing pages. You can customise the alignment of elements in section\u0026rsquo;s blocks.\n To set the alignment of the block\u0026rsquo;s content, hover over the block in Preview Area and click the Settings icon at the block\u0026rsquo;s menu. Click the Settings icon at the block\u0026rsquo;s menu. Adjust indents in Settings Panel.   Flow elements into a row or column  To display elements of a block in a line, hover over the block in Preview Area and click the Settings icon at the block\u0026rsquo;s menu. Click the Row Direction icon.        To display each element of a block in a new line, hover over the block in Preview Area and click the Settings icon at the block\u0026rsquo;s menu. Click the Column Direction icon.       Content direction You can horizontally align elements to left, right, center within the block.      You can vertically align elements to top, center, bottom within the block.      Sticky header You can have the header stay fixed on scroll. To make a header fixed at the top of the page, open the Header Section properties and enable the Sticky position option in Settings Panel.      Next steps   Edit a background Preview and publish  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":8,"href":"/docs/cookies/","title":"Cookies Settings","content":" Cookies Your web page has to follow the GDPR and you can set up some options in Ptah Settings.\nThe General Data Protection Regulation (GDPR) is the European privacy law that regulates how individuals and organizations may collect, use, and retain personal data.   To inform your visitor that you are using Cookies and receive their approval, open the panel SEO. Enable the Use Cookies. Upload a Cookie Policy PDF file Click the Save button and view the result in Preview Mode.       Next steps   Connect to Mailchimp Connect to Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":9,"href":"/docs/customization/","title":"Customise CSS and JavaScript","content":" Customise the look and feel of your landing page In Ptah Builder you can customise any web element of your landing page.\nPtah makes it easy to edit page content without coding\nMoreover, you can add custom styles using the CSS editor and embed custom scripts using the JavaScript editor in Ptah Settings:\n To add custom JS or CSS code, open the panel Code Injection. In the editor, enter your code (CSS or JavaScript). Click the Save button and view the result in Preview Area.       To upload a JavaScript library:\n Open the panel Code Injection \u0026gt; JS libraries. Enter the JS library URL in the Library field and click the Add button. Click the Save button.       Next steps   Connect to Google Analytics Integrate Google Tag Manager and Google Analytics Connect to Mailchimp  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":10,"href":"/docs/edit-section/","title":"Edit section content","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.\nClicking 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.\nAdd 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\u0026rsquo;s menu or just double click the element.       Text TEXT  To adjust a page fonts, use Page Style.\nText properties:\n 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\n ICON WITH TEXT  To adjust a page fonts, use Page Style.\nText and icon properties:\n 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\n  Buttons Call-to-action buttons are some of the most significant elements on your landing page.\nA 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.\n To add an action to the button, first of all. Select the button in Preview Area. Click the Link icon at the element\u0026rsquo;s menu.  In the opened tooltip select one of the actions:\n 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:\n 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\u0026rsquo;s corners radius Hover animation - the animation on hover: none, tada, shake, bounce  Learn about spacing and how to edit indents for the element\nSocial networks Social icons are links to your social accounts. Use the Ptah integration with Open Graph to set up displaying in social posts.\nSocial networks properties:\n Icons width - the social network icon size Icons color - the social network icon color Background color - the background color of the icons\u0026rsquo; element Open links in new window - use a new browser tab to open a link  The list of social networks\u0026rsquo; names and links:\n 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\nImages 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   Image URL - the image file or the link to the image resource\nTo 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.\nTo use an external link to the image: enter the link to the image file\n Stretch to fit - display the image at the full height of the element\n  Learn about spacing and how to edit indents for the element\n VIDEO   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 AVAILABLE PLATFORMS   Icons width - the platform icon size Icons color - the social icon color  The list of platforms\u0026rsquo; names:\n Windows Apple Linux Steam GOG Galaxy  Learn about spacing and how to edit indents for the element\n AGE RESTRICTIONS   Icons width - the platform icon size  The list of content age ratings:\n Age PEGI USK Steam  Learn about spacing and how to edit indents for the element\n  HTML elements SPACER  You can edit a spacer size using the transformation tool.  TIMER   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  IFRAME   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.\n To clone an element, click to select the element in Preview Area. Click the Clone icon at the element\u0026rsquo;s menu to duplicate it.       Copy element styles If you\u0026rsquo;ve perfectly styled some element you can copy its properties to another element with the same type.\n To copy element\u0026rsquo;s styles, click to select the element in Preview Area. Click on the Copy icon at the element\u0026rsquo;s menu. To paste just copied styles, click to select the specific element in Preview Area. Click on the Paste icon at the element\u0026rsquo;s menu.       Next steps   Adjust size and spacing on the page Customise the alignment of elements Edit a background image and video  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":11,"href":"/docs/integrations-gt/","title":"How to set up Google Tag Manager","content":" How to set up Google Tag Manager on your landing page The Google Tag Manager container snippet (a tag) is a small piece code loads with your landing page. It works together with Google Analytics and allows you to collect data and event on your landing page such as:\n monitor form submissions track how people arrive at your site monitor link clicks track the scrolling and other events  To start, you\u0026rsquo;ll need a Google Analytics account.\nCreate a Google Tag account for your landing page  Log into your Google Analytics account and go to Google Tag Manager. Add a new Google Tag Manager account for your landing page.      Connect your Google Tag account to Ptah  Click the Settings icon on the top menu. Choose the Integrations tab and click the Google Tag icon. In the GTM container ID field, enter your GTM container ID from your Google Tag account. Click Apply.      Create a tag with Google Analytics You can configure a lot of tags that depend on events and triggers on your own. Anytime an event is registered with Google Tag Manager, event triggers are evaluated and tags are fired accordingly.\nFor example, this video by Google shows how to notify Google Analytics anytime someone views your landing page:\n Next steps   Connect to Mailchimp Connect to Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":12,"href":"/docs/images/","title":"Images","content":" Images  Images library Placing an image to a section Styling a button with images Background image Recommended image parameters  Images library Any image uploaded to one of your landing pages will store in Images Library.\n To open an Images Library, click an element on Preview Area where you want to add an image. Press the Upload image icon at the element\u0026rsquo;s menu. Now you can upload a new image or select an already stored image in Images Library.       Placing an image to a section Images are crucial to your landing page design.\nFollow this instruction to upload an image from your computer or to link to an external resource.\nStyling a button with images Style your buttons with a background or a hover image.\nUpload images in Settings Panel to style the buttons.\nBackground image  Cover image - a background image for the cover section of your landing page. Add a background to a section or a block - it emphasizes your products descriptions, forms and other elements. Adding a background to the whole page Parallax styling with images  Recommended image parameters  Name: only use letters, numbers, underscores, and hyphens Format: jpg, png, gif Size: less than 500 KB for best results, the limit for an image is 5 MB Width: between 1500 and 2500 pixels Color mode: RGB Color profile: sRGB to look right on mobile devices Resolution: limit of 60 MP. It is the dimensions multiplication divided by one million.  Next steps   Adjust size and spacing on the page Customise the alignment of elements Edit a background  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":13,"href":"/docs/marketing/","title":"Marketing","content":" How to create a good landing page for your game? Define the goal for your landing page Ptah allows you to visually customize every single aspect of your website with a drag-and-drop builder and also include custom HTML and CSS.\nPtah Builder offers 5 common goals for your landing pages built-in as ready-to-use templates:\n🎮 Sell your game\nThe templates contain required sections to sell game keys, a link to game publishing platforms like Steam or GOG.\n 📧 Sell a game subscription\nThe design is optimised to sell game subscriptions.\n 🚀 Sell pre-orders\nThe templates features a timer and a form for the pre-order.\n  💎 Sell multiple editions of your game\nDesign templates contain required sections to sell a game with multiple editions or key types.\n 🎯 Collect leads\nThe templates focused on capturing newsletter subscribers.\n ⭐ A blank page\nWhat is more?\nYou can implement any creative ideas from scratch using a blank page.\n  Provide branding There are 3 must-have landing page elements to build your brand.\n    ✨ Logo\nThe game logo is essential in branding. Your logo can be a text-only version, a symbol, or a text and a symbol combined.\n 🔠 Fonts\nHead over Ptah Fonts and pick a decent combination of Google Fonts that reflects the style and tone of your game.\n 🎨 Color palette\nYou can take advantage of Ptah Style to generate a color palette for texts and buttons.\n  Make a simple and perfect structure Detailed instructions on how to create great content for each section:\n    Build your desired page from a wide range of Ptah pre-designed blocks\n        Header A header is the top section of the web page, thus it\u0026rsquo;s the first thing visitors see. The fixed (sticky) header persists on all sections.\nTips for this section:\n Focus your customers on a single page, avoid navigation, menus and outgoing links A one-liner with your logo and a CTA (Call to Action) button The CTA button should have a clear, concise, and obvious offer (Buy Now on Steam, View on GOG, Get started, Join to Download and others). The CTA button should be designed in a contrasting color, easy to notice       To add a header to the page, choose one of Header sections from Ptah Section Library.  Call-to-Action The main purpose of this section is to inspire your customers perform an action accordingly to your goal: buy a game, subscribe, etc. A headline in this section should describe your game to attract customer interest.\nTips for this section:\n Add a 6–12 words long headline and (optionally) a detailed body text below Use the H1 tag for your headline Action buttons should have a clear CTA (Buy on Steam, Subscribe Now, etc) Consider adding a nice image or a video next to the headline or as a background       To add a call-to-action section, choose one of the FirstScreen sections from Ptah Section Library.  Video A game trailer is one of the most influential marketing tools.\nTips for this section:\n Embed a YouTube video or any MP4 file The limit for a video file is 50 MB. Recommended video parameters.       To add a section with video, choose one of the FirstScreen sections with video from Ptah Section Library.  Features Tips for this section:\n Describe 3-6 the most fascinating features Write a short, easy to read copy       To add a features section, choose one of the Columns sections with features from Ptah Section Library.  Slider (Carousel) A scrollable carousel with screenshots is a great way to display a lot of imagery without occupying too much real estate.\nTips for this section:\n Make sure your images are not larger than they have to be, so your landing page loads even faster. Check out what are the recommended image parameters. for Ptah. Tinypng is an easy to use service to resize images.       To add a slider section, choose one of the Slider sections from Ptah Section Library.  Social proof This section content helps to build trust and inspires your landing page visitors convert to your players.\nTips for this section:\n Ratings and reviews Awards and recognition Players number counter Player testimonials with avatars Statistics, numbers and graphs       To add a reviews and awards section, choose one of the Columns sections from Ptah Section Library.  Footer Tips for this section:\n Duplicate your CTA button at the bottom Newsletter form (optionally) Privacy policy and terms of service       To add the footer sections, choose one of the Footer, Forms sections from Ptah Section Library or additional custom web elements from Ptah Element Library.  Next steps   Connect to Google Analytics Integrate Google Tag Manager and Google Analytics Connect to Mailchimp  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":14,"href":"/docs/payments/","title":"Payments","content":" PaySuper Payment Form PaySuper Checkout creates a secure PaySuper-hosted form that lets you collect payments with just a few lines of code. The Checkout Form loads near instantly and is designed to boost your paying conversion rate.\nTry now See how the Checkout Form looks and feels BUTTON Test Payment  User flow https://docs.pay.super.com/docs/payments/quick-start/  After the payment Receipts Payouts  Payment Token Payment Links Game key "},{"idx":15,"href":"/","title":"Ptah Landing Page Builder Documentation","content":" Promote your game using Ptah Ptah Builder is an easy-to-use tool to build landing pages for video games without any coding.\nPtah provides you with all the features you need to promote your game.\nSign up and try now the editor      Build the responsive landing page you want Ptah naturally creates responsive web pages. It is super-easy to ensure your landing page looks and performs perfectly on any device, mobile or desktop.\n    Build your desired page from a wide range of pre-designed blocks You can make your landing page using ready-made modules and view the result in the real-time preview area. No coding skills required.\nBuild your landing page for a video game with professionally designed blocks of functionality, including system requirements, your products list and others.\nAnalise and target the landing page for your game Grow your business based on the helpful data gained from Ptah Builder integrations: Mailchimp, Google Analytics and others.\nNext steps  Continue with the Add Section Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":16,"href":"/docs/publish/","title":"Publish","content":" Landing page publishing Get a public link To share your landing page and index it in search engines you need to get a public link to the page.\nTo update your landing page, you need to edit page content in Ptah editor and publish it again with the same link.  To publish your landing page:\n Click the Publish button at the top menu.      Paste a page name to the address field and click the Publish button. The public link https://mygame.ptah.me\n      Search engines start to index your page right after publishing.\nCode export Export a source code helps you to serve a landing page on your server.\nTo download source code of your landing page:\n Click the Publish button at the top menu. Click the Download ZIP button and wait just a few seconds for the pages to archive and download. Unzip the downloaded file and move a folder to your server.       Next steps   Search Engine Optimization Connect to Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":17,"href":"/docs/quick-start/","title":"Quick Start","content":" Quick Start 1. Регистрация 2. Создаем новый landing page на дашборде. From your dashboard, you can access, create, and manage your projects.\nStart from scratch or from one of our 100+ templates\nPtah lets you start your design from a completely blank canvas, so there’s no limit to your creativity. That way, you can design a truly custom website—instead of relying on a template built by someone who doesn’t know you or your company. But if you want to get started fast, Ptah offers over 100 beautiful, flexible templates\nЛибо выбираем готовый шаблон СКРИНШОТ с шаблонами, либо создаем все элементы из библиотеки готовых блоков, которые можно кастомизировать АНИМАЦИЯ GIF.  3. Добавляем секции. ССЫЛКА на раздел про создание секции. СПИСОК ссылок для настройки секции и слотов Recipes: Our Recipes will help you try out some of the advanced features of Ptah Builder: -Integration with analytics platforms -Site customization with a custom HTML code -Applying a custom font  4. Интегрируем платежную систему PaySuper. 5. Публикуем. СПИСОК ссылок для SEO, интеграций.  "},{"idx":18,"href":"/docs/seo/","title":"Search engine optimization","content":" SEO checklist for your game\u0026rsquo;s landing page The best SEO strategies help you to increase organic traffic and rankings in search engines.\nFirst of all, you should always keep in touch that your website is designed for humans who use search engines.\nMeaning, you have to optimize your content by already knowing what words and phrases your audience is searching for.\n    Ptah helps you to optimize landing page perfectly. It\u0026rsquo;s the essential part that increases traffic to your web page. We recommend using Ptah Settings to adjust SEO parameters of your landing page.\nHere\u0026rsquo;s the checklist to get you started:\nFor web page URLs:\n Choose the right domain name for your page Set up the secure protocol HTTPS Keep reader-friendly URLs  For web page descriptions:\n Add a page title Add a page description Upload a favicon  For typography:\n Structure your pages with headings Make your content skimmable  For links:\n Social media links  For images and videos:\n Optimize visual data  After you\u0026rsquo;ve launched the landing page:\n Verify and index your site  Choose the right domain name First of all, the domain name must be easy-to-read and brandable.\nMoreover, search engines look at the domain to understand what your site is about and to decide how to rank it. For this reason, keywords that are relevant to your game should appear somewhere in the URL.\nFor example: Your company name is WonderWorld, thus the domain for a game can be like wonderworldgames.com.\nSet up the secure protocol HTTPS Start using HTTPS because this protocol uses an SSL certificate to move data. It gives your users peace of mind when sharing potentially sensitive data on a website.\nMoreover, at the Chrome browser’s alerting system looks more reliable for the user if the website uses HTTPS protocol:\n    Keep reader-friendly URLs  Keep URLs short  A well-designed URL provides a reader-friendly link for humans and an easy-to-understand link for search engines. On the other side, do not use too many similar words in a URL to avoid a keyword stuffing if you.\n Use hyphens to separate words in URL  Google recommends using hyphens (-) instead of underscores (_) in your URLs.\n Use lowercase letters in URL  Search engines can decrypt from uppercase and lowercase letters in URLs, which can lead to duplicate URLs and loss of page rank.\nAdd a page title The title and description mean that you can tell for a search engine exactly what you\u0026rsquo;re talking about to categorize and understand your web page. Also, the title appears in search engines and the Web browser’s title bar.\n    To add a page title, click the Settings icon on the top menu. Choose the SEO tab to enter a title text and click Save.   The recommended format for the title is: Primary Keyword – Secondary Keyword | Brand  The primary keyword must be unique to that page in that there is only one page dedicated to that primary keyword.\nFor example: Mobile endless runner – Wild Fastest Animals | WonderWorld\n Use only one Title Tag and one H1 Header on the web page  Include the page’s primary keyword in both tags. Each page title should be unique.\n Keep your title under 60 characters  It\u0026rsquo;s not a character limit, but you can take into account, that the title length in search results depends on the display width.\nAdd a page description The page description provides a summary of a web page. Search engines such often display the page description in search results.\n     Use your keywords at the beginning at the description  Note, search engines bold keywords in the description when they match search queries. You should match your descriptions to search terms as closely as possible.\n Keep your description under 160 characters  It\u0026rsquo;s not a technical limit, but you can take into account, that the description length depends on the display width, search engine and others.\n Don\u0026rsquo;t include double quotation marks  It\u0026rsquo;s recommended to remove all non-alphanumeric characters from descriptions to prevent removing the description from search results.\n Each page descriptions should be unique  Define a favicon to show in search results Favicon is a visual representation of your website\u0026rsquo;s brand on browser tabs and in search results. That\u0026rsquo;s why the uploaded favicon leads to the brand recognition in search results.\nTo upload a favicon, click the Settings icon on the top menu. Choose the SEO tab to upload a favicon and click Save.  Recommended favicon parameters:\n Name: only use letters, numbers and hyphens (instead of underscores) Format: ico, bmp, png Size: 32x32 px  Structure your pages with headings Search engines typically give headings a higher priority. Hence, use subheaders to break up sections: H2, H3 and so on till H6. So, you can use them to insert your primary keyword in H2 and other keywords in H3, etc.\nYou can use Ptah Settings to set up fonts for headings and text.\n Use only one H1 tag per page Use different text in each headings, without duplicates Optimize your headings with keywords  Make your content skimmable You can use Ptah pre-designed sections and elements to organize content:\n Columns Products System requirements Icon with text       Take a look at how to adjust the ready-to-use sections.\nSocial media links Encourage people to share your content using your social media links. It\u0026rsquo;s important to have the optimized page\u0026rsquo;s URL, title and description because they are displayed in a sharing message.\n    To add social icons to any block hover, over the block and click the Add element icon at the top-left. Select the Social networks element, set up desired social icons and enter links in Settings Panel.      Moreover, Ptah supports the Open Graph tags, so you can tell social media networks like Facebook, Twitter and others what information to display whenever you or anyone else shares a link from your site.\nTo set up Open Graph tags, click the Settings icon on the top menu. Choose the Open Graph tab to enter data and click Save:\n Title - the title of your page. Description - a brief description of the content. Image - the URL of an image for the social snippet. Video - a video file for a social message (if any) Game URL - the URL of the content. Locale - defines the content language. Locale: Alternate - defines the second content language.       Optimize visual data  Give your image and video resources readable file names and use keywords File names should only contain letters, numbers and hyphens (instead of underscores) Keep optimised image size Keep optimised video size  Verify your site with Google Search Console Google Search Console is a free service that helps you manage your site\u0026rsquo;s presence in Google search results. Add and verify your site in Google Search Console.\nNext steps   Connect to Mailchimp Connect to Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":19,"href":"/docs/size/","title":"Size and spacing","content":" Spacing on the page You can create extra space around elements to help your users focus on the content, what may increases conversions.\n    The best practice is spacing and sizing within ratios. Ptah pre-designed sections keep spacing consistent. This is how one of Ptah sections with default spacing looks like:\n    Any element on your page can have spacing that immediately surrounds the element within the border (padding) and outside the border (margin).\n    You can customise the padding and margin of any element.\nYou can update indents for an element right on Settings Panel after selecting the element on Preview Area.\nTo update the block indents, hover over the block and click the Settings icon at the top-left corner.\nTo open the sections Indents Setting, click the Spacing icon at the end of the section\u0026rsquo;s title in Sections Menu.\n     The spacing settings allows you to set the top, bottom, left and right margin and padding of an element.\nTo make all margin or padding values equal, click the Chain icon and set just one of the value and the others will get the same value automatically.\n Size settings and units Section size The section\u0026rsquo;s width is set to full screen automatically on every device.\nYou can adjust the section height:\n     Auto\nThe section\u0026rsquo;s height is set automatically depending on the default indents and its elements sizes.\n Viewport Height\nYou can specify the height in relative terms using viewport-height (vh) where 1 vh is equivalent to 1% of the height of the browser window.\n Pixels\nYou can specify the height in absolute terms using pixel values (px).\n  Make a full-screen section You can use a powerful visual effect to make a full-screen version of the page: set the height of every section to fit the whole height of the browser window and replace scrolling with slider controls.\n    To set up a full screen version, go Page Style \u0026gt; Background and turn on the Full page scroll option.      Text Set up the default text settings in Fonts.\nTo customise the text size, double-click on it and adjust the font size in pixels (px) in Settings Panel.\n    Others You can customize the size of elements in Settings Panel.\n    More than that, you can change the size in Preview Area by clicking the element and stretching the Resizing tool rectangle.      Next steps   Set up fonts and colors Customise the alignment of elements Edit a background image and video  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":20,"href":"/docs/fonts-and-colors/","title":"Typography","content":" Typography The landing page design must be on-brand. Once you have chosen the right typeface and colors, typography makes your landing page appealing and readable.\nSet up fonts Ptah has a built-in Google Fonts library which offers about 1000 fonts to choose from for all your text and button needs.\n To adjust page fonts, open Fonts on Settings Panel. Choose the desired fonts for headline, text and button from the Google Fonts library.       It\u0026rsquo;s recommended to use from 1 to 3 typefaces. If you have more than 3 typefaces it can make your page look chaotic and slow down page load.  Learn more how to customise text properties.\nSet up a color palette Colors perception in branding is of particular importance because colors influence the psychology behind decision-making, thus the landing page conversion rate.\nYou can take advantage of Ptah Style to generate a color palette from a game screenshot or any other image. Ptah color palette generator provides a color combination for texts and buttons.\n To adjust colors, click the Page Style icon in Settings Panel then select the Colors tab. Upload an image to the Color Palette Generator section. Now apply the created palette clicking the Apply palette button or upload another image clicking the New image button.       It\u0026rsquo;s recommended to limit your color palette from 3 to 5 colors.  Next steps   Search Engine Optimization Connect to Google Analytics  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "},{"idx":21,"href":"/docs/videos/","title":"Videos","content":" Videos  Embed a video to a section Fullscreen video background Recommended video parameters  Embed a video to a section Learn how to embed a YouTube video or any MP4 file.\nFullscreen video background To add dynamic effects to your landing page, have a video of your game as a website background. Background video plays in a loop without sound.\nRecommended video parameters  Name: only use letters, numbers, underscores, and hyphens Format: mp4 container, encoded with H.264 Size: the limit for a video is 50 MB Video length: under 40 seconds Frame rate: around 25 frames per second (fps) Resolution : 720p, which is 1280 x 720 pixels  Next steps   Adjust size and spacing on the page Customise the alignment of elements Edit a background  Questions? Support We are always happy to help with a code, improve a guide or consider a feature.    "}];window.bookSearch={pages:pages,idx:lunr(function(){this.ref("idx");this.field("title");this.field("content");pages.forEach(this.add,this);}),}})();