01. Welcome
Thanks for choosing our theme. Here you can find general information on how to work with our theme and answers to frequently asked questions.
02. Theme Installation
First of all, you need WordPress installed on your server. Learn how to install WordPress.
Install parent and child theme
01.
From the WordPress dashboard, go to Appearance -> Themes and click "Add New".
02.
In the next screen, click on the "Upload Theme" button.
03.
Click the "Choose File" button.
04.
In the dialog window, select file alessa.zip from the downloaded package.
05.
When the theme archive is selected, click the "Install Now" button.
06.
Wait while the installation process. After that, click "Return to Themes page".
07.
Repeat previous steps, but now select the alessa-child.zip file from the package.
08.
After the Child Theme is installed, activate it from the installation screen or Themes page.
09.
The theme is installed and activated. Now, it's time to "Install Plugins".
Plugins Installation
01.
Click "Install plugins" in the Appearance. Select the plugins you need (or check all).
02.
Click on the "Bulk actions" dropdown, select "Install", and click the "Apply" button.
03.
Then wait for a while to get a message that all plugins are installed and activated.
Import Demo Content
01.
Go to Appearance -> Import Demo Data and click the "Import Demo Data" button.
02.
Wait while importing process. It may take several minutes.
03.
After receiving the "That's it, all done!" message, importing is finished.
Theme installation is complete. Now, your website looks the same as our demo does. And it is time to go to the theme customization.
03. Customization
Customizing Alessa Portfolio theme is easy, as ABC. All the theme settings are located in the WordPress Customizer. But, this is not just an ordinary Customizer. In our theme, it turns into a convenient and flexible tool for customizing your website. To enter the Customizer, you should click Appearance -> Customize.
Also, it now has responsive controls which allow you to set responsive values for some options like fonts, spacing, etc., helping you to fine-tune the look and feel for mobile devices. You can recognize responsive controls by three icons , , next to it. The click on one of the icons changes the viewport size to the appropriate size, and you can set the value for that screen size. You can also change the viewport size using the same icons at the panel bottom.
The settings of the theme are grouped into panels and sections. We have tried to make it simple to use, so we are sure that it will be easy to find the needed options.
04. Maintenance Mode
One more important thing, which is very helpful while you create your website is a Maintenance Mode. Enabling this feature will prevent your visitors from viewing unfinished content. No additional plugins are required for this anymore.
While you create your beautiful website, you can turn on the Maintenance Mode for the entire website, and no one, except you or other users with admin rights, will see the content. To do that, go to the Appearance -> Customize -> Maintenance Mode.
While you create your beautiful website, you can turn on the Maintenance Mode for the entire website, and no one, except you or other users with admin rights, will see the content. To do that, go to the Appearance -> Customize -> Maintenance Mode.
In the "Maintenance Settings", you can set a background image, adjust its opacity, add a title and a short message for your visitors. Also, you can optionally enable a count-down timer to a specific date to keep your visitors informed about when your website becomes live. And finally, here you can adjust the typography and colors of the Maintenance Page. Some of these settings, such as colors and typography, are also used for single pages, closed on the maintenance.
Speaking of Single-page Maintenance Mode. If your website is already live and you need to add a new page, you can enable maintenance mode for that specific page only.In that case, your visitors can feel free to explore the entire website, except the page you are working on. To do that, when editing a single page or post, you need to change the option "Maintenance Mode" in the "Maintenance Settings" block. After enabling the "Maintenance Mode", as in a previous case, you can set a background image, adjust its opacity, add a title and a short message for your visitors.
Speaking of Single-page Maintenance Mode. If your website is already live and you need to add a new page, you can enable maintenance mode for that specific page only.In that case, your visitors can feel free to explore the entire website, except the page you are working on. To do that, when editing a single page or post, you need to change the option "Maintenance Mode" in the "Maintenance Settings" block. After enabling the "Maintenance Mode", as in a previous case, you can set a background image, adjust its opacity, add a title and a short message for your visitors.
05. Open Graph and Analytics
In the new version of our Shadow Core plugin, which is included in our theme, you can enable open graph meta tags. It will improve your website compatibility with social networks and search engines. For modern sites, this is simply a necessary thing. To enable the Open Graph meta tags, you need to go to the Appearance -> Customize -> Open Graph and Analytics.
As you can see from the image above, there are two additional text areas to insert the code, that will be placed before the </HEAD> and before the </BODY>. It can be very useful when you need to add additional CSS files or scripts from third-party plugins, like Mailchimp, for example, or to gather analytics information with Google Analytics, and so on.
06. Sidebars
Our theme has three predefined sidebar areas: one to show at the left or right side of the content when it is needed. The second area is the aside bar, which is toggled from the icon in the header. And the third is the area before the footer, which can be turned on or off for some pages. Content of these widgets areas you can adjust in the Appearance -> Widgets.
The area called "Sidebar" is used as the default WordPress sidebar to display widgets at the side of the page content if the sidebar for this page is enabled. The area called "Aside Bar" is a toggled section with widgets. And the "Footer Widgets" is the area before the footer. You can drag and drop widgets to the related areas.
One more useful thing is that you can use text instead of the dots icon for the sidebar toggler. To do that, go to the Appearance -> Customize -> Header Settings. Here you can turn on the option "Use Text for Toggler" and specify label text. Also, here you can disable toggled sidebar by turning off the option "Aside Bar Toggler".
The area called "Sidebar" is used as the default WordPress sidebar to display widgets at the side of the page content if the sidebar for this page is enabled. The area called "Aside Bar" is a toggled section with widgets. And the "Footer Widgets" is the area before the footer. You can drag and drop widgets to the related areas.
One more useful thing is that you can use text instead of the dots icon for the sidebar toggler. To do that, go to the Appearance -> Customize -> Header Settings. Here you can turn on the option "Use Text for Toggler" and specify label text. Also, here you can disable toggled sidebar by turning off the option "Aside Bar Toggler".
07. Portfolio Posts
Portfolios is a special post format to include your creative portfolio works. Portfolio posts can use one of three built-in layouts with media block, or you can disable the media block to use pure Elementor to create your post. To add a new Portfolio post, go to the Portfolio -> Add New.
First of all, you can select the "Media Block" style. The default value for this and other portfolio options, you can set in the Customize -> Portfolio Settings. But back to the "Media Block". With this feature, you can easily create image galleries for your portfolio posts. There are three layouts:
"Aside Content" - in this fullscreen layout, the gallery will take up the bulk of the screen, with the content placed in a smaller area on the left or right side. With this layout, you can use the next gallery layouts: Ribbon, Slider, Grid, Masonry, and Adjusted. Each gallery style has additional options, which appear below, depending on the selected layout.
"Above Content" - in this layout, the gallery is displayed above the content and fills the entire screen in width and height. For this layout, you can use the Ribbon or Slider galleries. As in the previous case, additional options will be displayed below.
"Aside Sticky Column" - in this boxed layout, the content area will be split into two columns with gallery images in one column and post content in the other. The shortest column will be sticky while scrolling, while the longest is scrolled.
"No Media Block" hides the gallery, but you can still edit the post with Elementor the way you want.
"Aside Content" - in this fullscreen layout, the gallery will take up the bulk of the screen, with the content placed in a smaller area on the left or right side. With this layout, you can use the next gallery layouts: Ribbon, Slider, Grid, Masonry, and Adjusted. Each gallery style has additional options, which appear below, depending on the selected layout.
"Above Content" - in this layout, the gallery is displayed above the content and fills the entire screen in width and height. For this layout, you can use the Ribbon or Slider galleries. As in the previous case, additional options will be displayed below.
"Aside Sticky Column" - in this boxed layout, the content area will be split into two columns with gallery images in one column and post content in the other. The shortest column will be sticky while scrolling, while the longest is scrolled.
"No Media Block" hides the gallery, but you can still edit the post with Elementor the way you want.
In the "Portfolio settings", you can also see the two additional tabs: "Layout Settings" and "Meta Settings".
In the "Layout Settings" tab you can disable spacings above and below the content, hide post title or featured image, enable or disable post comments, and change position and visibility of widgets areas.
In the "Layout Settings" tab you can disable spacings above and below the content, hide post title or featured image, enable or disable post comments, and change position and visibility of widgets areas.
In the "Meta Settings" tab, you can enable or disable displaying of entire post meta or some selected meta fields.
08. Portfolio Listing
In our theme, we have decided not to add any specific templates for the portfolio posts listing. Instead of this, we have added 4 new widgets for the Elementor. That allows you to add any posts listing on any Elementor page. It can be blog posts, portfolio posts, or even custom items with external links. Due to that, we have received unlimited possibilities to create whatever listing pages you may desire.
In this theme we have next 4 widgets for posts listing:
In this theme we have next 4 widgets for posts listing:
Each of these widgets has a lot of options to adjust the layout to fit your needs. Don't be afraid to experiment!
09. Additional Elementor Widgets
Alessa Portfolio works well with the Elementor Page Builder plugin. This is one of the most powerful and easy-to-use page builders for WordPress. You can find more information about Elementor and how to use it at the official website.
Also, our theme includes a proprietary plugin Shadow Core which adds new widgets for Elementor. You can find these widgets in the "Shadow Elements" section of the Elementor widgets list. This collection of widgets can extend with updates. But, let's explore what is included so far:
Also, our theme includes a proprietary plugin Shadow Core which adds new widgets for Elementor. You can find these widgets in the "Shadow Elements" section of the Elementor widgets list. This collection of widgets can extend with updates. But, let's explore what is included so far:
Everything shown in our demo works without any additional plugins. Everything you need is already included in the theme package.
Note: Our theme doesn't reqire the Elementor PRO plugin. Also, some features of the PRO version can be unsupported.
Note: Our theme doesn't reqire the Elementor PRO plugin. Also, some features of the PRO version can be unsupported.
10. Strings Translation
Alessa Portfolio Theme is ready for translation on any languages using the translate plugins. Also if you do not need transition but just want to change any text string to another text - you can also do it with translation plugins, like "Loco Translate Plugin".
In the next video instruction we will show you how to install this plugin and how to change strings on the example.
In the next video instruction we will show you how to install this plugin and how to change strings on the example.
01.
Go to Plugins > Add New.
02.
In search string type "Loco".
03.
On the item "Loco Translate Plugin" press "Install" wait a few sec and press "Activate".
04.
Then go to Loco Translate > Themes, select Alessa theme (not Child theme, even if you use one) and press "New language".
05.
In the next window choose your language and location for the translation file. We strongly recommend to use the "Custom" option like shown in our video.
06.
Press "Start Translating".
07.
In the translating window you can use the search bar to quickly find needed text.
08.
When found needed text click on it and then in the field "Translation" write a new value.
09.
After finishing, save your changes and you will see the result of the translated string.
11. Theme Update
Staying up to date is very important to get all new features and improvements. First of all you need to know that the content of your website will not be affected if you will update the theme right. The only thing that can be overwritten with the update is your any changes in the code of the parent theme. That is why we strongly recommend to use the Child Theme and do not change the code unnecessarily.
There are a couple of ways to update your theme version.
First way is to use the "Envato Market" plugin. This is most easily and right way to update your themes. You can find more information about how to work with this plugin here: https://envato.com/market-plugin/.
Second way is to download the new version from https://themeforest.net/downloads and then repeat steps from "Install Theme" but use the new downloaded archive. In that case WordPress will compare both theme versions and will prompt you to update the theme. This works only on WordPress version 5.5 or higher.
Third way is to download the new version from https://themeforest.net/downloads and manually upload files from the "alessa" folder of the archive onto your server in wp-content/themes/alessa with overwriting all existing files.
There are a couple of ways to update your theme version.
First way is to use the "Envato Market" plugin. This is most easily and right way to update your themes. You can find more information about how to work with this plugin here: https://envato.com/market-plugin/.
Second way is to download the new version from https://themeforest.net/downloads and then repeat steps from "Install Theme" but use the new downloaded archive. In that case WordPress will compare both theme versions and will prompt you to update the theme. This works only on WordPress version 5.5 or higher.
Third way is to download the new version from https://themeforest.net/downloads and manually upload files from the "alessa" folder of the archive onto your server in wp-content/themes/alessa with overwriting all existing files.
12. Credits
- Elementor - elementor.com
- Metabox - metabox.io
- Contact Form 7 - wordpress.org/plugins/contact-form-7
- jQuery - jquery.org
- PhotoSwipe - photoswipe.com
- Justified Gallery - miromannino.github.io/Justified-Gallery