Tutorial & code

Price List & Business Hours

Simple mobile responsive lists using the HTML module. Add background styles with the column settings.

VIDEO
CODE

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Notes

This is a row template containing a collection of HTML modules. The backgrounds shown are added in the containing column through Beaver Builder options. The HTML code is easy to understand:

  1. Drag in the row template and move HTML  modules or columns you want use then you can delete the template row.
  2. Go to the General tab to change the values (in black text). You can copy or delete lines (that start and end with <li> and </li> ) to the amount you need.
  3.  If you want to change the text color, the divider border  go to the Advanced tab and scroll to the CSS section. See the code below for the instructional comments.

Beaver Builder Price Listl

For non coders:

  • ul is HTML for Unordered List.
  • li is HTML for List Item.
  • The span tag is an inline container. We have two per list item and use it to assign CSS styles to it.

We could have added CSS styles directly in the span tags. We could have given the span tag class or ID name (selector). Instead (to keep the HTML simple) we have use something more advanced in CSS called a pseudo class to identify one span tag from the other on same line. In this case it is :first-child.

ul li span:first-child{ float: left; padding: 0 10px 0 0; }

See the Price List & Business Hours template in action.

Example

Code

HTML

This is placed in a HTML  Module:

<ul>
    <li><span> Cut and Finish</span><span>£37</span></li>
    <li><span>Blowdry</span><span>£21</span></li>
    <li><span>Children Under 12</span><span>£10</span></li>
    <li><span>Children over 12</span><span>£20</span></li>
    <li><span> Hair Up and Party Styling</span><span>from £35</span></li>
 </ul>

CSS 

/* ul = unordered list. li = list item */

ul li {
color: inherit; /*delete or change to a color as needed */ 
padding: 20px 0; /*Two values here means top and bottom padding is 20px and left and right are 0 */ 
list-style: none; /*this stops browser adding bullet point to the list items */ 
margin-left: -25px; /*this compensates for the list item indentation */ 
}


ul li span:first-child{
float: left; /*The first span is floating left */ 
padding: 0 10px 0 0; /*Four values here so it is clockwise from the top: top 0 right 10px bottom 0 left 0. this is creating a space between the border line */
}

ul li span:first-child + span{
float: right; /*The span that is not the first-child is floating right */ 
padding: 0 0 0 10px;
}


.fl-module-content ul li:after{ /* this selector uses a "pseudo-element" after to create a styled content area not in the page markup */
content: ''; 
height: 14px;
display: block; /* takes up the available width of the parent element */
overflow: hidden; /* The overflow property specifies what should happen if content overflows an element's box*/
border-bottom: 1px solid #ccc; /* could change solid for dotted, dashed, double */
}
/* .fl-module-content is added stop the pseudo-element adding this styling to the Beaver Builder UI*/

------------------------------------------------------------------------------------------------------------------------


/* The CSS for the AGENDA example */
ul li {
list-style: none;
line-height: 2.6em;
font-weight: normal;
color: grey;
}

ul li span:first-child{
float: left;
width: 160px; /* change to the space need on the left*/ 
font-weight: bold;
color: black;
}

Discounts On These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms" 15% off
WP Code Box.  Discount  code "beaverjunction" 25% off

--------------------------------------------------------------

 

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment