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.

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.

Social Media Links Widget

  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.

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.

PreviousPosts per pageNextMembers

Last updated