Search code examples
phpcsswordpresswordpress-themingcss-grid

Change section order on Hestia

In the free version of the WordPress-Theme "Hestia" you are unable to change the order of the sections on the frontpage. There are some custom PHP snippets that allow you to change the order, but they are pretty complicated.

Solution

  • You can use custom CSS code (for example with this plugin) and CSS Grid to change the order of the sections.

    First of all you have to set the display of the main area to grid.

    .home .main {
  display: grid;
}

    Then you can change the order using grid-row and a number. The larger the number, the later it will be visible on the page.

    .home .main #blog {
   grid-row: 1
}

    The sections have the following IDs:

    • clients_bar
    • features
    • portfolio
    • pricing
    • ribbon
    • team
    • testimonial
    • about
    • blog
    • contact
    • shop
    • subscribe