SPRING SALE! ENJOY 15% OFF

ON ALL WEB DESIGN AND DEVELOPMENT SERVICES

USE coupon

#spring15

in the contact page

Learn more
Request a quote
Home Blog Page 16

Basics: Using the tagDiv Composer Front-End Page Builder

Bogdan B.
-
173
Basics: Using the tagDiv Composer Front-End Page Builder

The tagDiv Composer is Newspaper Theme’s front-end page builder that lets you design and edit the page through its drag-and-drop functionality. Each module, each element has its own settings and can be modified in a few clicks, no coding skills required. Find out more about its amazing features below.

Important Notes

  • Please do not use both the tagDiv Composer and WPBakery page builder simultaneously on the same page.
  • Please do not edit a page with the tagDiv Composer if that page was originally built with another page builder.

Welcome to the tagDiv Composer basics

When you create pages or edit templates with our theme, you can use our custom-made page builder called the tagDiv Composer. This handcrafted page builder comes with the drag-and-drop functionality to facilitate ease of use.

This builder is a powerful tool specially crafted to help you style your pages using custom-made content blocks and grids. You can access the tagDiv Composer when editing a page by pressing the “tagDiv Composer” button:

tagDiv Composer Page Builder: Gutenberg Add New Page

The theme immediately switches into front-end edit mode:

tagDiv Composer Page Builder: Newspaper Homepage

You can see the front-end preview of your page and the tagDiv Composer on the left of the screen. The builder has a top control section that offers the following options: Add Element, View Page, Save Changes, and the Close button.

tagDiv Composer Page Builder: Add element

The title of the page can also be changed from this section by pressing the edit button next to the title.

Drag And Drop

Let’s start with the Add Element button. Press the button, and a drop-down list of all the elements appears. You can add any of them to the homepage.

Drag-and-drop any of these elements to create the layout you desire.  However, you must first start with a row as the Composer works with rows and columns. You can add a row by dragging the row icon in the space on the page. By default, the first row is already on the page.

The row

If you click on the row of the page, a settings panel appears on the left side of the screen. This functionality applies to every content or structural element, not just rows.

tagDiv Composer Page Builder: Row Settings 1

After you dropped the element on the page, in the top left corner, you can access the row settings:

tagDiv Composer Page Builder: Row Settings 2

The row settings allow you to select the layout of the row meaning you can have a set number of columns in different styles. The row can be split in one of 6 possible column layouts so you can style your pages creatively.

tagDiv Composer Page Builder: Row Layout

The General row settings also include a column gap, alignment, background, YouTube video background, opacity, and the stretch row option.

The General tab also includes the viewport options which allow you to set options based on the user device. Use this to have separate settings for each device selected.

tagDiv Composer Page Builder: Devices

The second tab under the row settings allows you to place dividers between rows in unique styles. You can select the type of divider for the top or bottom of the row, and you can adjust their width, height, colors, shadows and so much more.

tagDiv Composer Page Builder: Divider tab

The CSS tab is an essential part of the page builder as it allows you to change the position of the row and adjust the margin, padding, and border for your rows.  You can also set background images or colors, shadow, color overlay as well as hide a particular row for specific viewports. Use this to show or hide a specific element on a particular device.

tagDiv Composer Page Builder: CSS tab

Delete elements

If you want to delete a row or element, you can grab it from the top left “Row” button. Then, drag it to the bottom right of the screen in the “Drag here to DELETE” box, or select the row and press the delete button on your keyboard. Moreover, with the help of the right-click menu, you have access to different commands for deleting elements, too.

Inner row

The row can also be structured in a sub-division called an inner row if you want to create a more complex structure of rows and columns for better control over your content.

Block Elements

Block elements are the content elements you should use to present your content inside the rows.

tagDiv Composer Page Builder: Block Elements

Once you add a block to the row/column of your choice, you can see the actual content rendered live. Changing its settings also changes the live representation of the page making it easier to see what every setting does.

Deleting an element is similar to removing a row. Merely drag the element to the bottom right of the screen or just hit the delete icon found on the top right of the block element.

Important note: Shortcodes and ads are not rendered in the live preview of the composer screen so, to see them applied to your page, you have to press the save button and view the page itself on the front-end.

Full Width Content

If you need to increase the width of your content to get a more stylish look for your website. The stretch row option allows you to change the row width to different sizes making your content full width or a fixed width selected from the available row sizes:

