CODEWITHSUNDEEP
htmlcsswordpress
Becky CP
Becky CP

Reputation: 83

Using shortcodes within HTML in Wordpress

I'm trying to create a part to my website http://176.32.230.43/testdigitalmarketingmentor.co.uk/ (at the bottom!)

Where the contact form/information appears inside of the screen of an iPad. I have done this already where a video appears inside the screen of a laptop, but I can't figure out how to change this to my contact form.

So far I have created the contact section as a builder layout part in Themify Builder. This generates the shortcode: [themify_layout_part id=103] to be placed around the website.

I have just put it below the iPad for now. However, how can I implement a shortcode as part of HTML? This is the code and css I have so far for the iPad with video in the screen. Any help would be much appreciated!

#ipad-panel {
    position: relative;
    padding-bottom: 75%;
    padding-left: 64%;
    height: 0;
}

#ipad-panel iframe {
    box-sizing: border-box;
    background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/ipad-750x531.png) center center no-repeat;
    background-size: contain;
    padding: 11.3% 14.8% 11%;
    position: absolute;
    left: 20%;
    width: 60%;
    height: 60%;
}


<div id="ipad-panel">
    <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Upvotes: 4

Views: 71042

Answers (5)

orchid green
orchid green

Reputation: 21

If you use Elementor plugin in WordPress. And you also want to add a short code manually, ,you can paste the code below anywhere you want!

<section>[YOUR SHORTCODE]</section>

I hope I was able to help

Upvotes: 2

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

if you are going to use code in WordPress dashboard then you need to put it just [themify_layout_part id=103]

if you are going to use in files like template.php then you need to make your shortcode to hard code

now create a template for your page and then at the end 

<div id="ipad-panel">
    <?php echo do_shortcode('[themify_layout_part id=103]'); ?>
</div>

OR go to your page builder and add a section with HTML section and put the code [themify_layout_part id=103]

hope you understand

Upvotes: 2

Zubex
Zubex

Reputation: 19

I don't really understand the question. What's stopping you from doing this?

<div id="ipad-panel">
    [themify_layout_part id=103]
</div>

Upvotes: 1

Ram Segev
Ram Segev

Reputation: 2571

You need to find the php template file with this HTML area and implement the short code there, you can use this plugin what the file to easily find out which file is it.

after you have found the template file insert <?php echo do_shortcode('[themify_layout_part id=103]'); ?>

Upvotes: 3

ristapk
ristapk

Reputation: 1372

You cannot paste WordPress shortcode in HTML directly. To generate HTML of shortcode, you need to pase it into WordPress page or post, get HTML of it, and than copy just that HTML (inspect element in your browser).

Upvotes: 0

Related Questions