CherryFramework 4. Framework Options overview

In this tutorial we provide an overview of the Cherry Options in CherryFramework4. You can configure various aspects of your WordPress website behavior and appearance under Cherry options section.

CherryFramework 4. Framework Options overview

To access Cherry Options, log into your admin panel, open Cherry > Options page:

Cherry Options comprise several sections:

General

The General tab allows you to change the global Cherry Framework configuration settings:

1. Favicon image. Icon image that is displayed in the browser address bar and browser tab heading.

2. Maintenance mode. Enable/disable maintenance mode. Set this option to On to enable Under Construction page. Logged in administrator gets full access to the site while regular visitors will be redirected to the page chosen below.

3. From the Maintenance page dropdown select page that regular visitors will see if maintenance mode is enabled.

4. Document smooth scroll option allows you to enable/disable smooth vertical mousewheel scrolling (Chrome browser only).

5. Define custom CSS styling under User CSS field.

Grid

This section contains global layout configuration settings.

1. You can enable/disable Responsive grid.

2. Container width section will let you specify width of header/content/footer container in pixels.

Click Layouts tab under the Grid one to change your site pages layout. You can choose if you want to display sidebars and how you want to display them.

You can apply changes for the following pages:

• Page

• Blog posts

• Portfolio posts

• Services posts

• Team posts

• Testimonials posts

You will find the following layouts available here:

• Left sidebar

• Right sidebar

• Left and right sidebar

• Two sidebars on the right

• No sidebar

Blog

The section contains settings for WordPress blog pages (listing and single post types).

1. Featured Media displays Featured Image, Gallery, Audio, Video in blog posts listing depending on post type.

2. Featured Image Size. You can set dimensions for post featured images.

3. Set alignment for post featured images under the Featured Image Alignment section. You have 4 alignments available: none, right, left and center.

4. Post content allows you to select how you want to display post content in blog listing (part, full, none).

5. Excerpt length. Specify number of words displayed in excerpt in blog listing.

6. Enable/Disable read more button in blog listing under the More button field.

7. More button label. Specify read more button label text.

You can show/hide elements below under the Blog > Meta page:

1. Date

2. Author

3. Comments

4. Categories

5. Tags

Open Blog > Post page to change the following settings:

1. You can select whether to display Featured Image on the single post page or not.

2. Size of Featured Image. Set dimensions for single post featured images.

3. Alignment of Featured Image. Set alignment for single post featured images (none, left, right or center).

4. Author bio. Enable/disable author bio block. Author bio block is displayed on the post page.

5. Related posts. Enable/disable related posts block. Related posts block is displayed on the post page.

6. Enable/disable comments for blog posts under the Allow comments section.

7. Gallery slider. Replace default WordPress gallery shortcode with enhanced jQuery carousel.

8. Lightbox for images and videos. Automatically adds lightbox for images and videos.

Styling

The section contains theme styling settings. Here you can edit the main theme colors. You can set background for body container and specify background image or color, set background repeat, position and attachment.

Color themes section allows you to change the following colors:

1. Primary color

2. Secondary color

3. Success color

4. Info color

5. Warning color

6. Danger color

7. Primary gray color

Navigation

Navigation section defines website navigation settings, menus typography and colors, pagination and breadcrumbs settings. You can see the following settings available:

1. Header Menu Typography. Main header navigation typography settings. You can configure main menu color and font.

2. Footer Menu Typography. Main footer navigation typography settings. You can configure footer menu color and font.

3. You can select whether you want to enable Arrows markup or not.

Navigation section has the following subcategories:

1. Megamenu

   • Main theme menu location. Select menu location for main theme menu (primary or secondary).

   • Mega menu enabled. Enable/Disable Mega menu.

   • Mobile starts from. Select window width to switch on mobile menu.

   • Enter mobile navigation label to the Mobile nav label field.

   • Menu direction. Select menu items direction (horizontal or vertical.)

   • Animation effect. Select animation effect: Slide from top, Slide from bottom, Slide from left, Slide from right.

   • Event. Select activation event: hover or click.

   • Menu parent container CSS selector. Enter CSS selector name for mega menu parent container (if needed).

2. Pagination

   • Pagination position. Select where you want to display pagination: After post loop, Before post loop, Both.

   • Prev/next buttons. Show/hide previous and next buttons in pagination.

   • Pagination label. Enter text displayed before pagination buttons. Text or HTML can be used.

   • Prev button label and Next button label Previous/Next button label text. Text or HTML can be used.

   • Show all the pages. If set to On, then it will show all the pages instead of a short list of the pages near the current page.

   • End size. How many pages to display either at the top or at the end of the list.

   • Mid size. How many numbers to display to either side of current page, but not including current page.

3. Breadcrumbs

   • Breadcrumbs. Enable/disable breadcrumbs navigation.

   • Page title. Enable/disable page title in breadcrumbs.

   • Breadcrumbs mobile. Enable/disable breadcrumbs on mobile devices.

   • Home page breadcrumbs. Enable/disable breadcrumbs on home page.

   • Item separator. You can enter Breadcrumbs separator symbol.

   • Breadcrumbs prefix. Text displayed before breadcrumbs navigation.

Header

Header allows you to change your site header settings: logo, background, sticky header, etc.

1. Background. Header background settings. You can select background color, upload header background image, set its background position, attachment and repeat.

2. Grid type. Select layout pattern for header website. Wide layout will fit window width. Boxed layout will have fixed width.

3. Boxed width. Header width for `boxed` layout. Should not be more than `Grid -> Container width` value.

4. Sticky header. Enable\disable fixed header that sticks to the top.

5. Sticky selector. Select the block selector that will be used to build sticky panel. You can use tag name, class name, or id.

Logo

