Scrolling feature on website which brings in a new slide/section

This topic has 20 replies, 2 voices, and was last updated 10 months, 2 weeks ago ago by Tony Rodriguez

  • Avatar: GTP
    GTP
    Participant
    December 1, 2023 at 15:44

    Hello 8theme,

    On the website on the PCA

    If you scroll on the home page, whenever you scroll it brings a new section of the website but it only does one transition (1 scroll = 1 transition)

    Is there anyway to replicate this on X-Store?
    Sorry – we are not sure what exactly this would be “called”.

    Thanks!

    Please, contact administrator
    for this information.
    19 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 2, 2023 at 08:17

    Hello, @GTP,

    Thank you for reaching out to us.

    We understand that you are looking to replicate a feature similar to the one-page menu element. We are pleased to inform you that our theme documentation includes a video tutorial that demonstrates how to create a scrolling effect to a specific section by clicking on a menu item. You can access the tutorial at the following link: https://www.8theme.com/documentation/xstore/menu-set-up/one-page-menu/.

    By adhering to the instructions provided in the video, you will be able to set up a one-page menu with corresponding sections. Furthermore, this will enable you to design multiple headers and assign each to the appropriate page according to your needs.

    Should you prefer an alternative approach, you may consider exploring third-party plugins that meet your specific requirements.

    We trust this information will be of assistance to you. Should you have any further inquiries, please do not hesitate to contact us.

    Best regards,
    The 8Theme Team

    Avatar: GTP
    GTP
    Participant
    December 4, 2023 at 04:58

    Hi Tony,

    Thank you for the details.

    Just wondering if you know what this would be called?

    We are wondering if this can be added to just other pages such as blog pages (without it having to do anything with the main menu)?

    On the demo, it just seems like the content on the home page is being affected by the scrolling feature and it has nothing to do with the main menu. The effect shows when you use the scrolling wheel on the mouse, the content shows one section at a time on the screen.

    Thanks for your advice! ??

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 4, 2023 at 08:59

    Hello, @GTP,

    Thank you for reaching out and for your observation. Currently, the functionality you mentioned is not available within our platform. However, we invite you to explore our demo site at https://preview.themeforest.net/item/xstore-responsive-woocommerce-theme/full_screen_preview/15780546?_ga=2.242613698.1776242420.1701664876-1091590229.1685593196. Should you discover a similar feature on any of our demo pages, please do not hesitate to share the details with us.

    Additionally, for further insights on Elementor functionalities, you may find the following video tutorial helpful: https://elementor.com/help/scroll-snap/.

    We appreciate your understanding and are here to assist with any further inquiries you may have.

    Best Regards,
    The 8Theme Team

    Avatar: GTP
    GTP
    Participant
    December 4, 2023 at 15:53

    Hi Tony,

    Thanks for the details response.

    In regards to the link you sent for elementor, is this “feature” called SCROLL SNAP? (what we are guessing)

    Appreciate you taking the time to provide the link so we can know what the “feature” was called.

    Thanks!??

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 5, 2023 at 05:25

    Hello, @GTP,

    We confirm that you are correct; the feature in question is known as Scroll Snap.

    Best Regards,
    The 8Theme Team

    Avatar: GTP
    GTP
    Participant
    December 15, 2023 at 09:34

    Hi Tony,

    Just wanted to ask if there is anything similar in X-Store which we can replicate with the website on the PCA?

    There are dots and once you click them it takes you to a specific part of the home page. Is there any chance that revolution slider is being used?

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 15, 2023 at 11:47

    Hello, @GTP,

    I hope this message finds you well.

    Upon careful examination of your recent inquiry, I regret to inform you that the current iteration of the X-Store theme does not inherently support the functionality or configuration you have specified. Nevertheless, I would like to draw your attention to a viable alternative that may be achieved through the utilization of the Elementor plugin, as delineated in the documentation we have previously provided to you.

    Furthermore, the functionality you have described, which allows navigation to specific sections of the homepage by clicking on dots, appears to be a feature associated with the Revolution Slider plugin. This plugin is renowned for its robust capabilities.

    To pursue the precise customization you require, I would encourage you to consult the comprehensive Slider Revolution documentation. This resource offers extensive details on the array of settings, features, and customization possibilities that the plugin affords.

    Please access the Slider Revolution documentation via the following link: https://www.sliderrevolution.com/design/split-screen-layout-with-slider-revolution/

    Should you have any further questions or require additional assistance, please do not hesitate to reach out.

    Warm regards,
    The 8Theme Team

    Avatar: GTP
    GTP
    Participant
    December 16, 2023 at 05:40

    Hi Tony,

    Thanks for your reply & hope you are doing great today.

    1) Thanks for confirming that, we will try to look for alternatives or ask this in the customization section panel.

    – Can you please provide the documentation again if you don’t mind? In regards to;

    (Nevertheless, I would like to draw your attention to a viable alternative that may be achieved through the utilization of the Elementor plugin, as delineated in the documentation we have previously provided to you.)

    2) Thank you for the documentation in regards to the revolution slider. We will look into that as well,

    Appreciate your help 🙂

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 16, 2023 at 06:07

    Hello, @GTP,

    1/ You’re welcome! We appreciate your proactive approach in exploring alternatives and considering the customization section.

    Regarding the video tutorial for the alternative solution using the Elementor plugin, please find the video tutorial in the link below for your reference: https://elementor.com/help/scroll-snap/

    2/ You’re welcome! It’s great to hear that you’ve received the documentation for the Revolution Slider.

    Should you need any additional support or have further questions, please feel free to contact us at your earliest convenience.

    Best Regards,
    Team 8Theme

    Avatar: GTP
    GTP
    Participant
    December 16, 2023 at 06:19

    Hi Tony,

    Thanks!

    Just also wondering that we see this feature is available on X-Store;

    https://xstore.8theme.com/elementor/parallax-presentation/

    Can you perhaps share the documentation/video for this so we can try to duplicate the feature “Parallax presentation” on our websites?

    Appreciate your help 🙂

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 16, 2023 at 11:19

    Hello, @GTP,

    Thanks for reaching out and expressing interest in the “Parallax presentation” feature! I’m glad to hear that you are excited about incorporating it into your website.

    While the link you provided showcases the feature on the XStore demo, it’s important to note that the “Parallax presentation” is a functionality provided by Elementor or Wp Bakery(Page Builders), not a built-in feature of the XStore theme itself. Elementor is a powerful page builder that works seamlessly with XStore and allows you to create stunning and dynamic layouts.

    For a visual reference, please consult the image provided at the following link:
    https://prnt.sc/xpbfng

    Please check this tutorial this Elementor documentation about parallax-effects added in the link below: https://elementor.com/blog/parallax-effects/

    Best Regards,
    Team 8Theme

    Avatar: GTP
    GTP
    Participant
    December 17, 2023 at 08:00

    Hi Tony,

    Thank you for letting us know that this is completely Elementor based.

    Just having one trouble.
    We added a section and an image, and then did as you provided in the screenshot but the image is not coming to a larger size and is very small in the editing side and once you view the website it is not noticable.

    Can you please let us know on how we can adjust the image size?

    Thank you!

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 18, 2023 at 05:47

    Hello, @GTP,

    We trust this message finds you well.

    To address the concern you have raised, we kindly request that you adjust the section layout settings and modify the column settings in accordance with the guidelines provided in the attached screenshots. Please refer to the images for further clarification.

    https://ibb.co/Y7pFfsp
    https://ibb.co/Wt0s6W2

    We are optimistic that these steps will effectively resolve your issue. Should you require any additional assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: GTP
    GTP
    Participant
    December 19, 2023 at 11:13

    Hi Tony,

    Thank you – the screenshots are always the most helpful part!

    a) Is there anyway we can set the image to be a specific size? For example if we add a large image which is 2000 x 800, but want to adjust it to be for example 1000 x 400 PX. Is there anyway to do this?

    This demo shows the image in a stretched out version which looks much better (image is located once you scroll down a little);

    https://xstore.8theme.com/elementor/demos/beauty-and-cosmetics/

    b) Also were curious, can we add videos instead of images?

    Much appreciated 🙂

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 19, 2023 at 12:17

    Hello, @GTP,

    1) Yes, you can indeed set the image to a specific size within our system. When editing the section layout, you can choose the “Boxed” content width option and set the minimum height and width to your desired dimensions, like 1000 x 400 pixels.

    However, it’s crucial to be mindful of the image resolution when editing columns. If you set the image resolution too low, especially when resizing from a larger original size like 2000 x 800 pixels to 1000 x 400 pixels, the image may appear blurry due to the reduction in detail.

    To maintain image clarity, We recommend using images with higher resolutions or adjusting the size within a reasonable range to minimize any noticeable loss in quality.

    If you have any further questions or if there’s anything specific you’d like assistance with, feel free to let me know!

    For a visual reference, please consult the image provided at the following link:
    https://imgur.com/a/2FBlX5j
    https://imgur.com/a/ktUCICg

    2) Unfortunately, at the moment, adding videos directly to the container background is not supported within our current system.

    While this specific feature may not be available, you can still showcase videos by embedding them within the container using other elements or widgets, like video players or embedding codes.

    Yours sincerely,
    The 8Themes Team

    Avatar: GTP
    GTP
    Participant
    December 19, 2023 at 13:09

    Hi Tony,

    1) Thank you for the screenshots!

    And can we for example visit this demo; https://xstore.8theme.com/elementor/demos/beauty-and-cosmetics/

    and just copy the element/section and just change the image to get something similar to the block?

    https://prnt.sc/U1oz9BJXdAjo

    We are trying to replicate something similar (full width)

    2) Thanks for confirming!

    3) Can we add other blocks on top of that parallax section such as seen on this website?
    Please see PCA.

    Appreciate your help with this!

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 20, 2023 at 05:55

    Hello, @GTP,

    1) We apologize for any inconvenience, but currently, we do not have a feature that allows for a live copy-paste of sections. Our development team is actively working on implementing such functionality. In the meantime, we strive to offer maximum possibilities for customization.

    To achieve a similar section using Elementor, please follow these steps:

    a) Set the Elementor Page Layout to “Full Width” in the settings.
    b) Insert an image into the column within the container.
    c) Adjust the container layout to “Maximum Width.”

    Additionally, As you are interested in the Parallax Fixed Background Effect, please refer to the instructions provided earlier. For visual guidance, we have prepared a video, accessible through the following link: https://streamable.com/er626r .

    2) You are Welcome!

    3) It seems like your customer is asking if they can add additional blocks on top of a parallax section, similar to what they’ve seen on another website (PCA). The response suggests that it’s possible and provides instructions on how to achieve this using XStore and Elementor widgets.

    Here’s a breakdown of the steps mentioned in the response:

    Pick and Drop XStore and Elementor Widgets:

    a) Open your page in Elementor.
    b) Look for the XStore widget and the Elementor widgets you want to add.
    c) Drag and drop these widgets into the desired container on your page.

    Set Settings as Provided Earlier:

    a) Refer to the settings or instructions provided earlier. This could be a video tutorial or written documentation that explains how to customize the appearance and behavior of the XStore and Elementor widgets.

    b) Ensure that you configure the settings as per the guidelines given in the earlier instructions.

    c) Refer to the Video on Animated Heading:

    If there was a video tutorial provided earlier, review it for guidance on how to insert an animated heading into the container or column section.

    Follow the steps outlined in the video to achieve the desired animated heading effect.

    Yours sincerely,
    The 8Themes Team

    Avatar: GTP
    GTP
    Participant
    December 23, 2023 at 08:04

    Hi Tony,

    Hope you are doing well!

    1) Thanks! – the video seems to be giving this error; This video has been archived and is not available to watch at this time.

    3) Thank you – i think we will try to do that, in terms of adding another widget/block on top of the container (of the parallax section).

    Appreciate your help!

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 23, 2023 at 12:42

    Hello, @GTP,

    1) Thank you for bringing this to our attention, and we sincerely apologize for any inconvenience you’ve encountered regarding the archived video.

    To ensure you have access to the information you need, we have re-uploaded the video tutorial on achieving the Parallax Fixed Background Effect. You can view it by following this updated link: https://www.veed.io/view/004843f0-5b26-431a-aae1-5b7d5922230d?sharingWidget=true&panel=share.

    In addition to the video, We want to provide you with step-by-step written instructions for achieving the Parallax Fixed Background Effect in Elementor:

    a) Set the Elementor Page Layout to “Full Width” in the settings.
    b) Insert an image into the column within the container.
    c) Adjust the container layout to “Maximum Width.”

    These steps, combined with the visual guidance in the video, should help you achieve the desired Parallax Fixed Background Effect seamlessly.

    2) Thank you for your response, We are pleased to hear that you’ll be trying to add another widget/block on top of the container in the Parallax section. To assist you further, allow me to provide precise instructions within the Elementor interface.

    In the Elementor editor:

    a) Navigate to the section where you want to add the new widget/block.
    b) Within the section, locate the “+ Add” icon, usually positioned in the center or top-left corner of the section container.
    c) Click on the “+ Add” icon, and a menu will appear, allowing you to choose and add various widgets or blocks to your section.

    For a visual reference and step-by-step guidance, please refer to the image provided at the following link: https://imgur.com/a/lcz0YZX.

    Yours Sincerely,
    The 8Theme Team.

  • Viewing 20 results - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.