tagDiv Composer Page Builder: Basics Row Width

One page site

Sometimes you need to create a site that features just a presentation for your company that does not require multiple pages and different articles. You only need the one page where you can present your business objectively and to the point. The multi-purpose elements allow this kind of implementation with different sections of content you can style creatively.

Homepage

By default, WordPress sets the blog page as the main page, and this isn’t what most of us want, we need custom pages. To change WordPress default settings you have to:

  • Step 1 – Create a new page, go to Pages -> Add New
  • Step 2 – Set the page title, configure the page by editing it with the front-end tagDiv Composer. Add the desired elements and select the desired page template.
  • Step 3 – Go to Settings -> Reading and set the newly created page as a homepage.

Landing Page

A landing page is a standalone web page, created specifically for marketing. It’s where a visitor “lands” when they have clicked on an ad of your site for example. The theme allows you to create an entirely blank page without headers or footer in the way for this exact purpose. You can find the blank template in the page template section.

Conclusions

With unlimited customization options, the tagDiv Composer is the first step towards easy designing and amazing layouts. Take it for a spin and create a page with it. Add elements, drag-and-drop, click on one to open its Settings Panel and modify each option to create the perfect block to display your fantastic content. Don’t stop there! Hop on over to tagDiv Composer multi-purpose elements and find out more about how versatile our front-end page builder is.

tagDiv Composer: Shortcodes and Elements

Bogdan B.
-
42
tagDiv Composer: Shortcodes and Elements

The tagDiv Composer shortcodes and elements are powerful tools you can use to create your content exactly as you want it. We covered a wide range of shortcodes, so you have the most options to help present the content exactly as you imagined it.

tagDiv Composer shortcodes: Team Member Element

Author, image and more for tagDiv Composer shortcodes

  • Ad box – Use this element together with the Newspaper theme ad spots to place your ads inside the content in a custom location.
  • Author box – A single author presentation using the WordPress author ID grabbing the author’s details from the user area. We designed it to allow your authors to make a great impression.
  • Authors box – Present all authors at once in a list useful when you have numerous contributors to your website. You can sort the authors by name or by post count.
  • Image box – Create a custom block element beyond your post content. The image box allows you to create a block with image, title and select the URL you want to link it to.
  • Pinterest –  Highlight your latest Pinterest board.
  • Single image – Adding images to your page is smooth sailing. Drag the single image element into the content and choose the size and position.

Beyond a widget

  • Video playlist – To add movie IDs to YouTube playlist shortcode, you have to go to youtube.com or vimeo.com, and click on the movie you want to add to your playlist. Afterward, from the URL of the page, take the video ID and paste it in the playlist attribute one after another, separated by commas.
  • Widget sidebar – Grab an entire pre-made sidebar from the WordPress widgets area with the click of a button.
  • Revolution slider –  Used together with the Revolution slider element, it facilitates implementation for the complex sliders provided by the plugin.
  • Posts loop – Create a full-on blogroll on your page. This highlights your latest articles stylishly and adds lots of customization controls for the content.

tagdiv composer shortcodes

  • Slide –  Highlight your favorite posts by using a single article sliding element.
  • Homepage post – Show off your most valuable post at the top of the page.
  • Big grid slide – Helps you display a loop of your articles and posts through the big grid’s layout. Use the filter to create order and showcase your latest content or focus on a category.

Menus and texts as tagDiv Composer shortcodes

  • Column text – The column text element is an essential element as it not only allows you to place content on the page using the tiny MCE editor of WP, but it also supports shortcode implementation. If you need to use shortcodes on the page, this is the element to use.
  • List menu – An element that grabs one of your WordPress menus and renders it as a list menu on the front-end. It is a perfect way to create on page navigation.
  • News ticker – The post slider usually seen as ‘trending now’ among the theme demos. Use it to show your articles.
  • Popular category – List the top categories of your website sorted based on the number of posts.
  • Raw HTML – Sometimes you need to add a custom HTML element to your content, and you need the means to do so. This is where the raw HTML comes in.
  • Recent comments – Display a list of the latest comments received on your articles.
  • Separator –  A simple and efficient separator element to divide your content stylishly.
  • Title – If you need to differentiate different parts of the page, use a Title element.

Exchange Widget

