1. Home
  2. Knowledge Base
  3. LiveEditor Customizations
  4. Adding Full-width Image Slider on a Page Page Using Slider Element

Adding Full-width Image Slider on a Page Page Using Slider Element

If you have the OptimizePress Version 2 plus pack (publisher or pro account from OP2) then you can add a full width slider by creating a slider shortcode, and pasting it into the “code before” section in the row options. 

Since we created this guide, WordPress has released a new editor called the “Gutenberg” block editor. This will need to be disabled in order to do this. We created a plugin that you can download with the following link. Just install and activate the plugin and it will disable the block editor. You can deactivate it when you are done in case you have some posts/pages that use the block editor. 

OP Disable Gutenberg Plugin Download Link

After activating the plugin, please follow the following steps: 

1. Go to your site’s wp-admin >> Pages >> Add New. (do not use the live editor)

2. Click the “Add Element” button.

3. Choose the second style of slider and configure the element. Hit insert when done.

4. Navigate to the text editor tab and copy the slider element shortcode

5. Go to your landing page then click the pencil icon of the row where you want to place the slider to open the row settings.

6. Place the element shortcode you copied on the Code before row field 

7. While in the LiveEditor of your landing page, go to Page Settings >> Other Scripts >> Custom CSS then place this CSS code below:

.flexslider .slides img {width: 100%;}


Don’t forget to click the “Save & Continue” or “Save & Close” when done.

That should successfully show your image slider in full width of the page.

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support