Made by Pe Themes
First of all, Thank you so much for purchasing this template and for being our customer. You
are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from
the author directly.
This documentation is to help you regarding each step of customization.
Please go through the documentation carefully to understand how this template is made
and how to edit this properly.
When you purchase Saren from Themeforest, you need to login your account and download
theme files from Themeforest. Please make sure you downloaded All file & Documentation
option.
After you downloaded theme files you will find inside it;
01. Documentation - Contains Saren theme documentation
02. saren.zip - Theme file for WordPress installation, if you want to install
your theme manually (with FTP) you must unzip this file.
03. saren-child.zip - Child Theme file for WordPress installation, if you want to
install your theme manually (with FTP) you must unzip this file.
There's two way for install themes on WordPress, you can select which one is good for you.
Theme Installation via WordPress Admin;
Step 1: Login your WordPress admin dashboard
Step 2: Navigate to Appearance > Themes
Step 3: Click on Upload Theme
Step 4: Click on chose file, select "saren.zip" and click Install Now.
Step 5: After upload is finished, click on Saren to Activate
Theme Installation Manual (via FTP);
Step 1: Login to your hosting server via FTP client.
Step 2: Go to the folder /wp-content/themes
Step 3: Upload "saren.zip" extracted content
Step 4: Login your WordPress admin dashboard Upload Theme
Step 5: Navigate to Appearance > Themes
Step 6: Click on Saren to Activate
After you install and activate Saren, you need to setup some couple of things to use it best condition. Please follow these documentation.
Every theme needs some plug-ins and with Saren, you can install necessary plugins with only one click. Please follow these steps below;
Step 1: After you activate Saren, you will see a sub-menu named "İnstall Plugins" inside of Appearance menu.
Step 2: Click on İnstall Plugins
Step 3: Install and activate all plug-ins
Before start using Saren, you need to activate your copy with the purchase code provided by
ThemeForest.
Please follow these steps blow to get your purcahse code;
Step 1: Go to your ThemeForest profile and click on "Downloads" tab you'll see the items you purchased. Find Saren and click on "Download" in the dropdown menu click on "License certificate & purchase code (PDF)"
Step 2: You'll see your purchase information in the PDF file you downloaded. Copy
"Item Purchase Code" value.
Step 3: Navigate Theme Options on your admin dashboard. You'll see theme
activation section at top of the page. Paste your purchase code and click on
"Activate".
Without activating the theme; you can not access to "Theme Options , One Click Demo Import and Custom Elementor widgets". So before moving to demo import step you must activate your copy first.
Saren demo content can be install with one cliek demo importer;
If you want to install demo content automatically with one click demo importer which is strongly recommended by us, please follow these steps below;
Step 1: After you activate the theme and install plugins, there'll be a submenu ("Import Demo Data") appears below "Appearance" menu on WordPress Admin Dashboard click on it.
Step 2: Click on the button.
Step 3: Just wait a couple of minutes and everything will be done.
After the installation is done all pages, portfolios. posts will be imported correctly, menus and pages will be setted.
The images and videos you see on the demo website are not included in your purchase through Envato; they are copyrighted images and videos used for demonstration purposes with permission from their respective owners. Therefore, when the demo installation is completed, these images and vıdeos will not be uploaded to your website.
Saren offers a wide range of template library that allows you to insert sections/containers from other demos into your website.
Step 1: Navigate "Appearance > Install Plugins" on your admin dashboard and install/acticate "Template Kit Import" plugin.
Step 2: Navigate "Tools > Template Kit" on your dashboard.
Unzip the "template_library.zip" file which will be included with the zip file
you downloaded from ThemeForest. And install the template zip file you prefered via "Upload
Template Kit ZIP file" section.
Step 3: After you upladed the template kit there'll be a new button appear at adding element section Elementor editor. Click on green Envato logo.
Step 4: Here you'll see the template kit items you installed. Just click on "Insert Template" and the container will instered into the page.
If you install demo content with one click demo import method this setting will be done automatically.
After you install ml you need to setup navigation menu. Follow these very easy steps below:
Step 1: Navigate Appearance > Menus in your WordPress admin dashboard
Step 2: You will see a menu named Main Menu created
Step 3: Scroll to bottom of the page
Step 4: Click Primary Menu checkbox
Step 5: Click on Save Menu
If you install demo content with one click demo import method this setting will be done automatically.
After you install demo .xml you need to setup home page. Follow these very easy steps below:
Step 1: Navigate Settings > Reading in your WordPress admin dashboard
Step 2: There is two variation for homepage display.
Step 3: Click on A static page(select below) checkbox, and select an home page.
Step 4: Select Blog in Posts page select menu.
Step 5: Click on Save Changes.
After you activate theme and install plugins there'll be a new menu item appears ("Theme
Options") on WordPress Admin Dashboard.
You can find all theme settings here let's take a look whats in it;
This is the section where you can make general settings for your website.
1. First, you'll see four switchers that allow you to enable or disable the "Page Loader," "Page Transition," "Smooth Scroll," and "Mouse Cursor" features on your website.
2. In the second section, you can enable the "Grain" feature to add a grainy background effect to your website and adjust the opacity of these grains using the control on the right.
3. The next section allows you to set the main, secondary, and background colors for your website. The colors in the "Default Site Colors" area on the left will be applied when the "Site Layout" option in your page's "Page Edit" section is set to "Default." The colors you enter in the "Switched Site Colors" area on the right will appear when the "Site Layout" option is set to "Switched." If you're using a "Layout Switcher," you should also define the colors that will appear when the layout switches in the "Switched Site Colors" area.
4.In the final section of the Site General area, you need to upload the logo images that will be used on your website.
The logos uploaded in the "Main Site Logo" and "Main Sticky Logo" fields will appear when the "Page Layout" is set to "Default" and the "Layout Switcher" is not active.
The logos uploaded in the "Secondary Site Logo" and "Secondary Sticky Logo" fields will appear when the "Page Layout" is set to "Switched" or when the "Layout Switcher" is active.
The logos uploaded in the "Sticky Logo" and "Secondary Sticky Logo" fields will be visible when you use a Sticky Header and the user starts scrolling.
You can adjust your website's Header and Footer settings here.
1. Header Type / Footer Type
In the Header and Footer sections, you will see the "Header Type and Footer Type" settings and the corresponding "Default" and "Template" options. If you set these options to "Default," you'll use the default footer or header that you saw in the demo. If you set it to "Template," you can use a template that you created yourself.
Pre-Made Template
When you purchase the theme, a header and a footer template are pre-made and included with the theme. To view or edit them, go to the WordPress panel and follow the steps: "Templates > Saved Templates > Pe Header / Pe Footer." Here, you will see the "Main Header" and "Main Footer" templates. These are the default templates we have prepared. You can click the "View" button to see them, or the "Edit with Elementor" button to edit them.
Create Template
To create a Header or Footer Template, follow these steps:
Step 1: In the WordPress panel, go to "Templates > Saved Templates."
Step 2: Click the "Add New Template" button at the top of the page.
Step 3: In the window that appears, select the template type as "Pe Header" or "Pe Footer."
Step 4: Enter the template name.
Step 5: Click the "Create Template" button.
Step 6: Exit the WordPress editor from the Elementor page that opens.
Step 7: Set the "Template" option under the "Post Attributes" section to "Elementor Canvas."
Step 8: Click the "Edit with Elementor" button. Now you can create the header or footer.
Step 9: After creating the template, you can use it by going to "Theme Options > Header/Footer" and selecting it in the "Select Header Template" or "Select Footer Template" options.
2. Header Layout
This setting will change the header layout based on the colors you set in the "Site General" section.
3. Header Behavior
This setting offers three different options: "Static, Sticky, and Fixed."
1. Static
In the Static Header type, the Header always stays at the top of the page and will only be visible when scrolling is at the very top.
2. Sticky
In the Sticky Header type, the Header becomes visible when scrolling up and disappears when scrolling down. You can also set a different Header to be visible at the very top of the page than in other areas.
3. Fixed
In the Fixed Header type, the Header will always be visible at the top of the page. Similar to the Sticky Header, the Header that appears at the top of the page can be different from the Header that appears in other sections.
In the Fixed and Static header types, the "Sticky Logo" you set in the "Site General" section will appear after scrolling starts in the different header mentioned. Additionally, when creating your header elements, you can adjust when they are visible by changing the "Show" setting you will see.
4. Header Background Color/Sticky Header Background Color
This is the area where you can set the background color for your Header and Sticky Header. If you don't want to use a background, check the "Transparent" box.
In this section, you can make some basic adjustments for your portfolio pages from the "Portfolio Settings" section on the left, and for your post pages from the "Posts Settings" section on the right.
1. Templates
In the Posts/Pages section, you will see four different template selection controls: "Global Project Hero Template, Next Project Template, Single Post Template, and 404 Page Template."
Global Project Hero Template
When creating portfolio projects, you will need to select a Project Hero Template option. The template you select in the "Global Project Hero Template" field will be the Hero type that appears when the option in the Project editor is set to "Use Global."
Next Project Template
At the bottom of your project pages, there is a "Next Project Section." When clicked, it will navigate to the next project in your project list. The template you select in the "Next Project Template" field will determine the design of this section.
Single Post Template
The appearance of the post pages you create can be determined by the template you select here.
404 Page Template
If an incorrect address is entered in your website link, the user will be redirected to an error page. The template you select in the "404 Page Template" field will determine the appearance of this error page.
2. Custom Portfolio Slug
This is a control that allows you to change the extension in the portfolio URL of your website. The default portfolio URL is set as "portfolio." So, your URL will look like www.your_website_address.com/portfolio/project_name. When you enter a value in the "Custom Portfolio Slug" field, the portfolio slug in the URL will be replaced with the value you entered.
3. Next Project Section
This is the switch that allows you to turn the Next Project Section on or off. When this is off, the next project section will not be visible.
In the Shop section, you can adjust the settings for your shop and product pages. There are two different titles here: "Shop Page" and "Single Product."
1. Shop Page
You can make various settings related to the page where your products are displayed.
1. Sidebar
There are three different options you can choose from in this setting. You can close the sidebar or position it on the right or left of the page.
2. Title Settings
You can adjust the title settings for your shop page in the "Shop Page" section.
The first of the two controls named "Shop Page Title" (switch) allows you to completely remove the page title. If this switch is off, you cannot make other settings related to the title.
In the text control named "Shop Page Title," you will set the text that will appear in the page title.
In the "Title Typography" section, you can style the title you wrote, such as font-family, alignment, color, etc.
3. Layout Settings
You can adjust the general layout settings of your shop page in this section.
The switch in the "Filterable Products" control allows you to enable or disable an element that lets you filter your shop items by categories.
The "Grid Switcher" button allows you to enable or disable an element that lets you switch between grid and list layouts on your shop page.
When the switch in the "Highlight Sale Item" control is enabled, items with discounts will appear differently from others.
4. Empty Carts
In this area, you can set the URL and text for your cart buttons.
In the first control, "Empty Carts Button Text," the text you write will be displayed inside the cart button.
In the second control, "Empty Carts Button URL," you will enter the URL that the cart button will navigate to when clicked.
2. Single Product
In this section, you can adjust the settings for your product pages.
1. Gallery Settings
At the beginning of the Single Product controls, you will make settings related to your gallery.
There are five settings you can use to customize your gallery.
1. Product Gallery Type: In this control, two different options allow you to change the type of gallery.
2. Gallery Image Heights: If you have set the option to "Theme Default," the images in your gallery will be arranged according to the specified "Width, Height, and column" values. If you set it to "Masonry," the images will be arranged in a grid without changing their width and height.
3. Image Height (vh): This control allows you to set the height of your images in "vh" units.
4. Gallery Width (vw): This control allows you to set the width of your gallery in "vw" units for mobile screens.
5. Gallery Image Columns: This control allows you to set the number of columns in which your gallery images will be displayed.
2. Related Products Settings
These are the controls where you will adjust the settings for related products.
1. Related Products: You can enable this setting to have a section where related products are displayed on your Single Product page.
2. Related Products Title (Switcher): If the above control is active, you can enable this switcher to add a title above the related products section.
3. Related Products Title (Text): This control allows you to set the text for the related products title if you have enabled the related products title switcher.
3. Other Settings
In the remaining part of the single product settings, you will use the switchers to determine which metadata will be visible or hidden.
This area allows you to configure all settings related to the page loader of your website. In the "Page Loader" section, you first encounter two areas placed on the right and left sides of the section. The first is "Page Loader Settings" and the other is "Loader Styles".
Page Loader Settings
In this section on the left side of the page, you can configure the type of page loader, its elements, duration, and other settings.
1. Only on Homepage
With this switcher, you can enable the page loader feature only for the homepage. When this switcher is on, the page loader will not appear on pages other than the homepage.
2. Loader Type
The next control allows you to choose from four different options: "Overlay," "Fade," "Slide," and "Blocks." These controls determine how the loader background will disappear at the end of the page loading.
Overlay: The page loader disappears by sliding out as a single block.
Fade: The page loader disappears by smoothly decreasing its opacity.
Slide: The page loader disappears by sliding out as a single block, but unlike "Overlay," the page behind the loader is not fixed, creating a sliding effect as the loader finishes, resulting in a visually pleasing effect.
Blocks: The page loader disappears by sliding out in blocks.
3. Loader Direction
This control will appear when the "Loader Type" is set to "Overlay," "Fade," or "Blocks." Here, you can choose one of the directions: "Up," "Down," "Left," or "Right" for how the loader will disappear.
4. Curved Overlay
When this switcher is on, the background of the page loader will have a curved appearance at the corners.
5. Blocks Number
This control will appear when the "Loader Type" is set to "Blocks." Here, you can choose the number of blocks the page loader will disappear in.
6. Loader Duration
This control allows you to select the minimum number of seconds the page loader will be displayed.
7. Loader Elements
This control allows you to choose the elements that will be present in the page loader. You can select multiple options. The available controls are:
Caption: Add a text caption to the loader if you want.
Logo: Add a bar with your logo during the loading process.
Counter: Add a number counter ranging from "000" to "100" that progresses during the loading.
Progressbar: A progress bar that fills up as the page loads, creating the loader.
8. Loader Caption
If you have selected the "Caption" element in the "Loader Elements" section, this control will allow you to set the text for the loader caption.
9. Loader Logo
If you have selected the "Logo" element in the "Loader Elements" section, this control will allow you to set the image for the loader logo.
10. Show Percentage
If you have selected the "Progressbar" element in the "Loader Elements" section, this control allows you to add a percentage counter to the progress bar.
Loader Styles
This section on the right side of the page allows you to configure various style properties of the page loader, such as colors, sizes, alignments, etc.
1. Loader Background Color:
This control allows you to set the background color of the page loader.
2. Loader Texts Color:
This control lets you set the colors of all text elements used within the page loader.
3. Counter Settings:
There are three controls available for adjusting the settings of the "Counter" element used in the page loader.
Counter Vertical Align: This control lets you choose the vertical alignment of the "Counter" element on the page.
Counter Horizontal Align: This control lets you choose the horizontal alignment of the "Counter" element on the page.
Counter Size: This control allows you to adjust the size of the "Counter" element.
4. Logo Settings:
There are three controls available for adjusting the settings of the "Logo" element used in the page loader.
Logo Vertical Align: This control lets you choose the vertical alignment of the "Logo" element on the page.
Logo Horizontal Align: This control lets you choose the horizontal alignment of the "Logo" element on the page.
Logo Size: This control allows you to adjust the size of the "Logo" element.
5. Caption Settings:
There are three controls available for adjusting the settings of the "Caption" element used in the page loader.
Caption Vertical Align: This control lets you choose the vertical alignment of the "Caption" element on the page.
Caption Horizontal Align: This control lets you choose the horizontal alignment of the "Caption" element on the page.
Caption Size: This control allows you to adjust the size of the "Caption" element.
This section allows you to configure all settings related to page transitions on your website. In the "Page Transition" section, you'll find two areas positioned on the right and left sides of the section. The first area is "Page Transition Settings," and the second is "Page Transition Styles."
Page Transition Settings
This area on the left side of the page allows you to configure the transition type, elements included, duration, and other settings for the page transition.
1. Transition Type
This control allows you to choose from four different options: "Overlay," "Fade," "Slide," and "Blocks." These controls determine how the transition background will disappear at the end of the page transition.
Overlay: The Page Transition disappears by sliding away as a single block.
Fade: The Page Transition disappears smoothly by reducing the opacity.
Slide: The Page Transition disappears by sliding away as a single block. Unlike the "Overlay" type, the page behind the transition is not static, creating a sliding effect and a nice visual.
Blocks: The Page Transition disappears by sliding away in blocks.
2. Curved Overlay
If this switch is turned on, the page transition background will have an oval appearance at its corners.
3. Blocks Number
This control will be visible if the "Transition Type" is set to "Blocks." You can choose the number of blocks in which the page transition will disappear.
4. Curved Overlay
If this switch is turned on, the page transition background will have an oval appearance at its corners.
5. Transition Duration
This control allows you to set the minimum duration for which the page transition will be displayed.
6. Transition Elements
This control allows you to choose the elements that will be present during the page transition. You can select multiple options. The available controls are:
Caption: If you want a caption text to appear during the page transition, you can add "Caption."
Logo: If you want your logo to appear as a bar during the page transition, you can add this option.
7. Transition Logo
This control allows you to upload the visual for your logo that will appear during the page transition. It is visible if the "Logo" option is selected in the Transition Elements control.
8. Caption Type
There are two different options for Caption Type:
Marquee: The caption text during the page transition will appear as scrolling text.
Classic: The caption text during the page transition will appear as static text.
9. Transition Caption
This control allows you to enter the text for the caption that will appear during the page transition. It is visible if the "Caption" option is selected in the Transition Elements control.
Transition Styles
This section on the right side of the page allows you to configure various style properties of the page transition, such as colors, sizes, and alignments.
1. Transition Background Color:
This control allows you to set the background color of the page transition.
2. Transition Texts Color:
This control lets you set the colors of all text elements used within the page transition.
3. Caption Settings:
There are three controls available for adjusting the settings of the "Caption" element used in the page transition.
Caption Vertical Align: This control lets you choose the vertical alignment of the "Caption" element on the page.
Caption Horizontal Align: This control lets you choose the horizontal alignment of the "Caption" element on the page.
Caption Size: This control allows you to adjust the size of the "Caption" element.
4. Logo Settings:
There are three controls available for adjusting the settings of the "Logo" element used in the page transition.
Logo Vertical Align: This control lets you choose the vertical alignment of the "Logo" element on the page.
Logo Horizontal Align: This control lets you choose the horizontal alignment of the "Logo" element on the page.
Logo Size: This control allows you to adjust the size of the "Logo" element.
This section allows you to configure settings related to "Smooth Scroll" on your website.
1. Smooth Strength
This control allows you to set the strength of the smoothness during scrolling.
2. Normalize Scroll
If the switch is set to "on," it enforces the performance of the scrolling in the JavaScript task, ensures its extension, and prevents the mobile section of address information from being shown/hidden.
3. Speed
This control allows you to set the multiplier for the overall scrolling speed.
This section allows you to configure various settings related to the mouse cursor, such as style and shape.
1. Mouse Cursor
This control allows you to choose the type of mouse cursor. There are two cursor types available, aside from "None."
None: Select this value if you do not want to use a cursor.
Dot: With this option, your "Mouse Cursor" will appear as a dot.
Circle: With this option, your "Mouse Cursor" will appear as a circle.
2. Mouse Cursor Layout
From here, you can choose the layout for the mouse cursor color based on the colors defined in the site general section.
3. Loading Animation
If you want to enable the loading animation that works during page transitions and page loading, you can turn this switch on.
4. Color Settings
Cursor Color: This control allows you to set the color of your cursor.
Cursor Text Color: If you have selected text as the cursor type in the "Cursor Interactions" area of the widget, you can set the color of the text that appears on hover.
Cursor Icon Color: If you have selected an icon as the cursor type in the "Cursor Interactions" area of the widget, you can set the color of the icon that appears on hover.
Here, you can make all default style adjustments for your website. This section contains four different sub-sections.
1. General Options
In this area, you can adjust the general styles of your site. For example, you can define default fonts, add custom fonts, and make default typography settings for paragraphs and heading tags.
2. Header
This area allows you to make all adjustments related to the menu items in the header, header backgrounds, and toggle colors.
3. Footer
This area allows you to make all adjustments related to the footer menu items, footer backgrounds, and toggle colors.
4. Global Widget Styles
This section displays the widget list of the theme. The settings you see when controlling the content of accordion elements in this list are the same settings you will see when using these widgets with Elementor. The adjustments made in the "Global Widget Styles" section will be the default settings for these widgets, meaning the styles that will be applied when you first drag and drop the widgets in Elementor.
Custom CSS
In the Custom CSS section, you can write any additional CSS code you want to add to your website.
Custom JS
In the Custom JS section, you can write any additional JavaScript code you want to add to your website.
Here you can copy/download your current option settings. Keep this safe as you can use it as a backup should anything go wrong, or you can use it to restore your settings on this site (or any other site).
When creating pages with Saren, you utilize the Elementor Page Builder. In addition to what Elementor offers during page creation, you can make your websites unique and more creative using Saren's special page builder elements.
You can find more information about Elementor and its widgets here.
To start creating pages with Elementor, please follow these steps:
1- Navigate to "Pages -> Add New" on your WordPress dashboard.
2- Click on "Edit with Elementor" at the top of the screen.
3- You'll be ready to create wonderful pages with the Elementor editor.
When building pages with Elementor & Saren, you'll see some special options/widgets that are offered by Saren. Let's take a look at these special features you will be able to use.
The first step in creating a page is to add sections to the page. After adding the sections, you will see some new section settings that come with Saren in the respective section's settings panel. With these settings, you gain more control over the sections, allowing you to enhance the appearance of your page, making it more beautiful.
When creating a Container, you will see a section called "Convert Container" under the "Advanced" tab. In this section, you will see 4 different options for animated elements you can create with the container: "Layered, Carousel, Tabs, and Accordion."
Layered Container
To achieve the layered animation, you need an outer container, and within it, a "Convert Container" option set to "Layered." Inside the layered container, you should create your layers. After setting it up this way, you will achieve the "Layered" animation.
Settings
Scroll Speed: Adjust how fast the animation will run with this control.
Pin Target: Specify which element the scroll animation's pinned feature will target with this control. By entering the ID you input here into the "CSS ID" field of another element on your page, that element with this ID will now be considered as the pin trigger.
Carousel Container
To create a Carousel animation with containers, you first need an outer container, and then an inner container with the "Convert Container" option set to "Carousel." After setting up the containers this way, all the containers you create inside the convert container will become carousel items.
Settings
Carousel ID: Set an ID for your carousel. This ID allows you to use control widgets to manage your carousel controls.
Carousel Behavior: Choose between "Scroll" or "Drag" to determine whether your carousel operates with scroll or drag.
Carousel Trigger: Normally, your carousel's pin targets the convert container. By entering a Trigger value and this ID into the "CSS ID" field of another element on your page, that element with this ID will now be considered as the pin trigger.
Cursor Drag Interaction: If enabled, a special cursor will appear when hovering over carousel items.
Tabs Container
To use containers as tabs, create an outer container with the "Convert Container" option set to "Tabs." When you set the "Convert Container" option to "Tabs," you will see a repeater control called "Tab Titles." Here, you can define the titles for your tabs. Enter the number of titles you want and specify the text for each title. After that, simply create the content containers for your tabs inside the convert container. You can structure and use your containers as desired.
Settings
Titles Alignment: Align your titles to the left, right, or center, or space them evenly with this setting.
Titles Gap: Manually adjust the space between titles.
Show Separator: Adds a "/" separator between titles.
Title/Separator Typography: Adjust the typography settings for the separator and titles with these controls.
Accordion Container
To use containers as an accordion, the structure is quite simple. You need an outer container with the "Convert Container" option set to "Accordion" and containers inside it where you will create your accordion items. You can fill the accordion item containers with your content as desired. To set the titles for your accordion items, select the accordion item containers and go to the "Layout" tab under "Additional Options" section, where you can enter the desired title in the "Container Title" field.
Settings
Accordion Type: If set to "Order," a number will appear to the left of the title to order your accordion items.
Active First: If enabled, the first item will be open by default when the page loads.
Toggle Style: Two options are available: "Plus" adds a plus sign to the right of the title which turns into a minus sign when the item is active. "Dot" shows a dot with changing opacity when active.
Underlined: When enabled, a line with increasing opacity will appear between accordion items when active.
Title/Order Typography: Use these typography controls to adjust the typography settings for order numbers and titles.
In addition to Elementor's default widgets, Saren offers a wide range of new page builder widgets. These widgets are categorized into four distinct categories.
Let's take a closer look at these categories:
1 - Content Widgets
Content widgets are designed to be used within the page content. Each of them has been specially crafted for Saren and integrated into Elementor. With these widgets, you can create animations, define cursor interactions, and much more.
2 - Showcase Widgets
Showcase widgets are designed to easily add any showcase design you desire to your pages. Simply drag and drop the showcase you want onto your page. You can adjust all the settings you desire from the widget settings panel without needing to make any adjustments outside of the editor.
3 - Dynamic
The dynamic widgets allow you to create global templates for portfolios, posts, navigations, etc. Here you'll find a wide range of dynamic assets that can be used.
Just like creating inner pages, you can design project pages to your liking using Elementor. Before starting to create the project page content with Elementor, there are specific settings tailored for project pages. Let's take a look at these together.
Project Hero: You can select a project header template (which are pre-designed for Saren) for this project. If you set this setting to "Use Global" the global project header template which is comes from Theme Options sill be setted. You can also create custom templates and use here.
Project Details:You can define project metas here. This metas could be use showcases, single projects and project headers.
After you set the settings in this page you can click on "Edit with Elementor" button and
start building the inner project content same like the pages.
If you don't see the "Edit with Elementor" button here please follow these steps
below;
1 - Navigate "Elementor > Settings" on your admin dashboard.
2 - You'll see "Post Types" section below "General" tab.
3 - Click on "Portfolio" and save changes.
When a new update is released, Envato will send you an email notifying you. Below are the
steps you should take upon receiving such an email:
1- Go to your Envato profile and navigate to the 'Downloads' tab.
2- Download the latest version of Saren.
3- The 'saren.zip' file within the downloaded files is the latest updated theme
file.
4- Replace your current theme file with the 'saren.zip' file. (You can upload it
directly in the WordPress panel just like installing a new theme.)
Often, when a new update is released, the core plugins of the theme also need to be
updated.
After updating the theme, navigate to 'Appearance > Install Plugins' in
your WordPress panel to check for updates to the core plugins. Don't forget to install them
if a new version is available.
v1.0.0 [---]
Released
