1. Home
  2. Docs
  3. Integrate with Page Builder
  4. SiteOrigin Page Builder

SiteOrigin is one of the best backend page builders. Now our plugin, Image Hover Effects Ultimate works perfectly within the SiteOrigin builder. The elements and extensions of the Image Hover Effects Ultimate work seamlessly within this builder.


Working with the SiteOrigin

Working with the SiteOrigin is very simple while using the Shortcodes of the Image Hover plugin. So, let’s see how to put the Shortcodes within this powerful backend page builder and get the work done:


⇒First, Go to the WP Dashboard and create a New Page/Post. Here you’ll find the panels of different builders that you have installed in your WordPress. In the below, you’ll find the SiteOrigin Layout Block.

⇒Clicking on this tab brings up the Page Builder interface like below,


⇒You can use the SiteOrigin back-end editor toolbar to add a widget, add a new row of columns or to load prebuilt layouts. Here, we add a new row to the column. Follow the steps below:

  1. Go to the SiteOrigin menu in the interface
  2. Click on the Add Row button.
  3. Here, set the row layout, column ratio, direction, and other style settings.
  4. Then click the Insert button.

Each Structure in SiteOrigin builder consists of rows and columns. The row is a base that defines the logical structure of the page. Each row consists of columns and with this builder, you have full control of them. You can select the number of columns you want in a single row from the multiple structure option.


⇒Now, from the SiteOrigin menu, click on the Add Widget button to add a new widget.

⇒After clicking on the button, a new page containing widgets will appear. Here, we select the Text widget to put our Shortcode in it.


⇒After getting the text box to put the shortcode in, Navigate to Image Hover> Shortcode page to copy the desired shortcode from the Image Hover Effects Ultimate.


⇒Here, Copy the Shortcode of an element item you want to add & Paste it into the Text Box on the SiteOrigin page. Then click on the Preview Layout (the eye symbol) to see the preview of your shortcode.

Now, build the page by adding more Shortcodes and Publish the page.



That’s all! You can easily embed beautiful image hover effects like that by using our Image Hover Effects Ultimate plugin within a Page Builder like the SiteOrigin. For more help, don’t hesitate to ask us.


Was this article helpful to you? Yes No

How can we help?