Bogdan B.
-
4
Exchange Widget

The power of information shapes our everyday lives as people of the modern economy which is more dynamic than ever. Give your users the joy of an immersive digital experience, diving into the center of international markets with the Currency Exchange widget in Newspaper Theme.

The widget displays exchange rates based on the selected base currency, using by default the EURO coin.

Exchange widget in Newspaper Theme

Setting up the Exchange widget in Newspaper Theme

The Exchange widget can be added to pages or inside the widget area as a sidebar element. Its settings include:

API Key:

Exchange widget in Newspaper Theme: Adding API Key

Base currency:

  • The coin that serves as a base. The Exchange Widget in Newspaper Theme calculates the rates based on this coin.

Rates:

  • Add the rates you want to display; use a comma between elements (ex. EUR, USD).
  • If you leave this field empty, it displays all rates.

Rate decimals:

  • Set the number of decimals to be displayed for each rate. By default, it displays 4 decimals (ex. 0.4322).

Under the “General” tab you can change the block title settings with its text and background color options.

Customizing Exchange Widget in Newspaper Theme

Translating Exchange Widget in Newspaper Theme

All currency names can be modified or translated from the Theme Panel -> Translations:

Exchange widget in Newspaper Theme: Translations

Currency list

The widget can display up to 32 currencies:

  • EUR – Euro Member Countries (default)
  • AUD – Australian Dollar
  • BGN – Bulgarian Lev
  • BRL – Brazilian Real
  • CAD – Canadian Dollar
  • CHF – Swiss Franc
  • CNY – Chinese Yuan Renminbi
  • CZK – Czech Republic Koruna
  • DKK – Danish Krone
  • GBP – British Pound
  • HKD – Hong Kong Dollar
  • HRK – Croatian Kuna
  • HUF – Hungarian Forint
  • IDR – Indonesian Rupiah
  • ILS – Israeli Shekel
  • INR – Indian Rupee
  • JPY – Japanese Yen
  • KRW – Korean (South) Won
  • MXN – Mexican Peso
  • MYR – Malaysian Ringgit
  • NOK – Norwegian Krone
  • NZD – New Zealand Dollar
  • PHP – Philippine Peso
  • PLN – Polish Zloty
  • RON – Romanian (New) Leu
  • RUB – Russian Ruble
  • SEK – Swedish Krona
  • SGD – Singapore Dollar
  • THB – Thai Baht
  • TRY – Turkish Lira
  • USD – United States Dollar
  • ZAR – South African Rand

Weather Widget: Bring Weather On Your Newspaper Theme Website

Bogdan B.
-
6
Weather Widget: Bring Weather On Your Newspaper Theme Website

While planning to give your visitors a great experience on your website, the power to provide useful information in a highly engaging way is a decisive factor and leads to better results. Newspaper introduces the beautiful Weather Widget. It is designed to deliver precise weather forecast information for your visitors.

Once set, the widget automatically displays:

  • the selected location;
  • sky conditions;
  • current temperature;
  • low and high temperature;
  • humidity;
  • wind speed;
  • chance of rain (percentage);
  • temperature prognosis for the next five days.

We’ve also included a local weather button in the top-right corner. When you click on it, your location is detected, and it displays the local weather information.

weather widget

weather widgetHow do I get the weather widget?

Open the tagDiv Composer page builder, hit the ‘Add Element’ button to open the items list, then drag and drop the widget onto the page. It can be used to pages, top bar, or inside the widget area as a sidebar element. First things first, however, is to get an API key to show your weather on your website.

Getting the API key:

That’s easy. Just create a free account on https://openweathermap.org/ and receive or create the API key for the widget. Then, copy and paste the API key into the designated box on your page.

weather widget

Location for your weather widget:

  • To find your location use the following link. You can use “city name” or “city id” (download city id list). Note that the widget will auto translate itself to the language from the Theme Panel only if a translation is available.

Weather widget Units:

  • Celsius
  • Fahrenheit

Display Weather in Top Menu:

The weather widget can also be set to appear on the top menu. Because there isn’t much space, it displays only the sky conditions, current temperature, and the selected location.

weather widget

How to Get the Weather Widget in your Top Bar

You can set it from Theme Panel -> Header -> Top bar. Just add the location, the API key, select the units and turn on the Show Weather switch.


Don’t forget to use the API key as well