1. Logo type. Select whether you want your main logo to be an image or text.

2. Logo image. Click Choose Media button to select logo image from the media library or upload your image.

3. Logo typography. Configuration settings for text logo. Here you can select logo font family, size, color, etc.

Page

Page allows you to change general page options.

1. Background. Page background settings. You can select background color, upload footer background image, set its background position, attachment and repeat.

2. Grid type. Select layout pattern for main website container. Wide layout will fit window width. Boxed layout will have fixed width and left/right indents.

3. Boxed width. Main content width for `boxed` layout. Should not be more than `Grid -> Container width` value.

4. Featured Images. Enable/disable featured images for pages.

5. Page comments. Enable/disable comments by default for pages. For pages that have already been published you need to enable comments individually in page settings.

Footer

Settings for the footer section:

1. Background. Footer background settings. You can select background color, upload footer background image, set its background position, attachment and repeat.

2. Typography. Typography settings for footer text.

3. Grid type. Select layout pattern for footer website. Wide layout will fit window width. Boxed layout will have fixed width.

4. Boxed width. Footer width for `boxed` layout. Should not be more than `Grid -> Container width` value.

5. Footer Info text. Set custom text for Footer info static.

Footer Logo

1. Logo type. Select whether you want your footer logo to be an image or text.

2. Logo image. Click Choose Media button to select logo image from the media library or upload your image.

3. Logo typography. Configuration settings for text logo. Here you can select logo font family, size, color, etc.

Typography

You can configure the following typography settings:

1. Body text. Main website text typography options.

2. Link color

3. Link hover color

4. Input text

5. Breadcrumbs typography

6. Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6.

Optimization

Change settings for your site optimization

1. Concatenate/minify CSS. Select if you want to merge\minify CSS files for performance optimization.

2. Dynamic CSS output. Output dynamic CSS into separate file or into style tag.

3. Enable / Disable Mega menu caching under the Mega menu caching enabled section.

Cherry Portfolio

CherryFramework4 allows you to configure portfolio settings:

1. Portfolio listing layout. Choose portfolio listing view layout:

   • Masonry

   • Grid

   • Justified

   • List

2. Pagination mode. Choose portfolio pagination mode:

   • Ajax pagination

   • More button

3. Loading animation. Choose posts loading animation:

   • Fade animation

   • Scale animation

   • Move Up animation

   • Flip animation

   • Helix animation

   • Fall perspective animation

4. Portfolio hover animation. Choose posts images hover animation:

   • Fade

   • Scale

   • Custom

5. Filter type. Select if you want to filter posts by tag or by category.

6. Filters. Enable/disable listing filters.

7. Order filters. Enable/disable order filters.

8. Column number. Select number of columns for masonry and grid portfolio layouts (Min 2, max 20).

9. Post per page. Select how many posts per page you want to display.

10. Item margin. Select portfolio item margin (outer indent) value.

11. Justified fixed height. Select portfolio item justified height value.

12. Crop image. Choose if you want to activate images cropping.

13. Cropped image width. Set width of the cropped image.

14. Cropped image height. Set height of the cropped image.

15. More button text. Set text for portfolio “read more” buttons.

16. You an change page template settings. Choose templates for the following pages:

    • Masonry template.

    • Grid template.

    • Justified template.

    • List template.

    • Standard post template.

    • Image post template.

    • Gallery post template.

    • Audio post template.

    • Video post template.

Cookie Banner

1. Display Cookie Banner? Enable/Disable cookie banner.

2. Message. Enter the cookie banner message.

Cherry Slider

You can modify the following Cherry Slider settings:

• Slider name

• Number of slides

• Slides order

• Slider width

• Slider 992px breakpoint height

• Slider 768px breakpoint height

• Slider visible size

• Slider forceSize

• Slider orientation

• Slide distance

• Slide animation duration

• Slide fading

• Slider navigation

• Slider fade navigation

• Slider pagination

• Slider autoplay

• Slider fullScreen

• Slider shuffle

• Slider loop

• Thumbnails

• Thumbnail arrows

• Thumbnails Position

• Thumbnail width

• Thumbnail height

• Reach video action

Interface elements (for UI developers)

• Text input. Regular single line text input field.

• Textarea input. Multiline text input field ( 16 rows x 20 cols ).

• Select box. Select box with single option.

• Filtered select. Select box with filter option.

• Multi-select box. Select box with multiple select capability.

• Checkbox (Checkbox label). Regular HTML checkbox: checkbox value 1 and checkbox value 2.

• Switcher. Analogue of the regular HTML radio buttons.

• Switcher (alternative). Alternative switcher with custom labels.

• Stepper. Adds a number input used to define numeric values.

• Slider. Draggable slider with stepper. Used to define some numeric value.

• Slider (ranged). Draggable slider with range capability. Used to define numeric range.

• Radio buttons. Adds radio buttons group. Lets user to select one option from the list.

• Radio buttons (image). Adds image based radio buttons group. Behaves as HTML radio buttons.

• Colorpicker. Adds a color picker.

• Media library element. Allows to add content from WordPress media library.

• Background image. Allows to add background image from the media library and define its background settings like background repeat, position, attachment, origin.

• Typography. Provides typography configuration options such as Google Font family name, font size, line height, style, letter spacing, characters sets, text align and color. Below options you can see font preview.

• Css editor. Embedded CSS editor with syntax highlighting.

• Title layout editor. Visual editor based on HTML box model. You can define element margin, padding, size, border.

• Links repeater. This option allows you to create a custom links list. For each link you can define URL, class and label.

• WYSIWYG editor. Adds an input section with WYSIWYG editor. Behaves as WordPress post or page editing area.

Feel free to check the detailed video tutorial below:

CherryFramework 4. Framework Options overview