🤗 Cascela Doc.
Embedded Files
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
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.3 | 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 - Listo
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 - Listo
… Theme downloading - Listo
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 - Listo
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 - Listo
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 - Listo
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 - Listo
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 - Listo
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 - Listo
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 »
◉ Top Bar
… Top Bar - Listo
The "Top Bar" 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" > "Top 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".
◉ Header
… Branding Large New - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Branding Large".
- Click on "Edit" and apply the settings below:
1. Logo Large Default:
Select a large logo for your website.
2. Logo large dark variant:
Select a large logo for the (dark mode) of your website.
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 "Header".
… Header Datetime Large New - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Header Datetime Large".
- Click on "Edit".
- Click on "Show this widget" for Show or hide.
Note: it is not possible to add content to the gadget.
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Header".
… Header Caption Large New - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Header Caption Large".
- Click on "Edit".
- Add the "Content" you want to display.
- Click on "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 "Header".
… Ads / Header - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Ads / Header".
- Click on "Edit" and apply the settings below:
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 "Header".
◉ Header or Nav Bar
… Branding Updated - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Header or Navbar" > "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 "NavBar".
… Navigation Menu Updated - Listo
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"
◉ Blog
… Creating a page - Listo
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 - Listo
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 - Listo
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 - Listo
In your blogger dashboard
- Go to "Layout".
- Section "Theme Options".
- Click on "Edit".
- Add the "Content" you want to display.
- Add on content "Yes" to enable and "No" to disable.
- Click on "Show this widget": Enable or disable.
- Clic "Save".
All Options
Header
Header - Sticky:
This option makes the header "Sticky".
Header - Bellow:
This option makes the header "Fixed".
Post Header
Header - Large:
This option makes the web post Header "Large".
Header - Full:
This option makes the web post Header "Full".
Header - Wide:
This option makes the web post Header "Wide".
Header - Fullscreen:
This option makes the web post Header "Fullscreen".
Header - Image Top:
The image is placed "Top" the title.
Header - Image Bottom:
The image is placed "Bottom" the title.
Page Layout
Left Sidebar:
Aligns the sidebar to the "Left" of the post.
Right Sidebar - Default:
Aligns the sidebar to the "Right" of the post. Option default.
Fullwide:
This option hides the post sidebar.
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 - Listo
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 Updated - Listo
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 - Listo
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 - Listo
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.
… Bottom Bar - Listo
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Bottom Bar".
- 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 "Bottom Bar".
In the options that appear you can change the background, text and border colors.
… Attribution/Copyright - Listo
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Bottom Bar" > "Attribution".
- Click on "Edit"and put your description.
Show this widget: Enable and disable
Clic "Save".
◉ Elements, Plugin, Other
… Labels Image Updated - Listo
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".
… Feed New - Listo
Blogger
- In your blogger dashboard.
- Clic "Layout" Section.
- Go to "Feed" Section.
- Clic "Edit" widget.
- Then follow the instructions below.
- Clic "Link".
- Go down to "Use Blogger feeds to share content".
- Choose among the four options offered by google and follow the instructions.
- Copy and paste the link into the URL field of the widget.
- Enable and disable options
Maximum number of shown items
Show item dates
Show item sources/author
Open links in new window
Show this widget: Enable and disable
Clic "Save".
… Marquee Text - Listo
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".
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 - Listo
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 - Listo
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 - Listo
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".
… Contact Form New - Listo
Blogger
- In your blogger dashboard.
- Clic "Pages" Section and clic en "New Pages".
- "Copy and pages" the next codes.
Codes
Show Contact Form: <div id="e-contactform"></div>
Clic "Save".
… Firebase - Post Views - Listo
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 - Listo
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
Page updated
Google Sites
Report abuse