Adding and Configuring Horoscope Widgets in Your Page

Widgets can greatly enhance the functionality of your page by providing interactive and personalized content. Here’s a step-by-step guide to adding and configuring a widget on your page.

Step 1: Adding a Horoscope Widget

Once you are in the Widgets section, you’ll see a range of available widgets categorized by different types, such as Horoscope, Tarot, and Astrology.

1. Select a Widget Category: On the left side under Widgets, you’ll see various categories like Horoscope, One Card Tarot, Two Card Tarot, Indian Astrology, Western Astrology, Numerology, and Other Popular Picks.

2. Choose a Widget: Click on the desired category. This will open up a selection of widgets within that category. For example, if you select Horoscope, you’ll see widgets like:

   • Divine Horoscope

   • Chinese Horoscope

3. Add the Widget to Your Page:

   • Click on the specific widget you want to add. For example, click on Divine Horoscope under the Horoscope category.

   • The widget will automatically be placed on your page, and a settings panel for the widget will open on the left.

Step 2: Configuring the Widget

After adding the widget, you can customize its appearance and behavior to fit your page design and user needs. Here’s how:

1. Heading and Subheading:

   • In the settings panel on the left, you’ll find fields labeled Heading and Sub Heading.

   • Enter the desired text for the heading and subheading, such as "Daily Horoscope" for both.

1. Default Zodiac Sign:

• Set a default zodiac sign to display on the widget.

• Click on the dropdown under Default Zodiac Sign and choose a sign (e.g., Aries, Taurus) that you’d like as the default selection for users.

1. Width Settings:

• Adjust the width of the widget to control its size on the page.

• Options typically include Small, Medium, and Large. Select the size that best fits your page layout.

1. Horoscope Layout:

• Decide how you want the horoscope icons to be displayed.

• Options include:

  • Single Icon: Displays a single horoscope icon.

  • Grid Icon: Shows all icons in a grid format.

  • Carousel Icon: Enables users to scroll through icons in a carousel style.

Choose the layout that aligns best with the page design and user experience.

Step 3: Additional Customizations for Widget Display

To further personalize the widget, continue with these settings:

1. Horoscope Icon Layout:

   • Customize the appearance of icons within the widget. You’ll find different versions available, like v1, v2, etc.

   • Select an option that matches the visual theme of your website.

1. Horoscope Tab Position:

• Choose where the horoscope tabs (e.g., Daily, Weekly, Monthly) are positioned within the widget.

• Options include Top (above the main content) or other available placements.

1. Category Tab Position:

• Control the position of category tabs (e.g., Personal, Health, Profession) within the widget.

• Options usually include Middle, Bottom, or other specified locations.

1. Category Icon and Icon Version:

• Toggle the display of category icons on or off.

• If enabled, you can choose different icon styles to match your widget’s theme (e.g., v1, v2).

1. Category Button Shape:

• Choose the shape of category buttons displayed on the widget.

• Options include shapes like Rectangle or Square. Select one that aligns with your design aesthetic.

Step 4: Final Review and Publishing

Once you've configured the widget settings:

1. Preview the Widget:

   • Click on the Preview button at the top right corner of the editor to see how the widget will appear on your live page.

   • Ensure that all elements look as expected, including layout, icon styles, and content alignment.

1. Make Adjustments if Necessary:

• If the widget doesn’t look the way you envisioned, return to the settings panel and tweak the options as needed.

1. Publish Your Changes:

• Once satisfied with the widget’s configuration, click the Publish button in the top-right corner of the screen to make the changes live on your website.

Conclusion

By following these steps, you’ll be able to effectively add and customize widgets on your page, creating a dynamic and engaging experience for your users. Let me know if there are any specific settings you would like more details about!