Streaming live at 10am (PST)

Additional tabs after site export


#1

Hello,

I recently exported my site and loaded it into Wordpress. I have placed the actual code for the tab into the page and now it looks really weird. The tabs work fine but now there are 2 smaller tabs below each main tab item. Please help.

It should look like this: Webflow Site
Exported Website


#2

just a quick look... but you have paragraph tag

s between your tabs.

#3

Yes I see them when I do exactly what you did but this is my code (note there are no paragraph tags in the tabs with the names) Hence my confusion. Is wordpress adding in these paragraph tags?

<div class="team_sec">
<div class="w-tabs tabs" data-duration-in="300" data-duration-out="100">
  <div class="w-tab-menu tabs-menu">
    <a class="w-tab-link w--current w-inline-block tab-link" data-w-tab="Tab 1" data-ix="initial-tab-open">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 2" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 3" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 4" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 5" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 6" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 7" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 8" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 9" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
    <a class="w-tab-link w-inline-block tab-link" data-w-tab="Tab 10" data-ix="team-nudge-left">
      <div class="teambtn">asdfed</div>
    </a>
  </div>
  <div class="w-tab-content tabs-content">
    <div class="w-tab-pane w--tab-active tab1" data-w-tab="Tab 1">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext"><span style="font-style: normal;">director</span>&nbsp;
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>&nbsp;</p>
      </div>
    </div>
    <div class="w-tab-pane tab2" data-w-tab="Tab 2">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Assistant Director
          <br>Finance Marketing
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab3" data-w-tab="Tab 3">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Production Manager
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab4" data-w-tab="Tab 4">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">TELEVISION PRODUCER
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab5" data-w-tab="Tab 5">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">TELEVISION PRODUCER
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab6" data-w-tab="Tab 6">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Personnel Assistant to Director
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab7" data-w-tab="Tab 7">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Graphics Designer
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab8" data-w-tab="Tab 8">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Make-up Artist
          <br>Duplication
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
    <div class="w-tab-pane tab9" data-w-tab="Tab 9">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Maintenance
          <br>Set Building</p>
      </div>
    </div>
    <div class="w-tab-pane tab10" data-w-tab="Tab 10">
      <div class="teamdiv">
        <h2 class="teamname">asdfed</h2>
        <p class="teamtext">Maintenance
          <br>Set Building
          <br>
          <br><a href="mailto:asdfed.ORG" class="team_link">asdfed.org</a>
        </p>
      </div>
    </div>
  </div>
</div>


#4

I came across a similar issue several years ago.

It happened when I typed text directly into the phpAdmin interface
- (which was connected to MySQL database)
- and pressed Enter (BR tag) after each paragraph.

When saved... a paragraph tag was added enclosing the BR tag

- <p><br /></p>

The default database for WordPress is MySQL.


#5

Thanks so much! Your response gave me the idea to see if others had the same issue and found a plugin that corrected the issue for me. http://urbangiraffe.com/plugins/disable-wpautop/

It did the job!


#6

Interesting, does the plugin work with the Link Block element?
I faced a problem exporting the WF < a href > block stuff < /a >. The Wordpress just deleted the html formating.


#7