Getting started
Installation
Upload Theme
- Go to Appearance > Themes in the WordPress Dashboard
- Click on the Add New button
- Search for the Suffice
- Select the Suffice theme
- Click Install Now
Activate the theme
Now, hover over the theme thumbnail and press the Activate button
Custom Menu
Set up Custom Menu
- Go to Appearance > Menus in the WordPress menu
- Click on create a new menu link
- Give a name to your menu in Menu Name and click Create Menu button
- Now choose the pages, categories, custom links from the leftside of your screen by selecting the checkbox and click on Add Menu
- Click Save Menu after adding required pages, categories in the menu
Theme Location for Menu settings
- Primary MenuDisplay the menu next the logo/header text.
- Social menuDisplay the menu containing Social Icons in the top header section.
- Header TopDisplay the menu in the top header section
- Footer MenuDisplay the menu on the bottom right corner of the Footer.
Social Menu setup
- Use Custom Links to create a menu.
- In URL field type your social media link. For example: www.facebook.com/profile_id
- Social media supported by theme are: Facebook, Twitter, Google Plus, Youtube, Pinterest, Instagram, LinkedIn, Tumblr, WordPress, Vimeo, SoundCloud, Slack, Skype, Github, Dropbox, Behance.
- Check Social Menu under Theme Location.
Site Identity
Site Identity
- Go to Appearance > Customize > Site Identity section from the WordPress dashboard
- Logo
- Site Title
- Tagline
- Display Site Title & Tagline
- Click on Save & Publish button after the required setup has been done in your site through this setting.
The options integrated in this theme in this section are:
This option enables you to upload the header logo in your site, making your site brand look unique by using the custom image with 150 x 150 Pixels of size. Recommanded size for the logo is 107 X 30 pixels.
Add the required Site Title from this section in your site.
Add the required Site Tagline from this section in your site.
This option provides you whether to display the Site title and tagline or not in your site.
Header Image
Steps
- Go to Appearance > Customize > Header Image section from the WordPress dashboard
- Now, click on Save & Publish button.
Upload the header image from the Add new image button. After selecting the header image, it will ask you to crop. If you like to crop it, then, you can crop else leave it as you want for your site to best suit it.
Color Options
- Header Text Color
- Background Color
Select a font color for the site title and tagline.
Select a background color, this will effect the whole site but you have to select the Boxed Layout option to view the background color.
The image above is the customizer section of WP default color options
Theme Options
Top Header Settings
-
Go to Appearance > Customize >Theme Options > Top Header Settings section from the WordPress dashboard. The options integrated into this section are:
- Header Content Left
- Contact Info
- Social Icon
- Header Menu
- Disable
- Header Content Right
- Location for Contact Info
- Phone Number for Contact
- Email Address for Contact
- Contact Font Color
- Contact Icon Color
- Header Menu Font Color
- Header Menu Font Hover Color
- Social Menu Icon Color
- Social Menu Icon Hover Color
- Social Menu Font Size
- Top Header Padding
- Header Top Background Color
- Header top border bottom(Default: 0)
- Header top border color(Default: rgba(255,255,255,0.5) )
Select one of the content to display on the left side of the top header section or select disable if you don’t want to display anything. It has four options which are listed below:
Contact information like location, phone number and email address; these information can be set within the theme itself.
Social Icons/menu which is set to the Social menu location.
A menu which is set to the Header Top menu location.
Select this option if you want nothing to be displayed in the left of top header section.
Select one of the content to display on the right side of the top header section or select disable if you don’t want to display anything. It has four options which are same as the Header Content Left.
CONTACT INFO
Enter your location for contact info which is displayed in the top header.
Enter your phone number for contact info which is displayed in the top header.
Enter your email address for contact info which is displayed in the top header.
Select a color for the text used in the contact info section in the top header.
Select a color for the icons used in the contact info section in the top header.
HEADER MENU STYLING
Select a font color for the text in the Top Header Menu.
Select a font color for the text in the Top Header Menu when hovered.
SOCIAL ICON STYLING
Select a font color for the social icons in the Top Header.
Select a font color for the social icons in the Top Header when hovered.
Select a font size for the social icons.
TOP HEADER STYLING
Provide padding-top and padding-bottom for the Top Header.
Select a background color for Top Header section.
Set the font size for the border placed at the bottom of the Top Header. You can set it to zero(0) if you don’t want the border.
Set the font color for the border placed at the bottom of the Top Header.
Click on Save & Publish button after the required setup has been done in your site through this setting.
Header Settings
-
Go to Appearance > Customize >Theme Options > Header Settings section from the WordPress dashboard. The options integrated into this section are:
Logo Left, Menu Right(Default):
Logo Center, Menu Center:
Logo Right, Menu Left:
- Sticky Header
- Sticky Header on Tablets
- Header Sticky Style
Show Menu on Scroll Up
Fix Menu on Scroll Down
- Search Icon
- Header Search Style
Dropdown Search Form
Slide Search From Top
Full Screen Search
- Header Icon Color
- Bottom Header Padding
- Bottom Header Background Color
- Bottom Header Bottom Border(Default: 0)
- Bottom Header Border Color
<li>Header Layout Style You can choose how you want to display the header from the three options available in this section, the options are mentioned below:
This is the default layout for the header where the site logo is placed to the left and the primary Menu to the right.
This layout option will center align both the logo and the primary menu to the center.
This layout is the mirror image of the previous(default) layout where the logo is placed to the right and the primary Menu to the left.
Sticky Header
Select whether or not you want the header to be sticky.
Select whether or not you want the header to be sticky on tablets.
Select how you want the header to be sticky. It has two choices which are listed below:
The header will stick around and can be seen when you scroll up in the page.
The header will be fixed and stick around as you scroll down in the page.
HEADER ACTION BOX
Toggle between ON/OFF to show/hide the search icon beside the primary menu on the header section.
Choose how you want the search form to be displayed. It is displayed when you click on the search icon.
A small search form will be displayed just below the search icon in the header.
A full-width search form will slide down from the top of the page.
A fullscreen search from will be displayed covering the whole site.
Select a font color of search icon, cart icon and wishlist icon when the header is non-transparent.
BOTTOM HEADER BACKGROUND STYLING
Provide padding-top and padding-bottom to the Bottom Header section.
Select a background color for the bottom header when it is transparent.
Set the font size for the border placed at the bottom of the bottom header. You can set it to zero(0) if you don’t want the border.
Set the font color for the border placed at the bottom of the bottom header.
</li
Transparent Header Settings
-
Go to: Appearance > Customize > Theme Option > Transparent Header Settings section from the WordPress dashboard.
- Site LogoUpload/select an image for the site logo.
- Header action Icon ColorSelect a font color for the icons(cart, search, wishlist) inside the Header Action.
- Header Top Background ColorSelect a background color for the top header.
- Header Bottom Background ColorSelect a background color for the bottom header/header action.
This section includes the settings for the Transparent Header only and the options integrated are:
Menu Settings
-
All the options for setting the layouts are available in Appearance > Customize > Theme Option > Menu Settings section from the WordPress dashboard.
- Main Menu StyleSelect how the Primary Menu functions from the four choices listed below .
Default MenuThis is the defalut WP menu design where the menu items are seen in the bottom header.
Offcanvas MenuA hamburger icon is displayed and the primary menu slides in from the side(left/right) when the hamburger icon is clicked.
Offcanvas Push MenuExactly similar to the Offcanvas Menu but the page content is pushed when the menu slides in from the side.
Full Screen MenuA hamburger icon is displayed and the primary menu covers the whole site when the hamburger icon is clicked.
- Main Menu Item PaddingSet a padding value to the menu items in the primary menu. This can taken as the space between the menu items.
- Menu Font SizeSet a font size to the menu items in the primary menu.
- Menu Font ColorSelect a font color for the menu items in the primary menu.
- Menu Font Hover ColorSelect a font color for the menu items in the primary menu when hovered.
- Dropdown Icon IndicatorTurn on to show an arrow icon beside the parent menu item if it has sub-menu items.
- Dropdown ShadowTurn on to show a shadow like display for the sub-menu items in the primary menu.
- Sub Menu Width( Default: 250px )Set a fixed width for the sub-menu items.
- Sub Menu Item Background ColorSelect a background color for sub-menu items.
- Sub Menu Background Hover ColorSelect a background color for sub-menu items when hovered.
- Sub Menu Font SizeSelect a font size for sub-menu items.
- Sub Menu Font ColorSelect a font color for sub-menu items.
- Sub Menu Font Hover ColorSelect a font color for sub-menu items when hovered.
- Sub Menu Item DividerTurn on to display a divider line between the two sub-menu items.
- Sub Menu item Seperator ColorSelect a font color for the divider line between the two sub-menu items.
- Menu TypographySet desired values in the various options below to customize the typography of the top level menu items in the primary menu.
- Font FamilySelect font family for the top level menu items.
- VariantSelect a variant for the choosen font family.
- SubsetSelect a subset for the choosen font family.
- Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters in the top level menu items.
- Text TransformSelect from the available values, the style of the text in the top level menu items.
- None
- Capitalize
- Uppercase
- Lowercase
- Initial
- Inherit
- Sub Menu TypographySet desired values in the various options below to customize the typography of the sub-menu items in the primary menu.
- Font FamilySelect font family for the sub-menu items.
- VariantSelect a variant for the choosen font family.
- SubsetSelect a subset for the choosen font family.
- Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters in the sub-menu items.
- Text TransformSelect from the available values, the style of the text in the sub-menu items.
- None
- Capitalize
- Uppercase
- Lowercase
- Initial
- Inherit
The options integrated into this section are:
MAIN MENU STYLING
This section controls the styling of the top level menu items in the primary menu
SUB MENU STYLING
This section controls the styling of the sub menu items in the primary menu
Typography
Layout Settings
-
All the options for setting the layouts are available in Appearance > Customize > Theme Option > Layout Settings section from the WordPress dashboard.
- Layout StyleYou can set the site layout via this option. You can choose from the available two options mentoned below:
Boxed LayoutSelect the boxed layout for your site. All the contents in the site will be displayed in the boxed structure.
Full Width LayoutSelect the full-wdith layout for your site. All the contents in the site will spread widely all over the viewport.
Right SidebarLayout with content to the left and a sidebar on the right.
Left SidebarLayout with content to the right and a sidebar on the left.
Full WidthLayout with content in the center covering the whole page without any sidebars.
- Blog/Home LayoutSelect a layout for the Homepage when it is set to display the latest posts.
- Page/Home LayoutSelect a layout for the Homepage when it is a static page.
- Archive LayoutSelect a layout for the archives pages.
- Single Content LayoutSelect a layout for a single post page.
- Page LayoutSelect a layout for a static page.
- Category LayoutSelect a layout for a category page.
- Author Bio LayoutSelect a layout for the Author bio page.
- Search Results LayoutSelect a layout for the Search page.
- 404 LayoutSelect a layout for the 404 page.
- WooCommerce Shop LayoutSelect a layout for the WooCommerce shop page.
- WooCommerce Product Category LayoutSelect a layout for the WooCommerce category page.
- WooCommerce Product Tag LayoutSelect a layout for the WooCommerce tag page.
- WooCommerce Single Product LayoutSelect a layout for the WooCommerce product detail page.
The options integrated in this section are:
Color Settings
-
Go to: Appearance > Customize > Theme Option > Color Settings section from the WordPress dashboard.
- Theme SkinSelect between the two available skin options which are listed below:
- Light SkinA scheme which has light colored background with dark colored content(text).
- Dark SkinA scheme which has dark colored background with light colored content(text).
- Predefined Color SchemeSelect from the predefined five different color scheme for the Primary Color, Background Color, Heading Color, Paragraph Color, Meta Color. These colors can be set seperately for each of the color option.
- Primary ColorSelect a primary color of the site.
- Background ColorSelect a background color for the main content section of the site.
- Heading ColorSelect a color for the heading section of the site.
- Paragraph ColorSelect a font color for text in the paragraphs.(Effects the content inside ‘p’ (paragraph) tag).
- Meta ColorSelect a font color for the meta elements like author’s name, category, published date etc.
This section includes various settings for color customization of the theme and the options integrated are:
Preloader Settings
-
Go To: Appearance > Customize > Suffice Theme Options > Preloader Settings section from the WordPress dashboard.
- PreloaderTurn on to enable the preloader on your site.
The options integrated in this section are:
Page Title Settings
-
All the options related to page titles are available in Appearance > Customize > Suffice Theme Options > Page Title Settings section from the WordPress dashboard.
- Page Title BarTurn on to display a bar that holds the page title and breadcrumb
- Page Title Font SizeEnter a desired value for the font size of the page title in the page title bar. The value should be added with the valid CSS units like px, em, pt etcetera.
- Page Title Font Size on MobileEnter a desired value for the font size of the page title in the page title bar while viewing in the mobile devices. The value should be added with the valid CSS units like px, em, pt etcetera.
- Page Title Font Color Select a font color for the page title.
- Page Title Background Color Select a background color for the page title. This color will be over-ridden if the background image is set in the option below.
- Page Title Background Image Select/upload a background image for the page title bar.
The options integrated in this section are:
Breadcrumb Settings
-
All the options related to Breadcrumbs are available in Appearance > Customize > Suffice Theme Options > Breadcrumb Settings section from the WordPress dashboard.
- BreadcrumbsTurn on the switch to display the breadcrumb.
- Breadcrumbs on Custom Post Type ArchivesTurn on the switch to display the breadcrumb on the archive pages of the Custom Post Type.
- Breadcrumbs Font SizeSet a font size for the texts in the breadcrumb.
- Breadcrumbs Font ColorSelect a font color for the texts in the breadcrumb.
- Breadcrumbs Link Font ColorSelect a font color for the links in the breadcrumb.
- Breadcrumbs Link Hover ColorSelect a hover color for the links in the breadcrumb.
The options integrated in this section are:
Footer Settings
-
All the options related to footer are available in Appearance > Customize > Suffice Theme Options > Footer Settings section from the WordPress dashboard.
- Footer WidgetsTurn on to display the widgets area in the footer.
- Footer Widget ColumnSelect one of the options available for the number of columns to be displayed in the footer widget area.
One ColumnA single column covering the whole footer widget area.
Two ColumnsTwo columns covering the whole footer widget area.
Three ColumnsThree columns covering the whole footer widget area.
Four ColumnsFour column covering the whole footer widget area.
- Footer Bottom Right ContentSelect one of the options available for the content to be displayed on the right of the bottom footer section.
- Social Icon
- Footer Menu
- Disable
Social Icons/menu which is set to the Social menu location.
A menu which is set to the Footer menu location.
Select this option if you want nothing to be displayed on the right of footer bottom section.
- Footer Background ColorSelect a background color for the whole footer section. This color will be over-ridden if a background image is selected for the background.
- Footer Background ImageSelect/upload a background image for the whole footer section.
- Footer Border Size ( Default: 1 )Select a font size for the border which seperate the footer widgets area and the bottom footer section.
- Footer Border ColorSelect a font color for the border which seperate the footer widgets area and the bottom footer section.
- Footer Widget Area Padding ( Default: 60px 0 15px 0 )Enter the desired value for the padding in the footer widget area. Top, right, bottom and left pagging can be set just enter the values with the valid CSS unit(px, em, pt) in the respective field.
- Widget Seperating MarginEnter the margin value to seperate the footer widget area and bootom footer section.
- Footer Widget Title Font SizeEnter a font size value with valid CSS unit for the widget title inside the footer widget area.
- Footer Widget Title ColorSelect a font color for the widget title inside the footer widget area.
- Footer Widget List Item Text ColorSelect a font color for the text in the list item.
- Footer Widget List Item Hover ColorSelect a hover color for the text in the list item.
- Footer Widget List Item Padding ( Default: 10px 0 10px 0 )Enter the desired value for the padding to the footer widget list item. Top, right, bottom and left pagging can be set just enter the values with the valid CSS unit( like px, em, pt ) in the respective field.
- Footer Widget List Element Border Width ( Default: 0 )Select a width value for the border that seperates the two list items.
- Footer Widget List Element Border Color ( Default: 0 )Select a font color for the border that seperates the two list items.
- Copyright BarTurn on to display the copyright section at the right side in the bottom footer setcion.
- Copyright TextEnter the text or HTML to display in the copyright section.
- Copyright Text ColorSelect a font color for the text in the copyright section.
- Copyright Text Link ColorSelect a font color for the links in the copyright section.
- Copyright Font Size ( Default: 12px )Enter the font size for the text in the copyright section. Enter the values with the valid CSS unit ( like px, em, pt ).
The options integrated in this section are:
FOOTER STYLING
FOOTER WIDGET AREA OPTION
FOOTER WIDGET TITLE
FOOTER WIDGET LIST ITEM
This section is for the styling of the list items displayed via the widgets in the footer widget area.
COPYRIGHT
This section is for the customization of the copyright section which is displayed at the right corner in the footer bottom.
Sidebar Settings
-
All the options related to sidebar(right and left) settings are available in Appearance > Customize > Suffice Theme Options > Sidebar Settings section from the WordPress dashboard.
- Sidebar Background Color Select a background color for the left or right sidebar.
- Sticky Sidebar Turn on to make the sidebar sticky.
The options integrated in this section are:
Widget Settings
-
All the options related to widgets in the left and right sidebar are available in Appearance > Customize > Suffice Theme Options > Widget Settings section from the WordPress dashboard.
- Widget Bottom Margin ( Default: 45 ) Set a margin bottom value for each widget in the sidebar. This provides gap between the widgets in the sidebar.
- Widget Title Font Size Set a font size value for the widget title in the sidebar.
- Widget Title Color Select a font color for the widget title in the sidebar.
- Widget Title Ribbon Turn on to display a ribbon like structure above the widget title in the sidebar.
- Widget Title Ribbon Color Select a font color for the ribbon displayed above widget title in the sidebar.
- List Item Text Color Select a font color for the list item text inside the widget.
- List Item Hover Color Select a hover color for the list item text inside the widget.
- List Item Padding ( Default: 10 ) Set a value for the padding between the list items inside the widget.
- List Element Border Width ( Default: 1 ) Set a value for the border width between the list items inside the widget. The border seperates two list items so you can set the value to zero if you don’t want the border.
- List Element Border Color Select a font color for the border placed between the two list items displayed by a widget in the sidebar.
The options integrated in this section are:
Typography Settings
-
All the options related to typography settings are available in Appearance > Customize > Suffice Theme Options > Typography Settings section from the WordPress dashboard.
- Body Typography Set desired values in the various options below to customize the typography of the various elements inside body tag.
- Font FamilySelect font family for the elements inside the body.
- VariantSelect a variant for the choosen font family.
- SubsetSelect a subset for the choosen font family.
- Font SizeSelect a font size for the various elements inside the body tag.
- Line Height Set a line height for the elements inside the body tag.
- Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters.
- H1 Typography Set desired values in the various options below to customize the typography of the various elements inside ‘h1‘ tag.
- Font FamilySelect font family for the elements inside the ‘h1‘ tag.
- VariantSelect a variant for the choosen font family.
- SubsetSelect a subset for the choosen font family.
- Font SizeSelect a font size for the various elements inside the ‘h1‘ tag.
- Line Height Set a line height for the elements inside the ‘h1‘ tag.
- Letter Spacing( Default: 0 )Enter a numerical value for the space between the letters inside the ‘h1‘ tag.
- H1 Color Select a font color for the elements inside the ‘h1‘ tag.
- Post Title Font Size Enter a value with valid CSS unit for the font size of the post title in the single and blog listing page.
- Post Title Line Height Enter a value with valid CSS unit for the line height of the post title in the single and blog listing page.
The options integrated in this section are:
Blog/Article Settings
-
All the options related to blog/article settings are listed under this section, so to customize the blog posts, go to: Appearance > Customize > Suffice Theme Options > Blog/Article Settings section from the WordPress dashboard.
- Blog Post StyleChoose between the two available style options which are listed below:
ClassicThe classic style where the blogs are displayed as a list.
GridThe bolg posts are displayed in a grid.
- Grid Layout Columns Select the number of columns to be displayed in the blog listing page if the grid style is choosen. The choices available here are:
Two Columns Two columns layout for the grid style.
Three ColumnsThree columns layout for the grid style.
Four ColumnsFour columns layout for the grid style.
Six ColumnsSix columns layout for the grid style.
- Featured Image on Blog Archive Page Turn on to display the featured image of a post in the archive pages.
- Featured Image on Single Blog Post Turn on to display the featured image of a post in the single page.
- Post Title alignment Choose where you want to display the post title in single page.
- Below Select this option to display the post title below th e featured image.
- Above Select this option to display the post title above th e featured image.
- Disable Select this option to disable the post title.
- Post Navigation Turn on to display the post navagtion in the single page.
- Comments Turn on to enable the comments in the single page.
- Post Meta Item Font Size ( Default: 13 ) Set a value for the fontsize of the post meta.
- Post Meta Turn on to display all the post meta. The settings below similarly controls the each of the post meta elements seperately.
- Post Meta Author Turn on to display the author post meta.
- Post Meta Date Turn on to display the author post meta.
- Post Meta Categories Turn on to display the categories post meta.
- Post Meta Comments Turn on to display the comments post meta.
- Post Meta Tags Turn on to display the tags post meta.
The options integrated in this section are:
BLOG POST SINGLE
This section includes settings to customize the blog post on its single page.
BLOG META
This section includes the settings for the post meta like category, date, author, tags, and comment number on all the pages.
Category Color
-
To assign different color to different category, go to: Appearance > Customize > Suffice Theme Options > Category Color section from the WordPress dashboard.
The options integrated in this section are:
Search Settings
-
For the settings related to search page styling, go to: Appearance > Customize > Suffice Theme Options > Search Settings section from the WordPress dashboard.
- Search Results StyleChoose between the two available style options which are listed below:
ClassicThe classic style where the search results are displayed as a list.
GridThe search results are displayed in a grid.
- Featured Image for Search ResultsTurn on to display the featured image in the search results.
The options integrated in this section are:
Related Posts Settings
-
All the options related to Related posts settings are available in Appearance > Customize > Suffice Theme Options > Related Posts Settings section from the WordPress dashboard.
- Related Post Turn on to display the related posts in the single post page.
- Get Related Post From Choose whether you want the related posts to be genereted based on similarities of ‘categories’ or ‘tags’.
- Related Post StyleChoose between the three available style options which are listed below:
DefaultThe default style where the featured image is displayed above the post title.
Title on HoverThe post title is displayed over the featured image on hover.
Title OverlayedThe post title is overlayed on featured image.
- Number of Related Posts ( Default: 6 ) Set the number of related post articles to be displayed in the single post page.
- Related Post Column Select the number of columns to be displayed in the single page for the related posts. The choices available here are:
Two Columns Two columns layout for the related posts.
Three ColumnsThree columns layout for the related posts.
Four ColumnsFour columns layout for the related posts.
Six ColumnsSix columns layout for the related posts.
- Column Spacing between Posts ( Default: 15 ) Set the space between two related posts in the single page.
- Realted Post Carousel Turn on to enable the carousel effect for the realted posts.
- Realted Post Carousel Autoplay Turn on to enable the autoplay feature in the related post carousel.
- Realted Post Carousel Navigation Turn on to display the navigation buttons in the related post carousel.
The options integrated in this section are:
WooCommerce Settings
-
To set WooCommerce pages settings for your site, go toAppearance > Customize > Suffice Theme Options > WooCommerce Settings section from the WordPress dashboard.
- Products Per Page ( Default: 12 ) Set the number of products to be displayed per page on shop and archive pages.
- Products Per Row ( Default: 3 ) Set the number of products to be displayed in a single row on shop and archive pages.
- Related Products Turn on to display the related products on the product detail(single) page.
- Number of Related Products ( Default: 4 ) Set the number of related products to be displayed.
- Number of related products per row ( Default: 4 ) Set the number of related products to be displayed in a single row.
- Upsell Product Turn on to display the upsell product in the product detailed page.
- Number of Upsell Products Set a the number of upsell products to be displayed.
- Number of upsell products per row Set a the number of upsell products to be displayed in a single row.
- WooCommerce Product Style Choose from the two available options for styling the products on the product archive pages. The available choices are:
Clean Clean style for the products.
ModernModern style for the products.
WOOCOMMERCE STYLING
Additional Settings
-
All the options related to Additional Settings are available in Appearance > Customize > Suffice Theme Options > Additional Settings section from the WordPress dashboard.
- Google Map APIEnter your Google Map API here. If you are using Gmap Widget.
The options integrated in this section are:
Page Templates
Page Templates
- Default TemplateThe page will inherit the layout selected from the ‘Customizer’.
- Full Width A page template with content spreading the full width of the site without any sidebars in the left or right.
- Left Sidebar A page template with content to right and a sidebar to the left.
- PagebuilderA page template for creating you page with Page Builder by SiteOrigin plugin. This provides you more flexiblity on creating new page designs any using widgets.
- Right Sidebar A page template with content to left and a sidebar to the right.
Page Specific Meta
Metabox Option
- Transparent Header Check this option to make page content to overlap under the transparent header.
Page Builder
Page Builder by SiteOrigin
Add Widget
- Go to any of your page.
- Click the Page Builder tab which is located in top right of content.
- You can add your widgets just by clicking Add widgets button
The image for adding your widgets in particular page using Page Builder by SiteOrigin is shown below which will be displayed as below in the backend:-
Add Row
- Go to any of your page.
- Click the Page Builder tab which is located in top right of content.
- You can add your widgets just by click add row button
The image for adding your rows in particular page using Page Builder by SiteOrigin is shown below which will be displayed as below in the front-end:-
Suffice Toolkit
Widgets
ST: Slider
This widget is designed to display a image slider with various text and button overlayed on the image .
- Add the ST: Slider Widget in a page via Page Builder and fill out the necessary informations like the Slider title, image, button text and link etc.
- Various elements of the slider can be customized such as: slider content style and position, button size, style and shape.
- Slider HeightChoose the height of the slider.
- Auto Height:The slider height is equal to the height of the image uploaded.
- Full Viewport Height:The slider covers the whole screen (viewport).
- On the top of the widget you can see another tab named ‘Styling’ which contains an option for styling the slider navigation button, you can choose between the two images, first displays circular navigation buttons whereas sqaure shaped buttons are displayed by the second.
The following is an image of the front-end of the ST: Slider Widget.
ST: Title
-
This widget is designed to display a title and its short description.
- Add the ST: Title Widget in a page via Page Builder and fill out the title and sub-title field. One of these field could be left empty if not required.
- At the top of the widget you can see two additional tabs, namely Styling: contains options customized the design as desired and Styling: contains color related settings.
The following is the front-end image of the fully customized ST: Title Widget
ST: Call To Action
-
This widget is designed to display a call to action banner with a title, short description, an icon and two buttons.
- Add the ST: Call To Action in a page via Page Builder and fill out the necessary information like title, description, icon, button text and link.
- There are three style options to choose from, these options can be found under the ‘Styling’ tab at the top of the widget.
- Similarly a whole lot of color-related options can be found under ‘Color’ tab right next to the ‘Styling Tab’
The following is the front-end image of the fully customized ST: Call To Action Widget
FT: Button
-
As the name suggests, this widget is designed to display a button. An icon can be displayed inside the icon if required.
- Add the FT: Button in a page via Page Builder and fill out the necessary information like button text, link and select and icon from the provided list.
- Just like the widgets mentioned above, this widget also contains the options for styling and color under its respective tabs placed at the top of the widget.
The following is the front-end image(encircled portion) of the fully customized ST: Button
ST: Logo
-
This widget is desinged to display a horizontal list of images.
- Add the ST: Logo Widget via Page Builder and fill out the necessary information like logo image, link.
- You can add as many logo images as desired, the widget acts as slider and the images inside can be swiped when more images are added.
- Two style options are provided in this widget which can accessed via the Styling tab at the top.
The image below depicts the front-end of the ST: Logo Widget with five added images:-
ST: Portfolio
-
This widget is primarily designed to display the portfolio of your recent work. The Suffice Toolkit plugin registers a custom post type named Portfolio and this widget displays these custom post type.
- Add the ST: Portfolio Widget via Page Builder and fill out the necessary information like portfolio category, number of items to display.
- There are four different style options available which can be found under the Styling tab.
The image below depicts the front-end of the ST: Logo Widget with fives added images:-
ST: Image
-
This is a widget designed just to display an image.
- Add the ST: Image Widget via Page Builder and add an image and its link
The image below depicts the front end of the ST: Image Widget
ST: Blog
-
This widget is designed to display the WP default blog posts in different styles.
- Add the ST: Blog Widget via the Page Builder and fill out the required information like number of post, latest/category etc.
- Four different style options are provide to choose from which can be accessed via the ‘Styling’ tab at the top.
- Options like number of posts to be displayed in a row, blog post source(latest posts or specific category) are available under the General tab.
- There are two available options for the Featured Posts Source and they are:
- Latest Posts Recently added posts are displayed regardless of the category.
- Category Posts from specific categories are displayed. The category to be displayed can be chosen from the Category lists dropdown field below.
The following image depicts the front-end of the ST: Bolg Widget when the first style option is selected.
ST: Team
-
This widget is designed to display the Team Members with additional information.
- Add the ST: Team Widget via the Page Builder plugin and fill out the team member’s details like name, image, designation and social links.
- It has three different style options to choose from which can be found under the Styling tab at the top and similarly color options can be found under the Color tab.
The image below depicts the front-end of the fully set ST: Team Widget.
ST: Testimonial
-
This widget is primarily designed to display the clients testimonials with image.
- Add the ST: Testimonial Widget via the Page Builder and fill out the information such as name, image and description.
- Option to control the number of testimonials to be displayed per row can be found under the General tab.
- There are three style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.
The image below depicts the front-end of the ST: Testimonial Widget when the first style option is chosen.
ST: Counter
-
This widget is primarily designed to display a counter with icon.
- Add the ST: Counter Widget via the Page Builder and fill out the information such as title, icon, count number etc.
- Prefix and suffix can be added to the count number.
- There are four style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.
The image below depicts the front-end of the ST: Counter Widget when the first style(Hexagon) option is chosen.
ST: Iconbox Widget
-
This widget is primarily designed to display an icon with title, description and a button.
- Add the ST: Iconbox Widget via the Page Builder and fill out the information such as title, icon, button link, text etc.
- There are four style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.
The image below depicts the front-end of the ST: Iconbox Widget when the fourth(Round Icon With Border) style option is chosen.
The image below depicts the front-end of the ST: Iconbox Widget when the third(Small Icon) style option is chosen.
ST: Google Map
-
This widget is designed to display a google map.
- Add the ST: Google Map via the Page Builder and fill out the information such as map height, longitude, latitude, zoom level etc.
- Enter the desired text Marker Tooltip field to display it when a user clicks on the marker icon(set location.)
The image below depicts the front-end of a fully set ST: Google Map Widget
ST: Pricing Table
-
This widget is primarily designed to display pricing tables to showcase your various pricing plans.
- Add the ST: Pricing Table via the Page Builder and fill out the information such as title, sub-title, currency etc.
- Dynamic fields can be added to show the key points as a list.
- There are three style options under Styling tab, and the various color related options are under the Color tab at the top of the widget.
The image below depicts the front-end of a fully set ST: Pricing Table
ST: Featured Posts
-
This widget is designed to display the WP default blog posts in different styles.
- Add the ST: Featured Posts via the Page Builder and fill out the required information like source, category etc.
- Three different style options are provide to choose from which can be accessed via the ‘Styling’ tab at the top.
- There are two available options for the Featured Posts Source and they are:
- Latest Posts Recently added posts are displayed regardless of the category.
- Category Posts from specific categories are displayed. The category to be displayed can be chosen from the Category lists dropdown field below.
The following image depicts the front-end of the ST: Featured Posts when the first style option is selected.
ST: WooCommerce Product
-
This widget is designed to display WooCommerce products.
- Add the ST: WooCommerce Product Widget via the Page Builder and fill out the information such as product type, number of products and number of columns in a row.
- You can either display Featured product, On Sale Products or choose the All Products option to display all kinds of WC products.
- You can choose among the two available style options which can be found under the Styling tab at the top of the widget.
The image below depicts the front-end of a fully set ST: WooCommerce Product Widget
ST: WooCommerce Category
-
This widget is designed to display WooCommerce categories with the image.
- Add the ST: WooCommerce Category Widget via the Page Builder and fill out the information such as categories and number of columns in a row.
- Desired number of categories can be added by selecting from the dropdown list. Valid WooCommerce categories are displyed in the list.
- Two different style options(Transparent and Flat) are provided which can be selected from the dropdown list of the Styling field.
The image below depicts the front-end of a fully set ST: WooCommerce Product Widget
How to limit the excerpt text
Steps
- First Go to the service widget page or post in your dashboard.
- Just below the page editor you will see the excerpt box
- If you don’t see the excerpt box. Scroll to the top and you will see the screen options on the right hand side corner.
- Click it and check the Excerpt box. Now you should see the excerpt box below the editor.
- Fill the excerpt box with the desired amount of text that you want to show.
How to Setup Blog page?
Steps
- First go to Settings->Reading->Front Page displays->A static page (select below).
- Now from Posts page: dropdown select any page where you like to show blog post.
- Click Save Changes.
Recommended Images
It will be interesting for everyone to try to play online slots from Australian developers. Just try here https://casinowis.com/national-casino-review. Read the reviews and enjoy modern games for future profit.
Since this theme heavily relies on the featured images of the post, custom post type(portfolio) and the images used in other widgets. So, we have created different recommended image size for this theme.Recommended image size (width*height) used in Suffice theme in pixels.
Recommended Image Size
- Recommended image size for ST:Slider – 1920 x 1080 pixels
- Recommended image size for FT:Team(Default,Bubble) – 270 x 230pixels
- Recommended image size for FT:Team(Boxed) – 270 x 230pixels
- Recommended image size for FT:Testimonial – 270 x 230pixels
- Recommended image size for Posts – 1280 x 1024 pixels
- Recommended image size for Portfolio(Project) – 1280×1024 pixels
- Default Portfolio image will be cropped into- 572 x 552pixels
- Masonry Portfolio image will be cropped into – 572 x 652pixels
- Default Blog Post will be cropped into – 750 x 420pixels