For now, the weather cannot be controlled, but as soon as this is possible, we will add more options. 🙂

weather widget

TLDR

Enhance the visual appeal of your website using a beautiful way to display the Weather. You don’t need a plugin or a premium service access. The Newspaper Theme makes it easy for you to create an excellent experience for your website’s visitors. Follow the steps above, and bring useful weather information for your users at no extra cost.

Show us how do you use it! Share your website with our community in the comments below and help us all find inspiration.

Mobile Theme: Automatic Optimization for Mobile with Newspaper Theme

Bogdan B.
-
300
Mobile Theme: Automatic Optimization for Mobile with Newspaper Theme

The Mobile Theme is a feature specially designed to maximize the theme performance on mobile devices.

Mobile devices are evolving at the speed of light, becoming smaller and faster each day. The key to the digital user experience is in your hands as visitors are searching for information and expect fast page loading speed & fresh content. This is the ultimate challenge: making mobile experiences as fast and rewarding as the desktop ones. We took all these aspects back to the design board and solved them by creating the new Mobile Theme feature.

The philosophy

The mobile browsing experience is often frustrating. The causes are multiple: slow page loading speed, a small text which is hard to read, low-quality images, banners blocking the content, buttons that are too close to each other making it impossible to tap on the desired one, and so on. We decided to put an end to this mess and, for this, we built the “Mobile theme.”

How does it work?

The Mobile Theme is a lighter, performance optimized template included in the Newspaper package and it loads ONLY on mobile devices. The Mobile theme comes with a template for pages, posts, categories, and more.

We have carefully tuned each template to offer optimal performance and excellent user experience. The posts come in a predefined, clean format including all the features available on the main theme. On the homepage, for example, it automatically renders a grid that contains featured posts and a latest posts section.

The theme doesn’t require any other plugin and ensures maximum performance. Once activated, a new administration panel becomes available in the Theme Panel area to allow you to customize various parameters for the “Mobile theme.”

Mobile Theme with Amp Support

Caching: The Mobile Theme works fine with WP Super Cache plugin. For more details on how to set the plugin visit the Cache plugin – install and configure page.

Installation:

You can install and activate the plugin in the Theme Panel under the Plugins section

tagdiv mobile theme

Page customization:

For Homepage, the “Mobile Theme” comes with a single predefined page template that includes two sections:

  • top grid – displays 3 featured posts (posts included in the Featured Category)
  • latest articles – shows the latest articles

This template appears only if a Static Page is used. You can check out the page settings in the WordPress Admin panel Settings->Reading section.

How to add images, custom HTML or text?

You can bring these elements inside the Mobile Editor by editing the page.

tagdiv mobile theme

On the front-end, the custom elements appear between the Top Grid and the Latest Articles section.
mobile theme

Important note:

Regular pages – The content of custom pages (ex. Contact Us page), present on the desktop version of Newspaper theme, does not appear on the “Mobile theme.” The mobile version comes with an editor and gives you the possibility to add content that’s specially designed for mobiles. This offers you the opportunity to display the same content in two different ways, one optimized for desktops and another for mobiles.

Page builder elements – For optimal performance, we removed the page builder dependency. You cannot use the page builder elements for the “Mobile theme” pages. If you want to display the same elements on both mobile and desktop, don’t use the mobile theme. Your website built on Newspaper theme will still look awesome on mobiles due to its responsive design. The Mobile Theme enhances the small screen user experience, but it is optional.

The Mobile Theme Settings:

Once the plugin is installed a new tab called “Mobile Theme” shows up in the Newspaper -> Theme Panel area. The options allow you to customize the look and functionality of the mobile theme.

tagdiv mobile theme

Mobile settings:

  • AMP settings – activate the AMP support.
  • The main menu – select the main menu
  • Footer menu – select the sub-footer menu
  • Show sign in / join – choose if you want to display or hide the user register/login area, it will appear in the main menu panel

tagdiv mobile theme

Theme colors:

  • Accent color – theme main color which applies to various elements
  • Color settings for the main menu, footer, and sub-footer areas

tagdiv mobile theme

Mobile ads:

  • Ad title – set a title, this appears on top of each ad (optional – by default no title is displayed)
  • General ads – general predefined ad spots, just add the code to the section
  • Article ads – predefined article/single ad spots, add the code to the desired area

tagdiv mobile theme

