What is best way for build live preview?

wordpress

#1

Hello,

I have completed wordpress version of my HTML template, I am building live preview. My dubt is about alternative pages showed in preview.
For example in my HTML I created three pages for portfolio: 2 columns, 3 columns and 4 columns, but in wordpress version I can choose number of columns from panel, so also if I create three pages I can’t set different column numbers without do an “hack” that there isn’t in original downloadable package.
Another example is boxed and full versions, in HTML I have to pages, but now?

Another dubt is if I have to use a live customizer for live preview, anyway it don’t solve al problems but only little bit like boxed/full version.

Do you have any tips for me? Consider that I use redux framework for option panel.

Thank you a lot from now :slight_smile:


#2

Nobody? please give me some tips.


#3

There is many ways to create your live preview, Here you are a few ideas :

  • Creating simple html landing page, then install wordpress on many folders for example demo1 folder will have wordpress and your theme with 2columns, demo2 will have the 3columns… When you are done with the demos back to the html landing page then insert an image and url of each demo… This is could be pain if you have many demos.

  • Using $_GET request… This is require customizing your theme files for example if you want to show your portfolio with 2 columns use your demo url with ?column=2 at the end and edit your tempalte files to show 2 columns if $_GET['column'] == 2

  • Using javascript only… Create some action buttons and find a good way to show them in ur demo ( many authors here use fixed icon on the right) create a js file to do the job… This is perfect if your settings were just simple something like changing classes or colors.


#4

Hi,
What I used to do. Go to options panel and select layout. then in front end copy the source code into a HTML file and provide a link to it.


#5

Thank you for tips guy, I think that I will use the $_GET system :slight_smile: