Slider Settings Guide in WoodMart Theme

WoodMart The theme features a lightweight slider to quickly create smooth image rotation effects that run faster, are easier to configure, and have less of an impact on your site than plugins like Revolution Slider. This feature relies on the WordPress Customized article types enable users to take advantage of WPBakery Page Builder maybe Elementor Perform layout and content management, thus enhancing the dynamic visualization of the page.

Creating Sliders

Sliders enhance the visual presentation of a page and draw visitors' attention to key content. The basic steps to create a slider are as follows:

Go to the WordPress backend and click Slides > Slider to go to the slider management page.

Create a new slider by entering the relevant information

customizableslider (computer interface element)set up

Layout

Slide Change Animation

In this section, different sliders can be selected to toggle the animation:

• Slide - Default slide toggle effect.
• Fade - Makes the slide fade in and out smoothly.
• Parallax - Toggle effect with parallax scrolling.
• Distortion - Animation with special deformation effects.

Stretch Slider

• This option is used for Whether to make the slider full screenThe
• The current state is NO (off), meaning that the slider will not automatically fill the entire width of the screen.
• If turned on (YES), the slider will adapt itself to the entire page width, suitable for full-screen large-image display.

Height on Desktop setting

• This option allows adjusting the height of the slider at the desktop end.
• The height is currently set to 500px, the value can be adjusted by dragging the slider as required.
• Visible in the icon on the right, this height setting only applies to the desktopThe tablet side and mobile side can be adjusted individually.

Arrows style

Arrows Style

In this section, you can choose the style of the navigation arrows on the slider, with four options:

• Default Arrow(currently selected)
• thin line arrow
• circular arrow
• Hidden arrows (no navigation arrows)

If you don't want the user to switch slides via the arrows, you can select the last option to hide the arrows.

Arrows Color Scheme

• Two color schemes are available:
  • Black background, white arrows
  • White background, black arrows

Suitable for different styles of websites, you can choose according to the page background color.

Custom Settings

• Current status: Off (NO), meaning that the default settings are used.
• If you turn this option on, you can make more advanced personalization settings, such as arrow size, color, borders, etc.

Pagination style

Pagination Style

This section allows selecting the paging indicator style for the slider, four types are provided:

• Dot paging (checked by default): Show current slider progress as a dot, suitable for minimalist style.
• numeric pagination: Display the slider position numerically, e.g. "01 - 02", for better visualization.
• Dots + Progress Bar: Combines dots and progress bars for more dynamic designs.
• Hide Paging: Doesn't show any paginated navigation, suitable for designs with no pagination requirements.

Pagination Horizontal Alignment

This setting determines the horizontal position of the paging navigation in the slider and has three options:

• left justification
• Center Alignment (currently selected)
• right-aligned

Pagination Color Scheme (Pagination Color Scheme)

This setting allows selecting the color scheme of the paging navigation:

• Black background, white paging indicator
• White background, black paging indicator

Adjustments can be made according to the overall color scheme of the website to ensure consistent visual effects.

Custom Settings

• Current status: Off (NO), indicating that the default settings are used.
• If you turn on custom settings, you can adjust the size, spacing, and color of the paging indicators to provide more advanced personalized configurations.

After successful creation, you can view the created sliders in the list and add slide content in subsequent steps to make them more useful.

Custom Slide Settings

The configuration of the slider can determine its presentation into the Slides > Slider > Editslide (photography, presentation software), the following key parameters can be adjusted:

opening (chess jargon)

Layout settings

• Content no space: Currently the closed state, if turned on, there will be no extra padding (padding) in the content area inside the slider.

• Full width content: Currently the closed state, if enabled, the slider content will automatically fill the entire slider width, suitable for full-screen display effect.

• Content width: The content width of the slider can be adjusted manually and is currently set to approximately 750pxThe design can be slid and adjusted according to the design needs.

Content Position

• Three device modes are available (Desktop, Tablet, Mobile), you can set the content layout separately for different devices to ensure the slider's adaptability.
• Vertical content align: Provides three types of alignment, the currently selected is center alignment(i.e. the content is in the middle of the slider).
• Horizontal content align: Three options are provided, the currently selected is left justification, i.e. the content is located to the left of the slider.

contexts

Background color (Color)