Excerpts:

  • Title length – set the title excerpt length for modules used by the theme (1 and 2)

tagdiv mobile theme

Custom code:

  • CSS – use this panel to add custom CSS modifications
  • HTML – add custom HTML elements, they will appear at the page bottom
  • JavaScript – add custom JavaScript

tagdiv mobile theme

AMP implementation

Now AMP is integrated into the mobile theme plugin for faster results and can benefit from all of the mobile theme functionality on your AMP pages. All of the mobile theme settings are now AMP compatible. The settings available in the mobile theme will transform your AMP pages into beautiful layouts. Please read our AMP Tutorial to see how to activate AMP on the mobile theme

Wrapping up

The Mobile Theme is an optional functionality you can activate to enhance the small screen user experience on your website. This feature gives you the possibility to customize the mobile appearance while optimizing the performance. What makes the Mobile Theme so hot is that it’s automatically optimizing your website. Easy to install and use with stunning results. If you haven’t tried it yet, now it’s a perfect time!

Video playlist

Bogdan B.
-
10
Video playlist

We designed this custom playlist to impress your visitors. Bring more traffic to your site using this video playlist developed to support auto-play, which jumps to the next video upon finishing. Adding a video playlist (YouTube or Vimeo) to your website has never been more accessible.

You can add a playlist to a single post page or straight on your pages.

On single post pages

First, make sure you add a “Classic” element in your Gutenberg editor in order to have access to the theme specific elements.

 

To add the video playlist feature on single post pages select the YouTube playlist or Vimeo playlist from the shortcode drop down of the Add / Edit post text editor like in the image.
After adding the shortcode, you can start adding the video’s ID.

 

How to create a YouTube playlist

In your post the shortcode will be this one:
[td_block_video_youtube playlist_title="" playlist_yt="" playlist_auto_play="0"]
For this step, you need to add a Title to your playlist in playlist_title=”” parameter and your videos IDs.

Newspaper Theme video playlist: YouTube

 

To add a video’s ID to the YouTube playlist shortcode, you have to go to Youtube.com, click on the video you want to add to your playlist, then from the URL of the page take the video ID and paste it in the playlist_yt attribute one after another separated by commas.

Parameter auto_play=”0″ – means your playlist loads but waits for the user to click on the play button.

Parameter auto_play=”1″- means that your playlist automatically starts playing the video.

Now your syntax should look like this example:

[td_block_video_youtube playlist_title="My YouYube Playlist" playlist_yt="8hAwUt8-G34, F9S49fUqbVQ, TUdVeZ1pbuc" playlist_auto_play="0"]

Click the Publish or Update button.

 

How to create a Vimeo playlist

In your post the shortcode will be this one:

[td_block_video_vimeo playlist_title="" playlist_v="" playlist_auto_play="0"]

For this step, you need to add a Title to your playlist in playlist_title=”” parameter and your videos IDs.

Newspaper Theme video playlist: Vimeo

 

To add the video’s ID to the Vimeo playlist shortcode, you have to go to Vimeo.com, click on the video you want to add to your playlist, then from the URL of the page take the video ID and paste it in the playlist_yt attribute one after another separated by commas.

Parameter auto_play=”0″ – means your playlist loads but waits for the user to click on the play button.

Parameter auto_play=”1″- means that your playlist automatically starts playing the video.

Now your syntax should look like this example:

[td_block_video_vimeo playlist_title="My Vimeo Playlist" playlist_yt="8hAwUt8-G34, F9S49fUqbVQ, TUdVeZ1pbuc" playlist_auto_play="0"]

Click the Publish or Update button.

 

YouTube Video Playlist:

Newspaper Theme video playlist - YouTube

 

Vimeo Video Playlist:

Newspaper Theme video playlist - Vimeo

On Pages:

After creating a page click the Add element button from tagDiv Composer and drag and drop the playlist element to your page.

video playlist

 

After adding the element to your page, the settings for it will appear in the composer section where you can add a title for your playlist, the video IDs followed by a comma and select the autoplay option ON or OFF.

video playlist

Latest News Page – Get Started Easily with Newspaper Theme

Alex I.
-
2
Latest News Page – Get Started Easily with Newspaper Theme

Address the viewers and show them highlights of your articles and posts easily. With essential elements such as a search field, blocks containing article excerpts, a specific image that shows your website’s personality, the Latest News Page is the best way to drive traffic toward your valuable content.

