🤗 Cascela Doc.
Is a Beautiful & Trendy
Blog & Magazine, eCommerce Blogger Theme
We at Farycreate are confident that you’ll be delighted with various features and clean, minimal design. Please reference this documentation for any questions or issues you may be experiencing. It’s likely you’ll find the answer to your query here. Bookmark this page to access it anytime.
Theme Settings Categories
Detailed information about how to set up your theme. Browse the different available categories in the knowledge base.
◉ Release notes
… Changelog
Latest version! | Update v1.2 | September 15, 2023
❑ Version 1.2 { November 15, 2023 }
❑ New
+ Theme - monca.
+ Page shop: Added an Ecwid "Account/Login" button in the header.
❑ Fixed
+ Header - Vertical alignment of the logo.
+ Header - The "Close" button in the browser has been adjusted to the height of the form.
+ Header - The header icons did not change color when scrolling.
+ Page post - He justified to the "Reading Time" center.
+ Page post - Fixed "Tags" being split in two.
+ Page post - Corrected that the "Table" lost its border.
+ Widget - The color of 'Popular Entries' in "Light Mode" was still white text when switching modes.
❑ Improvements
+ Header - The Menu adapts better to the different devices.
+ Header - The header icons are better adapted to mobile devices.
+ Page shop - Its integration and adaptation of "Ecwid" to the theme was improved.
+ Page shop - The shopping "cart" was improved and adapted.
+ Page shop - Improvement and adaptation of the link colors.
+ Page shop - The buttons were improved and adapted.
+ Page shop - Form fields have been improved and adapted.
+ Page shop - Ecwid's social media buttons were customized.
+ Page shop - Customized the Input Type options "Dropdown List, Radio Buttons, Size, Checkboxes, Text Field, Text Area, Date Selector, etc".
+ Language - RTL language support was improved.
❑ Added
+ Page shop - Added an Ecwid "Account/Login" button in the header.
❑ Changed
+ The "Shop" is now full width.
❑ Version 1.1 { September 21, 2023 }
❑ New
+ Theme - skincare
❑ Added
+ Add Option - Header Full Screen: New fullscreen article header option
+ Add Option - Marquee Text: Is used to insert a scrolling area of text.
+ Add Option - Labels Thumbnail: You can add an image to the labels.
❑ Improvements
+ Widget - Popular Posts: Improved and better adapted to the theme design.
+ Option - Header Wide: Improvements in their adaptation to the subject improving their performance.
+ Option - Header Large: Improvements in their adaptation to the subject improving their performance.
+ Option - Header Full: Improvements in their adaptation to the subject improving their performance.
❑ Other
+ Coding has been optimized.
❑ Version 1.0 { August 27, 2023 }
+ Initial release.
… Update Issues
Before You Update:
We strongly recommend that you follow these few steps procedure before you update Cascela theme.
1- Make backups
You should backups on a regular basis to avoid any issues while updating and avoid those situations, you’re dealing with the potential loss of all or some of your Blogger site. Updates are always tested on our end but unfortunately we are not able to guarantee that there won’t be any issues with some specific environments. Read more about backing up your site here.
Make backups the Theme
- Go to Dashboard.
- Click on "Theme".
- Click next to customize "▾".
- Click "Backup".
- Click on "Download Button".
- Click on "Save".
Make backups the Demo Content
- Go to Dashboard.
- Click on "Settting".
- Locate Manage Blog.
- Click "Back up content".
- Click on "Download Button".
- Click on "Save".
2- Read the Release Notes before updating
We strongly recommend you to read the Release Notes article before making an update to the new version. These may include instructions and information to help you decide if you should update now or wait.
3- Test updates on a staging site first
We recommend that you test the new updated versions of the theme on a temporary site to avoid problems, situations and losses on your page.
◉ Setting Started
… Blogger information
… Theme downloading
Download Theme files from ThemeForest by going to the Downloads tab and finding Cascela Theme. The main file contains everything.
1. Go to The Downloads Pages.
2. Click on the Download button.
3. All files & documentation.
Below is the full list of what files are included in the downloaded files:
1. Theme folder;
2. Support Center folder;
3. Documentation folder;
4. Others.
4.0 Layout Panel
4.1 Make backups
… Setting Blog Posts
Go to Dashboard
click "Layout" in to section > "Main Page Body" > "Page Body" > "Blog Posts" > click "Edit".
To keep the configured order, you must enable and order it.
Recommendation: for this topic it is better not to enable these options to leave it as it is in the demo. but that is up to you if you want to show some of these options.
Options
- Show author:
- Show publish time
- Show comment Count
- Show labels
- Show email post link
- Show share buttons
- Show location
- Show author profile
Post Title
In the "Post Title" the post widgets are arranged in rows.
Arrange items
Row 1: They are added below the title.
Row 2: Post Body - It is default not used
Row 3: It is added in the footer of the post.
Row 4: Is left empty
Row 5: Is left empty
Setting Meta Tag
- On Blogger Dashbord Click Template.
- Click "Edit HTML".
- Scroll down and Find this Code:
- Change Facebook App ID here with yours
- Change Facebook Admin ID here with yours.
- Change @username with yours twitter ID/Website twitter ID and change @username with yours twitter ID too.
Note: Before your cards show on Twitter, you must first have your domain approved. Fortunately, it's a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the "Submit for Approval" button. Go Here : Validator Twitter for testing and approval.
Optimize SEO
Activate Custom Description Each Post
- In the Dashboard, click "Settings".
- Enable "Enable search description".
- Click on "Search description".
- Write your search description.
- Click on "Save".
◉ Theme Installation
… Manual Theme Installation
Purchase file.
- Unzip the file "Document zip".
- Go to Localice "Cascela Theme" > "All Theme" > "choose the theme" > Select "XML".
- Right click and open it with a text editor (Notepad or something like that).
- Right click on "Select All".
- Right click on "Copy".
Go to Dashboard
- Click on "Theme".
- Click next to customize "▾".
- Click "Edit HTML".
- Select all the code.
- Replace for the code of the chosen theme.
- Click "Save".
… Automatically Theme Installation
Go to Dashboard
- Click on "Theme".
- Click next to customize "▾".
- Click "Restore".
- Click on "Upload".
In your shopping folder.
- Unzip the file "Document zip".
- Go to Localice "Cascela Theme" > "All Theme" > "choose the theme".
- Select the document XML.
- and click on "Open".
Auto load theme.
… Demo installation
Access your blog dashboard.
- Click "Settings".
- on Manage Blog click "Import Content".
- Click in Active "Automatically publish all imported posts and pages.".
- Click in "Import".
In your shopping folder.
- Unzip the file "Document zip".
- Go to Localice "Cascela Theme" > "All Theme" choose the theme > "Demo Content".
- Select the document XML.
- and click on "Open".
Content starts loading automatically
… Theme updating
The themes will be updated with news and new user experience, a new email will arrive informing you of a new update of the Cascela themes.
To update your page with the new theme we do not recommend that you load it automatically, yes manually, because you would automatically lose many custom options in the blog and never do it manually because your default and custom template would be deleted.
We recommend that before proceeding to update to the new theme update, you make a backup copy of your template.
Please note that updating a theme will override any custom changes you make to the main theme. Therefore, we recommend using a secondary blog. A child blog is not meant to be updated and should contain only custom changes.
… Theme licenses
When purchasing Cascela Theme from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, continue reading below.
There are two types of theme licenses you can purchase from Envato: Regular license and Extended license:
Regular License
A regular license allows you to use the theme to create a unique end product (unique website) for yourself or a client. A domain is considered only the top level domain, you can activate the regular license on multiple subdomains of that domain, for example if you activate the theme on this domain www.farydemo.com:
www.farydemo.com – valid
staging.farydemo.com – valid
farydemo.com/staging – valid
whatever.farydemo.com/mysite – valid
abc.com – new license is required
staging.abc.com – new license is required
123.4.0.0 – new license is required
One license is valid for one domain only. If you want to use the theme on another domain, then you have to purchase another license.
Extended License
Allows you to activate the theme on any domain and local/staging environment.
License Specifications
Further reading about license specifications on Envato market »
◉ Header
… Branding
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Branding".
- Click on "Edit" and apply the settings below:
1. Logo (Header):
Select a normal logo for your website. This field cannot be empty, the Cascela Theme logo will be set by default.
2. Logo dark variant:
Choose a different logo just for the header and sticky header. This will be the logo for the creative header style (Dark Mode).
Steps to upload
Select image by:
◉ Upload image from computer.
Clic: "Choose File"
Image Placement
◉ Instead of title and description
Show this widget: Enable or disable
Clic "Save".
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Branding".
… Navigation Menu
Add a Navigation List
- In your blogger dashboard.
- Go to "Layout".
- Section "Header" > "Navigation Menu".
- Click Edit Widget "Menu".
- Click on "Edit" and apply the settings below:
Add a Link LIst
+ Add a new item
- Add you: Name
- Add you: URL
Add a Sub Link LIst
+ Add a new item
- Add you: _Sub-Name
- Add you: URL
Show this widget: Enable or disable
Clic "Save".
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Menu"
… Header Top
The "HeaderBar" section is used to add components of interest that are shown in the right part of the header, such as a button, icons of social networks, etc. This section has a limitation is that it is only allowed to add "Three Widgets". This to maintain order and the proper functioning of the header.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Header Bar".
- Click on "Add a Gadget"
- Add Gadget "HTML/JavaScript" for "Components".
- Between! other components. The section components explains how they are added.
Show this widget: Enable or disable
Clic "Save".
◉ Blog
… Creating a page
In your blogger dashboard
- Go to "Pages".
- Click in "New Page" from the Blogger admin panel;
- Enter a title for your post in the text field near the top;
- Next, type their information in the blank field that you want to post on your blog.
- Click Publish.
… Creating a post
In your blogger dashboard
- Go to "Post".
- Click in "New Post" from the Blogger admin panel;
- Enter a title for your post in the text field near the top;
- Next, type their information in the blank field that you want to post on your blog.
- Next, at the right side of your screen, in the section called Post settings, add the tags, separated by "commas" each.
- Click Publish.
◉ Posts
… Hide main image
In your blogger dashboard
- Go to "Post".
- Click in "New Post" from the Blogger admin panel;
- Click in the image
- Click in "Insert Image" and "Edit Image"
- In "Alt Text" or in "Title Text" type "none"
- Click Publish.
◉ Theme Options
… Option General
Theme Option - (Options)
Header
Header - Sticky:
This option makes the header "Sticky" at the top of the browser when scrolling down.
To enable "Sticky", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Bellow:
This option makes the header "Fixed" at the bottom of the browser.
To enable "Bellow", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Post Header
Header - Large:
This option makes the web post Header "Large" obtaining a default size of the container.
To enable "Large", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Full:
This option makes the web post Header "Full" The full width and the transparent header are applied.
To enable "Full", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Wide:
This option makes the web post Header "Wide" The full width is applied
To enable "Wide", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Fullscreen:
This option makes the web post Header "Fullscreen" The full width and the transparent header are applied.
To enable "Full", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Page Layout
Left Sidebar:
This option aligns the sidebar to the "Left" of the post.
To enable "Left", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Right Sidebar - Default:
This option aligns the sidebar to the "Right" of the post. This option is applied by default.
Fullwide:
This option hides the post sidebar.
To enable "Fullwide", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Plugin and Other
Facebook Messenger:
Activate the "Facebook Messenger" web chat on the blog. You will find the instructions in the section elements, plugin.
◉ Banners & Box
… Cookies Policy
Add a Cookie Text
- In your blogger dashboard.
- Go to "Layout".
- Go to "Cookie banner" .
- Click on "Edit".
- You can change the text
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Cookie Policy".
… Announcement Banner
Add a banner
- In your blogger dashboard.
- Go to "Layout".
- Go to "Announcement banner" > "Announcement content".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "Text" To add the text.
+ Wdget "Page" to add the "Bottons".
+ Widget "HTML/JavaScript" To add component codes.
- Click Components →
Note: When adding several "Gadget" they are displayed horizontally on the page.
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Announcement Banner".
… Search Box
In your blogger dashboard
- Go to "Layout".
- Section "Search Box" > "Main Search Box".
- Click on "Edit" gadget "Search Blog" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
Customize
- In your blogger dashboard.
- Clic "Theme" or "Layout".
- Clic "Customize" or "Theme Designer".
- Select the tab "Advanced" > Select the option "Main Search".
In the options that appear you can change the colors of the background, text, border, among others.
◉ Footer
… Footer
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer"
- Click on "Add a Gadget" in each section.
Show this widget: Enable and disable
Clic "Save".
Customize
- In your blogger dashboard.
- Clic "Theme" or "Layout".
- Clic "Customize" or "Theme Designer".
- Select the tab "Advanced" > Select the option "Footer".
In the options that appear you can change the background, text and border colors.
… Footer Bar
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Footer Bottom".
- Click on "Add a Gadget".
Show this widget: Enable and disable
Clic "Save".
Customize
- In your blogger dashboard.
- Clic "Theme" or "Layout".
- Clic "Customize" or "Theme Designer".
- Select the tab "Advanced" > Select the option "Footer Bar".
In the options that appear you can change the background, text and border colors.
… Attribution/Copyright
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Attribution/Copyright".
- Click on "Edit"and put your description.
Show this widget: Enable and disable
Clic "Save".
◉ Elements, Plugin, Other
… Labels Image
Blogger
- In your blogger dashboard.
- Clic "Layout" Section.
- Go to "Labels Image" Section.
- Clic "Edit" widget.
- Clic "Add a new item".
- Add "Labels Name".
- Add "you URL image" in Site URL.
Show this widget: Enable and disable
Clic "Save".
Clic "Publish".
… Marquee Text
Blogger
- In your blogger dashboard.
- Clic "Layout".
- Go to "Marquee Text" Section.
- Clic "Edit" widget.
- Clic "Add a new item".
- Add "You Text" in Site Name.
- Add "You URL" in Site URL.
Show this widget: Enable and disable
Clic "Save".
Clic "Publish".
Customize
- In your blogger dashboard.
- Clic "Theme" or "Layout".
- Clic "Customize" or "Theme Designer".
- Select the tab "Advanced" > Select the option "Marquee Text".
In the options that appear you can change the background and text colors and change the duration, so that all the text you include appears.
… Ecwid eCommerce
Activate Ecwid
- Go to "Ecwid" page.
- Clic "Login".
- Enter your data.
- Clic "Sign In".
- In your the "Ecwid Dashboard". In bottom part.
- Copy number "Store ID", ( 00000000 ).
Blogger
- In your blogger dashboard.
- Clic "Layout" Section.
- Go to "Ecwid" Section.
- Paste number in gadget.
Show this widget: Enable and disable
Clic "Save".
Page Shop Ecwid
- In your blogger dashboard.
- Clic "Pages".
- Title Name "Shop". To apply the full width of the store you just have to put "Shop" in the title.
- On sidebar "Page settings" Options > Reader comments > Do not allow, hide existing.
Note: You must follow the following instructions below to add the shop on your Blog.
Show the eCommerce in the Blog
- In your blogger dashboard.
- Clic "Pages" Section and clic en "New Pages".
- "Copy and pages" the next codes.
Codes
Show products: <div id="e-ecwid-store"></div>
Show search: <div id="e-ecwid-search"></div>
Show categories: <div id="e-ecwid-categories"></div>
Clic "Publish".
… Mailchimp - Subscriber pop-up
Activate Mailchimp
- Go to "Mailchimp" page.
- Clic "Login".
- Enter your data.
- Clic "Login".
- In your the "Mailchimp Dashboard".
- Clic "Audience" Section > clic in "Signup Forms".
- Clic "Subscriber pop-up".
Customize your form by using the tools offered by the platform
Installation
- Clic "Connect Site".
- Enter your website URL.
- Clic "Get started".
- Clic "Copy To Clipboard".
- Paste this code between the "<head>" tags on your website.
- Clic "Save".
- Then, return to the pop-up form builder and publish. Clic "Check Connection".
- Clic "Switches" to enable.
- Clic Nice work!
Add a Pop-Up Signup Form to Your Website
https://mailchimp.com/help/add-a-pop-up-signup-form-to-your-website/
… Mailchimp - Embedded forms
Activate Mailchimp
- Go to "Mailchimp" page.
- Clic "Login".
- Enter your data.
- Clic "Login".
- In your the "Mailchimp Dashboard".
- Clic "Audience" Section > clic in "Signup Forms".
- Clic "Embedded forms".
Customize your form by using the tools offered by the platform.
You cannot add any other fields. You can only add the fields "Name" and "Email".
- Clic "Continue".
Search the next code and copy url
<form
action="https://farydemo.us3.list-manage.com/subscribe/post?u=455e4367321e1234aed567890&id=7d840ad9a3&f_id=00afbbe8f0"
...>
Installation
- In your blogger dashboard.
- Clic "Layout" Section.
- Go to "Mailchimp" Section.
- Paste the URL in the Content Field of the gadget.
Code
Go back to the code in the mailchimp panel and locate the following code
<input type="text"
name="b_123e4567891e1234aed376427_8d800ad3a3"
...
- Paste the Code in the Title Field of the gadget.
Show this widget: Enable and disable
Clic "Save".
… Firebase - Post Views
Activate Post Views
Create Project in Firebase
- Step 1: Go to "Firebase Console" page.
- Step 1: Select "Create a Project". and enter the Project name, just click Continue to continue.
- Step 1: Turn off Google Analytics and click Create Project.
- That's it, creating Project in Firebase, followed by Realtime Database installation.
Install Realtime Database
- Step 1: Go to "Firebase Console" and select the newly created Project.
- Step 2: In the menu on the left, access "Realtime Database".
- Step 3: Select "Create Database", and select Next.
- Step 4: Continue to select Locked Mode and click Enable.
So we have created the Realtime Database, let's copy the path as shown in the picture I marked.
Add Rules to Database
Next, switch to the RULES tab and replace all the old code with the following code:
{
"rules": {
".read": true,
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
}
}
}
- Change it to your Blog ID. 0000000000000000000
- Then click Publish to save the changed code.
- Next, switch to the DATA tab and copy the URL.
Activate Post Views
- In your blogger dashboard.
- Clic "Layout" Section.
- Go to "Firebase" Section.
- In "Title" Paste your Blog ID.
- In "Content" paste your URL what you copied in tab DATA Firebase.
Show this widget: Enable and disable
Clic "Save".
… Facebook Messenger
Activate Messenger
- Go to Facebook page.
- Clic Tab "Information".
- Copy number "Page ID".
- In your blogger dashboard.
- Go to "Layout".
- Sidebar, gadget "FB Messenger"
- Paste number in gadget.
Show this widget: Enable and disable
Clic "Save".
Enable the Messenger plugin
- Go to Facebook page.
- Go to "Meta Business Suite".
- Clic "Messages".
- Clic Tab "Plugin de chat".
- Add "Website domain"
Clic "Publish".
Customize Messenger: You can further customize your messenger chat with questions and answers for your customers, and service schedule, among others.
◉ Others
… Credits
I've set up some reusable bootstrap components built to provide navigation, alerts, and more. In this section we will show you which bootstrap components we use for this Template Blogger Cascela.
Free plugins (libraries):
- jQuery
Tutorials plugin / Free design resources:
- Blogger Store
- Reading Time
- dte.web
- Freepik
- Unsplash