🤗 Elian Doc.
Elian Creative Portfolio & Agency MultiPurpose Blogger Theme. A comprehensive knowledge documentation to help find solutions.
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.5 | December 12, 2022
❑ Version 1.5 { December 12, 2022 }
❑ New
+ Theme - 11. Portfolio Minimal
+ Theme - 12. Portfolio Minimal
+ Theme - 13. Art / History Museum
+ Theme - 14. Inner Blog
+ Theme - 15. Classic Blog
+ Theme - 16. Simple Blog
❑ Renewed
+ layout panel Blogger's.
❑ Added
+ variable - apply "Padding vertical and horizontal" for every "Wrap layout | Col 02" in every section.
+ variable - apply Margenes "vertical and horizontal" in every section.
+ variable - apply "Border Radius" for the sections.
+ variable - apply "dividir" in every section.
+ variable - apply the height to "dividir" in every section.
+ variable - apply background color to every "Seccion" for the "Mode Dark".
+ variable - apply background color for every "Wrap layout | Col 02" in every sectiones.
+ variable - apply background color to "Wrap Col 03" para el "Mode Dark" of every section.
+ variable - apply background color to "Wrap Col 04" para el "Mode Dark" of every section.
+ option - aligns the menu in the position "Left, Center, Right".
+ option - positions the header in the part "Absolute".
+ option - positions the header in the part "Bellow".
❑ Changed
+ variables - de fuentes, modificados y por defecto.
+ variables - Renamed variable names "Col" a "Wrap".
+ variables - was removed "ET:" from the variables.
+ Branding - Gadget name changed "Logo post view " to "Logo post/page variant".
+ sections - icons are removed from the titles of every section.
+ components - Videos Moda - was reduced coding.
❑ Fixed
+ Announcement Banner - close button fixed.
+ Announcement Banner - Supports dark mode.
+ Banner Cookies - not affected the button or the close button.
❑ Improvements
+ option - header "Fixed".
+ option - header "Sticky".
+ the integration of the sources of "Google Font".
❑ Support
+ layout - panel Blogger's, RTL language support.
❑ Updated
+ bootstrap - from "v5.1.3" to Latest "v5.2.0".
❑ Other
+ Coding has been optimized.
+ All the variables were optimized and renamed.
+ Unnecessary codes have been removed.
❑ Version 1.0 { July 21, 2022 }
+ Initial release.
… Update Issues
Before You Update:
We strongly recommend that you follow these few steps procedure before you update Elian 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
… About theme
Thanks! for purchasing the template. First of all, thank you for purchasing this theme. To make your experience a pleasant one, we have added all the necessary information in this documentation. If you have any problems, consult the support service.
This document contains general information and step-by-step guidelines on how to configure the theme.
Elian is a creative theme for the Blogger platform specifically developed for creative websites, agencies, marketing, etc. Elian offers the latest trends in creative website design with beautiful templates that exude elegance, charm and modernity. You will have an innovative and fully functional website within minutes of purchase. Elian provides a powerful control panel with additional options to create your perfect website.
The features built into the theme are unique, you don't find these options in any other blogger themes. We have implemented a different type of theme with features which you can customize the theme as you wish.
Elian is fully customizable - its appearance is impressive on tablets and mobile devices. to create any page. no coding skills required. it is very easy to customize. Support element "Gadget or Widget" of blogger. Just choose a "Gadget or Widget" item and drag and drop it on the specific section. done!
Build the great creatives website with stylish full page sliders and advanced features, Elian is the answer to your questions to create a future-proof and safe online marketplace.
Please don't forget to give a 5-star rating and leave a good review for Elian. Your rating and review help us get a good sale. To do so, simply log into your Themeforest, go to the Downloads section and click on 5 stars next to Elian | Creative MultiPurpose Blogger Theme.
Need Help ?
Please do not hesitate to get in touch with us if you need help. We also welcome your feedback and suggestions. Please contact us through our support tab and we are happy to help.
We usually respond to all queries within 24 hours during weekdays. We are mostly not available during weekends and public holidays. We live across different timezones and have different people for answering different queries. So if we find us online responding to other comments and not yours please be patient with us.
… Blogger information
… Theme downloading
Download Theme files from ThemeForest by going to the Downloads tab and finding Elian 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 (Recommended)
Purchase file.
- Unzip the file "Document zip".
- Go to Localice "ElianTheme" > "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 "ElianTheme" > "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 "ElianTheme" > "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 Elian themes.
To update your page with the new theme we do not recommend that you load it automatically, or 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 Elian 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 »
◉ Layout
… Columns information | Updated
The Elian "Layout" interface contains 9 equal sections all. Each of these sections contains the sections which will add and order your content on the page as shown in the theme demo.
The names of each of the sections.
00 | Section,
01 | Section,
02 | Section,
03 | Section,
04 | Section,
05 | Section,
06 | Section,
07 | Section.
Grid - Row | Col
Elian is developed and designed with the world's most popular Bootstrap v5.1.3 open source system. Thanks to the powerful flexbox grid system it helps adapt to desktop, tablet and mobile. The theme includes several sections created and designed to be able to order your content and view your page as you wish.
… One Equal Columns | Updated
This grid is unique and full width on the page, it allows your information to be more prominent as shown in the demo on the website.
In your blogger dashboard
- Go to "Layout".
- Section "00 | Section" > "Wrap Layout | Col 01".
- Click on "Add a Gadget".
- 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 "S0 | Wrap 1".
Image size
- Image Wide: w: 1320px x h: auto - Height is proportional.
… Two Equal Columns | Updated
This two-column grid allows you to sort and place information one next to the other, displaying it as shown in the demo of the theme.
In your blogger dashboard
- Go to "Layout".
- Section "00 | Section" > "Wrap Layout | Col 02".
- Click in "Add a Gadget".
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 "S0 | Wrap 2".
Image size
- Image Wide: w: 660px x h: auto - Height is proportional.
- Recommended: w: 680px x h: auto - Height is proportional.
… Three Equal Columns | Updated
This two-row, three-column grid allows you to sort and place information side by side and below the other by displaying it as shown in the theme demo.
In your blogger dashboard
- Go to "Layout".
- Section "00 | Section" > "Wrap Layout | Col 03".
- Click on "Add a Gadget".
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 "S0 | Wrap 3".
Image size
- Image Wide: w: 440px x h: auto - Height is proportional.
- Recommended: w: 460px x h: auto - Height is proportional.
… Four Equal Columns | Updated
This two-row, four-column grid allows you to sort and place information next to and below each other by displaying it as shown in the theme demo.
In your blogger dashboard
- Go to "Layout".
- Section "00 | Section" > "Wrap Layout | Col 04".
- Click on "Add a Gadget".
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 "S0 | Wrap 4".
Image size
- Image Wide: w: 330px x h: auto - Height is proportional.
- Recommended: w: 350px x h: auto - Height is proportional.
◉ Header & Menu
… Branding | Updated
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 ElianTheme logo will be set by default.
2. Logo sticky variant:
Choose a different logo just for the Sticky Header. This will also be the logo for the Creative Header style.
3. 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).
4. Logo post/page variant:
Choose a different logo for the header only. This will also be the logo for the creative header style on pages and posts.
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 Bar
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".
… SubHeader
In your blogger dashboard
- Go to "Layout".
- Section "SubHeader" > "Content Items (left Side) and Content Items (right Side)".
- Click on "Add a Gadget"
- Add Gadget "Text" To add the text.
- Add Gadget "HTML/JavaScript" for "Components".
- Between! other components. The section components explains how they are added.
- Click Components →
Customize color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "◑ SubHeader".
… Smooth Scroll page | New
Add the class to your links, which will force them to smooth scroll to their anchor points.
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 [#hero]
Add a Sub Link LIst
+ Add a new item
- Add you: _Sub-Name
- Add you: URL [#sec01]
Show this widget: Enable or disable
Clic "Save".
Section Names.
00 | Section = #hero
01 | Section = #sec01
02 | Section = #sec02
03 | Section = #sec03
04 | Section = #sec04
05 | Section = #sec05
06 | Section = #sec06
07 | Section = #sec07
Main Page body/porfolio = #main
Note: This applies to any type of link element.
◉ 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.
◉ Theme Options
… Option information
Like any theme, they all have options that help a better user experience on the page, we have added several options that you can enable or disable according to your interest. The Powerfull Admin Panel contains several sections where each one has "Theme Options" that help that section you are in.
This report works for all the "Theme Option" that were set in the blogger "Layout" dashboard for the theme.
Go to "Dashboard" > "Layout" > "Theme Option", it contains some general configuration options for the following template components.
Theme Option in general
Theme Option:
These options affect only the section to which it belongs. Each section contains a theme options section.
Theme Option - General:
These options affect the header and general components of the theme.
Theme Option - Homepage:
These options affect the main recent posts section of the theme.
Theme Option - Post:
These options affect the main section of the post title.
Theme Option - Page:
These options affect the main section of the page title.
Theme Option - Page filter:
These options affect the main section of the filter page title.
Example page
Home Page - Start Page →
Post - Start Page →
Page - Start Page →
Page Filter - Search Results - Start Page →
Post Filter - Search Label - Start Page →
Page Filter - Search Archive - Start Page →
Page Error 404 - Start Page →
… Option General | Updated
Theme Option - (Options)
Header - Fluid Wide:
This option makes the web page "Full Wide" by reducing the entire page to a predetermined size.
To enable "Full Wide", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Absolute: Added
This option makes the header "Absolute" it is placed on top of and fixed to any element, no matter if it is a video, an image or anything else.
To enable "Absolute", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Fixed: Improved
This option makes the header "Fixed" at the top of the browser.
To enable "Fixed", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Header - Sticky: Improved
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: Added
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.
Menu - Left: Added
This option aligns the menu to the "left" of the header.
To enable "left", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Menu - center: Added
This option aligns the menu to the "center" of the header.
To enable "center", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Menu - right: Added
This option aligns the menu to the "right" of the header.
To enable "right", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
Content Protection:
With this option you will prevent the user from selecting any text and image on the page.
To activate "Content Protection", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
Go Scroll Top
With this option "show or hide" the button which I can click and return to the top of the page.
To enable this option "Go Scroll Top" place "Yes", if you want to disable Place "No", or simply leave the box empty.
Preloader:
This option enables or disables the page preloader.
To enable "Fixed", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
… Option Setions
Full Viewport Height:
This option makes the section adjust to the height of your monitor.
To enable "Full Viewport Height", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
Hide Section:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
Video Background MP4:
This option places a video in the background of the section you are in. Just add the MP4 link of the video.
Add Video Youtube
- In your blogger dashboard.
- Go to "Layout".
- Section "Section 00".
- Click "Edit" in Widget "Video Background MP4".
- Click in "Edit" and paste link video:
Video Background Youtube:
This option places a video in the background of the section you are in. Just add the YOUTUBE link of the video.
Add Video Youtube
- In your blogger dashboard.
- Go to "Layout".
- Section "Section 00".
- Click "Edit" in Widget "Video Background Youtube".
- Click on "Edit" and apply the settings below:
- Go to "Youtube".
- Search the video.
- Copy the following code from the browser link.
- Example: ... youtube.com/watch?v=eEpEeyqGlxA
- Video Link: https://www.youtube.com/embed/ <-- Pegar código -->
- Paste the link full in widget.
Video Background Other:
This option places a video at the bottom of the section it is in. Just add the vimeo link of the video among other.
Add Video Youtube
- In your blogger dashboard.
- Go to "Layout".
- Section "Section 00".
- Click "Edit" in Widget "Video Background Other".
- Click on "Edit" and apply the settings below:
- Go to "Vimeo, dailymotion" other.
- Search the video.
- Copy the following code from the browser link.
- Example: ... vimeo.com/659183081
- Video Link: https://player.vimeo.com/video/ <-- Pegar código -->
- Example: ... dailymotion.com/video/x871pcv
- Video Link: https://www.dailymotion.com/embed/video/ <-- Pegar código -->
- Paste the link full in widget.
… Option HomePage
BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
Hide Section:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
… Option Post Body
BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
Hide Section:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
Hide - Main Image:
This option will hide the main image of the posts and pages.
To activate "Hide - Main Image", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
… Option Page Body
BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
Hide Section:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
Hide - Main Image:
This option will hide the main image of the posts and pages.
To activate "Hide - Main Image", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
… Option Page Filter
BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
Hide Section:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
Hide - Main Image:
This option will hide the main image of the posts and pages.
To activate "Hide - Main Image", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
◉ 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 | Updated
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 color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "Main Search".
◉ 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".
… Footer Bar
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Footer Bar".
- Click on "Add a Gadget".
Show this widget: Enable and disable
Clic "Save".
… 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
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, pop-ups, and more. In this section we will show you which bootstrap components we use for this Template Blogger Elian.
Free plugins (libraries):
- jQuery
Tutorials plugin / Free design resources:
- dte.web
- Freepik
- Unsplash