Choose Elements for your latest news page

Start your Latest News Page easily with Newspaper Theme

For websites or blogs with a large amount of content posted on a regular basis, the Latest News Page is the best way to organize and bring readers to your new articles. Start by creating a new Page through the WordPress Admin Dashboard. In the Title field, write Latest News then press the Publish button.

Now select the tagDiv Composer button to be taken directly on the front-end editing section. For a successful Latest News Page, you need good navigation elements such as a Search Form, Flex Block, Title element, Column Text, and a Button. Why? There’s a reason behind each one:

  • The Search Form allows the user to quickly find what exactly they’re looking for on the website, and adding it to the page is a plus to the User Experience.
  • A Flex Block is the highlight reel of your content. Include it to boost the click-through-rate on the page and bring users to the most important posts.
  • The Title is necessary to show readers what the page is all about. It’s an attractive element that triggers a thought in the audience’s mind.
  • A column Text would be a great way to add a suitable Description of the page itself, an introduction to your Articles and Posts and to give the users an idea of what to expect.
  • Buttons are excellent means to drive engagement. Through them, the audience performs the desired action: open a new tab, a video or drive them to a specific place on the page with a Scroll-To-Class.

Pick fonts and layout Latest News Page

Customization is the key to the Latest News Page

Start by dragging each of the elements into the page. There are multiple versions of the Flex Block to choose from, but for this tutorial, let’s use Flex Block 1. It comes with an integrated button you can fully customize to increase your articles’ click-through rate.

Let us show you a way to obtain a stunning result. Create a row and divide it into two columns. Then drag and drop a Title, Column Text, Search Form item on the first column. For the second column, add an image either as the background or as a separate element entirely by using the Single Image item.

In the second row add a Flex Block. You can display as many posts as desired. From the Filter tab, choose the sort order by Latest. The element shall now showcase the newest articles and give the audience a good starting point to navigate your site.

Typography is also essential to your website. Choose font families for the Latest News Page to be consistent with your other pages. Keep the design uniform as well because it makes the viewer think of every page as part of a well-built structure.

Get creative with the settings for each element and pick colors, gradients, paddings, margins. You have all it takes to create a stunning presentation.

Customize the Elements Latest News Page

Adapt the design to your vision

It’s so easy to take the design of the page even further. Endless possibilities are right in the palm of your hand with Newspaper Theme. If you don’t know where to start, use the above layout as a reference and change each element to match your vision.

For art and photography blogs, magazines or portfolios, this page can have a lot more involved. Keep a color palette for each element. Why don’t you begin with the Single Image element? Choose the appropriate photo to showcase your site’s personality, and then run with the same color scheme through the page.

If you have a sports blog, create this page to highlight all your significant updates. Choose bold fonts and colors for the titles to show off your content. Write a higher number in the Limit Post Settings of the Flex Block to display more articles.

Sports Latest News Page

The sky is the limit. Try it yourself

Capture the readers’ attention through the Latest News Page. With links to your most recent articles and posts, get your audience engaged with your content. Here’s a tip: give each element room to breathe with white space. It’ll come naturally for your visitors to navigate your page. Segment information into sections to get a visual hierarchy and make it more readable.

Gain traffic and push your most valuable content forward with Newspaper Theme. As always, use the comment box below to share your Latest News Page designs! ?

Create the Perfect Call-to-Action With Newspaper Theme’s Buttons

Alex I.
-
13
Create the Perfect Call-to-Action With Newspaper Theme’s Buttons

Buttons are present in our everyday lives from our phones to our website browsing. They are used to trigger an action whether it’s to let someone submit a form or open a new website in a different tab. Newspaper Theme helps you design and create a button that fits perfectly into any layout. You can use it to guide readers to different pages for more information, but also trigger a popup video or even scroll down to a particular element on the page. Have you tested it out yet?

Layouts With Different Buttons

Buttons, buttons, buttons

In a standard HTML page on the Internet, you encounter call-to-actions like “Shop now,” “Read more,” “Get started,” and many more. Tech industry producers such as Apple, Adobe or Samsung prefer to have minimalistic designs to their websites, and this also applies to their buttons which tend to be rounded, bordered, transparent background with clear and concise text.

