Homepage Builder #
This feature allows you to create a custom homepage using any page builder plugin of your choice. By clicking the “Page Builder” button, you can override the predefined Customizer template and use the homepage you’ve built with your selected page builder. Refresh the customizer after publishing new changes. To enable this setting, navigate to Admin Dashboard > Appearance > Customize > General Settings > Homepage Page Builder.
Container Settings #
A container is an element that holds all your site contents. You can access the Container Settings via Admin Dashboard > Appearance > Customize > General Settings > General Section > Container.
The following are the settings that you can use to manage your site container.
Container Width – You can set the site container width for different devices via this option.
Fullwidth Centered Max-width – This setting sets the container width for a full-width centered layout.
Sidebar Settings #
You can access the Sidebar Settings via Admin Dashboard > Appearance > Customize > General Settings > General Section > Sidebar.
The following are the settings that you can use to manage the sidebar layout of your website.
Sidebar Width – Set a value for the sidebar width.
Widget Spacing – Set a value for the spacing between the sidebar widgets.
Last Widget Sticky – Enable this option to apply sticky widget effect to the last widget in the sidebar.
Button Settings #
You can set styling for all the buttons to be used on your website via Admin Dashboard > Appearance > Customize > General Settings > General Section > Button.
General Setting #
The following are the General settings that you can use to manage the button layout of your website.
Button Roundness – Set values for the button radius.
Button Padding – Set padding value for the button.
Button Typography – You can configure the typography settings for the button text via this setting.
Design Setting #
The following are the Design settings that you can use to manage the button layout of your website.
Button Initial State: Here you can select the text, background and border color for the button on initial state.
Button Hover State: Here you can select the text, background and border color for the button on hover state.
Scroll to Top Settings #
You can configure the Scroll to Top Settings on your website via Admin Dashboard > Appearance > Customize > General Settings > General Section > Scroll To Top.
Show Scroll to Top: Enable this option to display the Scroll to Top button.
Icon Size: This option is only visible when the Show Scroll to Top option is enabled. You can select the icon size for the Scroll to Top button here.
Colors Settings #
You can select colors for different elements of your website via the Colors Settings. For this, navigate to Admin Dashboard > Appearance > Customize > General Settings > Colors.
Select Color Presets: Choose from a list of preset colors that will automatically be applied to primary, secondary, and additional color settings.
Primary Color: Select the Primary color for your website.
Secondary Color: Choose a Secondary color for your website here.
Base Font: Select a color for all the general site text.
Heading: Select a color for all the site headings.
Site Background: Select a background color to apply for the entire website.
Revert Changes: Click the revert button to undo the recent color changes.
Typography Settings #
The Typography settings allow you to select font-family, variants, font-size, line-height, letter-spacing, font-weight and capitalization type for the different types of texts used on your website.
You can access the Typography Settings via Admin Dashboard > Appearance > Customize > General Settings > Typography.
Select Typography Presets: Choose from a list of preset typography options that will be applied to the base text and all header typography.
Base Font – You can select the Base font family and settings for your website here.
Headings – The typography settings selected for this text type applies to the site headings.
Load Google Fonts Locally – Enable this option to load Google Fonts from your server. This will help to speed up your website.
Preload Local Fonts – Enable this option to activate preloading of Google Fonts.
Flush Local Fonts Cache – Click on the Flush Local Fonts Cache button to clear the local fonts cache.
Revert Changes: Click the revert button to undo the recent typography changes.
Layouts Settings #
You can set the default sidebar layout, sidebar layout for pages and sidebar layout for posts of your website via this setting.
You can access the Layouts Settings via Admin Dashboard > Appearance > Customize > General Settings > Layouts.
SEO Settings #
The SEO settings comprises of the Breadcrumb setting and Post Date setting for the website. You can access it via Admin Dashboard > Appearance > Customize > General Settings > SEO Settings.
Show Breadcrumb: Enable this option to display breadcrumb on your website.
Breadcrumb Home Text: Enter the text with which you want to represent the Homepage on the breadcrumb.
Separator: Select the type of separator that you prefer.
Show Last Updated Post Date: Enable this option to display the date when a post was last updated. When you enable this, Google can read the post updated date and index your latest content.
Social Media Settings #
You can set your social network accounts via Admin Dashboard > Appearance > Customize > General Settings > Social Media.
You can enable and add social media icons to display on the site header via Social Media Settings provided under the Main Header Settings. These icons will then automatically be linked to the social network accounts entered via the Social Media Settings.
Instagram Settings #
We have updated our themes to allow our customers to display Instagram Feeds using any plugin. We have included the settings that allows to add the shortcode.
If you are using BlossomThemes Social Feed, we recommend removing the plugin and follow the below steps to display your Instagram feeds.
Setup and Configure Instagram Feed Plugin #
Please follow the steps below:
Step 1: Navigate to Plugins > Add New > Search for Instagram Feed.
Step 2: Click on Install Now and Activate.
Once the plugin is activated, you will be redirected to plugin setup.
Step 3: Click on Launch the Setup Wizard.
Step 4: Click on Add New to connect your Instagram Account.
You will be redirected to Smash Balloon website.
Step 5: Choose your Instagram account type.
Once you choose it, click the Connect with Instagram button.
Step 6: Click on Allow.
Then you will be asked for Security Confirmation. You can click on Yes, it is my domain.
After that, you will be redirected to your website.
Step 7: You can click on Next to continue to configure the settings or click on Exit Setup located at the top right.
Now the plugin is configured with your Instagram account, you can create a Feed by following the below steps:
Step 8: Navigate to All Feeds and click on Add New.
Step 9: Choose the first option User Timeline and click on Next.
Step 10: Choose your account and click on Next.
You will now see your Instagram account feed.
Step 11: Now configure the following Settings as shown below.
a. Set the number of Posts via Feed Layout as shown below. You can adjust the settings as per your requirement.
b. Disable the Header via Header
c. Disable Load More Button via Load More Button settings.
By doing this, your Instagram feed is ready to be displayed on your website.
Step 12: Click on the Save button located on top right corner.
Step 13: Now navigate to Appearance > Customize > Instagram Settings and enable Instagram Section.
You can also replace the shortcode if you have multiple feeds configured and want to display different one.