Web Designers! What am I looking for? What would you call this??

by Ejsuhh
10 replies
  • WEB DESIGN
  • |
Hi Web Designers. Noobie question here:

I'm running a product review website and I want to input a "table" of sorts into my website. I want the table to act as a template for the products, almost like a grading rubric if you will for each of the products I review.

I also do not want to simply insert a table into my website without any design. I want the table to be a graphic that is more presentable to the viewer as more than just a 5x6 square table.

In other words, I want a virtual form that looks like more than just a square table that I can write in and edit.

Is there a term for what I am looking for?
#call #designers #web
  • Profile picture of the author Ejsuhh
    Kitchen Faucet Reviews | Best Buying Guides for 2015 has an example of what I am looking for. Any help??
    {{ DiscussionBoard.errors[9916280].message }}
    • Profile picture of the author artemis360
      There's many things that can make your form/layout look like that.

      You can manually create a table and populate the cells any way you want. As for something automated, there are tables that have pre-set styles that you can buy as a wordpress plugin. As for the carousel, it's just a widget created by amazon.

      I'm not aware of anything that auto-magically makes your cells look pretty from content you enter as a review. I'm not saying there isn't, but i'm not aware of any.

      Artemis
      Signature

      A r t e m i s
      ------------
      Webtopias.com
      Artemis360.com

      {{ DiscussionBoard.errors[9916483].message }}
      • Profile picture of the author Ejsuhh
        Originally Posted by artemis360 View Post

        There's many things that can make your form/layout look like that.

        You can manually create a table and populate the cells any way you want. As for something automated, there are tables that have pre-set styles that you can buy as a wordpress plugin. As for the carousel, it's just a widget created by amazon.

        I'm not aware of anything that auto-magically makes your cells look pretty from content you enter as a review. I'm not saying there isn't, but i'm not aware of any.

        Artemis
        Ah gotcha. Well more than the carousel, I'm more interested in the table that was used to input information on the Brands of Kitchen Faucets. I'm looking for a similar "chart/table" that has multiple tabs such as the Delta, Moen, Grohe tabs that were used. Is it most likely the case that a plugin was used for that as well??
        {{ DiscussionBoard.errors[9916589].message }}
        • Profile picture of the author EelKat
          Originally Posted by Ejsuhh View Post

          Ah gotcha. Well more than the carousel, I'm more interested in the table that was used to input information on the Brands of Kitchen Faucets. I'm looking for a similar "chart/table" that has multiple tabs such as the Delta, Moen, Grohe tabs that were used. Is it most likely the case that a plugin was used for that as well??
          Your site is Wordpress so this may not work depending on the type of package you have; I personally do not use WordPress because it is app and plug-in based and gives you no freedom to build your own site the way you want it. I prefer to build a coded site, not a drop and drag plug-in site that does not allow me to do anything other then the limitations of the plug-ins; if you don't mind drop and drag apps and plugins, WP is fine, but if you want a fully editable site, you'll want to avoid WP like the plague - I used to have a WP site; frustrated the heck out of my by it's lake of editablity

          However, reading the code it appears to be WP specific, so it should work on your site. I've not worked with this type of table before, so don't know the specifics for editing the code itself, however, I've been interested in this type of table myself, so I'll likely pick this code apart and see if I can figure out how to build it from the ground up so I can make my own version of it.

          Just copied the code for the table off their site. To edit, remove their text and page links, replace with your own:



          Code:
          <div class="vc_general vc_tta vc_tta-tabs vc_tta-color-black vc_tta-style-outline vc_tta-shape-square vc_tta-o-shape-group vc_tta-tabs-position-left vc_tta-controls-align-left "><div class="vc_tta-tabs-container"><ul class="vc_tta-tabs-list"><li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#1477546410327-c8c71c0f-8149" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Delta</span></a></li><li class="vc_tta-tab" data-vc-tab=""><a href="#1477546410327-c69ee31b-3572" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Moen</span></a></li><li class="vc_tta-tab" data-vc-tab=""><a href="#1477547151540-cfc8a103-607e" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Grohe</span></a></li><li class="vc_tta-tab" data-vc-tab=""><a href="#1477547258443-d26aded0-1a77" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Kohler</span></a></li><li class="vc_tta-tab" data-vc-tab=""><a href="#1477547322290-03b754ae-b8c7" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Kraus</span></a></li><li class="vc_tta-tab" data-vc-tab=""><a href="#1477547373506-2d68d5f6-8238" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Danze</span></a></li></ul></div><div class="vc_tta-panels-container"><div class="vc_tta-panels"><div class="vc_tta-panel vc_active" id="1477546410327-c8c71c0f-8149" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477546410327-c8c71c0f-8149" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Delta</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft size-full wp-image-383" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150.jpg" alt="delta-9159-ar-dst-150x150" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150.jpg 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150-300x300.jpg 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150-768x768.jpg 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150-1024x1024.jpg 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150-765x765.jpg 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Delta-9159-AR-DST-150x150-184x184.jpg 184w" sizes="(max-width: 150px) 100vw, 150px">Delta Kitchen Faucets</h3>
          <p>Responsible for some of the most advanced technologies in the kitchen and bar faucet industry, Delta has been providing the world with high-end kitchen faucets for years and years.</p>
          <p>Crafted out of some of the highest grade materials available and always including amazingly luxury style finishes that will add a tremendous amount of visual appeal to any kitchen upgrade or renovation, Delta faucets are easy to use, reliable, and have that class and elegance that a lot of homeowners are looking for today.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/delta-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div><div class="vc_tta-panel" id="1477546410327-c69ee31b-3572" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477546410327-c69ee31b-3572" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Moen</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft wp-image-384 size-full" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150.png" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150.png 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150-300x300.png 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150-768x768.png 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150-1024x1024.png 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150-765x765.png 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Moen-7594SRS-150x150-184x184.png 184w" sizes="(max-width: 150px) 100vw, 150px">Moen Kitchen Faucets</h3>
          <p>When it comes to drop dead good looks as far as kitchen faucets are concerned, nobody does it better than Moen.</p>
          <p>A company that was founded in Ohio right around the middle of the 1900s, Moen has built their entire reputation on two things  creating the most visually stunning and easy-to-use faucets found anywhere in the industry as well as the kinds of faucets at that are going to blast and last, probably far longer than you ever will. This has given them a tremendous amount of respect in the home improvement industry from contractors, craftsmen, and homeowners alike  catapulting them to the top of the kitchen faucet arena.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/moen-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div><div class="vc_tta-panel" id="1477547151540-cfc8a103-607e" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477547151540-cfc8a103-607e" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Grohe</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft wp-image-385 size-full" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150.jpg" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150.jpg 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150-300x300.jpg 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150-768x768.jpg 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150-1024x1024.jpg 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150-765x765.jpg 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/grohe-kitchen-faucet-150x150-184x184.jpg 184w" sizes="(max-width: 150px) 100vw, 150px"></h3>
          <h3>Grohe Kitchen Faucets</h3>
          <p>Europes largest manufacturer of kitchen faucets and other plumbing fixtures, this is one of the biggest companies found anywhere in the world producing high-end solutions for the homeowner, contractor, and tradesmen alike.</p>
          <p>With a number of different production sites dotted all throughout the world theyve been able to produce some pretty unique designs, and though they lag slightly behind the real innovators of the kitchen faucet industry (Delta and Moen leading the charge there) youre going to find their more classic and contemporary designs fit almost every single design aesthetic that you may be interested in moving forward with in your home.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/grohe-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div><div class="vc_tta-panel" id="1477547258443-d26aded0-1a77" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477547258443-d26aded0-1a77" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Kohler</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft wp-image-386 size-full" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150.jpg" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150.jpg 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150-300x300.jpg 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150-768x768.jpg 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150-1024x1024.jpg 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150-765x765.jpg 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/kohler-kitchen-faucet-150x150-184x184.jpg 184w" sizes="(max-width: 150px) 100vw, 150px"></h3>
          <h3>Kohler Kitchen Faucets</h3>
          <p>If youre looking to purchase the very best kitchen faucet that has been made right here in America  Wisconsin, to be exact  then youre going to want to invest in a Kohler product as soon as humanly possible.</p>
          <p>Responsible for tremendously bold designs that have won a number of industry awards and are chosen time and time again by some of the most groundbreaking interior designers and luxury contractors found anywhere in the world (but especially here in the US), Kohler is one of the top end manufacturers for kitchen faucets and other plumbing fixtures. Its almost impossible to pick up a Kohler unit, install it in your home, and still have the same kind of feelings about your kitchen that you did before.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/kohler-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div><div class="vc_tta-panel" id="1477547322290-03b754ae-b8c7" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477547322290-03b754ae-b8c7" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Kraus</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft wp-image-387 size-full" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150.jpg" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150.jpg 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150-300x300.jpg 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150-768x768.jpg 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150-1024x1024.jpg 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150-765x765.jpg 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Kraus-kitchen-faucet-150x150-184x184.jpg 184w" sizes="(max-width: 150px) 100vw, 150px"></h3>
          <h3>Kraus&nbsp;Kitchen Faucets</h3>
          <p>A more economical choice within the more elegant and design focused kitchen faucet options on this list, youre going to find that Kraus is able to perfectly blend commercial grade durability with relatively high-end design so that you never have to break the bank to get the look that you want.</p>
          <p>With a much more significant focus on ensuring that each and every one of their kitchen faucets are engineered to the highest degree possible, promising years and years of maintenance free use, this doesnt mean that the Kraus kitchen faucets are unattractive (far from it) adjust that they arent leading the charge when it comes to design in this industry.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/kraus-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div><div class="vc_tta-panel" id="1477547373506-2d68d5f6-8238" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1477547373506-2d68d5f6-8238" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Danze</span></a></h4></div><div class="vc_tta-panel-body">
          	<article class="wpb_text_column wpb_content_element post ">
          		<div class="wpb_wrapper">
          			<h3><img class="alignleft wp-image-388 size-full" src="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150.jpg" width="150" height="150" srcset="http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150.jpg 150w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150-300x300.jpg 300w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150-768x768.jpg 768w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150-1024x1024.jpg 1024w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150-765x765.jpg 765w, http://www.kitchenfaucetdivas.com/wp-content/uploads/2016/10/Danze-kitchen-faucet-150x150-184x184.jpg 184w" sizes="(max-width: 150px) 100vw, 150px"></h3>
          <h3>Danze&nbsp;Kitchen Faucets</h3>
          <p>Probably be a lesser-known of all of these options on the list (but still an industry titan through and through), if youve been looking for off-the-wall or ultramodern design inspiration for your next kitchen faucet than this is the company that youll want to move forward with.</p>
          <p>Whether we are talking about modern and elegant minimalist kitchen faucets or those that have been designed from the inspiration of pieces of fruit, Slinkys, or sunflowers, the odds are fantastic that if youre looking for serious the visual impact from your kitchen faucet youll want to move forward with a Danze solution. The first time that you see one youll remember it, and so will each and every single one of your guests.</p>
          
          		</div> 
          	</article> <div class="vc_btn3-container vc_btn3-left"><a class="vc_general vc_btn3 vc_btn3-size-sm vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-warning" href="http://www.kitchenfaucetdivas.com/danze-kitchen-faucets/" title=""><i class="vc_btn3-icon fa fa-book"></i> Read The Reviews</a></div>
          </div></div></div></div></div>


          To learn how to copy codes off sites like I just did, you first need Chrome Browser.

          In your toolbar > Options > More Tools > Developer Tools > Elements

          Then look for the "black arrows" hover over each arrow until the table you want to copy highlights in blue, then click open the arrow, right click, select "copy element", paste it into an html editor (I use EditPad7, but NotePad will work too), remove their text/articles/links and replace with your own

          If that's the wrong table (they have several on their page) just repeat these steps until up have the correct table you want.

          Copy that with your text/articles/links in it; paste it into the html box in the body of you page. Publish.

          Now you have inserted the same table onto your own site, with your own text/articles/links in it.
          Signature

          My review of Flamboyant Nipples: The Site That Supports KKK Anti-Gay Terrorist Crimes
          Info on my Novels is HERE. History of Stephen King's Thinner Gypsies is HERE.

          {{ DiscussionBoard.errors[11056398].message }}
  • Profile picture of the author Chris19h
    I would suggest working with a developer that can help you make a custom page template.
    {{ DiscussionBoard.errors[9916609].message }}
    • Profile picture of the author Ejsuhh
      Originally Posted by Chris19h View Post

      I would suggest working with a developer that can help you make a custom page template.
      Sounds good. It looks like that's what I'm going to have to do.

      Any advice on where to find web designers that are looking for freelance projects?
      {{ DiscussionBoard.errors[9917095].message }}
  • Profile picture of the author andrewhltsang
    is your site in wordpress or is it hardcoded?
    {{ DiscussionBoard.errors[9917170].message }}
    • Profile picture of the author Ejsuhh
      Originally Posted by andrewhltsang View Post

      is your site in wordpress or is it hardcoded?
      wordpress my man.
      {{ DiscussionBoard.errors[9917449].message }}
  • Profile picture of the author JosephI
    Those are called "Tabs" or post and page tabs.
    Many good themes have them built in, just check the docs.
    If you don't like what's there, search for a "tab plugin" and you should be swamped with choices.
    Cheers
    {{ DiscussionBoard.errors[9919404].message }}
  • Profile picture of the author Uyen Nguyen
    I hate table shortcode
    {{ DiscussionBoard.errors[11056373].message }}

Trending Topics