• exist Color option to select a solid color background. If you don't want to use a background image, you can click on the color picker to set an appropriate color.

Background Image

• Upload background image: you can click Upload button uploads an image to be used as the slider's background.
• Device Adaptive: Provided Desktop, Tablet, and Mobile. Three options, you can set the background image for different devices separately to ensure a good display in various screen sizes.

Background Size

• This option is used to adjust how the background image is displayed and has two options:
  • Cover: The background image will stretch to fill the entire slider area, possibly cropping out some of the image content, but ensuring that the background completely covers the slider.
  • Contain: The background image will be displayed in its entirety, possibly leaving a blank area within the slider, but the image content will not be cropped.

Background Position

• The current options are Center Center, meaning that the background image will be aligned to the slider at the center point. If you need to adjust it, you can choose another position, for example:
  • Left Bottom - lower left
  • Center Center - center alignment
  • Right Top - upper right
  • Center Bottom - bottom-centered
  • Center Top - top-centered
  • Left Center - Centered on the left
  • Left Top - upper left
  • Right Center - Center right
  • Right Bottom - lower right
  • Custom - customizable

Settings

Enable Autoplay

• Current status: Off (NO)
• This option determines whether the slider is automatically rotated, and if it is turned on, theslide (photography, presentation software)will automatically switch at set intervals without manual clicking.
• Suitable for displaying dynamic content, such as popular products, promotional information, etc., to improve the visual appeal of the page.

Scroll Loading Slider (Init Carousel on Scroll)

• Current status: Off (NO)
• This option determines whether or not the script is loaded only after the slider comes into view, a feature that helps optimize page performance and reduces the initial page load time.
• Ideal for pages containing multiple sliders, especially when the content is long, to help reduce unnecessary script runs and improve page flow.

Adding slides to a slider

existslider (computer interface element)Add Slideshow

The following screen appears in the sidebar of the Create or Edit Individual Slide page, and its main function is to assign the slide currently being edited to one or more created sliders:

• All Sliders(All Sliders): Here all the sliders that have been created for the site will be listed, and the user can choose which sliders they want to assign the current slide to.
• Most Used(Most Frequently Used): The most frequently used sliders are listed here for quick selection of commonly used sliders.
• Click on the bottom of the "+ Add New Slider" You can directly create a new slider and quickly add the current slide to the newly created slider.

Use this feature to quickly and efficiently manage the association between slides and sliders to optimize content management efficiency.

Slide Sorting

followingWordPressThe Post Attributes settings area in the backend, where the Order option is used to set the order in which slides or pages are displayed.

Specify:

• Order::
  Used to set the order of the current page, post, or slide in a list or front-end display.
  • The default number is "0", the smaller the number, the more advanced the sorting.
  • For example, if you enter "0" or a negative number (e.g., "-1"), the item will be displayed at the top of the front-end.
  • Entering a larger number (e.g. "5" or "10") will display the item later in the sort.

Use this feature to flexibly control the order in which slides or pages are displayed on your website, helping it to better organize and present content.

Setting up featured images

• On the right side of the Featured Image panel, click "Set Featured Image"The
• Select an image from your WordPress media library or upload a new one.

Adding a slider to a page

WoodMart Theme Support WPBakery Page Builder respond in singing Elementor Two ways to insert the slider:

Using Elementor

• Go to the Elementor page edit screen.
• increase WoodMart Slider Widget to page.
• Select the created slider from the drop-down list and adjust the size and style as needed.
• After confirming that there are no errors, click updateto make the changes effective.

utilization WPBakery Page Builder

• go into Page EditorSwitch to WPBakery Backend Editor The
• increase WoodMart Slider element to the appropriate place on the page.
• In Component Settings, select the slider you want to insert.
• After saving the changes, update the page to preview how the slider will appear.

caveat

• Blocks containing sliders The width needs to be set to default (setting), otherwise there may be typographical problems.
• Full Screen Slider Needs to be in the slider settings Enable Stretch Sliderand ensure that Full-width content option is activated to ensure adaptability for different devices.

summarize

WoodMart The theme's slider feature helps users quickly create high-quality rotational effects and optimize the visual presentation of the website. Proper use of sliders not only draws visitors' attention to key information, but also enhances the hierarchy of the page and makes the entire website more professional.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off