WP SITES

Log in

Use Infinity Pro Themes Front Page Template On Unlimited Single Pages

—

by

Brad Dalton

This template produces exactly the same as the front page of the Infinity Pro theme and can be used on unlimited single pages. Its a different version of this template and doesn’t require adding any CSS or other code.

Update : This newer version of the template enables you to import the demo content and setup the page template in less than 3 minutes.

Simply install the template as you would any other page template and add unique content & unique background images to each section on as many pages as you like.

Here’s the demo video showing you how it works :

Video Demo

Shows the page template displaying exactly the same as the front page template with different background images for each image section.

Register or login to access the template :

Register for full access

Comments

23 responses to “Use Infinity Pro Themes Front Page Template On Unlimited Single Pages”

  1. Daryl Johnson Avatar
    Daryl Johnson

    Question: if the other pages that has this template require different backgrounds in every section, how do we do that?

    1. Brad Dalton Avatar
      Brad Dalton

      Use this version instead https://wpsites.net/web-design/infinity-pro-front-page-as-page-template/

      You can then use custom fields to change the background image.

      Example : background_1,background_3, background_5, background_7

      If you install the ACF plugin, you can import the demo content and change the background images using custom fields as seen in the demo video.

  2. Cemal Ekin Avatar
    Cemal Ekin

    While on images and Infinity Pro, is it possible to present a full-width image or video when using the narrow width with no sidebar while maintaining the narrow width of the content area?

    Thanks.

    1. Cemal Ekin Avatar
      Cemal Ekin

      This site uses Infinity Pro:

      https://www.strive.construction/test-tour/

      and I wanted to display the video on that page full width of the viewport when it is wider than the content area and shrink to the content width when displayed on a device with a narrow viewport. Similar to the Revolution Pro theme demo:

      https://my.studiopress.com/themes/revolution/#demo-full

      Thanks,

      Cemal

      1. Cemal Ekin Avatar
        Cemal Ekin

        Brad, I was actually asking for a change in Infinity Pro and used the Revolution Pro as an example. I guess Infinity Pro cannot have full-width pictures and videos like RP.

        1. Brad Dalton Avatar
          Brad Dalton

          Tutorials are theme specific. The code may need modifying for use in other themes as different themes are coded differently. Infinity Pro uses full width sections which can include full width images and video. You could modify/add code to make different types of media full width even if the content area is not full width however that would require a different solution to whats already published.

          1. Cemal Ekin Avatar
            Cemal Ekin

            Brad, I have found a forced solution by placing the iframe embed code inside a div like:

            div style=”width: 100vw; position: relative; left: calc(-50vw + 50%);”

            /div

            https://www.strive.construction/test-tour/

            I am not sure about potential undesirable effects but will do for the time being. I omitted the angle brackets because they were taken as full DIVs.

            Cemal

          2. Brad Dalton Avatar
            Brad Dalton

            Cemal. Thanks for sharing your solution.

            Another option is to modify the PHP code in the front-page.php file for your widget area like this

            Which produces this result

          3. Cemal Ekin Avatar
            Cemal Ekin

            Brad, I tried adding the virtual tour using the block editor but it saw it as HTML code rather than a video or an image. Granted, it is neither. I will look into alignfull and see if I can figure that out.

            Thank you,

            Cemal

  3. Alyse Mason Avatar
    Alyse Mason

    hi there, I’m trying to use a shortcode from formidable forms in the text fields on this page template and the shortcode is just showing up as [formidable id=208] instead of the form.

    You can see it in action here: http://fitapproach.staging.wpengine.com/stoke-life/
    u and p to access is fitapproach

    Is there a way to allow shortcodes in these text fields? Thanks!

    1. Brad Dalton Avatar
      Brad Dalton

      You need to wrap the custom field code in do_shortcode like this https://wpsites.net/web-design/use-infinity-pro-themes-front-page-template-on-unlimited-single-pages/#enable-shortcodes-in-custom-field-text-area

      I have updated the file in the download folder.

  4. Tod Dale Avatar
    Tod Dale

    How do you create the custom fields shown in the image above? There is no image-1, image-3, image-5, image-7 etc in the drop down box for custom fields.

    1. Brad Dalton Avatar
      Brad Dalton

      Under custom fields, click enter new and add the name and value as seen in this image https://wpsites.net/wp-content/uploads/2018/01/custom-fields-1.png

      Here’s a demo video https://youtu.be/4RDGEoMGU28

      1. Tod Dale Avatar
        Tod Dale

        Custom fields have predefined fields in the drop down box. No option to enter random text such as image-1

        1. Tod Dale Avatar
          Tod Dale

          Thank you for the video tutorial. All is well.

          1. Brad Dalton Avatar
            Brad Dalton

            You’re welcome.

            Update : This newer version of the template enables you to import the demo content and setup the page template in less than 3 minutes.

  5. Craig De Borba Avatar
    Craig De Borba

    BTW – When there is no image present the Theme defaults to the gray colored background.
    I want to change this default color to black, how do I change that?

    1. Brad Dalton Avatar
      Brad Dalton

      I recoded the template to include a default background image named default.jpg you can add to the images folder.

      1. Craig De Borba Avatar
        Craig De Borba

        Understood.
        Using the inspect tool, it comes up as a background color in css

  6. Craig De Borba Avatar
    Craig De Borba

    Using this new template is much easier for images. Unfortunately if the images are not the exact dimensions it gets tiled. Is there a way to turn that effect off?

    1. Brad Dalton Avatar
      Brad Dalton

      Are you referring to the front page 1 image or all background images for all sections? You can use any CSS declarations for background within a div like this : [code]style=”background-image:url(%s);background-repeat:no-repeat;background-size:cover;[/code]

      1. Craig De Borba Avatar
        Craig De Borba

        front page 1 image is the only one I tried it with

        1. Brad Dalton Avatar
          Brad Dalton

          See here https://wpsites.net/web-design/use-infinity-pro-themes-front-page-template-on-unlimited-single-pages/#comment-1669480

Leave a Reply

Join 5000+ Followers

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