Side Panel - Customizer

Default theme settings may differ if you have imported one of the OceanWP prebuilt website templates for WordPress. This is because these templates come with their own Customizer settings. However, the way you use the Customizer to adjust your website remains the same.

The OceanWP Customizer Side Panel panel enables you to display an off-canvas sidebar on your website which you can style and add content to as you please. Custom templates are also supported.

Side Panel is an OceanWP premium feature, available with the OceanWP Pro Bundle.

Upgrade now to get access to this and many other features, premium full website templates, dedicated customer support and more.

The Side Panel panel in the Customizer will appear when you install and activate this premium OceanWP extension.

Available Side Panel options include:

Breakpoints

The Breakpoints option enables you to adjust the screen width at which the Side Panel (button and content) will stop displaying.

The bigger the width, the sooner it stops displaying, and vice versa.

Multiple options available, including the option to apply a custom width or never stop displaying the Side Panel.

Opening Button Position

The Opening Button Position option enables you to choose the position of the button which opens the Side Panel.

Available options include:

  • Inside the Main Menu (default): displays at the very end of the main menu navigation.
  • Beside the Panel: displays on the side of the screen. The position of the button on the screen (left or right), is determined by your Panel Position choice.
  • Disabled: doesn't display any opening button on the screen or menu. Instead, you can use a shortcode to display the Side Panel opening button wherever you want.

Opening Button Icon

The Opening Button Icon option enables you to choose which icon you want to use for the Side Panel opening button.

Multiple choices available.

Opening Button Animation

The Opening Button Animation option is available when the Opening Button Position is set to Inside the Main Menu.

These animations always use the hamburger icon as the opening icon, but change the icon when the Side Panel is open, followed by an icon transition animation.

Multiple choices available.

Opening Button Text

The Opening Button Text option is available when the Opening Button Position is set to Inside the Main Menu.

You can add custom text to display next to the opening icon.

Text Position

The Text Position option is available when the Opening Button Position is set to Inside the Main Menu.

This option enables you to choose the position of the Opening Button Text compared to the icon:

  • Before: text is displayed before the icon.
  • After: text is displayed after the icon.

Panel Position

The Panel Position option enables you to choose on which side of the screen should the Side Panel open:

  • Right: opens on the right side of the screen.
  • Left: opens on the left side of the screen.

Panel Width (px)

The Panel Width (px) option enables you to adjust the width of the Side Panel.

This option is always measured in pixels (px).

Content Padding (px)

The Content Padding (px) option enables you to add padding (spacing) surrounding the content of the Side Panel.

Custom Side Panel Content

The Custom Side Panel Content option enables you to choose a custom template created in WP Dashboard, OceanWP > My Library, which will then replace the default Side Panel content.

To remove a custom template, simply set the choice to: Select

To add default content to the Side Panel, navigate to WP Dashboard, Appearance > Widgets, and add widgets (depending on whether you're using the Classic Widgets plugin) or blocks (if you're using the block editor) to the dedicated Side Panel area.

Displace

The Displace option enables you to add an animation to the website content when the Side Panel is open.

If the Displace option is enabled, the rest of the website content moves to the side while the Side Panel content is revealing.

If the Displace option is disabled, the Side Panel will open on top of the website content.

Color Overlay

The Color Overlay option enables you to apply a color overlay to the website content when the Side Panel is open.

You can adjust the Color Overlay color in the Styling section, if you choose to enable this feature.

Display Close Button

The Display Close Button option enables you to choose whether or not you want to display a dedicated close button on top of the Side Panel content (when the Side Panel is open).

If a dedicated close button is not displayed, users can close the Side Panel by clicking the opening icon.

Close Button Text

The Close Button Text option enables you to add custom text to explain the purpose of the closing button, if the Display Close Button option is enabled.

Opening Button Icon

The Opening Button Icon color option enables you to apply regular and hover color to the icon for when the Opening Button Position is set to Inside the Main Menu.

Icon Size (px)

The Icon Size typography option enables you to adjust the size of the opening button icon for when the Opening Button Position is set to Beside the Panel.

This option is always measured in pixels (px).

Button Background

The Button Background color option enables you to apply color to the background of the opening button for when the Opening Button Position is set to Beside the Panel.

Button Icon

The Button Icon color option enables you to apply color to the icon of the opening button icon for when the Opening Button Position is set to Beside the Panel.

Button Border

The Button Border color option enables you to apply color to the border surrounding the opening button for when the Opening Button Position is set to Beside the Panel.

Color Overlay

The Color Overlay color option enables you to apply color to the overlay if the Color Overlay effect is enabled.

Panel Background

The Panel Background color option enables you to apply color to the Side Panel background.

Close Button Background

The Close Button Background color option enables you to apply regular and hover color to the Side Panel closing button area.

Close Button Text / Icon

The Close Button Text / Icon color option enables you to apply regular and hover color to the Side Panel closing button text and / or icon.

Headings

The Headings color option enables you to apply a color to all headings displayed in the Side Panel content area.

This color option depends on how you have added the Side Panel content:

  • Widgets (using the Classic Widgets plugin): color is applied.
  • Blocks (using the block editor): color is inherited form the theme or applied via block respectively, so depends on your settings.
  • Custom Content (using builders): color is inherited from the theme or applied inside the template itself, so depends on your settings.

Text

The Text color option enables you to apply a color to all textual (non-links) parts in the Side Panel content area.

This color option depends on how you have added the Side Panel content:

  • Widgets (using the Classic Widgets plugin): color is applied.
  • Blocks (using the block editor): color is inherited form the theme or applied via block respectively, so depends on your settings.
  • Custom Content (using builders): color is inherited from the theme or applied inside the template itself, so depends on your settings.

The Links color option enables you to apply regular and hover color to all links in the Side Panel content area.

This color option depends on how you have added the Side Panel content:

  • Widgets (using the Classic Widgets plugin): color is applied.
  • Blocks (using the block editor): color is inherited form the theme or applied via block respectively, so depends on your settings.
  • Custom Content (using builders): color is inherited from the theme or applied inside the template itself, so depends on your settings.

Widget Dividers

The Widget Dividers color option enables you to apply a color to the divider (separator), which are added automatically between all widgets if you're adding content to the Side Panel using widgets (and using the Classic Widgets plugin).

Found an error in this doc or believe it needs improvement?

Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.

That's it!

Enjoy building your WordPress website with OceanWP!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.