{"id":31,"date":"2017-11-17T13:56:28","date_gmt":"2017-11-17T13:56:28","guid":{"rendered":"http:\/\/documentation.bold-themes.com\/advancer\/?page_id=31"},"modified":"2026-09-23T09:42:14","modified_gmt":"2026-09-23T09:42:14","slug":"theme-customization","status":"publish","type":"page","link":"https:\/\/documentation.bold-themes.com\/codi\/theme-customization\/","title":{"rendered":"3. Theme Customization"},"content":{"rendered":"

INTRODUCTION<\/span>Theme Customization<\/span><\/span><\/h2>
Theme uses native WordPress Customizer for General theme options. In order to access WordPress Customizer please select \u2018Appearance > Customize\u2019 in wp-admin console.<\/div><\/header>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/p>\n

On the left side of the screen you will see the menu with various options and on the right side you will see website preview. Any settings you change in the Customizer will affect entire website, which means all posts and pages, so we are referring to them as global customization settings.<\/p>\n

Each change you make will automatically update website preview (page will be refreshed). When you are satisfied with the result click \u2018Save & Publish\u2019 and do not forget to make final preview outside customization frame and logged out of WordPress to see how the site would look like to your visitors.<\/p>\n

\n<\/div>

<\/span><\/span><\/span><\/span><\/div><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/span><\/div>
<\/p>\n

The important feature of Codi is that any global setting can be overridden<\/strong> on any single post or page using Override Global Settings section which you will find on the bottom of page editor.<\/span><\/p>\n

\n<\/div>

<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/p>\n

You will learn more about this overriding soon. Now, let\u2019s explore customization settings.<\/p>\n

\n<\/div>

<\/span><\/span><\/span><\/span><\/div><\/div>
\"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/customize.png\"<\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
<\/span><\/span><\/span><\/span><\/div><\/div>

SECTION 01<\/span>Site Identity<\/span><\/span><\/h2>
Under \u201cSite Identity\u201d panel in Customizer, you can set Site Title, Tagline and Site Icon. When working with site icon, please pay attention to recommended Icon size.<\/div><\/header>
<\/span><\/span><\/span><\/span><\/div><\/div>
\"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/site-identity.png\"<\/span><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/p>\n

You\u2019ll see the changes in the preview panel to the right.\u00a0When you\u2019re done, click Save and Publish.<\/p>\n

\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>

<\/span><\/span><\/span><\/span><\/div><\/div>

SECTION 02<\/span>General Settings - WordPress Customizer<\/span><\/span><\/h2>
On General settings panel you will find the following options:<\/div><\/header>
<\/span><\/span><\/span><\/span><\/div><\/div>
\"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/general-settings.png\"<\/span><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/p>\n

Display site title and tagline\u00a0<\/b><\/p>\n

True \/ False<\/pre>\n
Select if the site title and tagline (set in Site Identity panel) will display next to main logo.<\/p>\n
Site title HTML tag<\/b><\/p>\n
p \/ h1 \/ h2 \/ h3 \/ h4 \/ h5<\/pre>\n
Page width<\/b><\/p>\n
Wide \/ Boxed 1200 \/ Boxed 1400 \/ Boxed 1600 \/ Boxed 1800<\/pre>\n
Here you can select the width of the entire page content.<\/p>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/p>\n
Colors & styles<\/span><\/h5>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/p>\n
Accent Color (primary)<\/strong><\/p>\n
Hexadecimal color code or color picker<\/pre>\n
Accent color is used as a color for links, icons, etc. If you define it, the accent color will influence the general color scheme of the site.<\/p>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
\"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/accent-color.png\"<\/span><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/p>\n
Alternate Color (secondary)<\/b><\/p>\n
Hexadecimal color code or color picker<\/pre>\n
Another color which influences general color scheme of the site is alternate color. Alternate color can be assigned as a color for buttons, icons, etc. If you define it, all elements with assigned alternate color will be affected.<\/p>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
\"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/alt-color.png\"<\/span><\/div>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/p>\n
 Template skin, background color and text color<\/b><\/p>\n
Color scheme, or Hexadecimal color code or color picker<\/pre>\n
Select main template colors for background and text throughout the site. Note that these colors can be overwritten on individual sections and elements.<\/p>\n
Template background image<\/b><\/p>\n
Attachment ID or URL<\/pre>\n
Page background image is a static image which serves as a site background if defined.<\/p>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
<\/p>\n
Sidebar<\/span><\/h5>\n
\n<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/p>\n
Sidebar position
\n<\/strong><\/p>\n
No Sidebar \/ Left \/ Right<\/pre>\n
This option enables you to define if the sidebar will be visible globally or not.
\nBy customizing this option, user can globally enable (place it on the right or left side) or disable sidebar. Sidebar content can be edited under Appearance > Widgets (from main WordPress menu).<\/p>\n
You can choose one of three predefined sidebar layouts:<\/p>\n
    \n
  1. No Sidebar \u2013 No sidebar is displayed<\/li>\n
  2. Left \u2013 Sidebar is displayed on the left side of main content<\/li>\n
  3. Right \u2013 Sidebar is displayed on the right side of main content.<\/li>\n<\/ol>\n
    Enable sticky sidebar<\/b><\/p>\n
    True \/ False<\/pre>\n
    Select if the sidebar will be sticky (scroll down with page content) or not.<\/p>\n
    Sidebar title size<\/b><\/p>\n
    Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
    Select the title size of the widgets in the sidebar.<\/p>\n
    Sticky sidebar top position<\/b><\/p>\n
    Number in pixels<\/pre>\n
    Define the spacing between sticky sidebar and top of the page (or sticky header if it\u2019s enabled).<\/p>\n
    Sidebar width<\/b><\/p>\n
    Number in percentage<\/pre>\n
    Define the width of the sidebar in percents (e.g. 1024px or 30%).<\/p>\n
    Sidebar responsive breakpoint (in px)\u00a0<\/b><\/p>\n
    Number in pixels<\/pre>\n
    Defines screen resolution when sidebar is displayed as defined. On smaller screens sidebar will be displayed below content.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Custom options<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Custom JS<\/b><\/p>\n
    Custom JS code<\/pre>\n
    This option enables you to define global Custom JS code. Enter any JS code you want here and it will be embedded in the element of all pages throughout the site.<\/p>\n
    This is where you should paste your custom site wise JavaScript, such as Google Analytics script.<\/p>\n
    Reset theme settings<\/b><\/p>\n
    This is not really a setting, so no override. Reset button will just reset all global settings to default values.<\/p>\n
    \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    SECTION 03<\/span>Typography<\/span><\/span><\/h2>
    On Typography settings panel you will find the following options:<\/div><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Body Font <\/strong><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Body text font. Using this setting you can set the main font family that\u2019ll be applied throughout the website. Codi uses Google webfonts<\/a>.<\/p>\n
    Body text transform<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Body Font Weight<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Body font style<\/strong><\/p>\n
    None \/ Italic \/ Oblique<\/pre>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Headings & subheadings<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Heading font<\/b><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Heading text font. Using this setting you can set the font family for Main Headings.<\/p>\n
    Heading text transform<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Heading font weight<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Heading font style<\/strong><\/p>\n
    None \/ Italic \/ Oblique<\/pre>\n
    Heading letter spacing<\/strong><\/p>\n
    Number in pixels<\/pre>\n
    Example:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/headline.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Supertitle font<\/b><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Heading Supertitle text font. Using this setting you can set the font family for supertitles in Main Headings.<\/p>\n
    Supertitle text transform<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Supertitle font weight<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Supertitle font style<\/strong><\/p>\n
    None \/ Italic \/ Oblique<\/pre>\n
    Supertitle letter spacing<\/strong><\/p>\n
    Number in pixels<\/pre>\n
    Example:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/supertitle.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Subtitle font<\/b><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Heading Subtitle text font. Using this setting you can set the font family for subtitles in Main Headings.<\/p>\n
    Subtitle text transform<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Subtitle font weight<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Subtitle font style<\/strong><\/p>\n
    None \/ Italic \/ Oblique<\/pre>\n
    Subtitle letter spacing<\/strong><\/p>\n
    Number in pixels<\/pre>\n
    Example:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/subtitle.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Buttons<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Button font<\/b><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Button text font. Using this setting you can set the font family for all buttons.<\/p>\n
    Button text transform<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Button font weight<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Button font style<\/strong><\/p>\n
    None \/ Italic \/ Oblique<\/pre>\n
    Button style<\/strong><\/p>\n
    Filled \/ Outline \/ Clean<\/pre>\n
    Button letter spacing<\/strong><\/p>\n
    Number in pixels<\/pre>\n
    Button shape<\/strong><\/p>\n
    Hard Rounded \/ Soft Rounded \/ Square<\/pre>\n
    Button color scheme<\/strong><\/p>\n
    Select from available color schemes<\/pre>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Menus<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Menu font <\/b><\/p>\n
    No Change \/ Any Google font<\/pre>\n
    Using this setting you can set the font family for menus.<\/p>\n
    Menu text transform (first level)<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Menu text transform (other levels)<\/strong><\/p>\n
    None \/ initial \/ inherit \/ UPPERCASE \/ Capitalize \/ lowercase<\/pre>\n
    Menu font weight (first level)<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    Menu Font Weight (other levels)<\/strong><\/p>\n
    Default \/ Lighter \/ Normal \/ Bold \/ Bolder \/ 100 \/ 200 \/ 300 \/ 400 \/ 500 \/ 600 \/ 700 \/ 800 \/ 900<\/pre>\n
    \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    SECTION 04<\/span>Header and footer<\/span><\/span><\/h2>
    On Header and Footer settings panel you will find the following options:<\/div><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/header-and-footer.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    Header<\/span><\/span><\/h4><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Header width<\/b><\/p>\n
    Wide \/ Wide, boxed menu 1200 \/ Wide, boxed menu 1400 \/ Wide, boxed menu 1600 \/ Wide, boxed menu 1800 \/ Boxed 1200 \/ Boxed 1400 \/ Boxed 1600 \/ Boxed 1800<\/pre>\n
    Here you can select the header width, which includes menu, logo, and widget areas.<\/p>\n
    Main logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select main website logo. It is displayed on pages next to the menu, on desktop.<\/p>\n
    Logo height\u00a0\u00a0<\/strong><\/p>\n
    In pixels<\/pre>\n
    Adding the required px number logo will decrease\/increase.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/logo-area-right.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Header position<\/strong><\/p>\n
    Header above content \/ Header over content \/ Hidden header<\/pre>\n
    Select if the header will be above content, or over the content.<\/p>\n
    Here is an example of header above content:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/header-above-content.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    And here is header over content:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/header-over-content.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Primary menu position<\/strong><\/p>\n
    Logo area, left \/ Logo area, right \/ Logo area, center \/ Below logo area, left \/ Below logo area, right \/ Below logo area, center<\/pre>\n
    Codi theme features numerous header layouts giving you a great degree of freedom when it comes to customization of your site. The menu type options include:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    1. Logo area, left:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/logo-area-left.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    2. Logo area, right:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/logo-area-right.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    3. Logo area, center:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/logo-area-center.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    4. Below logo area, left:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/below-logo-left.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    5. Below logo area, right:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/below-logo-right.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    6. Below logo area, center:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/below-logo-center.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Switch dropdown direction index<\/strong><\/p>\n
    Choose number of submenus<\/pre>\n
    Last n menu items will show dropdowns in the opposite direction.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Top bar colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Top bar color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the top bar with widgets.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Logo bar colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Logo bar color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the logo area.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Menu bar colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Menu bar color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the menu items and menu background.<\/p>\n
    Menu hover color scheme<\/strong><\/p>\n
    Color scheme<\/pre>\n
    Menu dropdown color scheme<\/strong><\/p>\n
    Color scheme<\/pre>\n
    Menu dropdown hover color scheme<\/strong><\/p>\n
    Color scheme<\/pre>\n
    Select color scheme for menus on hover, and submenus and submenus on hover.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Header details<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Show line below Header<\/strong><\/p>\n
    Yes \/ No<\/pre>\n
    Select if the line will display below the menu and logo.<\/p>\n
    Lines opacity<\/strong><\/p>\n
    Select opacity<\/pre>\n
    Blur<\/strong><\/p>\n
    Yes \/ No<\/pre>\n
    Select if the header will have a blur effect.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    Sticky header<\/span><\/span><\/h4><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Enable sticky header<\/b><\/p>\n
    True \/ False<\/pre>\n
    Select if the sticky header will display on the pages throughout the site.<\/p>\n
    Sticky header style<\/b><\/p>\n
    Classic \/ Fix and Shrink \/ Show on scroll up<\/pre>\n
    Select how you want sticky header to display on page scroll.<\/p>\n
    Scroll breakpoint (in px)<\/b><\/p>\n
    Any number - e.g. 60px<\/pre>\n
    Defines scroll position when sticky header becomes active. To disable sticky header enter 0.<\/p>\n
    Header logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select sticky header logo. It is displayed on pages next to the menu, on desktop. This logo is visible when sticky header is active.<\/p>\n
    Header width<\/b><\/p>\n
    Wide \/ Wide, boxed menu 1200 \/ Wide, boxed menu 1400 \/ Wide, boxed menu 1600 \/ Wide, boxed menu 1800 \/ Boxed 1200 \/ Boxed 1400 \/ Boxed 1600 \/ Boxed 1800<\/pre>\n
    Here you can select the sticky header width, which includes menu, logo, and widget areas.<\/p>\n
    Logo height<\/strong><\/p>\n
    In pixels - e.g. 60px<\/pre>\n
    Adding the required px number sticky header logo will decrease\/increase.<\/p>\n
    Example:<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/sticky-logo.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Logo bar color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the logo area.<\/p>\n
    Menu bar color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the menu items and menu background.<\/p>\n
    Blur<\/strong><\/p>\n
    Yes \/ No<\/pre>\n
    Select if the sticky header will have blurred background.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    Responsive header<\/span><\/span><\/h4><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Responsive breakpoint (in px)<\/b><\/p>\n
    Any number<\/pre>\n
    Defines screen resolution when responsive menu becomes active. To enable vertical menu for all screens menu enter 999999.<\/p>\n
    Header logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select logo that will display on smaller resolutions.<\/p>\n
    Sticky header logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select sticky header logo that will display on smaller resolutions.<\/p>\n
    Header logo height<\/strong><\/p>\n
    In pixels - e.g. 70px<\/pre>\n
    Sticky header logo height<\/strong><\/p>\n
    In pixels - e.g. 70px<\/pre>\n
    Adding the required px number sticky and header logo will decrease\/increase.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/responsive-menu-logo.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Header logo position<\/b><\/p>\n
    Center \/ Left \/ Right<\/pre>\n
    Here you can define the alignment of the responsive header logo.<\/p>\n
    Header trigger position<\/b><\/p>\n
    Left \/ Right<\/pre>\n
    Here you can define the alignment of the mobile menu trigger.<\/p>\n
    Menu max width<\/b><\/p>\n
    Any number - e.g. 3em, 300px, 70% or calc(100% - 65px)<\/pre>\n
    Set the width of the mobile menu.<\/p>\n
    Menu alignment<\/b><\/p>\n
    Left \/ Right \/ Full screen<\/pre>\n
    Here you can define the alignment of the mobile menu.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Menu logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select logo that will display within mobile menu.<\/p>\n
    Menu logo height<\/strong><\/p>\n
    In pixels - e.g. 70px<\/pre>\n
    Adding the required px number sticky header logo will decrease\/increase.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Header color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the header on smaller screens.<\/p>\n
    Sticky header color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the sticky header on smaller screens.<\/p>\n
    Menu color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the menu items and menu background.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/responsive-logo.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    Footer<\/span><\/span><\/h4><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Footer page<\/b><\/p>\n
    Codi has a unique way of enabling you to create custom footer\u00a0pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for all pages.<\/p>\n
    Select your footer page from the dropdown, and footer on all pages will inherit settings and shortcodes of the referenced page.<\/p>\n
    Widget area width<\/b><\/p>\n
    Wide \/ Wide, boxed menu 1200 \/ Wide, boxed menu 1400 \/ Wide, boxed menu 1600 \/ Wide, boxed menu 1800 \/ Boxed 1200 \/ Boxed 1400 \/ Boxed 1600 \/ Boxed 1800<\/pre>\n
    Here you can select the width of the footer widgets area.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Widget area color scheme, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the footer widgets.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/footer-page.png\"<\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    SECTION 05<\/span>Default headline<\/span><\/span><\/h2>
    On Default Headline panel you will find the following options:<\/div><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2022\/11\/default-headline.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Default headline height<\/strong><\/p>\n
    None \/ Thin \/ Regular \/ Thick \/ Fullscreen<\/pre>\n
    Select the height for default headline. Select \u2018none<\/em>\u2018 to disable default headline.<\/p>\n
    Default headline parallax speed<\/strong><\/p>\n
    None \/ Slow \/ Normal \/ Fast<\/pre>\n
    Set the parallax speed for default headline.<\/p>\n
    Default headline overlay<\/strong><\/p>\n
    Select dark or light, and opacity<\/pre>\n
    Here you can select if default headline will have overlay.<\/p>\n
    Default headline alignment<\/strong><\/p>\n
    Inherit \/ Left \/ Right \/ Center<\/pre>\n
    Set the alignment of default headline\u2019s content.<\/p>\n
    Default headline title size<\/strong><\/p>\n
    Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
    Select the title size in default headline.<\/p>\n
    Default headline title tag<\/strong><\/p>\n
    p \/ h1 \/ h2 \/ h3 \/ h4 \/ h5 \/ h6<\/pre>\n
    Select the title tag in default headline.<\/p>\n
    Default headline width<\/b><\/p>\n
    Wide \/ Wide, boxed menu 1200 \/ Wide, boxed menu 1400 \/ Wide, boxed menu 1600 \/ Wide, boxed menu 1800 \/ Boxed 1200 \/ Boxed 1400 \/ Boxed 1600 \/ Boxed 1800<\/pre>\n
    Here you can select the width of the default headline.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Colors & styles<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Default headline style, background and text color<\/strong><\/p>\n
    Color scheme, or Hexadecimal color code or color picker<\/pre>\n
    Select color scheme for the default headline.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/p>\n
    Display options<\/span><\/h5>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Show in page superheadline<\/strong><\/p>\n
    Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
    Show in page subheadline<\/strong><\/p>\n
    Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
    Select which of the options will display in superheadline and subheadline of default headline.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Page share options<\/strong><\/p>\n
    Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
    Make sure that share options are included in subheadline or superheadline.<\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/span><\/div>
    <\/p>\n
    Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
    \n<\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Page share icons size<\/strong><\/p>\n
    Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
    Page share icons style<\/strong><\/p>\n
    Outline \/ Filled \/ Borderless<\/pre>\n
    Page share icons shape<\/strong><\/p>\n
    Circle \/ Square \/ Rounded square<\/pre>\n
    Page share icons color scheme<\/strong><\/p>\n
    Select color scheme<\/pre>\n
    \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    SECTION 06<\/span>Preloader<\/span><\/span><\/h2>
    On Preloader settings panel you will find the following options:<\/div><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/preloader.png\"<\/span><\/div>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Enable preloader<\/strong><\/p>\n
    Yes\/No<\/pre>\n
    Preloader color scheme, background and text color<\/strong><\/p>\n
    Select color scheme<\/pre>\n
    Preloader transition<\/strong><\/p>\n
    Fade \/ Fade & move up \/ Fade & move down \/ Fade & move left \/ Fade & move right \/ Fade & scale up \/ Fade & scale down \/ Fade & blur<\/pre>\n
    Preloader animation<\/strong><\/p>\n
    Square \/ Dots \/ Circle \/ Dotted square \/ Line \/ Multiline \/ Classic<\/pre>\n
    Preloader logo<\/b><\/p>\n
    Attachment ID or URL<\/pre>\n
    Here you should select logo that will display on preloader.<\/p>\n
    Preloader text<\/b><\/p>\n
    Any text<\/pre>\n
    \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    SECTION 07<\/span>Blog<\/span><\/span><\/h2>
    On Blog settings panel you will find the following options:<\/div><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    Blog list and archive<\/span><\/span><\/h4><\/header>
    <\/span><\/span><\/span><\/span><\/div><\/div>
    <\/p>\n
    Archive layout<\/b><\/p>\n
    Standard, with title on top \/ Standard with image on top \/ Columns \/ Zig-zag \/ Simple<\/pre>\n
    Codi offers five layouts for blog archive pages. Please take a look at the following examples of these layouts:<\/p>\n
      \n
    1. Standard, with title on top<\/a><\/li>\n
    2. Standard with image on top<\/a><\/li>\n
    3. Columns Layout<\/a><\/li>\n
    4. Zig-zag Layout<\/a><\/li>\n
    5. Simple Layout<\/a><\/li>\n<\/ol>\n
      This setting will affect layout of the main Blog page, as well as the Archive, Category, and Tag pages.<\/p>\n
      Single post animation<\/b><\/p>\n
      No Animation \/ Fade In \/ Move Up \/ Move Left \/ Move Right \/ Move Down \/ Zoom in \/ Zoom out \/ Fade In - Move Up \/ Fade In - Move Left \/ Fade In - Move Right \/ Fade In - Move Down \/ Fade In - Zoom in \/ Fade In - Zoom out<\/pre>\n
      Set the posts\u2019 animation on archive page load.<\/p>\n
      Headline title size<\/b><\/p>\n
      Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
      Select the title size of the posts\u2019 headline.<\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/p>\n
      Show in superheadline<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Show in subheadline<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
      Show excerpt<\/strong><\/p>\n
      Choose an option<\/pre>\n
      Select if the excerpt will be visible on the archive page.<\/p>\n
      Show after content<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Select which of the options will display after post content on archive page.<\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/p>\n
      Share options<\/strong><\/p>\n
      Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
      Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
      Share icons size<\/strong><\/p>\n
      Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
      Share icons style<\/strong><\/p>\n
      Outline \/ Filled \/ Borderless<\/pre>\n
      Share icons shape<\/strong><\/p>\n
      Circle \/ Square \/ Rounded square<\/pre>\n
      Share icons color scheme<\/strong><\/p>\n
      Select color scheme<\/pre>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/span><\/div>
      <\/p>\n
      Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/p>\n
      Read more button style<\/strong><\/p>\n
      None \/ Outline \/ Filled \/ Clean<\/pre>\n
      Read more button icon<\/strong><\/p>\n
      Select an icon<\/pre>\n
      Read more button size<\/strong><\/p>\n
      Small \/ Medium \/ Normal \/ Large<\/pre>\n
      Read more button shape<\/strong><\/p>\n
      Circle \/ Square \/ Rounded square<\/pre>\n
      Read more button color scheme<\/strong><\/p>\n
      Select color scheme<\/pre>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
      Blog single post<\/span><\/span><\/h4><\/header>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/p>\n
      Single post settings page<\/b><\/p>\n
      Select page from the dropdown<\/pre>\n
      Use static page with content as a template for all single posts. Select the page which serves as a template.<\/p>\n
      Blog post layout<\/b><\/p>\n
      Standard \/ Columns<\/pre>\n
      Codi offers two layouts for single posts \u2013 standard and columns. This setting lets you choose default layout for all single posts.<\/p>\n
      Here is an example of standard layout<\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/standard-post.png\"<\/span><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/p>\n
      And here is a columns layout.<\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/columns-post.png\"<\/span><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/p>\n
      Headline title size<\/b><\/p>\n
      Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
      Select the title size of the posts\u2019 headline.<\/p>\n
      Show in superheadline<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Show in subheadline<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
      Show after content<\/strong><\/p>\n
      Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
      Select which of the options will display after post content.<\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/span><\/div>
      <\/p>\n
      Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
      <\/p>\n
      Share options<\/strong><\/p>\n
      Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
      Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
      Share icons size<\/strong><\/p>\n
      Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
      Share icons style<\/strong><\/p>\n
      Outline \/ Filled \/ Borderless<\/pre>\n
      Share icons shape<\/strong><\/p>\n
      Circle \/ Square \/ Rounded square<\/pre>\n
      Share icons color scheme<\/strong><\/p>\n
      Select color scheme<\/pre>\n
      Author info style<\/strong><\/p>\n
      None \/ With image \/ Without image<\/pre>\n
      Show in previous\/next post navigation<\/strong><\/p>\n
      Featured image \/ Label \/ Title \/ Date<\/pre>\n
      \n<\/div>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      VIEW MORE<\/span><\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      SECTION 08<\/span>Portfolio<\/span><\/span><\/h2>
      On Portfolio settings panel you will find the following options:<\/div><\/header>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      Portfolio list and archive<\/span><\/span><\/h4><\/header>
      <\/span><\/span><\/span><\/span><\/div><\/div>
      <\/p>\n
      Archive layout<\/b><\/p>\n
      Standard, with title on top \/ Standard with image on top \/ Columns \/ Zig-zag \/ Simple<\/pre>\n
      Codi offers five layouts for portfolio archive pages. Please take a look at the following examples of these layouts:<\/p>\n
        \n
      1. Standard, with title on top<\/a><\/li>\n
      2. Standard with image on top<\/a><\/li>\n
      3. Columns Layout<\/a><\/li>\n
      4. Zig-zag Layout<\/a><\/li>\n
      5. Simple Layout<\/a><\/li>\n<\/ol>\n
        This setting will affect layout of the main Portfolio page, as well as the Archive, Category, and Tag pages.<\/p>\n
        Single post animation<\/b><\/p>\n
        No Animation \/ Fade In \/ Move Up \/ Move Left \/ Move Right \/ Move Down \/ Zoom in \/ Zoom out \/ Fade In - Move Up \/ Fade In - Move Left \/ Fade In - Move Right \/ Fade In - Move Down \/ Fade In - Zoom in \/ Fade In - Zoom out<\/pre>\n
        Set the posts\u2019 animation on archive page load.<\/p>\n
        Headline title size<\/b><\/p>\n
        Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
        Select the title size of the posts\u2019 headline.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Show in superheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Show in subheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
        Show excerpt<\/strong><\/p>\n
        Choose an option<\/pre>\n
        Select if the excerpt will be visible on the archive page.<\/p>\n
        Show after content<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display after post content on archive page.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/div>
        <\/p>\n
        Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Share options<\/strong><\/p>\n
        Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
        Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
        Share icons size<\/strong><\/p>\n
        Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
        Share icons style<\/strong><\/p>\n
        Outline \/ Filled \/ Borderless<\/pre>\n
        Share icons shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Share icons color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Read more button style<\/strong><\/p>\n
        None \/ Outline \/ Filled \/ Clean<\/pre>\n
        Read more button icon<\/strong><\/p>\n
        Select an icon<\/pre>\n
        Read more button size<\/strong><\/p>\n
        Small \/ Medium \/ Normal \/ Large<\/pre>\n
        Read more button shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Read more button color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Portfolio slug<\/b><\/p>\n
        Page slug<\/pre>\n
        This field should contain the slug of the page that serves as a template for Portfolio custom post type.<\/p>\n
        By default, Portfolio custom post type has the slug \u201cportfolio\u201d. In order to change the slug, create a static page with desired slug, and add its slug to this field. Once you save the changes in Customization panel, navigate to Settings >Permalinks, and click \u2018Save Changes\u2019.<\/p>\n
        That way, new slug in the URL will be generated for Portfolio pages.<\/p>\n
        Portfolio category slug<\/b><\/p>\n
        Page slug<\/pre>\n
        This field should contain the slug for Portfolio category custom post type.<\/p>\n
        The slug added to this field will display on Portfolio category pages.\u00a0Once you save the changes in Customization panel, navigate to Settings >Permalinks, and click \u2018Save Changes\u2019.<\/p>\n
        That way, new slug in the URL will be generated for Portfolio category pages.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        Portfolio single post<\/span><\/span><\/h4><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Single portfolio settings page<\/b><\/p>\n
        Select page from the dropdown<\/pre>\n
        Use static page with content as a template for all single portfolio posts. Select the page which serves as a template.<\/p>\n
        Single project view<\/b><\/p>\n
        Standard \/ Columns 1 (media, content + meta) \/ Columns 2 (media, meta \/ content) \/ Columns 3 (media, content \/ meta)<\/pre>\n
        Codi offers several layouts for single portfolio posts. This setting lets you choose default layout for all single posts.<\/p>\n
        Single project headline title size<\/b><\/p>\n
        Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
        Select the title size of the posts\u2019 headline.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Show in superheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Show in subheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
        Show after content<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display after post content.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/div>
        <\/p>\n
        Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Share options<\/strong><\/p>\n
        Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
        Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
        Share icons size<\/strong><\/p>\n
        Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
        Share icons style<\/strong><\/p>\n
        Outline \/ Filled \/ Borderless<\/pre>\n
        Share icons shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Share icons color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        Author info style<\/strong><\/p>\n
        None \/ With image \/ Without image<\/pre>\n
        Show in previous\/next post navigation<\/strong><\/p>\n
        Featured image \/ Label \/ Title \/ Date<\/pre>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        VIEW MORE<\/span><\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        SECTION 09<\/span>Search<\/span><\/span><\/h2>
        On Search settings panel you will find the following options:<\/div><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Search template page<\/b><\/p>\n
        Select page from the dropdown<\/pre>\n
        Use static page with content as a template for the search page. Select the page which serves as a template.<\/p>\n
        Search list headline title size<\/b><\/p>\n
        Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
        Select the title size of the posts\u2019 headline.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Show in search layout superheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Show in search layout subheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
        Show excerpt<\/strong><\/p>\n
        Choose an option<\/pre>\n
        Select if the excerpt will be visible on the search page.<\/p>\n
        Show in search layout after content<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display after post content.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/div>
        <\/p>\n
        Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Search list share options<\/strong><\/p>\n
        Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
        Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
        Search list share icons size<\/strong><\/p>\n
        Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
        Search list share icons style<\/strong><\/p>\n
        Outline \/ Filled \/ Borderless<\/pre>\n
        Search list share icons shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Search list share icons color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        \n<\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Read more button style<\/strong><\/p>\n
        None \/ Outline \/ Filled \/ Clean<\/pre>\n
        Read more button icon<\/strong><\/p>\n
        Select an icon<\/pre>\n
        Read more button size<\/strong><\/p>\n
        Small \/ Medium \/ Normal \/ Large<\/pre>\n
        Read more button shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Read more button color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        SECTION 10<\/span>404 Page<\/span><\/span><\/h2>
        On '404 Page' settings panel you will find the following options:<\/div><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/83\/2023\/08\/error-page.png\"<\/span><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Custom page 404<\/b><\/p>\n
        Select page from the dropdown<\/pre>\n
        Use static page with content as a template for the 404 error page. Select the page which serves as a template.<\/p>\n
        Page 404 style<\/b><\/p>\n
        Color scheme, or Hexadecimal color code or color picker<\/pre>\n
        Page 404 background image<\/b><\/p>\n
        Attachment ID or URL<\/pre>\n
        \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        SECTION 11<\/span>WooCommerce<\/span><\/span><\/h2>
        On WooCommerce settings panel you will find the following options:<\/div><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        Shop products list<\/span><\/span><\/h4><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Headline title size<\/b><\/p>\n
        Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
        Select the title size of the posts\u2019 headline.<\/p>\n
        Show after content<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display after post content on the shop list.<\/p>\n
        Shop button color scheme<\/strong><\/p>\n
        Select from available color schemes<\/pre>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/div>
        <\/p>\n
        Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Share options<\/strong><\/p>\n
        Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
        Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
        Share icons size<\/strong><\/p>\n
        Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
        Share icons style<\/strong><\/p>\n
        Outline \/ Filled \/ Borderless<\/pre>\n
        Share icons shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Share icons color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        Images shape<\/strong><\/p>\n
        Inherit \/ Square \/ Soft rounded \/ Hard rounded<\/pre>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        Shop single product<\/span><\/span><\/h4><\/header>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/p>\n
        Single product settings page<\/b><\/p>\n
        Select page from the dropdown<\/pre>\n
        Use static page with content as a template for all single posts. Select the page which serves as a template.<\/p>\n
        Headline title size<\/b><\/p>\n
        Extra Small \/ Small \/ Medium \/ Normal \/ Large \/ Extra Large \/ Huge<\/pre>\n
        Select the title size of the posts\u2019 headline.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Show in superheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Show in subheadline<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display in superheadline and subheadline of the posts.<\/p>\n
        Show after single product content<\/strong><\/p>\n
        Breadcrumbs (Yoast) \/ Date \/ Author \/ Author photo \/ Share \/ Tags \/ Categories \/ Comments number \/ Comments link \/ Excerpt<\/pre>\n
        Select which of the options will display after post content.<\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div>
        <\/span><\/div>
        <\/p>\n
        Make sure to click on CTRL<\/strong> on your keyboard in order to select more than one share options.<\/span><\/p>\n
        \n<\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/span><\/span><\/span><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
        <\/p>\n
        Share options<\/strong><\/p>\n
        Copy url to clipboard \/ Facebook \/ Twitter \/ Linkedin \/ VK \/ WhatsApp \/ Mail \/ Reddit \/ Tumblr \/ Pinterest \/ Blogger \/ EverNote \/ GetPocket \/ HackerNews \/ FlipBoard \/ Google Bookmarks \/ Diaspora \/ QZone \/ Weibo \/ RenRen \/ XING \/ Skype \/ Line.me \/ Telegram.me \/ Viber<\/pre>\n
        Make sure that share options are included in subheadline, superheadline or after post.<\/p>\n
        Share icons size<\/strong><\/p>\n
        Extra small \/ Small \/ Normal \/ Large \/ Extra large<\/pre>\n
        Share icons style<\/strong><\/p>\n
        Outline \/ Filled \/ Borderless<\/pre>\n
        Share icons shape<\/strong><\/p>\n
        Circle \/ Square \/ Rounded square<\/pre>\n
        Share icons color scheme<\/strong><\/p>\n
        Select color scheme<\/pre>\n
        Single product related products columns<\/strong><\/p>\n
        1 \/ 2 \/ 3 \/ 4 \/ 5 \/ 6<\/pre>\n
        Single product related products rows<\/strong><\/p>\n
        1 \/ 2 \/ 3 \/ 4 \/ 5 \/ 6<\/pre>\n
        \n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>
        <\/p>\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
        \n
        HOW TO 01<\/span>Translation<\/span><\/span><\/h2>\n
        In order to translate the theme, please follow the next steps.<\/div>\n<\/header>\n
        \n
        <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
        \n
        \nTheme’s .pot file\u00a0is located in\u00a0\/wp-content\/themes\/your-theme-name\/languages<\/strong>\u00a0folder.<\/p>\n
        Please use PoEdit –\u00a0https:\/\/poedit.net\/<\/a>\u00a0to translate the .pot file and create respective .po and .mo files.<\/p>\n
        Please name .po and .mo\u00a0files e.g.\u00a0potname-nl_NL.po<\/strong>\u00a0and\u00a0potname-nl_NL.mo<\/strong>\u00a0(nl_NL<\/strong>\u00a0is the language code for dutch and\u00a0potname<\/strong>\u00a0is the name of the .pot file you have started from – it corresponds to text domain of the theme).\u00a0For other languages’ codes, please refer to the following link:\u00a0Internationalization<\/a>.<\/p>\n
        In order to place .po and .mo files properly and not have them deleted when you update the theme, upload\u00a0 them to\u00a0\\wp-content\\languages\\themes<\/strong>\u00a0folder. If you don\u2019t have\u00a0languages\u00a0folder in your\u00a0wp-content\u00a0directory, please proceed and create one. Then create\u00a0themes\u00a0folder, and paste the files in it.<\/p>\n
        Alternatively, you can upload the .po and .mo files to your theme’s\u00a0\/wp-content\/themes\/your-theme-name\/languages<\/strong>\u00a0folder. In that case name them only using the language code (for example\u00a0nl_NL.mo<\/strong>\u00a0and\u00a0nl_NL.po<\/strong>)<\/p>\n
        Also make sure to translate the theme’s plugin .pot file, located in\u00a0\\wp-content\\plugins\\your-theme-name\\languages<\/strong>\u00a0folder.<\/p>\n
        The steps are the same as for the theme, except the files should be named\u00a0bt_plugin-nl_NL.po<\/strong>\u00a0and\u00a0bt_plugin-nl_NL.mo (<\/strong>with appropriate language code).<\/p>\n
        For plugin\u2019s .po and .mo files, you should place them in\u00a0\\<\/strong>wp-content\\languages\\plugins\u00a0<\/strong>folder.<\/p>\n
        You can set the site language of your WordPress installation on Settings >\u00a0General.\u00a0WordPress will automatically use the right language files if they exist.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
        <\/div>\n
        <\/div>\n
        <\/section>\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
        \n
        HOW TO 02<\/span>Child Theme<\/span><\/span><\/h2>\n
        If you want to use Child Theme, please follow these steps:<\/div>\n<\/header>\n
        \n
        <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
        \n
          \n
        1. First of all, make sure that you haven’t changed the parent theme’s folder name. It needs to remain the same.<\/li>\n
        2. You should be able to find the folder your_theme_name<\/em>-child in the package you have downloaded from ThemeForest.<\/li>\n
        3. Please copy this folder to \/wp-content\/themes<\/strong> folder on your server.<\/li>\n
        4. Go to Appearance\u00a0>\u00a0Themes in your wp-admin console and activate child theme. Please have in mind that all required plugins need to be activated.<\/li>\n<\/ol>\n
          For more info, refer to the article\u00a0Child Theme<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          <\/div>\n
          <\/div>\n
          <\/section>\n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          \n
          <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
          \n
          HOW TO 03<\/span>Mega Menu<\/span><\/span><\/h2>\n
          In order to create wide menu, please follow the instructions below:<\/div>\n<\/header>\n
          \n
          <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
          \n
            \n
          1. Please navigate to Appearance >Menus and enable CSS Classes in Screen Options, on top of your dashboard.<\/li>\n<\/ol>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2026\/09\/mega_menu_01.jpg\"<\/span><\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            2. Then add the \u2018bt-wide-dropdown\u2019 class to the parent menu item (the first item you want in your mega menu).<\/p>\n
            In order for mega menu to display correctly top menu item needs to have sub menu items, and those sub menu items need to have their child items.<\/p>\n
            Note that \u2018bt-wide-dropdown\u2019 class is required. In that case mega menu will be centered.<\/p>\n
            Additionally, classes \u2018bt-wide-dropdown-align-left\u2019 and \u2018bt-wide-dropdown-align-right\u2019 can be add next to it if you want to align mega menu to left or right side.<\/p>\n
            bt-wide-dropdown bt-wide-dropdown-align-left \/ bt-wide-dropdown-align-right<\/pre>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2026\/09\/mega_menu_02.png\"<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n
            <\/div>\n
            <\/section>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            HOW TO 03<\/span>One Page Site<\/span><\/span><\/h2>\n
            In order to create one page site, please follow the instructions below:<\/div>\n<\/header>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            1. First, navigate to the Bold Builder edit panel and edit desired section. Add any ID (we recommend it to contain only letters, and not any additional signs<\/em>) to the section in Custom Tab, Element ID<\/strong> field:<\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2021\/06\/one_page_01.jpg\"<\/span><\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            2.\u00a0Then in Appearance > Menus\u00a0add a\u00a0new\u00a0Custom Link\u00a0<\/strong>and as a URL insert your custom ID attribute with #.<\/p>\n
            For example:\u00a0#about<\/em><\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2021\/06\/one_page_02.jpg\"<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            <\/div>\n
            <\/div>\n
            <\/section>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            HOW TO 04<\/span>Update Theme<\/span><\/span><\/h2>\n
            In order to update the theme, please follow the instructions below:<\/div>\n<\/header>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \nOnce the new theme version is available, user who purchased the theme should get an email note from the Envato (ThemeForest).<\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2021\/06\/update-theme-preview.png\"<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            \nThere are three ways to update the theme:<\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            1) FTP Update<\/span><\/span><\/h3>\n<\/header>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            \nDownload newest\u00a0theme version from ThemeForest\u00a0Download section<\/strong>. Since you already have the theme installed, you can download just ‘Installable WordPress file only’<\/strong>.<\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2021\/06\/theme-forest-download.jpg\"<\/span><\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            \nIn case you want to use this method, we suggest that you use Filezilla<\/a>\u00a0to access your server. Here is the article that explains\u00a0how Filezilla works<\/a>.<\/p>\n
            You need to extract theme file from the zipped folder you downloaded, and upload it to\u00a0\/wp-content\/themes<\/strong>\u00a0folder on your server.\u00a0You will be prompted to overwrite the existing files. Select ‘Yes’, and the theme will update.<\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \"https:\/\/documentation.bold-themes.com\/codi\/wp-content\/uploads\/sites\/65\/2021\/06\/update.jpg\"<\/span><\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            \n*The example is the zip file from Medicare theme but the process is the same for all themes.<\/em><\/p>\n<\/div>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
            \n
            \n
            \n
            \n
            \n
            \n
            2) Update theme via ZIP file upload<\/span><\/span><\/h3>\n<\/header>\n
            \n
            <\/span><\/span><\/span><\/span><\/div>\n<\/div>\n
            \n
            \nThis method is available since WP version 5.5.\u00a0Please follow these steps:<\/p>\n