1. Installation
This is an installation guide for the theme Startup Pro (Drupal 10). This document will guide you to install the theme from the scratch on your server. This documentation will also help you to manage various parts of the website's backend and manage the content on your website using this theme.
Fresh Installation
The installation package consists of the complete Drupal website with the theme, various modules, sample content and is excellent for beginners to explore the back-end settings and the sample content. Installing the demo theme is just like installing Drupal but you will have the full demo website installed on your server.
Installing in the Localhost: Create a new folder in the htdocs folder for Xampp (www folder for Wamp). Example: mywebsite. Unpack all files and folders of the demo theme into the folder you just created and open the demo folder.
This section will guide you through general information such as system requirements and installation. Please check your PHP memory cache when using an installation profile. Depending on the installation profile, you need to allocate more memory cache for PHP.
System Requirements
If you are new to Drupal, please take a look at system requirements on drupal.org
PHP | MySQL | |
---|---|---|
Drupal 10 | 8.1 or higher | 5.7.8 or higher |
Installation
If you are new to Drupal, please take a look at the Installation guide on drupal.org to install the standard Drupal website and you can see all guides for Drupal on the Drupal documentation page.
How to do a fresh installation
These instructions are for the people that have experience manually installing Drupal and importing databases. If you do not feel comfortable performing these steps yourself, contact your server administrator or a developer for help. WARNING Do not import the provided SQL file into an existing Drupal database or you will lose all existing data.
The full Drupal installation comes without images, which is only for the theme demonstration.
After purchasing the theme, you will get the download package. Extract the zip file somewhere on your computer.
Step 1
Download a theme package of your choice (e.g. Startup Pro) and extract the package.
Go to the folder startup_pro/
Here, you can find both versions of the theme (startup_pro_d10.zip). Extract the zip which you want and follow the steps. we use the Drupal 8 version as an example. follow the same procedure for Drupal 10.
Step 2
Copy and extract the startup_pro_d10.zip file to the location on your web server where you want your site to be accessed and unzip the file.
Step 3
Go to startup_pro_d10 and unzip the database.zip
Access your MySQL database and create a new DB (e.g. startup_pro)
Import the SQL file startup_pro_d10/database/startup-pro-d10.sql
into the database created (e.g. startup_pro). The PhpMyAdmin might be helpfull for managing your databases.
Step 4
Go to the folder startup_pro_d10/site/sites/default
Copy the file default.settings.php and rename it as settings.php
Give the "write" permission for the files folder and the settings.php file.
Install profile standard for Drupal
Step 5
Go to [your-website]/user
and Login to your website with the username admin
and the password admin@123
and visit admin/people
to change the admin username and password. You may visit admin/config/system/site-information
to change the site-information.
Go through the Drupal configuration found in admin/config options and update all necessary information to reflect on your website.
Visit admin/config/development/performance
Clear all cache and finally, you will be having a full website.
2. Menu
Step 1
Go to Structure > Menu > Main navigation
Click on the Edit menu to add/remove/edit the links of the main navigation.
Step 2
Use 'Add link' to add the new link to the main navigation.
Re-order the menu links by dragging the menus using the drag icon placed before each menu link.
Step 3
Click on the 'Edit Menu' to edit the existing menu.
You can change the menu name in 'Menu link title' field and change the menu link in 'link' field.
Check the 'show as expanded' check box if it has a dropdown menu.
3. Using slider
You can add the slides to the Slider by adding content using the content type 'slider'
Add a content at Content >> Add Content >> slider.
Visit /admin/appearance/settings/startup_pro
to configure your slider's animation settings.
To more about the slider configuration refer to the slider option in theme options.
4. Theme Options
Visit /admin/appearance/settings/startup_pro
to configure your theme's settings. You can manage the theme option like general options, custom options, header options, etc.,
General options
You can manage the general theme option like page pre-loader and content for the maintenance page and coming soon page.
Custom options
You can be easily able to overwrite the existing styles or add your own styles to your site through the Custom CSS without looking into the backend.
Header options
You can manage the header option of the theme here like header variation, sticky header, and topbar links.
There are four header style options in this theme. You can click dropdown and choose any of them as you wish. You can be able to enable/disable the checkbox if you need sticky header option.
Footer options
You can use footer options in the theme settings to modify your contact details and footer description.
Slider options
You can use slider options in the theme settings to modify your slider content position and animation.
Logo & Favicon options
You can add your own custom logo.
You can upload your own custom favicon
Color scheme options
The color scheme option provides the color set, from which you can select the color for your site.
5. Content Types
Basic page
The 'Basic page' content type is used to create the static contents, such as 'About us, Projects' pages.
- Banner Image: Tis field used for uploading the Banner images.
- Sections: This is used to add the sections to the page. You can add the section you want by selecting from the select list.
Blog
The 'Blog' content type is used to add the contents for blogs.
- Banner Image: This field used for uploading the Banner images.
- Blog Image: This field used for uploading the image forf the post.
- Body: This field is used to add the content to the page.
- Category: This is a term reference field that is linked to a vocabulary created specifically for this content type. You can choose the category of the blogs.
- Comments: The is field used for comment on the post.
- Summary: This field is used to add the content to the page (This will be display in listing page).
Info Pages
The 'Info Pages' content type is used to create the static contents, such as 'Support, Terms and Conditions, and Privacy Policy' pages.
- Banner Image: This field used for uploading the Banner images.
- Body: This field used to add the content to the page.
Portfolio
The 'Portfolio' content type is used to add the contents for portfolio.
- Body: This field is used to add the content to the page.
- Category: This is a term reference field that is linked to a vocabulary created specifically for this content type. You can choose the category of the portfolio.
- Image: This field used for uploading the images for Post.
Services
The 'Service' content type is used to add the information of services.
- Banner Image: This field used for uploading the Banner images.
- Body: This field is used to add the content to the page.
- Call us description: This field is used to add the call us description to the page.
- Call us link: This field is used to add the call us button to the page.
- Sections: This is used to add the sections to the page. You can add the section you want by selecting from the select list.
- Service image: This field used for uploading the images for Post.
- Summary: This field is used to add the description of the service (This will be display in listing page).
Slider
- Body: This field is used to add the content to the page.
- Button Link: This field is used to redirect the user to another page of the site.
- Image: This field used for uploading the images.
- Video: This field is used for embed video on Video slider.
- YOUTUBE Url: This field is used to get the URL of the youtube video.
6. Paragraphs Editor
This is used to simplify the work of the editors using Paragraphs. This module uses a modal dialog to show the paragraph listing while adding the content using the paragraphs. Furthermore, paragraphs can be assigned to one or more categories so that they can be found more easily in the revised modal dialog.
To add the categories list:
Go to admin >> structure >> paragraphs_category
Then, you can add the categories here.
Go to the paragraph edit page and select the category.
Refere to the paragraphs module to know more about it.
To make use of the re-styled dialog:
You should configure your Paragraphs reference field widget to use the modal dialog for adding paragraphs to your content
Step 1
Add a paragraph reference field (e.g. section) and go to Manage form display.
Step 2
Select the paragraph widget as 'Paragraphs EXPERIMENTAL'.
Click the settings icon displayed on the rigt-hand side and select modal form from the Add mode select box. Further, here you can edit the configurations based on your requirement.
7. Taxonomy / Category
Taxonomy is used for categorizing the content of your site based on the tags.
Visit /admin/structure/taxonomy
to manage your category list
Click on the 'list term' to add/edit/delete the categories
8. Webform
Visit /admin/structure/webform
to manage your forms.
This page lists all available webforms
Use 'Build' to Edit the fields of the form
Creating a new field
Click on the 'add element' to add the new field to your form.
Use the name of the key to placing your field in the file. Here 'name' is the key name use this ad your field_name
1. Open startup_pro/templates/webform then open the file which has the corresponding file name. (with a text editor)
2. Find {{ element.elements.upload_cv }}
3. Insert code after: {{ element.elements.field_name }}
4. Save the file and go to Configuration > Performance to clear site cache
9. Block Layout
The block Layouts are the regions that are a special arrangement of Rows, , and they provide basic page structure for your site. There are many pre-built layout regions that you can use or create new regions.
The Blocks you placed on the specific region that will be shown at that place on your site. Adding blocks to the region will explain below.
10. Region
If you are using the demo install profile, then this setup had been already done. In such case, you may only need to modify things.
However, We still recommend that you to read this section carefully because it contains important information which will be useful during the modification of the block configuration.
Assigning block
Blocks are placed in regions via the Block Admin page Dashboard > Structure > Blocks
Here you can Enable, throttle, place, configure blocks and Add a region.
Creating a new region
1. Open startup_pro/startup_pro.info.yml file (with a text editor)
2. Find footer_fifth: 'Footer fifth'
3. Create your region: region_name: 'Region Name' (e.g. banner: 'Banner')
4. Save startup_pro.info.yml file and go to Configuration >> Performance to clear site cache
Placing your block region
1. Open startup_pro/template/layout/page.html.twig file (with a text editor)
2. Paste the region (e.g. page.region_name) to wherever you want to display the block region:
You can place the existing block or create a custom block on the region where you want.
11. Shortcodes
We provide pre-built shortcodes, you can use these styles while adding content to your site. This will be used only on the body field.
To use: If you want to add any section available in the shortcodes page in your new page or existing page, You can copy the code from the shortcodes page (e.g. Accordion) and place it in the body field and modify the dummy content.
12. Tour Module
DRUPALTHEMES.IO exclusively provides the "Tour" option which takes you to context-sensitive tour for the main parts of your website interface via tooltips. Using this tour, you can easily able to customize your website.
After enabled the tour module, Visit the home page of your site to start a tour and you will see "Tour" button in the top-right corner of the admin menu. Clicking this button starts the tour.
Take a Tour
To take a Tour, click on the 'Tour' link. It will show the popup to start the tour, click next for further information.
The required information of the sections shows on the popup, click next to know the flow of the page.
13. Technical Support
Thank you for purchasing our theme and reading the documentation! We hope this guide helped you to create the best website you were envisioning. Again, thank you so much for using our theme. As said in the beginning, we would be glad to help you if you have any questions related to this theme.
Please feel free to contact us via email : support@drupalthemes.io or submit an enquiry to our enquiry
When you contact us, please take a screenshot with descriptions of your problem. More details about your problems, you provide, would help us to figure out and respond to you sooner.
SCOPE OF SUPPORT
Our support only includes helping with problems using any features and any bugs that may arise. Unfortunately, we cannot provide support for customizations or third-party plugins, or any issues that may have arisen while you work with the theme. If you need help with customization of your theme, please contact us with your requirements. Our technical team will help you customize the theme for your needs at extra charge.
SUPPORT SCHEDULE
Our technical team is available from Monday to Friday. If you email or submit an enquiry during the weekend, please be patient and we will respond to you at the earliest.