Widgets

Relma provides a collection of ready-to-use widgets for customizing your Header, Main, Sidebar and Footer areas with ease.

Before proceeding, take a look at the example sidebar file below.

About Widget

  1. To add About widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/about" title="About us" }}.

    • title: The widget title (to remove the widget title, remove title property).

  3. Save the file and Restart Ghost.

circle-info

By default, the About widget displays your site logo, description, and social profiles, all of which can be modified via your Ghost Admin Dashboard > Settings.

Tags Widget

  1. To add Tags widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/list-tags" limit="all" title="Tags" }}.

    • limit: To limit the number of tags displayed by the widget, change the value of limit from all to a specific number.

    • title: The widget title (to remove the widget title, remove title property).

    • style: To display the tags widget with featured images and post counts, simply add the property style="cards" to the widget code (e.g: Home 3).

  3. Save your changes and Restart Ghost.

  1. To add Social Media Links widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/social-media" title="Join us" }}.

    • title: The widget title (to remove the widget title, remove title property).

  3. Save your changes.

To add, remove, or edit social media links in the Social Media widget:

  1. Navigate to ghost_installation/content/themes/relma/partials/widgets/social-media.hbs file, open it.

  2. To remove a specific link (e.g., Facebook), comment out the line: <li class="item facebook">...</li>

  3. To enable a hidden link (e.g., Threads), uncomment the corresponding line: <li class="item threads">...</li>

  4. Replace the # symbole in the href attribute with your actual profile URL.

  5. Save your changes and Restart Ghost.

Authors Widget

  1. To add Authors widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/list-authors" limit="all" title="Team" }}.

    • limit: To limit the number of authors displayed by the widget, change the value of limit from all to a specific number.

    • title: The widget title (to remove the widget title, remove title property).

  3. Save your changes and Restart Ghost.

Posts Widget

  1. To add Posts widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/list-posts" data="latest" style="grid1" limit="3" title="Tags" }}.

    • limit: To limit the number of posts displayed by the widget, change the value of limit from 3 to a specific number or "all".

    • data: To limit the number of posts displayed by the widget, change the value of limit from 3 to a specific number or "all".

    • title: The widget title (to remove the widget title, remove title property).

    • style: Supports grid1, grid2, grid3, grid4, aside1, aside2, slider1 list style.

  3. Save your changes and Restart Ghost.

circle-info

If you have coding knowledge and wish to edit the widgets, you can find the widgets files in the ghost_installation/content/themes/relma/partials/widgets directory. This is where you can modify the widget structure, design, and functionality to better suit your needs.

Subscribe Widget

  1. To add Subscribe widget to your:

    • Sidebar: Navigate to ghost_installation/content/themes/relma/partials/widget-area/sidebar.hbs file, open it.

    • Footer: Navigate to ghost_installation/content/themes/relma/partials/widget-area/footer.hbs file, open it.

    • Header: Navigate to ghost_installation/content/themes/relma/partials/widget-area/header.hbs file, open it.

    • Main: Navigate to ghost_installation/content/themes/relma/partials/widget-area/main.hbs file, open it.

  2. Add the following code inside it {{> "widgets/subscribe" title="Our Newsletter" }}.

    • title: The widget title (to remove the widget title, remove title property).

  3. Save the file and Restart Ghost.

Last updated