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 :
Question: if the other pages that has this template require different backgrounds in every section, how do we do that?
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.
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.
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
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.
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.
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
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
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
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!
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.
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.
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
Custom fields have predefined fields in the drop down box. No option to enter random text such as image-1
Thank you for the video tutorial. All is well.
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.
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?
I recoded the template to include a default background image named default.jpg you can add to the images folder.
Understood.
Using the inspect tool, it comes up as a background color in css
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?
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 :
front page 1 image is the only one I tried it with
See here https://wpsites.net/web-design/use-infinity-pro-themes-front-page-template-on-unlimited-single-pages/#comment-1669480