The purpose of this page is to show available options with the Basic Build WordPress Theme Layouts: either in a single section or multiple sections.
(A Full Width Slider is not included on this page because you can only have one slider/carousel per page).
Everything But a Slider
Some Simple Columns
Before your columns are defined, you can add content with the Basic Build WordPress Theme Layouts using a WYSYWYG editor specifically made for the content before the column layout.
You will often need to create a layout with a specific number of columns, and there are several ways to do this. The Basic Build WordPress Theme Layouts uses Flexbox to build a multi-column design. Having some content ahead of the columns gives your website visitors and web bots more information.
This is just some content in a column using the Basic Build WordPress Theme Layouts.
When creating a column, you can define it’s width by using the Flexbox flex-basis setting. Each individual column flex-width should total 100%. You can also define whether to use an image or a Font Awesome icon placed above the column.
This area is for additional content in a column using the Basic Build WordPress Theme Layouts. As mentioned (and seen) in the previous column, you can define to use an image or Font Awesome icon.
You can set the color and size of the Font Awesome icon directly in the Basic Build WordPress Theme Layouts section.
Check out our Timeline below.
Write the best content for your columns and style the content with the Basic Build WordPress Theme layouts as easily as with the typical WordPress WYSIWYG editor.
The cool part of the Basic Build WordPress Theme layout is you have many other options available to easily manage more elements and layout selections with a few pick-and-choose options.
The cool part of the Basic Build WordPress Theme is that you have many other options available for easily managing more elements and layouts with a few pick and choose options.
Dec 1999
With the Basic Build WordPress theme timeline layout, you can add an image, its ATL tag and choose the color of the corresponding date background and dot.
Jan. 2010By using the Basic Build WordPress theme, you don’t have to worry about writing the code. In every section, you can select to choose the layout and style it the way you want.
Apr. 2020A Row of Widgets
Select up to 4 widgets to display in this section. There are four ready-to-use widgets in the BasicBuild WP theme. Widgets are defined in the WordPress Admin panel under Appearance > Widgets.
With the Basic Build WordPress theme layouts, you can also define a widget background color if desired. If you prefer, leave the setting off so the widgets containers will use the same background color as their parent section.
Background Image with Overlay and Parallax
An image overlay is the technique of adding text or images over another base image. One of the simplest ways to add image or text overlay is using CSS properties and pseudo-elements.
In short, CSS overlay effects are achieved by using the following:
background-image and background CSS properties to add image and an overlay effect.
By using the Basic Build WordPress theme layouts, you don’t have to worry about writing the code. In every section, you can select to choose a full width background image or a color background. When using a background images (as in this case), you can choose to add an overly or not, style the color of the overlay and set the opacity. You can also choose to move the background image with parallax or not.
Standard Section Color with Custom CSS
This is just a standard section with a background color and overlay in the Basic Build WordPress theme layout options. The overlay is an available option. This section is also using the custom CSS block to make specific styling modifications for just this section.
#section-5 h2 {text-shadow: 1px 1px 2px #ccc;}
#section-5 p:first-of-type::first-letter, #section-5 p:nth-of-type(3)::first-letter, #section-5 p:nth-of-type(4)::first-letter{font-size: 2em; color: red; border: 1px solid red; padding: 5px; background: #fff; margin-right: 5px;}
#section-5 p:nth-of-type(3)::first-letter{color: green; border: 1px solid green; }
#section-5 strong {border-bottom: 2px dotted #565656; padding-bottom: 4px;}
The most important advantage of CSS is that it separates content from its presentation. As every web designer and developer knows, presentation is key; if your website doesn’t look professional, you’ll have trouble attracting and keeping users.
One of the cool parts of the Basic Build WordPress theme is you can write your own Custom CSS within the theme editor that will apply only to the section it is written in. You would not have to worry about the Custom CSS changing other areas of the site that may have the same class or ID name.
Background Image with Overlay - No Parallax
As mentioned above, in every section of the Basic Build WordPress theme layout options, you can choose a full-width background image or a color background. When using background images (as in this case), you can choose to add an overlay or not, style the color of the overlay, and set the opacity. You can also choose to move the background image with parallax or not. – This example shows that “parallax” is NOT used with the image.
You can choose to have a background color for the sidebar and set its opacity value. The border and drop shadow shown around the widget box was added using the Custom CSS block for this section.
#section-6 article #secondary .widget { box-shadow: 2px 2px 2px #454545; border: 1px solid #fff; }
#section-6 code { background: #f7f7f7;}
Build Columns – Spaciously
You can select to add any content before the columns using a typical WordPress WYSIWYG editor. You have all the same options as listed above in the Build Columns – Evenly section. The only difference is that the columns defined use varying widths for the available flex-basis setting.
The Basic Build WordPress Theme options still include selecting an image or Font Awesome icon to display above the column content. Style it uniquely for your specific desired effect.
Basic WordPress Theme Layouts: Flex Box Columns
The cool part of the Basic Build WordPress Theme is that you have many other options available for easily managing more elements and layouts with a few pick and choose options.
This is just some content in a column using the Basic Build WordPress Theme. When creating a column, you can define it’s width by using the Flexbox flex-basis setting.
As mentioned (and seen) in the previous columns, you can define to use an image or Font Awesome icon.
In each of these columns, a Font Awesome icon was selected to use. When selecting an icon, you can also set the color and size directly in the Basic Build WordPress Theme options.
You will often need to create a layout with a specific number of columns, and there are several ways to do this. The Basic Build WordPress Theme Layouts uses Flexbox to build a multi-column design. Having some content ahead of the columns gives your website visitors and web bots more information.
Build a Content and Image Link Masonry Layout
For each section in the Basic Build WordPress Theme, you can choose to select a masonry layout full of content boxes and image link boxes.
For the content boxes, you can select the background color and add content just as you would with the typical WYSIWYG editor. For image link boxes, simply add an image and link to any internal page or external URL. You’ll have the option to select the _target as well. (Meaning to open a new window or not).
Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed-height rows. A masonry layout optimizes the use of space inside the web page by reducing unnecessary gaps. Without a masonry layout, certain restrictions are required to maintain the structure of the layout grid.
Using a Masonry layout is the ultimate solution to this problem, as it reduces the spaces and tries to fit the maximum number of boxes into the rows and columns.
Basically, a “masonry” layout is one where items are laid out one after the other in the inline direction. When they move onto the next line, items will move up into any gaps left by shorter items in the first line. It’s similar to a grid layout with auto-placement, but without sticking to a strict grid for the rows. Probably, The most well-known example of masonry is on Pinterest,
Benefits of Masonry Layout
Besides from keeping your page layout consistent, one major benefit that Masonry layout will bring to you is that it will make your users want to keep reading.
Do you want to add a masonry grid layout on the WordPress website? You have probably seen the masonry grid on most sites over the Internet. A benefit of the Basic Build WordPress theme is that you can easily add a masonry layout. Just add content and images. No extra coding required.
How to Add Masonry Grid Layout in WordPress. Use the Basic Build WordPress theme.
The most popular use of Masonry layouts is for galleries. Image galleries are built using different types of images with varying dimensions.
It can be challenging to create a set of images with the same dimensions, without losing their quality. Because of this, Masonry layouts are a great choice for creating galleries using images with varied dimensions.
The Basic Build WordPress theme makes building a masonry layout easy!
A Section with a Sidebar
With each section in the Basic Build WordPress Theme, you can select to show a sidebar with widgets that defined in Appearance > Widgets. The BasicBuild WP theme comes with four available widgets to choose. You can also add a different color background for the widgets displayed.
Good news on the Basic Build WordPress Theme.
This theme is not a page-builder theme! It is a lightweight WordPress theme utilizing your Advanced Custom Field Pro (ACF Pro) plugin. It also comes ready to use with Font Awesome “standard” icons. But if you have a Font Awesome Pro account, add your kit ID to theme settings to take full advantage of Font Awesome “Pro” icons. (As seen throughout this site).
Using the BasicBuild WP theme, your ACF Pro plugin, and Font Awesome Pro Kit, you can develop a highly affective, functional, and stylish WordPress website much faster than before, outperforming typical page builder themes over bloated with extra code.
Basic WordPress Theme Layouts with a Full Width Title
When creating a new section for a web page with theBasic Build WordPress Theme , you can choose to show the section title as the full width section heading. You can also define the background color and text color as seen here.
The first full section page title (as seen at the top of this page) will be the H1 element. Subsequent full width page titles will be the H2 element.
Using a full width section title and background, you can create a stylish and different way to separate content on the web page. By default, the web page will display the title of the section as it is written in the WYSIWYG editor. By selecting YES to “show section title“, it will use the section title and a colorful background that you can choose with a full spectrum color picker.
Basic Build WordPress Theme: Add a Stylish Centered Carousel
When selecting a carousel, you can choose a Full Width slides as seen on the About page. As seen below, you can also have a centered slider. Whether using the Full Width slider or the Centered Carousel, you can choose to show/hide the dots and arrow navigation with the Basic Build WordPress Theme settings.
You can only have one carousel per page so choose what is best for you.
Slider One Name
Slider One Title
Slider One Title
Slider Two Name
Slider Two Title
Slider Two Title
Slider Three Name
Slider Three Title
Slider Three Title
Slider Four Name
Slider Four Title
Slider Four Title
Slider Five Name
Slider Five Title
Slider Five Title
Custom CSS
This Basic Build WordPress Theme framework was built and styled with neutral colors for the most part. If any component or element added to a section does not have styling options, you can use the Custom CSS block that will only apply to the specific section’s container.
Basic Build WordPress Theme Includes SASS
The Basic Build WordPress Theme also comes with pre-built SASS files separated into folders for easy-to-find management. So if you are familiar with how to write SASS and compile to CSS, you can easily make global changes using predefined variables. A custom sass file is also available for your customization. Subsequent theme updates will not overwrite your customizations.
Tabbed Content
You can also add a tabbed column layout. Settings allow styling of the “active” tab heading color, border & background color and max-width of the container.
Add multiple tabs to the single container. It will be centered in the section based on your max-width setting. (Default is 650px).
CSS Tab Designs For A More Organized And Professional Looking Website
Tabs are used to navigate and display different content on your website. The Basic Build WordPress theme uses a tabbed content layout to manage space and to make the website more attractive.
Using Pure CSS Tabs
Pure CSS tabs are defined as navigator and preferably used in sole page websites to view the multiple information in limited space and help to switch tab quickly. Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown.
Basic Build WordPress Theme Tabs
The BBWP theme tabs are perfect for website applications. Different subjects can easily be displayed with tabs UI design. You will love these simple and well designed tabs and managing the styling is a breeze. These are CSS only tabs and are compatible with modern browsers. No JavaScript required.
Multiple Tabs Allowed
You can add as many tabs as you want. However, you should keep in mind that while the tab container is responsive, too many tabs could be an issue on smaller devices.
Set the max-width of the tab container accordingly to accommodate the number of tabs included.
Add a Pure CSS Simple Bar Graph
Use a pure CSS bar graph within any section of the web page when using the Basic Build WordPress Theme. Set the flex width percentage of each item based on 100% total. Provide a short description, and select and set the background and text color to make your content stand out.
A Sample Accordion (with overlay)
The Basic Build WordPress Theme allows you to choose an accordion layout for any section on a page. The accordion is ideally suited for a frequently asked questions scenario. But it is used for whatever you want. All accordion titles will toggle the corresponding content.
Use the Basic Build WordPress Theme options to style the color for the title, title background color, and content-box background color. You can style the text just as you would with a typical WYSIWYG editor. The gray border around the title was added using Custom CSS for this section.
#section-15 .accordion-button { border: 2px solid #ddd; }
Vivamus eu tristique nunc. Sed dolor massa, accumsan et pellentesque vel, tempus non elit. Duis non molestie dolor. Vestibulum condimentum erat in ullamcorper porttitor. Vivamus eu tristique nunc. Sed dolor massa, accumsan et pellentesque vel, tempus non elit. Duis non molestie dolor. Vestibulum condimentum erat in ullamcorper porttitor. Vivamus eu tristique nunc.
Sed dolor massa, accumsan et pellentesque vel, tempus non elit. Duis non molestie dolor. Vestibulum condimentum erat in ullamcorper porttitor. Vivamus eu tristique nunc. Sed dolor massa, accumsan et pellentesque vel, tempus non elit. Duis non molestie dolor. Vestibulum condimentum erat in ullamcorper porttitor.
Sed enim enim, imperdiet quis faucibus ut, varius eget velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris at varius ligula.
Basic Build WordPress Theme - A Closing Section
We have just a regular text box section here. You utilize it just as you would the typical WordPress WYSIWYG editor. You options to add all elements and scripts seen on this page. Sometimes however, a simple content box works just fine.
The WYSIWYG field creates a WordPress content editor seen in Posts and Pages. WYSIWYG is an acronym for “what you see is what you get.” The editor is one of the most useful fields for editing content, as it allows both text and multimedia to be edited and styled within a single area.
It works perfectly with the Basic Build WordPress Theme and all available custom fields, styles, and layout options provided by the pre-built Advanced Custom Fields.