Under landing page in this article is understood a web page with its own design different from the design of other website pages and visually not connected to them, or a one-page microsite with unusual content composition. As a rule, such landing pages are built with a lot of complex HTML markup which makes their editing in a simple WYSIWYG editor a non-trivial task and thus requires manual editing of their source code.
Sometimes it may be convenient to publish a landing page using one of design themes available on Webasyst website.
This article implies that you know how to create a web page using HTML, CSS, and JavaScript. Here you will learn how to publish such a page in Webasyst in the form of a design theme. The official documentation on creating design themes for Webasyst is available in developers section, but it is not necessary to delve into the intricacies of design theme creation to publish only one page. You may use the standard "Default" theme as a template to create your own landing page design theme.
Publishing a landing page using Site app
- In section Structure of the Site app, add a new rule for Site app and enter the URL of your future landing page.
- In section Design → Appearance create a clone for the "Default" theme.
- Use link "Rename theme" to change the name and ID of our theme clone; this will help you better find your way around all your themes should create plenty of theme in the future—each for a new landing page.
- In your landing theme, in section Design → Templates, delete all contents from file index.html and add your custom HTML code there.
- Determine which part of your landing page should be replaced with message "Page not found" in the case when a website visitor erroneously adds extra characters to the end of your landing page URL. Copy this part of your HTML code and replace it with the line shown below:
{include file="`$wa_active_theme_path`/main.html" inline}
- In section Pages, create a single page with empty URL for your landing settlement (rule), switch to HTML-editing mode, and paste the main page content copied in the previous step into the HTML editor.
- In file main.html available in section Design → Templates, you may remove all contents except for the {$content} variable; this variable is automatically replaced with the contents of the page you have created in Pages section, or with "Page not found" message.
- Edit the contents of error.html template so that message "Page not found" is displayed naturally within your landing page's general layout.
- Editing other files is not necessary because they are not used on the website unless you intentionally include them in your design theme's main files.
- If necessary, create new CSS and JavaScript files in your landing theme and include them in index.html file. Graphical and other non-textual files can be uploaded in File manager section.
- Finally, in section Structure, open the properties of your landing settlement, select the landing theme you have just finished editing, and save the settings.
Done! Now open the URL of your landing page in a browser and check whether everything is displayed properly. For testing purposes, add some arbitrary characters to the end of the URL to see how the "Page not found" message is displayed.
0 comments
No comments yet.