How do I embed a responsive video in a post or page that does not use the built in ProPhoto responsive video widget?

If you are wanting to have a responsive video appear in your content area or on a blog post you will need to use a service such as embedresponsively, use a plugin, or the custom css code below.  I personally use the custom css code below and find it works perfectly.

You will want to place the custom css code inside of the ProPhoto 6 Customizer, select the “Base” template.  Once you are in the “Base” template click on the “gear” top left that is next to the word “TEMPLATE”, then select the “Advanced” tab and place the code below into the Custom Css area.

custom css

.video-responsive{ 

overflow:hidden; 

padding-bottom:42.5%; 

position:relative; 

height:0; } 


.video-responsive iframe, .video-responsive object, .video-responsive embed{ 

left:0; 

top:0; 

height:100%; 

width:100%; 

position:absolute; 

background: transparent !important; } 

The Custom CSS Code above once placed into the “Base” template of your site with then be available to use on any future layouts or templates that you create, since the children of the “Base” inherit this custom CSS.

Next you will need to place the code below into your post or page editor.  Be sure to select the “TEXT” tab (top right of the editor screen, next to the “VISUAL” tab)  then past the code below.

Replace this part of the code with your own embed code you get from Youtube, Vimeo, etc.

<iframe src=”https://player.vimeo.com/video/80064303?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0″ frameborder=”0″>

embed code





<div class="video-responsive">


<iframe src="https://player.vimeo.com/video/80064303?color=ffffff&amp;amp;title=0&amp;amp;byline=0&amp;amp;portrait=0" frameborder="0"></iframe>

</div>




How do I create my own logo?

If you want to create your own logo for print materials and graphics you will want to use a program that will allow you to create a scalable vector file.  Adobe Illustrator and the free INKSCAPE program will allow you to create beautiful and professional logo files and graphics.  I do not recommend creating logo files in raster based programs like Adobe Photoshop.

ProPhoto Help Site & Getting Support

ProPhoto has created a dedicated help/support site that covers in great detail all of the areas and functions of ProPhoto via video and text tutorials.  If you have a question about how ProPhoto functions or suspect a bug send them a support ticket so they can look into the issue further.

PROPHOTO HELP & SUPPORT SITE

Have a design related question you can’t find the answer to or figure out?  Send me a support ticket so I can help you resolve the issue.

SUBMIT A SUPPORT TICKET

What do I need for a ProPhoto 6 Design?

You will need a domain, host, wordpress installed, ProPhoto 6 license, and a premium design or use one of the free designs included with your ProPhoto 6 license.

I highly recommend SiteGround for hosting.  They have amazing customer service and 99.99% uptime, free let’s encrypt ssl certificates, scaleable plans, and much more.

ProPhoto is my all time favorite WordPress Theme.  They have excellent customer service, auto updates, a beautiful interface, drag and drop style site builder with custom widgets, galleries, google fonts, custom webfonts, 100% customizable, responsive, no coding necessary and much much more.   If you can dream it you can build it with ProPhoto 6.

Visit my shop for Premium ProPhoto 6 Designs.

*Some links above may contain affiliate links.

What size should my images be?

I recommend:

  1.  FULL WIDTH IMAGES:  2560px wide, saved for the web, 72 dpi at 60% quality – in Photoshop
  2.  PAGE AND BLOG IMAGES:  1200px wide, saved for the web, 72 dpi at 60% quality – in Photoshop
  3.  SLIDER/SLIDESHOW GALLERIES:  The width of these images will depend on the width you choose for your galleries.  1200 px wide is adequate for most designs.  Just follow the same guidelines above for different width images.

There are some third party editors that are designed to optimize your images, such as JPGMini.

I use Photoshop to bulk optimize the images I use in designs.  I create an action in Photoshop and then batch edit bulk images.  It’s lightening fast.

I am trying to upload a design and I keep getting this error: The package could not be installed. The theme is missing the style.css stylesheet. Theme install failed. What do I do?

Be sure to Install ProPhoto as your WordPress theme before proceeding! Chances are you are trying to upload a ProPhoto 6 design as a Theme. ProPhoto 6 designs require ProPhoto 6 to be your active theme. When you download a ProPhoto 6 design following purchase you will receive a zip file that will be named something like “design_bordeaux_package.zip”, you will need to unzip this file to get to your instructions, resources and the actual design zip that you will upload under the “Manage Design” link in ProPhoto. The zip file that you will upload under Manage Designs will be named something like “design_bordeax.zip”

How do I create a faux parallax effect in ProPhoto 6?

If you want to create a faux parallax effect in ProPhoto 6 you need to add a block specifically for the parallax effect. Inside of the block you want to add the SASS code below to the “Block Custom SASS”, you will need to set the height of your block for this to work, the example below has the height set at 500px. You can see an example of this working following this link, scroll to the bottom of the page and scroll to see the effect on the block containing the image with the red dress and champagne. Not every image will work for this effect, you will need to play around with it until you get the look you are wanting. Because this is a bit of trickery you may need to hide this block on smaller screens depending on how it looks based on the image you choose and the height of the block. You will need to set an image as the background of the block to “cover entire element with image”, set it to “stay fixed in place”, “do not tile”.

transform: translateZ(-10px) scale(1.1);
max-width: 91% !important;
height: 500px;
margin-left: auto ;
margin-right: auto ;
Menu