WP SITES

Log in

Use Infinity Pro Front Page Template As Page Template On Unlimited Pages

—

by

Brad Dalton

This template generates exactly what you see in the Infinity Pro child themes front page. You can use the template on unlimited pages with unique content for each of the 7 sections. The widget areas have been replaced with custom fields.

Update : Here’s a different version of the template which doesn’t require the addition of any CSS.

Here’s the demo video:

Video Demo

Shows the page template displaying exactly the same as the front page template on a single page.

Template Installation

1. Simply upload the file named front-page-fields.php to the Infinity Pro themes root directory. You can then select it from the templates drop down menu in the Page Attributes meta box on any Edit Page screen.

2. The tutorial also includes the demo HTML for each of the 7 custom field sections which replace the widget areas as seen in the video above. Simply copy and paste the HTML into each of the 7 custom fields as seen in the following image:

custom-fields

3. You can then add the CSS for each background image for each section so every background can use a unique image.

Here’s the template for logged in members:

Register for full access

Related Tutorials

Comments

12 responses to “Use Infinity Pro Front Page Template As Page Template On Unlimited Pages”

  1. Craig De Borba Avatar
    Craig De Borba

    Thanks for your reply. I am not a coder, I am just learning this stuff to try and do as much as I can on the site before hiring someone.
    I saw your reply:
    You also use this version of the template which enables you to add the images using custom fields rather than CSS https://wpsites.net/web-design/use-altitude-pro-themes-front-page-template-on-unlimited-single-pages/

    But I am not using altitude theme, can I still use the same codes for that theme to assign images in the Infinity Pro page template?

    1. Craig De Borba Avatar
      Craig De Borba

      I also wanted to add.
      I tried adding two front-page custom codes to a section in order to get the two column effect like what we can do on the homepage but it does not work.
      ie adding an empty text widget in front page-3 moves the 2nd and 3rd widget to display side-by-side as seen here with the video on left and text on right. https://devsite.onpointinternetmarketing.com

      1. Brad Dalton Avatar
        Brad Dalton

        Here’s the new version https://wpsites.net/web-design/use-infinity-pro-themes-front-page-template-on-unlimited-single-pages/

        1. Craig De Borba Avatar
          Craig De Borba

          Is adding this going to delete my existing pages using the old template?

          1. Brad Dalton Avatar
            Brad Dalton

            No but you might find it easier using the new version unless you have already installed the older version and prefer that method. Both versions produce exactly the same result.

          2. Craig De Borba Avatar
            Craig De Borba

            Can you install this for me?
            You stated if I prefer that method. What method are you referring to and what is the difference in the new template?

          3. Brad Dalton Avatar
            Brad Dalton

            One template uses CSS to add the background images and the other uses custom fields.

    2. Brad Dalton Avatar
      Brad Dalton

      I will publish a new tutorial later today which works with Infinity Pro and i can install the template for you in a copy of your theme or on your live site if you send me login details and FTP hostname, username and password.

      1. Craig De Borba Avatar
        Craig De Borba

        Sure I can do this, put I don’t want to post this data in a comment thread. Where can I send it directly?

        1. Brad Dalton Avatar
          Brad Dalton

          Try one of these options https://wpsites.net/wordpress-support/

  2. Craig De Borba Avatar
    Craig De Borba

    Hi, I have the page template installed and I am on the CSS step to integrate the background image in the front page sections.
    Where do I add the CSS codes above?
    Thank you
    Craig

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Craig. Generally, all CSS rules should be copied and pasted to the end of the child themes style.css file.

      Make sure you change the post id which is this part of the CSS rule .page-id-209

      You’ll need to view the source code of the page template to find your page id in the body classes.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.