- Introduction
- Install and Activating Theme
- Recommended Plugins
- Importing Demo
- Customizing Header
- Customizing Footer
- Typography Settings
- Color Settings
- Global Styles
- Adding/Editing Logo/Brand
- Adding/Editing Site Icon/Favicon
- Adding/Editing Navigation
- Customizing Templates Frontpage/Blog/Page and more
- Customizing Templates Parts
- Customizing dynamic Query Loop
- Reset/Restore default content and layout for Templates and Template Parts
- Adding Animation On Scrolling
Introduction
SaasLauncher is a powerful FSE WordPress theme designed for SaaS, corporate businesses, and creative agencies. With 30+ pre-built sections, SaasLauncher makes building a stunning, fully customized website effortless. Full Site Editing (FSE) provides unlimited design flexibility, making it perfect for SaaS landing pages, corporate sites, and personal portfolios. Create your website with total control and seamless ease.
Install and Activating SaasLauncher Theme Documentation
There are 2 ways to install SaasLauncher:
- Installing using ZIP file:
- Download the SaasLauncher theme installation file from here by clicking the Download button from here theme page.
- Login to your WordPress website and go to Appearance > Themes
- Click on the Add New button and then click on the Upload Theme button
- Chose the .zip file you downloaded (for example saaslauncher.zip)
- Click on the Install Now button
- After the theme is installed, click on the Activate button.
2. Installing using WordPress Theme Directory
- Go to Dashboard > Appearance > Themes
- Click on the Add New button. In the search field, type SaasLauncher and hit the Enter key.
- Now, click on the Install button and then the Activate button to install and activate the theme.
Recommended Plugins
You must install and activate the following plugins to get the best out of the SaasLauncher theme.
- Cozy Blocks: Provide 30+ advanced blocks for FSE and Gutenberg editor.
- Cozy Essential Addons: It provides basic skeletal for the custom post type. It gives base functionality of custom post type so that we will extend the features and layout for our products like plugins and themes.
- Advanced Import (To import demos): It is a powerful data importer plugin. It has several features that make it more manageable and convenient for WordPress user to import their WordPress site data from another website.
Importing Demo
After you install and activate the theme and the plugins, follow the steps below to import demo content:
- Go to Appearance > CT Demo Import
- Click on the “Import” button of the demo you want to import
- Read the confirmation message and click on “Yes, Import Demo!”
- You may need to wait a while because it may take some time.
- That’s all, your demo will successfully be imported and you can start editing your content.
Customizing Header
- Log in to your WordPress Dashboard.
- Click “Edit Site” at the top.
- Under areas, click on the header section to customize it.
- Save your changes.
OR
- Go to “Appearance” in the Dashboard.
- Click “Editor.”
- Choose the “Patterns” tab.
- Under template parts, select “Header” to customize it.
- Save your changes.
Customizing Footer
- Log in to your WordPress Dashboard.
- Click “Edit Site” at the top.
- Under areas, click on the footer section to customize it.
- Save your changes.
OR
- Go to “Appearance” in the Dashboard.
- Click “Editor.”
- Choose the “Patterns” tab.
- Under template parts, select “Footer” to customize it.
- Save your changes.
Typography Settings
To customize the typography:
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Click on the styles icon at the top right
- You will see an option for typography, click on it.
- You can now edit the typography from this section.
Color Settings
To change the theme’s colors or to add your own custom colors,
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Click on the styles icon at the top right
- Now, click on the colors tab and go to the palettes section.
- You can now choose whichever color you like or even add your own custom colors.
Global Styles Switching
To switch the global styles of the theme,
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Click on the styles icon at the top right
- You will see an option to browse styles, click on it.
- Choose whichever global style you feel suits your website.
Adding/Editing Logo/Brand
You can add/edit the site logo of your website by following these steps:
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Click on the template part where you want to add/edit your logo
- Click on the blue ‘+’ symbol on the top left
- Search for ‘site logo’ and add it
- Now, upload your site logo
- You can edit the logo from the dashboard on your right.
Adding/Editing Site Icon/Favicon
To add/edit the Site icon/favicon, follow these simple steps:
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- You can also choose your site logo to be your site icon by clicking on the site logo and enabling the ‘Use as site icon’ option.
- If you want to use a different favicon than your site icon then click on ‘Site icon settings’
- This will redirect you to a new tab where you can add your site icon/favicon
- Now, set your site icon from here.
Adding/Editing Navigation
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Go to Navigation and select the navigation you would like to edit
- You can add, remove, or update your navigation from this dashboard.
Customizing Templates
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Go to Templates and select the template you would like to edit and start customizing
Customizing Templates Parts
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Go to patterns and at the bottom, you will see template parts.
- Select the template you would like to edit and start customizing
Customizing dynamic Query Loop
You can add a dynamic query loop to your website by following these steps:
- Log in to the WordPress admin Panel.
- Go to Appearance > Editor
- Click on the template part where you want to add a query loop
- Click on the blue ‘+’ symbol on the top left
- Search for ‘query loop’ and add it
- You can now choose a pattern for your query loop or start from scratch.
- Choose from this range of patterns for query loop or create your own.
- Now to customize the dynamic query loop, select the query loop and disable ‘Inherit query from template’.
- Now, by going into display settings, you can customize your query loop.
- You will also find other customization options on the right side of the editor.
Reset/Restore default layout for Templates/Template Parts
To reset or restore the default layout for templates or template parts, follow the steps below:
- Go to Admin Dashboard > Appearance > Editor
- Now, click on the ‘Templates or Template Parts’, whichever you would like to restore
- You will see three dots around the template or template parts you have modified
- Click on the three dots and you will get an option to clear customization.
- Click on the button to restore the default layout for templates or template parts.
Adding Animation on Scrolling
To add animation on scroll effect for any section of block, follow the steps below:
- Go to Admin Dashboard > Appearance > Editor (Or you can access direct from top bar with clicking on “Site Edit” )
- Click on any blocks like group, columns or paragraph where you want to add animation effect on scroll.
- Click on “Advanced” at the bottom of the right sidebar panel.
- Add the following animation classes on “Additional CSS Classes field” (type space for multiple class name)
Animations Class Name:
Fade animations:
- saaslauncher-fade
- saaslauncher-fade-up
- saaslauncher-fade-down
- saaslauncher-fade-left
- saaslauncher-fade-right
- saaslauncher-fade-up-right
- saaslauncher-fade-up-left
- saaslauncher-fade-down-right
- saaslauncher-fade-down-left
Flip animations:
- saaslauncher-flip-up
- saaslauncher-flip-down
- saaslauncher-flip-left
- saaslauncher-flip-right
Slide animations:
- saaslauncher-slide-up
- saaslauncher-slide-down
- saaslauncher-slide-left
- saaslauncher-slide-right
Zoom animations:
- saaslauncher-zoom-in
- saaslauncher-zoom-in-up
- saaslauncher-zoom-in-down
- saaslauncher-zoom-in-left
- saaslauncher-zoom-in-right
- saaslauncher-zoom-out
- saaslauncher-zoom-out-up
- saaslauncher-zoom-out-down
- saaslauncher-zoom-out-left
- saaslauncher-zoom-out-right
Easing functions:
- saaslauncher-linear
- saaslauncher-ease
- saaslauncher-ease-in
- saaslauncher-ease-out
- saaslauncher-ease-in-out
- saaslauncher-ease-in-back
- saaslauncher-ease-out-back
- saaslauncher-ease-in-out-back
- saaslauncher-ease-in-sine
- saaslauncher-ease-out-sine
- saaslauncher-ease-in-out-sine
- saaslauncher-ease-in-quad
- saaslauncher-ease-out-quad
- saaslauncher-ease-in-out-quad
- saaslauncher-ease-in-cubic
- saaslauncher-ease-out-cubic
- saaslauncher-ease-in-out-cubic
- saaslauncher-ease-in-quart
- saaslauncher-ease-out-quart
- saaslauncher-ease-in-out-quart