Musicians and artists have diverse styles for their websites, so the buttons that appear on the page tend to change colors on hover (Arianna Grande’s website, Taylor Swift’s website). Gradients are also a popular choice to give a button a lot more color and vibrancy. Moreover, for each website, the call-to-actions frequently use icons such as arrows, checkmarks, and so forth to drive more engagement.

With Newspaper Theme, anyone can easily design the perfect buttons for their site. You can add them to any page and template. Whether you opt for a minimalistic design or a colorful, vibrant one, it’s all in your hands as Newspaper theme is ready to make it happen for you.

Subscribe Now

Intention and consistency of a site’s buttons

How do you design a button to fit into a website’s design? Be consistent. Keep the colors the same as those appearing on your pages and posts. Moreover, if a page’s photos have rounded corners, the button’s edges should appropriately be round, too. The choices are unlimited.

Let’s start by opening the tagDiv Composer on a page. In the Add Element List find the Button item. Drag and drop it on the layout, in the desired position. Now, design it! In the General Tab create a message for the element. What do you want it to do? Should it link to an existing page? Then, in the URL field type or paste the web address.

If you want to guide your audience to discover your YouTube, Dailymotion or Vimeo content, create a button that plays a video. To do this, drag and drop the element in the page or article, and, in the Video Popup section, simply add an existing URL. When a viewer clicks on the icon, the video pops up and plays. Now, all the readers can watch it without ever leaving your website.

Need multiple control elements to look the same? Check out the copy and paste style features to improve your workflow.

Scroll to class

For a long page or article, create a button at the beginning that drives users to a specific place on the page. All you have to do is add a class to the targeted area. It’s easy! Just open the General tab of the row, column or element and in the Extra Class box, type a name.

Now, in the Scroll to Class section of the Button options panel, write the same name. Save the settings and test out this feature. Did it scroll you down to it? Awesome The button appearing in this post, above, has the same attribute. Test it out by clicking it!

Photoshoot Buttons Image

Design your button

Here are a few suggestions for any button’s style:

  • For a minimalistic design, choose Style 2 – Bordered in the Button Style section. Now pick a color for the text and border that fits into your site. Also, select a font that blends in, too. In the General tab, pick an Icon to represent the intended message.
  • Colorful designs bring a drop of vibrancy to any website. Click on the Style 1 – Solid for Button style. Now, choose two or three colors for the background color. If you’re not sure which colors to pick, try complementary colors such as blue – yellow or stick to shades of the same color, like a dark and bright red. In the Deg. box, input a number. 180 reverses the rotation of the colors, 90 and -90 turn it clockwise and counterclockwise.
  • If you want a small animation for a button, you can do that. Either choose Style 4 – 3D Cube or Style 6 – Bordered with Shadow. They both add a small animation upon hover. Select the hover colors and text for the 3D Cube to shift the element’s appearance. Whereas, if you alter the Shadow Offset for the Bordered with Shadow to give it more movement upon hover. Don’t forget to choose the colors and fonts!

Adopt your very own button today

With all the variations in designs and styles, Newspaper Theme also makes it easier to experiment and create numerous original buttons. Gradients, hover animations, icons, dabble in each and find what works best for your site. Remember, each one is meant as an action. What would you like yours to do?

Links, scrolls, video popups ? ? Tell us how you use buttons on your site in the comment box below!

Fast-Start Your Site: 7 Fully Customizable Demos to Capture the Crowd!

Alex I.
-
9
Fast-Start Your Site: 7 Fully Customizable Demos to Capture the Crowd!

The Newspaper Theme 9.1 update comes packed with 7 brand new Fully Customizable Demos for you to explore and enjoy. These pre-built website designs can be shaped without touching a single line of code. Each page can be adapted to match your vision. Why don’t you check it out?

Fully Customizable Demos with Newspaper Theme

Discover the 7 New & Customizable Demos!

The 7 Fully Customizable Demos are Gaming, Lifestyle Blog, Gossip, Fast News, Entertainment, Living Mag, and Journal. They have been created by our dedicated design team and you can easily import them right on your website.

How to do that? In the Newspaper Theme Panel, click on the Demo you like and choose whether to bring the prepackaged Sample Content. Click the install button. Now, take a look at your newly-redesigned website!

Let’s bring your story to the next level as well. Open an article through the tagDiv Composer to customize it. Design the layout, choose which fonts to use, pick the colors you want and then hit Save.

Do you feel like reshaping a partiular page? Great! Drag and drop elements of the page to adjust the design. The new Demos allow you to make any change right on the frontend. With no more custom CSS codes for each element and page, designing becomes a breeze. Moreover, the new update for the Newspaper theme brings you a ton of goodies and you can read more about it here.

Try out new looks for your Fully Customizable Demos

From the homepage, category page, 404 page, posts, everything is adjustable. Why not check it out? Open a Category page through the tagDiv Composer. Move any elements around. Posts Loop, Titles, Flex Blocks, Breadcrumbs, your vision becomes a reality. Take control of the page’s layout now.

Keep a certain consistency throughout each page. All the while, you can add new twists to any page. Here’s a suggestion: modify the colors that appear on the Single Post Template of your fully customizable Demo. This can be the stepping stone to your redesign journey.

Design the page’s layout. While you’re at it, choose typefaces that work well together to change the mood and convey your intended message. And, if you’re not a fan of a template or page, import a new Cloud Library template and assign it to the page in question. It’s that easy!

Create the perfect layout right on the front-end

If you’re thinking of building a new website, the new Fully Customizable Demos are a great fast-start. Import an entire website’s design in a few seconds.

The new Demos are an excellent solution for anyone that needs a full redesign of their website. After all, an idea is shaped through the will of its creator. With Newspaper Theme you are more than a creator, you are the web master. Use your imagination to come up with the best layout to showcase your personality.

Save up time by adjusting each element right on the front-end. This, in turn, gives you more time to create new content. Moreover, in a world where a blog gets created each minute, your website has to stand out from the rest. Tweak and personalize each block to improve the site’s visual appeal and create a memorable impression in the mind of your visitors.

 

More on the Fully Customizable Demos

Get access to the 7 new Fully Customizable Demos with the Newspaper Theme. Import one of them for more flexibility in design. Put your creative skills at work and touch perfection within just a few clicks. High quality and easy functionality right at your fingertips!

Have you installed one of the Demos, yet? Then, show us how you’ve customized it for your website in the comment box below! ?

Cyber Monday Newspaper Theme Deal: You don’t want to miss this offer!

Alina S.
-
10
Cyber Monday Newspaper Theme Deal: You don’t want to miss this offer!

Cyber Monday Newspaper Theme Deal Featured Image

Catch the hottest deal! We’re finally here, at that moment when your project gets all the help to take off with style. The Newspaper theme is the perfect choice for a blog, news, magazine or any publishing website, and it’s Now on Sale. Get your favorite theme at 30% off with the Cyber Monday Newspaper Theme Deal!

It’s time to start a blog, news, or magazine website and have fun while creating it. Or maybe you’re tired of spending hours customizing your site with a theme that’s unsuitable for you. The simple way to do this is to choose a WordPress Theme that fulfills your needs.

In the period between the 20th and 27th November, you can buy the Newspaper Theme with 30% off the initial price. Fine tune your blog, magazine, review, editorial or publishing website with the best news theme of all time.

More reasons to enjoy the Cyber Monday Newspaper Theme Deal

It won’t take long before you understand why over 69,000 people love Newspaper Theme. Designing a professional news website in a few hours without touching a single line of code is no longer a dream. Newspaper makes it the reality.

Discover some of the powerful features:

  • Version: 9.1
  • Width: 1068 px
  • Responsive and retina ready
  • One Click Demos: 56+
  • Intuitive and Flexible Interface
  • Drag and Drop elements: tagDiv Composer plugin
  • Front-end Customization
  • Full-width Rows
  • Customizable Layouts: 420+
  • Monetizing: AdSense, any other ads
  • Newsletter Subscription Plugin
  • Google AMP Ready
  • WPML Compatible
  • GDPR compliant
  • Free Lifetime Updates
  • Outstanding Support Service

Newspaper Theme Demos

Do you need more reasons to build your website with the Newspaper WordPress Theme? Discover all the amazing features and design a news-oriented website ready to impress right from the start! This is an offer you don’t want to miss!

Happy Cyber Shopping! ?

1...151617...24Page 16 of 24

We are a dynamic team of skilled developers, designers, and support experts dedicated to providing the web solutions you need to achieve success.

About us

Expertise

Services

This website was developed using the ❤ Newspaper theme, a creation of tagDiv.